84 lines
1.8 KiB
Vue
84 lines
1.8 KiB
Vue
<template>
|
|
<Card
|
|
class="h-full max-h-96 min-h-full"
|
|
title="Security Updates"
|
|
subtitle="Pedning security updates"
|
|
>
|
|
<div class="divide-y">
|
|
<router-link
|
|
v-for="sec_update in securityUpdates.data"
|
|
class="block cursor-pointer rounded-md px-2.5"
|
|
:key="sec_update.name"
|
|
:to="updateRoute(sec_update.name)"
|
|
>
|
|
<ListItem
|
|
:title="`Package: ${sec_update.package}`"
|
|
:description="getDescription(sec_update)"
|
|
>
|
|
<template v-slot:actions>
|
|
<Badge
|
|
:label="sec_update.priority"
|
|
:theme="getColor(sec_update.priority)"
|
|
/>
|
|
</template>
|
|
</ListItem>
|
|
</router-link>
|
|
</div>
|
|
|
|
<template #actions>
|
|
<router-link
|
|
class="text-base text-gray-700 hover:text-gray-800"
|
|
:to="`/security/${server.name}/security_update`"
|
|
>
|
|
View details →
|
|
</router-link>
|
|
</template>
|
|
</Card>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: 'SecurityUpdatesOverview',
|
|
props: ['server'],
|
|
inject: ['viewportWidth'],
|
|
resources: {
|
|
securityUpdates() {
|
|
return {
|
|
type: 'list',
|
|
pagetype: 'Security Update',
|
|
url: 'jcloud.api.security.fetch_security_updates',
|
|
filters: { server: this.server?.name },
|
|
orderBy: 'priority_level asc',
|
|
pageLength: 3,
|
|
start: 0,
|
|
auto: true
|
|
};
|
|
}
|
|
},
|
|
computed: {
|
|
securityUpdates() {
|
|
return this.$resources.securityUpdates;
|
|
}
|
|
},
|
|
methods: {
|
|
getDescription(a) {
|
|
return `Version: ${a.version} | ${this.formatDate(a.datetime)}`;
|
|
},
|
|
getColor(priority) {
|
|
switch (priority) {
|
|
case 'High':
|
|
return 'red';
|
|
case 'Medium':
|
|
return 'orange';
|
|
case 'Low':
|
|
return 'green';
|
|
default:
|
|
return 'gray';
|
|
}
|
|
},
|
|
updateRoute(sec_update) {
|
|
return `/security/${this.server.name}/security_update/${sec_update}`;
|
|
}
|
|
}
|
|
};
|
|
</script>
|