feat(ui): add missing filter options for metrics (#6409)

kestra-io · Dec 11, 2024 · d613034 · d613034
1 parent 854d43c
commit d613034
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 65 deletions.
diff --git a/ui/src/components/filter/KestraFilter.vue b/ui/src/components/filter/KestraFilter.vue
@@ -115,13 +115,13 @@
 
     import Magnify from "vue-material-design-icons/Magnify.vue";
 
-    import State from "../../utils/state.js";
     import DateRange from "../layout/DateRange.vue";
 
     const emits = defineEmits(["dashboard"]);
     const props = defineProps({
         prefix: {type: String, required: true},
         include: {type: Array, required: true},
+        values: {type: Object, required: false, default: undefined},
         refresh: {
             type: Object,
             default: () => ({shown: false, callback: () => {}}),
@@ -299,51 +299,8 @@
     // Load all namespaces only if that filter is included
     if (props.include.includes("namespace")) loadNamespaces();
 
-    const scopeOptions = [
-        {
-            label: t("scope_filter.user", {label: props.prefix}),
-            value: "USER",
-        },
-        {
-            label: t("scope_filter.system", {label: props.prefix}),
-            value: "SYSTEM",
-        },
-    ];
-
-    const childOptions = [
-        {
-            label: t("trigger filter.options.ALL"),
-            value: "ALL",
-        },
-        {
-            label: t("trigger filter.options.CHILD"),
-            value: "CHILD",
-        },
-        {
-            label: t("trigger filter.options.MAIN"),
-            value: "MAIN",
-        },
-    ];
-
-    const levelOptions = [
-        {label: "TRACE", value: "TRACE"},
-        {label: "DEBUG", value: "DEBUG"},
-        {label: "INFO", value: "INFO"},
-        {label: "WARN", value: "WARN"},
-        {label: "ERROR", value: "ERROR"},
-    ];
-
-    const relativeDateOptions = [
-        {label: t("datepicker.last5minutes"), value: "PT5M"},
-        {label: t("datepicker.last15minutes"), value: "PT15M"},
-        {label: t("datepicker.last1hour"), value: "PT1H"},
-        {label: t("datepicker.last12hours"), value: "PT12H"},
-        {label: t("datepicker.last24hours"), value: "PT24H"},
-        {label: t("datepicker.last48hours"), value: "PT48H"},
-        {label: t("datepicker.last7days"), value: "PT168H"},
-        {label: t("datepicker.last30days"), value: "PT720H"},
-        {label: t("datepicker.last365days"), value: "PT8760H"},
-    ];
+    import {useValues} from "./useValues.js";
+    const {VALUES} = useValues(props.prefix);
 
     const isDatePickerShown = computed(() => {
         const c = current?.value?.at(-1);
@@ -357,23 +314,29 @@
         case "namespace":
             return namespaceOptions.value;
 
-        case "scope":
-            return scopeOptions;
-
         case "state":
-            return State.arrayAllStates().map((s) => ({
-                label: s.name,
-                value: s.name,
-            }));
+            return VALUES.EXECUTION_STATE;
+
+        case "scope":
+            return VALUES.SCOPE;
 
         case "child":
-            return childOptions;
+            return VALUES.CHILD;
 
         case "level":
-            return levelOptions;
+            return VALUES.LEVEL;
 
         case "relative_date":
-            return relativeDateOptions;
+            return VALUES.RELATIVE_DATE;
+
+        case "task":
+            return props.values?.task || [];
+
+        case "metric":
+            return props.values?.metric || [];
+
+        case "aggregation":
+            return VALUES.AGGREGATION;
 
         case "absolute_date":
             return [];

diff --git a/ui/src/components/filter/useFilters.js b/ui/src/components/filter/useFilters.js
@@ -1,7 +1,11 @@
 import {useI18n} from "vue-i18n";
+
 import DotsSquare from "vue-material-design-icons/DotsSquare.vue";
 import TagOutline from "vue-material-design-icons/TagOutline.vue";
 import MathLog from "vue-material-design-icons/MathLog.vue";
+import Sigma from "vue-material-design-icons/Sigma.vue";
+import TimelineTextOutline from "vue-material-design-icons/TimelineTextOutline.vue";
+import ChartBar from "vue-material-design-icons/ChartBar.vue";
 import CalendarRangeOutline from "vue-material-design-icons/CalendarRangeOutline.vue";
 import CalendarEndOutline from "vue-material-design-icons/CalendarEndOutline.vue";
 import FilterVariantMinus from "vue-material-design-icons/FilterVariantMinus.vue";
@@ -96,13 +100,6 @@ export function useFilters(prefix) {
             value: {label: "scope", comparator: undefined, value: []},
             comparators: [COMPARATORS.IS_ONE_OF],
         },
-        {
-            key: "labels",
-            icon: TagOutline,
-            label: t("filters.options.labels"),
-            value: {label: "labels", comparator: undefined, value: []},
-            comparators: [COMPARATORS.CONTAINS],
-        },
         {
             key: "childFilter",
             icon: FilterVariantMinus,
@@ -117,6 +114,27 @@ export function useFilters(prefix) {
             value: {label: "level", comparator: undefined, value: []},
             comparators: [COMPARATORS.IS],
         },
+        {
+            key: "task",
+            icon: TimelineTextOutline,
+            label: t("filters.options.task"),
+            value: {label: "task", comparator: undefined, value: []},
+            comparators: [COMPARATORS.IS],
+        },
+        {
+            key: "metric",
+            icon: ChartBar,
+            label: t("filters.options.metric"),
+            value: {label: "metric", comparator: undefined, value: []},
+            comparators: [COMPARATORS.IS],
+        },
+        {
+            key: "aggregation",
+            icon: Sigma,
+            label: t("filters.options.aggregation"),
+            value: {label: "aggregation", comparator: undefined, value: []},
+            comparators: [COMPARATORS.IS],
+        },
         {
             key: "timeRange",
             icon: CalendarRangeOutline,
@@ -131,6 +149,13 @@ export function useFilters(prefix) {
             value: {label: "absolute_date", comparator: undefined, value: []},
             comparators: [COMPARATORS.BETWEEN],
         },
+        {
+            key: "labels",
+            icon: TagOutline,
+            label: t("filters.options.labels"),
+            value: {label: "labels", comparator: undefined, value: []},
+            comparators: [COMPARATORS.CONTAINS],
+        },
     ];
     const encodeParams = (filters) => {
         const encode = (values, key) => {

diff --git a/ui/src/components/filter/useValues.ts b/ui/src/components/filter/useValues.ts
@@ -0,0 +1,46 @@
+import {useI18n} from "vue-i18n";
+
+import State from "../../utils/state.js";
+
+export function useValues(label?: string) {
+    const {t} = useI18n({useScope: "global"});
+
+    const VALUES = {
+        SCOPE: [
+            {label: t("scope_filter.user", {label}), value: "USER"},
+            {label: t("scope_filter.system", {label}), value: "SYSTEM"},
+        ],
+        CHILD: [
+            {label: t("trigger filter.options.ALL"), value: "ALL"},
+            {label: t("trigger filter.options.CHILD"), value: "CHILD"},
+            {label: t("trigger filter.options.MAIN"), value: "MAIN"},
+        ],
+        LEVEL: ["TRACE", "DEBUG", "INFO", "WARN", "ERROR"].map((value) => ({
+            label: value,
+            value,
+        })),
+        RELATIVE_DATE: [
+            {label: t("datepicker.last5minutes"), value: "PT5M"},
+            {label: t("datepicker.last15minutes"), value: "PT15M"},
+            {label: t("datepicker.last1hour"), value: "PT1H"},
+            {label: t("datepicker.last12hours"), value: "PT12H"},
+            {label: t("datepicker.last24hours"), value: "PT24H"},
+            {label: t("datepicker.last48hours"), value: "PT48H"},
+            {label: t("datepicker.last7days"), value: "PT168H"},
+            {label: t("datepicker.last30days"), value: "PT720H"},
+            {label: t("datepicker.last365days"), value: "PT8760H"},
+        ],
+        EXECUTION_STATE: State.arrayAllStates().map(
+            (state: { name: string }) => ({
+                label: state.name,
+                value: state.name,
+            }),
+        ),
+        AGGREGATION: ["sum", "avg", "min", "max"].map((value) => ({
+            label: value,
+            value,
+        })),
+    };
+
+    return {VALUES};
+}
diff --git a/ui/src/translations/en.json b/ui/src/translations/en.json
@@ -970,12 +970,15 @@
         "namespace": "Namespace",
         "state": "State",
         "scope": "Scope",
-        "labels": "Labels",
         "child": "Child",
         "level": "Log level",
+        "task": "Task",
+        "metric": "Metric",
+        "aggregation": "Aggregation",
         "relative_date": "Relative date",
         "absolute_date": "Absolute date",
-        "text": "text"
+        "text": "text",
+        "labels": "Labels"
       },
       "comparators": {
         "is": "is",