fix(ui): move bunch of utils to typescript

brian-mulier-p · brian-mulier-p · commit a81c0a5737d2 · 2025-04-04T15:38:15.000+02:00
diff --git a/ui/eslint.config.js b/ui/eslint.config.js
@@ -9,7 +9,6 @@ const components = (folder) => `src/components/${folder}/**/*.vue`;
 export default [
     {
         files: ["**/*.{js,mjs,cjs,ts,vue}"],
-        ignores: ["node_modules", "node"],
     },
     {languageOptions: {globals: globals.browser}},
     pluginJs.configs.recommended,
@@ -81,4 +80,7 @@ export default [
         files: [components("filter"), components("code")],
         rules: {"vue/component-api-style": ["error", ["script-setup"]]},
     },
+    {
+        ignores: ["public", "node_modules", "node", "storybook-static", ".storybook"],
+    }
 ];
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -87,6 +87,7 @@
     "@storybook/test-runner": "^0.22.0",
     "@storybook/vue3": "^8.6.9",
     "@storybook/vue3-vite": "^8.6.9",
+    "@types/humanize-duration": "^3.27.4",
     "@types/js-yaml": "^4.0.9",
     "@types/path-browserify": "^1.0.3",
     "@types/splitpanes": "^2.2.6",
diff --git a/ui/src/components/dashboard/components/charts/custom/Bar.vue b/ui/src/components/dashboard/components/charts/custom/Bar.vue
@@ -18,7 +18,7 @@
     import {Bar} from "vue-chartjs";
 
     import {customBarLegend} from "../legend.js";
-    import {useTheme} from "../../../../../utils/utils.js";
+    import {useTheme} from "../../../../../utils/utils";
     import {defaultConfig, getConsistentHEXColor,} from "../../../../../utils/charts.js";
 
     import {useStore} from "vuex";
diff --git a/ui/src/components/dashboard/components/charts/custom/Pie.vue b/ui/src/components/dashboard/components/charts/custom/Pie.vue
@@ -25,7 +25,7 @@
     import {computed, onMounted, ref, watch} from "vue";
 
     import NoData from "../../../../layout/NoData.vue";
-    import Utils, {useTheme} from "../../../../../utils/utils.js";
+    import Utils, {useTheme} from "../../../../../utils/utils";
 
     import {Doughnut, Pie} from "vue-chartjs";
 
diff --git a/ui/src/components/dashboard/components/charts/custom/TimeSeries.vue b/ui/src/components/dashboard/components/charts/custom/TimeSeries.vue
@@ -26,7 +26,7 @@
 
     import {useRoute} from "vue-router";
     import {Utils} from "@kestra-io/ui-libs";
-    import KestraUtils, {useTheme} from "../../../../../utils/utils.js"
+    import KestraUtils, {useTheme} from "../../../../../utils/utils"
     import {decodeSearchParams} from "../../../../filter/utils/helpers.ts";
 
     const store = useStore();
diff --git a/ui/src/components/dashboard/components/charts/executions/BarChart.vue b/ui/src/components/dashboard/components/charts/executions/BarChart.vue
@@ -38,7 +38,7 @@
     import {useRouter} from "vue-router";
     const router = useRouter();
 
-    import Utils, {useTheme} from "../../../../../utils/utils.js";
+    import Utils, {useTheme} from "../../../../../utils/utils";
     import {useScheme} from "../../../../../utils/scheme.js";
     import {defaultConfig, tooltip, getFormat} from "../../../../../utils/charts.js";
 
