Migrating to the new monitoring apis

magefiles/targets/generate_proto.go

@@ -110,7 +110,7 @@ func (Generate) ProtobufTypescript() error {
 			},
 		}),
 		external.NewGenerator([]string{"./web/service-generator/generate"}, external.GeneratorOptions{
-			Opt: "target=ts",
+			Opt: "target=ts,import_extension=none",
 		}),
 	}, targets...)
 	if err != nil {

web/package.json

@@ -12,15 +12,15 @@
     "chartjs-plugin-annotation": "^2.0.1",
     "core-js": "3.21.1",
     "css-loader": "4.3.0",
+    "dayjs": "^1.8.16",
     "express": "^4.18.2",
     "http-proxy-middleware": "^2.0.6",
     "js-yaml": "4.1.0",
     "lodash": "^4.17.21",
     "marked": "^4.3.0",
     "unique-names-generator": "^4.7.1",
     "vue-chartjs": "^4.1.1",
-    "vue-fragment": "^1.6.0",
-    "dayjs": "^1.8.16"
+    "vue-fragment": "^1.6.0"
   },
   "resolutions": {
     "**/webpack": "4",
@@ -37,5 +37,8 @@
     "docker": "docker build -t opni-ui -f ./Dockerfile .",
     "build": "IS_STANDALONE=true ./node_modules/.bin/vue-cli-service build",
     "start": "node prod.js"
+  },
+  "devDependencies": {
+    "@bufbuild/protobuf": "1.2.1"
   }
-}
+}

web/pkg/opni/api/opni.ts

@@ -0,0 +1,13 @@
+import * as CortexOpsService from '@pkg/opni/generated/github.com/rancher/opni/plugins/metrics/apis/cortexops/cortexops_svc';
+import * as CortexOpsTypes from '@pkg/opni/generated/github.com/rancher/opni/plugins/metrics/apis/cortexops/cortexops_pb';
+import * as StorageTypes from '@pkg/opni/generated/github.com/rancher/opni/internal/cortex/config/storage/storage_pb';
+import * as DryRunTypes from '@pkg/opni/generated/github.com/rancher/opni/pkg/plugins/driverutil/dryrun_pb';
+
+export const CortexOps = {
+  service: CortexOpsService,
+  types:   CortexOpsTypes,
+};
+
+export const DryRun = { types: DryRunTypes };
+
+export const Storage = { types: StorageTypes };

web/pkg/opni/components/Alarm/AgentDisconnect.vue

@@ -2,6 +2,7 @@
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import UnitInput from '@shell/components/form/UnitInput';
 import Loading from '@shell/components/Loading';
+import { createComputedTime } from '@pkg/opni/utils/computed';
 import { AlertType } from '../../models/alerting/Condition';
 import { loadClusters, loadChoices } from './shared';
 
@@ -65,15 +66,7 @@ export default {
       return options;
     },
 
-    systemTimeout: {
-      get() {
-        return Number.parseInt(this.value.timeout || '0');
-      },
-
-      set(value) {
-        this.$set(this.value, 'timeout', `${ (value || 0) }s`);
-      }
-    },
+    systemTimeout: createComputedTime('value.timeout'),
   },
 };
 </script>

web/pkg/opni/components/Alarm/CPU.vue

@@ -10,6 +10,7 @@ import Tab from '@shell/components/Tabbed/Tab';
 import Tabbed from '@shell/components/Tabbed';
 import { Banner } from '@components/Banner';
 import dayjs from 'dayjs';
