etan39
/
cloudstack
mirror of https://github.com/apache/cloudstack.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

components: Adding metrics cell coloring based on threshold (#574) 

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
This commit is contained in:
davidjumani 2020-08-12 15:15:32 +05:30 committed by Rohit Yadav
parent a9720d540f
commit 98b05729d4
1 changed files with 69 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
ui/src/components/view/ListView.vue
View File

@ -159,6 +159,20 @@
<span v-else>{{ text }}</span>
</a>
<template v-for="(value, name) in thresholdMapping" :slot="name" slot-scope="text, record" href="javascript:;">
<span :key="name">
<span v-if="record[value.disable]" class="alert-disable-threshold">
{{ text }}
</span>
<span v-else-if="record[value.notification]" class="alert-notification-threshold">
{{ text }}
</span>
<span style="padding: 10%;" v-else>
{{ text }}
</span>
</span>
</template>
<a slot="level" slot-scope="text, record" href="javascript:;">
<router-link :to="{ path: '/event/' + record.id }">{{ text }}</router-link>
</a>
@ -327,7 +341,49 @@ export default {
return {
selectedRowKeys: [],
editableValueKey: null,
editableValue: ''
editableValue: '',
thresholdMapping: {
cpuused: {
notification: 'cputhreshold',
disable: 'cpudisablethreshold'
},
cpuallocated: {
notification: 'cpuallocatedthreshold',
disable: 'cpuallocateddisablethreshold'
},
memoryused: {
notification: 'memorythreshold',
disable: 'memorydisablethreshold'
},
memoryallocated: {
notification: 'memoryallocatedthreshold',
disable: 'memoryallocateddisablethreshold'
},
cpuusedghz: {
notification: 'cputhreshold',
disable: 'cpudisablethreshold'
},
cpuallocatedghz: {
notification: 'cpuallocatedthreshold',
disable: 'cpuallocateddisablethreshold'
},
memoryusedgb: {
notification: 'memorythreshold',
disable: 'memorydisablethreshold'
},
memoryallocatedgb: {
notification: 'memoryallocatedthreshold',
disable: 'memoryallocateddisablethreshold'
},
disksizeusedgb: {
notification: 'storageusagethreshold',
disable: 'storageusagedisablethreshold'
},
disksizeallocatedgb: {
notification: 'storageallocatedthreshold',
disable: 'storageallocateddisablethreshold'
}
}
}
},
computed: {
@ -537,4 +593,16 @@ export default {
}
}
.alert-notification-threshold {
background-color: rgba(255, 231, 175, 0.75);
color: #e87900;
padding: 10%;
}
.alert-disable-threshold {
background-color: rgba(255, 190, 190, 0.75);
color: #f50000;
padding: 10%;
}
</style>