@@ -88,7 +88,7 @@
     const tooltipContent = ref("")
 
     const skeletonData = computed(() => {
-        const barColor = theme.value === "dark" 
+        const barColor = theme.value === "dark"
             ? "rgba(255, 255, 255, 0.08)"
             : "rgba(0, 0, 0, 0.06)";
 
diff --git a/ui/src/components/dashboard/components/charts/executions/Doughnut.vue b/ui/src/components/dashboard/components/charts/executions/Doughnut.vue
@@ -36,7 +36,7 @@
     import {Doughnut} from "vue-chartjs";
 
     import {totalsLegend} from "../legend.js";
-    import {useTheme} from "../../../../../utils/utils.js";
+    import {useTheme} from "../../../../../utils/utils";
     import {defaultConfig} from "../../../../../utils/charts.js";
     import {useScheme} from "../../../../../utils/scheme.js";
 
@@ -171,7 +171,7 @@
     };
 
     const skeletonData = computed(() => {
-        const barColor = theme.value === "dark" 
+        const barColor = theme.value === "dark"
             ? "rgba(255, 255, 255, 0.08)"
             : "rgba(0, 0, 0, 0.06)";
 
diff --git a/ui/src/components/dashboard/components/charts/executions/Namespace.vue b/ui/src/components/dashboard/components/charts/executions/Namespace.vue
@@ -40,7 +40,7 @@
 
     import {defaultConfig} from "../../../../../utils/charts.js";
     import {useScheme} from "../../../../../utils/scheme.js";
-    import {useTheme} from "../../../../../utils/utils.js";
+    import {useTheme} from "../../../../../utils/utils";
 
     import NoData from "../../../../layout/NoData.vue";
 
diff --git a/ui/src/components/dashboard/components/charts/legend.js b/ui/src/components/dashboard/components/charts/legend.js
@@ -1,4 +1,4 @@
-import Utils from "../../../../utils/utils.js";
+import Utils from "../../../../utils/utils";
 import {cssVariable} from "@kestra-io/ui-libs";
 import {getConsistentHEXColor} from "../../../../utils/charts.js";
 
diff --git a/ui/src/components/dashboard/components/charts/logs/Bar.vue b/ui/src/components/dashboard/components/charts/logs/Bar.vue
@@ -43,7 +43,7 @@
     import Logs from "../../../../../utils/logs.js";
 
     import LogsNoData from "./LogsNoData.vue";
-    import {useTheme} from "../../../../../utils/utils.js";
+    import {useTheme} from "../../../../../utils/utils";
 
     const {t} = useI18n({useScope: "global"});
 
@@ -155,7 +155,7 @@
 
     // Add skeleton data
     const skeletonData = computed(() => {
-        const barColor = theme.value === "dark" 
+        const barColor = theme.value === "dark"
             ? "rgba(255, 255, 255, 0.08)"
             : "rgba(0, 0, 0, 0.06)";
 
diff --git a/ui/src/components/layout/Cron.vue b/ui/src/components/layout/Cron.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-    import Utils from "../../utils/utils.js";
+    import Utils from "../../utils/utils";
     import cronstrue from "cronstrue";
     import "cronstrue/locales/fr";
 
diff --git a/ui/src/components/logs/TaskRunDetails.vue b/ui/src/components/logs/TaskRunDetails.vue
@@ -117,8 +117,8 @@
     import FlowUtils from "../../utils/flowUtils";
     import throttle from "lodash/throttle";
     import FilePreview from "../executions/FilePreview.vue";
-    import {apiUrl} from "override/utils/route.js";
-    import Utils from "../../utils/utils.js";
+    import {apiUrl} from "override/utils/route";
+    import Utils from "../../utils/utils";
     import LogUtils from "../../utils/logs.js";
 
     export default {
diff --git a/ui/src/components/stats/LogChart.vue b/ui/src/components/stats/LogChart.vue
@@ -20,7 +20,7 @@
     import {computed, defineComponent, ref, getCurrentInstance} from "vue";
     import {Bar} from "vue-chartjs";
     import {useStore} from "vuex";
-    import Utils from "../../utils/utils.js";
+    import Utils from "../../utils/utils";
     import {
         defaultConfig,
         tooltip,
diff --git a/ui/src/components/stats/StateChart.vue b/ui/src/components/stats/StateChart.vue
@@ -20,7 +20,7 @@
     import {computed, defineComponent, ref, getCurrentInstance} from "vue";
     import {useRoute, useRouter} from "vue-router"
     import {Bar} from "vue-chartjs";
-    import Utils, {useTheme} from "../../utils/utils.js";
+    import Utils, {useTheme} from "../../utils/utils";
     import {useScheme} from "../../utils/scheme.js";
     import {defaultConfig, tooltip, chartClick, getFormat} from "../../utils/charts.js";
     import {useI18n} from "vue-i18n";
diff --git a/ui/src/monaco-editor.d.ts b/ui/src/monaco-editor.d.ts
@@ -0,0 +1,7 @@
+declare module "monaco-editor/esm/vs/editor/common/services/languageFeatures" {
+    export {ILanguageFeaturesService} from "monaco-editor/esm/vs/editor/common/services/languageFeatures";
+}
+
+declare module "monaco-editor/esm/vs/editor/standalone/browser/standaloneServices" {
+    export {StandaloneServices} from "monaco-editor/esm/vs/editor/standalone/browser/standaloneServices"
+}
diff --git a/ui/src/override/utils/route.ts b/ui/src/override/utils/route.ts
@@ -1,3 +1,10 @@
+import {Store} from "vuex";
+
+declare global {
+    interface Window {
+        KESTRA_BASE_PATH: string
+    }
+}
 
 let root = (import.meta.env.VITE_APP_API_URL || "") + window.KESTRA_BASE_PATH;
 if (root.endsWith("/")) {
@@ -8,6 +15,6 @@ export const baseUrl = root;
 
 export const basePath = () => "/api/v1"
 
-export const apiUrl = () => `${baseUrl}${basePath()}`
+export const apiUrl = (_?: Store<any>) => `${baseUrl}${basePath()}`
 
 export const apiUrlWithoutTenants = () => `${baseUrl}/api/v1`
diff --git a/ui/src/override/utils/yamlSchemas.js b/ui/src/override/utils/yamlSchemas.js
diff --git a/ui/src/override/utils/yamlSchemas.ts b/ui/src/override/utils/yamlSchemas.ts
@@ -0,0 +1,30 @@
+import {apiUrl} from "override/utils/route";
+import {Store} from "vuex";
+import {SchemasSettings} from "monaco-yaml";
+
+export const yamlSchemas: (store: Store<any>) => SchemasSettings[] = (store) => [
+    {
+        fileMatch: ["flow-*.yaml"],
+        uri: `${apiUrl(store)}/plugins/schemas/flow`
+    },
+    {
+        fileMatch: ["task-*.yaml"],
+        uri: `${apiUrl(store)}/plugins/schemas/task`
+    },
+    {
+        fileMatch: ["template-*.yaml"],
+        uri: `${apiUrl(store)}/plugins/schemas/template`
+    },
+    {
+        fileMatch: ["trigger-*.yaml"],
+        uri: `${apiUrl(store)}/plugins/schemas/trigger`
+    },
+    {
+        fileMatch: ["plugindefault-*.yaml"],
+        uri: `${apiUrl(store)}/plugins/schemas/plugindefault?arrayOf=true`
+    },
+    {
+        fileMatch: ["dashboard-*.yaml"],
+        uri: `${apiUrl(store)}/plugins/schemas/dashboard`
+    }
+]
diff --git a/ui/src/stores/executions.js b/ui/src/stores/executions.js
@@ -1,6 +1,6 @@
 import axios from "axios";
 import {apiUrl} from "override/utils/route";
-import Utils from "../utils/utils.js"
+import Utils from "../utils/utils"
 
 export default {
     namespaced: true,
diff --git a/ui/src/utils/utils.ts b/ui/src/utils/utils.ts

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import Utils from "../../../../utils/utils.js";`
	`1`	`+import Utils from "../../../../utils/utils";`
`2`	`2`	`import {cssVariable} from "@kestra-io/ui-libs";`
`3`	`3`	`import {getConsistentHEXColor} from "../../../../utils/charts.js";`
`4`	`4`