Show friendly labels for resource alert rule types, metrics, conditions and severities

Author: Damans227

ui/src/components/view/DetailsTab.vue

@@ -93,6 +93,9 @@
               {{ sizeInGiB(dataResource.chainsize) }} GiB
             </div>
           </div>
+          <div v-else-if="$route.meta.name === 'resourcealerts' && ['resourcetype', 'metric', 'condition', 'severity'].includes(item)">
+            {{ resourceAlertLabel(item, dataResource[item]) }}
+          </div>
           <div v-else-if="['name', 'type'].includes(item)">
             <span v-if="['USER.LOGIN', 'USER.LOGOUT', 'ROUTER.HEALTH.CHECKS', 'FIREWALL.CLOSE', 'ALERT.SERVICE.DOMAINROUTER'].includes(dataResource[item])">{{ $t(dataResource[item].toLowerCase()) }}</span>
             <span v-else>{{ dataResource[item] }}</span>
@@ -263,6 +266,7 @@ import ObjectListTable from '@/components/view/ObjectListTable'
 import ExternalConfigurationDetails from '@/views/extension/ExternalConfigurationDetails'
 import TooltipButton from '@/components/widgets/TooltipButton'
 import { genericCompare } from '@/utils/sort'
+import { resourceAlertLabel } from '@/views/resourcealert/resourceAlertOptions'
 import CodeHighlight from 'vue-code-highlight/src/CodeHighlight.vue'
 import 'vue-code-highlight/themes/prism-okaidia.css'
 
@@ -466,6 +470,7 @@ export default {
     }
   },
   methods: {
+    resourceAlertLabel,
     decodeUserData (userdata) {
       const decodedData = Buffer.from(userdata, 'base64')
       return decodedData.toString('utf-8')

ui/src/components/view/ResourceAlertsTab.vue

@@ -39,6 +39,9 @@
         <template v-else-if="column.key === 'metricvalue'">
           {{ Number(text).toFixed(2) }}
         </template>
+        <template v-else-if="column.key === 'metrictype'">
+          {{ resourceAlertLabel('metrictype', text) }}
+        </template>
         <template v-else-if="column.key === 'severity'">
           <a-tag :color="severityColor(text)">{{ text }}</a-tag>
         </template>
@@ -49,6 +52,7 @@
 
 <script>
 import { getAPI } from '@/api'
+import { resourceAlertLabel } from '@/views/resourcealert/resourceAlertOptions'
 
 // Shows the alerts of one resource, or of one rule when no resourceType is given.
 export default {
@@ -115,6 +119,7 @@ export default {
     }
   },
   methods: {
+    resourceAlertLabel,
     fetchData () {
       if (!this.resource || !this.resource.id) return
       const params = { listall: true, page: this.page, pagesize: this.pageSize }

ui/src/config/section/infra/resourceAlertRules.js

@@ -18,16 +18,19 @@
 import { shallowRef, defineAsyncComponent } from 'vue'
 import store from '@/store'
 import { i18n } from '@/locales'
+import { resourceAlertLabel } from '@/views/resourcealert/resourceAlertOptions'
+
+const label = (field) => ({ [field]: (record) => resourceAlertLabel(field, record[field]) })
 
 export default {
   name: 'resourcealerts',
   title: 'label.resource.alert.rules',
   icon: 'BellOutlined',
   permission: ['listResourceAlertRules'],
   columns: () => {
-    const cols = ['name', 'resourcetype', {
+    const cols = ['name', label('resourcetype'), {
       resourcename: (record) => record.resourceid ? record.resourcename : i18n.global.t('label.resource.alert.all.resources')
-    }, 'metric', 'condition', 'threshold', 'severity']
+    }, label('metric'), label('condition'), 'threshold', label('severity')]
     if (['Admin', 'DomainAdmin'].includes(store.getters.userInfo.roletype)) cols.push('account')
     return cols
   },

ui/src/views/resourcealert/resourceAlertOptions.js

@@ -63,3 +63,16 @@ export const SEVERITY_LABELS = {
   MEDIUM: 'Medium',
   LOW: 'Low'
 }
+
+const LABELS_BY_FIELD = {
+  resourcetype: RESOURCE_TYPE_LABELS,
+  metric: METRIC_LABELS,
+  metrictype: METRIC_LABELS,
+  condition: CONDITION_LABELS,
+  severity: SEVERITY_LABELS
+}
+
+export function resourceAlertLabel (field, value) {
+  const labels = LABELS_BY_FIELD[field]
+  return (labels && labels[value]) || value
+}