feat(ui): humanize cron expressions (#4233)

* Added the **cRonstrue** dependency. * Enabled English/French localization. * Enabled the readable cron expression on Flow listing. * Refactored the app locale config access.
kestra-io · Jul 4, 2024 · 26d2794 · 26d2794
1 parent d66708f
commit 26d2794
Show file tree

Hide file tree

Showing 10 changed files with 54 additions and 7 deletions.
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -41,6 +41,7 @@
     "node-modules-polyfill": "^0.1.4",
     "nprogress": "^0.2.0",
     "posthog-js": "^1.138.2",
+    "cronstrue": "^2.50.0",
     "throttle-debounce": "^5.0.0",
     "vite-plugin-eslint": "^1.8.1",
     "vue": "^3.4.27",

diff --git a/ui/src/components/flows/TriggerAvatar.vue b/ui/src/components/flows/TriggerAvatar.vue
@@ -6,7 +6,7 @@
                     placement="left"
                     :persistent="true"
                     :title="`${$t('trigger details')}: ${trigger ? trigger.id : ''}`"
-                    width=""
+                    width="35em"
                     transition=""
                     :hide-after="0"
                 >

diff --git a/ui/src/components/flows/TriggerVars.vue b/ui/src/components/flows/TriggerVars.vue
@@ -11,6 +11,9 @@
                 <template v-if="scope.row.key === 'description'">
                     <markdown :source="scope.row.value" />
                 </template>
+                <template v-else-if="scope.row.key === 'cron'">
+                    <cron :cron-expression="scope.row.value" />
+                </template>
                 <template v-else>
                     <var-value :value="scope.row.value" :execution="execution" />
                 </template>
@@ -23,11 +26,13 @@
     import Utils from "../../utils/utils";
     import VarValue from "../executions/VarValue.vue";
     import Markdown from "../layout/Markdown.vue";
+    import Cron from "../layout/Cron.vue";
 
     export default {
         components: {
             VarValue,
-            Markdown
+            Markdown,
+            Cron
         },
         props: {
             data: {

diff --git a/ui/src/components/layout/Cron.vue b/ui/src/components/layout/Cron.vue
@@ -0,0 +1,25 @@
+<template>
+    <span data-component="FILENAME_PLACEHOLDER">
+        {{ humanReadableCron }}
+    </span>
+</template>
+
+<script>
+    import Utils from "../../utils/utils.js";
+    import cronstrue from "cronstrue";
+    import "cronstrue/locales/fr";
+
+    export default {
+        props: {
+            cronExpression: {
+                type: String,
+                default: undefined
+            }
+        },
+        computed: {
+            humanReadableCron() {
+                return cronstrue.toString(this.cronExpression, {locale: Utils.getLang()});
+            }
+        }
+    }
+</script>
diff --git a/ui/src/components/onboarding/OnboardingCard.vue b/ui/src/components/onboarding/OnboardingCard.vue
@@ -18,6 +18,7 @@
     import imageDoc from "../../assets/onboarding/onboarding-docs-dark.svg"
     import imageProduct from "../../assets/onboarding/onboarding-product-dark.svg"
     import Markdown from "../layout/Markdown.vue";
+    import Utils from "../../utils/utils.js";
 
     export default {
         name: "OnboardingCard",
@@ -50,7 +51,7 @@
         },
         computed: {
             lang() {
-                const lang = localStorage.getItem("lang") || "en";
+                const lang = Utils.getLang();
                 if (lang === "fr") {
                     return "_fr"
                 }

diff --git a/ui/src/components/settings/BasicSettings.vue b/ui/src/components/settings/BasicSettings.vue
@@ -246,7 +246,7 @@
 
             this.defaultNamespace = localStorage.getItem("defaultNamespace") || "";
             this.defaultLogLevel = localStorage.getItem("defaultLogLevel") || "INFO";
-            this.lang = localStorage.getItem("lang") || "en";
+            this.lang = Utils.getLang();
             this.theme = localStorage.getItem("theme") || "light";
             this.editorTheme = localStorage.getItem("editorTheme") || (darkTheme ? "dark" : "vs");
             this.dateFormat = localStorage.getItem(DATE_FORMAT_STORAGE_KEY) || "llll";

diff --git a/ui/src/utils/filters.js b/ui/src/utils/filters.js
@@ -12,7 +12,7 @@ export default {
         return Utils.humanDuration(value, options);
     },
     humanizeNumber: (value) => {
-        return parseInt(value).toLocaleString(localStorage.getItem("lang") || "en")
+        return parseInt(value).toLocaleString(Utils.getLang());
     },
     cap: value => value ? value.toString().capitalize() : "",
     lower: value => value ? value.toString().toLowerCase() : "",

diff --git a/ui/src/utils/init.js b/ui/src/utils/init.js
@@ -49,6 +49,7 @@ import TaskSubflowId from "../components/flows/tasks/TaskSubflowId.vue";
 import TaskSubflowInputs from "../components/flows/tasks/TaskSubflowInputs.vue";
 import LeftMenuLink from "../components/LeftMenuLink.vue";
 import RouterMd from "../components/utils/RouterMd.vue";
+import Utils from "./utils";
 
 export default (app, routes, stores, translations) => {
     // charts
@@ -102,7 +103,7 @@ export default (app, routes, stores, translations) => {
 
 
     // l18n
-    let locale = localStorage.getItem("lang") || "en";
+    let locale = Utils.getLang();
 
     let i18n = createI18n({
         locale: locale,

diff --git a/ui/src/utils/utils.js b/ui/src/utils/utils.js
@@ -120,7 +120,7 @@ export default class Utils {
     static humanDuration(value, options) {
         options = options || {maxDecimalPoints: 2};
         options.spacer = "";
-        options.language = localStorage.getItem("lang") || "en";
+        options.language = Utils.getLang();
         options.languages = humanizeDurationLanguages;
         options.largest = 2;
 
@@ -187,6 +187,10 @@ export default class Utils {
         return localStorage.getItem("theme") || "light";
     }
 
+    static getLang() {
+        return localStorage.getItem("lang") || "en";
+    }
+
     static splitFirst(str, separator){
         return str.split(separator).slice(1).join(separator);
     }