+import { createComputedTime } from '@pkg/opni/utils/computed';
 import { AlertType, Severity, SeverityResponseToEnum } from '../models/alerting/Condition';
 import {
   createAlertCondition, getAlertConditionChoices, getAlertCondition, updateAlertCondition, deactivateSilenceAlertCondition, silenceAlertCondition
@@ -357,25 +358,9 @@ export default {
       return options;
     },
 
-    systemTimeout: {
-      get() {
-        return Number.parseInt(this.system.config.timeout || '0');
-      },
-
-      set(value) {
-        this.$set(this.system.config, 'timeout', `${ (value || 0) }s`);
-      }
-    },
+    systemTimeout: createComputedTime('system.config.timeout'),
 
-    kubeStateFor: {
-      get() {
-        return Number.parseInt(this.kubeState.config.for || '0');
-      },
-
-      set(value) {
-        this.$set(this.kubeState.config, 'for', `${ (value || 0) }s`);
-      }
-    },
+    kubeStateFor: createComputedTime('kubeState.config.for'),
 
     silenceUntil() {
       if (!this.config?.silence?.endsAt) {
@@ -393,15 +378,9 @@ export default {
 
       return options;
     },
-    downstreamCapabilityFor: {
-      get() {
-        return Number.parseInt(this.downstreamCapability.config.for || '0');
-      },
 
-      set(value) {
-        this.$set(this.downstreamCapability.config, 'for', `${ (value || 0) }s`);
-      }
-    },
+    downstreamCapabilityFor: createComputedTime('downstreamCapability.config.for'),
+
     downstreamCapabilityStateOptions() {
       const options = this.downstreamCapability.choices.clusters[this.downstreamCapability.config.clusterId]?.states || [];
 
@@ -421,15 +400,7 @@ export default {
       return options;
     },
 
-    monitoringBackendFor: {
-      get() {
-        return Number.parseInt(this.monitoringBackend.config.for || '0');
-      },
-
-      set(value) {
-        this.$set(this.monitoringBackend.config, 'for', `${ (value || 0) }s`);
-      }
-    }
+    monitoringBackendFor: createComputedTime('monitoringBackend.config.for'),
   },
 
   watch: {

web/pkg/opni/components/Alarm/DownstreamCapability.vue

@@ -3,6 +3,7 @@ import ArrayListSelect from '@shell/components/form/ArrayListSelect';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import UnitInput from '@shell/components/form/UnitInput';
 import Loading from '@shell/components/Loading';
+import { createComputedTime } from '@pkg/opni/utils/computed';
 import { AlertType } from '../../models/alerting/Condition';
 import { loadClusters, loadChoices } from './shared';
 
@@ -71,15 +72,9 @@ export default {
 
       return options;
     },
-    downstreamCapabilityFor: {
-      get() {
-        return Number.parseInt(this.value.for || '0');
-      },
 
-      set(value) {
-        this.$set(this.value, 'for', `${ (value || 0) }s`);
-      }
-    },
+    downstreamCapabilityFor: createComputedTime('value.for'),
+
     downstreamCapabilityStateOptions() {
       if (!this.value.clusterId) {
         return [];

web/pkg/opni/components/Alarm/Filesystem.vue

@@ -10,6 +10,7 @@ import Tab from '@shell/components/Tabbed/Tab';
 import Tabbed from '@shell/components/Tabbed';
 import { Banner } from '@components/Banner';
 import dayjs from 'dayjs';
+import { createComputedTime } from '@pkg/opni/utils/computed';
 import { exceptionToErrorsArray } from '../utils/error';
 import { AlertType, Severity, SeverityResponseToEnum } from '../models/alerting/Condition';
 import {
@@ -357,25 +358,9 @@ export default {
       return options;
     },
 
-    systemTimeout: {
-      get() {
-        return Number.parseInt(this.system.config.timeout || '0');
-      },
-
-      set(value) {
-        this.$set(this.system.config, 'timeout', `${ (value || 0) }s`);
-      }
-    },
+    systemTimeout: createComputedTime('system.config.timeout'),
 
-    kubeStateFor: {
-      get() {
-        return Number.parseInt(this.kubeState.config.for || '0');
-      },
-
-      set(value) {
-        this.$set(this.kubeState.config, 'for', `${ (value || 0) }s`);
-      }
-    },
+    kubeStateFor: createComputedTime('kubeState.config.for'),
 
     silenceUntil() {
       if (!this.config?.silence?.endsAt) {
@@ -393,15 +378,9 @@ export default {
 
       return options;
     },
-    downstreamCapabilityFor: {
-      get() {
-        return Number.parseInt(this.downstreamCapability.config.for || '0');
-      },
 
-      set(value) {
-        this.$set(this.downstreamCapability.config, 'for', `${ (value || 0) }s`);
-      }
-    },
+    downstreamCapabilityFor: createComputedTime('downstreamCapability.config.for'),
+
     downstreamCapabilityStateOptions() {
       const options = this.downstreamCapability.choices.clusters[this.downstreamCapability.config.clusterId]?.states || [];
 
@@ -421,15 +400,7 @@ export default {
       return options;
     },
 
-    monitoringBackendFor: {
-      get() {
-        return Number.parseInt(this.monitoringBackend.config.for || '0');
-      },
-
-      set(value) {
-        this.$set(this.monitoringBackend.config, 'for', `${ (value || 0) }s`);
-      }
-    }
+    monitoringBackendFor: createComputedTime('monitoringBackend.config.for'),
   },
 
   watch: {

web/pkg/opni/components/Alarm/KubeState.vue

@@ -2,6 +2,7 @@
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import UnitInput from '@shell/components/form/UnitInput';
 import Loading from '@shell/components/Loading';
+import { createComputedTime } from '@pkg/opni/utils/computed';
 import { AlertType } from '../../models/alerting/Condition';
 import { loadClusters, loadChoices } from './shared';
 
@@ -123,15 +124,7 @@ export default {
       return options;
     },
 
-    kubeStateFor: {
-      get() {
-        return Number.parseInt(this.value.for || '0');
-      },
-
-      set(value) {
-        this.$set(this.value, 'for', `${ (value || 0) }s`);
-      }
-    },
+    kubeStateFor: createComputedTime('value.for'),
   },
 
   watch: {

web/pkg/opni/components/Alarm/Memory.vue

@@ -10,6 +10,7 @@ import Tab from '@shell/components/Tabbed/Tab';
 import Tabbed from '@shell/components/Tabbed';
 import { Banner } from '@components/Banner';
 import dayjs from 'dayjs';
+import { createComputedTime } from '@pkg/opni/utils/computed';
 import { exceptionToErrorsArray } from '../utils/error';
 import { AlertType, Severity, SeverityResponseToEnum } from '../models/alerting/Condition';
 import {
@@ -357,25 +358,7 @@ export default {
       return options;
     },
 
-    systemTimeout: {
-      get() {
-        return Number.parseInt(this.system.config.timeout || '0');
-      },
-
-      set(value) {
-        this.$set(this.system.config, 'timeout', `${ (value || 0) }s`);
-      }
-    },
-
-    kubeStateFor: {
-      get() {
-        return Number.parseInt(this.kubeState.config.for || '0');
-      },
-
-      set(value) {
-        this.$set(this.kubeState.config, 'for', `${ (value || 0) }s`);
-      }
-    },
+    systemTimeout: createComputedTime('system.config.timeout'),
 
     silenceUntil() {
       if (!this.config?.silence?.endsAt) {
@@ -393,15 +376,8 @@ export default {
 
       return options;
     },
-    downstreamCapabilityFor: {
-      get() {
-        return Number.parseInt(this.downstreamCapability.config.for || '0');
-      },
+    downstreamCapabilityFor: createComputedTime('downstreamCapability.config.for'),
 
-      set(value) {
-        this.$set(this.downstreamCapability.config, 'for', `${ (value || 0) }s`);
-      }
-    },
     downstreamCapabilityStateOptions() {
       const options = this.downstreamCapability.choices.clusters[this.downstreamCapability.config.clusterId]?.states || [];
 
@@ -421,15 +397,7 @@ export default {
       return options;
     },
 
-    monitoringBackendFor: {
-      get() {
-        return Number.parseInt(this.monitoringBackend.config.for || '0');
-      },
-
-      set(value) {
-        this.$set(this.monitoringBackend.config, 'for', `${ (value || 0) }s`);
-      }
-    }
+    monitoringBackendFor: createComputedTime('monitoringBackend.config.for')
   },
 
   watch: {

web/pkg/opni/components/Alarm/MonitoringBackend.vue

@@ -2,6 +2,7 @@
 import ArrayListSelect from '@shell/components/form/ArrayListSelect';
 import UnitInput from '@shell/components/form/UnitInput';
 import Loading from '@shell/components/Loading';
+import { createComputedTime } from '@pkg/opni/utils/computed';
 import { AlertType } from '../../models/alerting/Condition';
 import { loadClusters, loadChoices } from './shared';
 
@@ -66,15 +67,7 @@ export default {
       return options;
     },
 
-    monitoringBackendFor: {
-      get() {
-        return Number.parseInt(this.value.for || '0');
-      },
-
-      set(value) {
-        this.$set(this.value, 'for', `${ (value || 0) }s`);
-      }
-    }
+    monitoringBackendFor: createComputedTime('value.for'),
   },
 };
 </script>

web/pkg/opni/components/Alarm/Prometheus.vue

@@ -3,6 +3,7 @@ import LabeledSelect from '@shell/components/form/LabeledSelect';
 import UnitInput from '@shell/components/form/UnitInput';
 import TextAreaAutoGrow from '@components/Form/TextArea/TextAreaAutoGrow';
 import Loading from '@shell/components/Loading';
+import { createComputedTime } from '@pkg/opni/utils/computed';
 import { AlertType } from '../../models/alerting/Condition';
 import { loadClusters, loadChoices } from './shared';
 
@@ -71,14 +72,7 @@ export default {
       return options;
     },
 
-    prometheusQueryFor: {
-      get() {
-        return Math.floor(Number.parseInt(this.value.for || '0') / 60);
-      },
-      set(value) {
-        this.$set(this.value, 'for', `${ (value || 0) * 60 }s`);
-      }
-    }
+    prometheusQueryFor: createComputedTime('value.for', 60),
   },
 };
 </script>