diff --git a/assets/translations/en-us.yaml b/assets/translations/en-us.yaml index 5388e0cc00..b116ca8964 100644 --- a/assets/translations/en-us.yaml +++ b/assets/translations/en-us.yaml @@ -1050,6 +1050,16 @@ monitoring: volumeName: Volume Name title: Configure Grafana overview: + alertsList: + ends: + label: Ends At + label: Active Alerts + message: + label: Message + severity: + label: Severity + start: + label: Starts At linkedList: alertManager: description: Active Alerts diff --git a/components/formatter/RunBookLink.vue b/components/formatter/RunBookLink.vue new file mode 100644 index 0000000000..20ff220a57 --- /dev/null +++ b/components/formatter/RunBookLink.vue @@ -0,0 +1,15 @@ + + + + {{ value.message }} + {{ value.message }} + diff --git a/pages/c/_cluster/monitoring/index.vue b/pages/c/_cluster/monitoring/index.vue index 1ae33c2f2b..aefd018a58 100644 --- a/pages/c/_cluster/monitoring/index.vue +++ b/pages/c/_cluster/monitoring/index.vue @@ -9,18 +9,75 @@ import { ENDPOINTS, MONITORING, WORKLOAD_TYPES } from '@/config/types'; import { allHash } from '@/utils/promise'; import { findBy } from '@/utils/array'; -import LazyImage from '@/components/LazyImage'; import Banner from '@/components/Banner'; +import LazyImage from '@/components/LazyImage'; +import SimpleBox from '@/components/SimpleBox'; +import SortableTable from '@/components/SortableTable'; const CATTLE_MONITORING_NAMESPACE = 'cattle-monitoring-system'; export default { - components: { Banner, LazyImage }, + components: { + Banner, + LazyImage, + SimpleBox, + SortableTable, + }, middleware: InstallRedirect(NAME, CHART_NAME), data() { + const eventHeaders = [ + { + name: 'severity', + label: 'Severity', + labelKey: 'monitoring.overview.alertsList.severity.label', + value: 'labels.severity', + sort: ['labels.severity', 'labels.alertname'], + width: 125, + }, + { + name: 'name', + label: 'Name', + labelKey: 'generic.name', + value: 'labels.alertname', + sort: ['labels.alertname', 'labels.severity'], + }, + { + name: 'message', + label: 'message', + labelKey: 'monitoring.overview.alertsList.message.label', + value: 'annotations', + formatter: 'RunBookLink', + sort: ['annotations.message', 'labels.alertname', 'labels.severity'], + }, + // { + // align: 'right', + // name: 'starts-at', + // label: 'Starts At', + // labelKey: 'monitoring.overview.alertsList.start.label', + // value: 'startsAt', + // sort: 'startsAt:desc', + // formatter: 'LiveDate', + // formatterOpts: { addSuffix: true }, + // width: 125, + // }, + // { + // align: 'right', + // name: 'ends-at', + // label: 'Ends At', + // labelKey: 'monitoring.overview.alertsList.ends.label', + // value: 'endsAt', + // sort: 'endsAt:desc', + // formatter: 'LiveDate', + // formatterOpts: { addSuffix: true }, + // width: 125, + // }, + ]; + return { + eventHeaders, + allAlerts: [], availableLinks: { alertmanager: false, grafana: false, @@ -145,6 +202,18 @@ export default { match.enabled = true; }); } + + if (amMatch.enabled) { + try { + const inStore = this.$store.getters['currentProduct'].inStore; + const alertsEvents = await this.$store.dispatch( + `${ inStore }/request`, + { url: `/k8s/clusters/${ this.currentCluster.id }/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-alertmanager:9093/proxy/api/v1/alerts` } + ); + + this.allAlerts = alertsEvents.data; + } catch (error) {} + } } }, }, @@ -174,12 +243,14 @@ export default { @@ -206,5 +277,23 @@ export default { + + + + +