fix(ui): make dependencies expand more clear (#3222)

closes #3160
kestra-io · Mar 6, 2024 · 45d3e8c · 45d3e8c
1 parent 5cd521b
commit 45d3e8c
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 9 deletions.
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -12,7 +12,7 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix"
   },
   "dependencies": {
-    "@kestra-io/ui-libs": "^0.0.36",
+    "@kestra-io/ui-libs": "^0.0.37",
     "@popperjs/core": "npm:@sxzz/popperjs-es@2.11.7",
     "@vue-flow/background": "^1.2.0",
     "@vue-flow/controls": "1.0.6",

diff --git a/ui/src/components/ErrorToast.vue b/ui/src/components/ErrorToast.vue
@@ -99,7 +99,7 @@
                     title: this.title || "Error",
                     message: h("div",  children),
                     position: "bottom-right",
-                    type: "error",
+                    type: this.message.variant,
                     duration: 0,
                     dangerouslyUseHTMLString: true,
                     customClass: "error-notification" + (children.length > 1 ? " large" : "")

diff --git a/ui/src/components/flows/FlowDependencies.vue b/ui/src/components/flows/FlowDependencies.vue
@@ -20,14 +20,17 @@
     const store = useStore();
     const axios = inject("axios")
     const router = getCurrentInstance().appContext.config.globalProperties.$router;
+    const t = getCurrentInstance().appContext.config.globalProperties.$t;
 
     const loaded = ref([]);
     const dependencies = ref({
         nodes: [],
         edges: []
     });
+    const expanded = ref([]);
 
     const isLoading = ref(false);
+    const initialLoad = ref(true);
 
     const load = (options) => {
         isLoading.value = true;
@@ -41,8 +44,21 @@
                     dependencies.value.edges.push(...response.data.edges)
                 }
 
+                if (!initialLoad.value) {
+                    let newNodes = new Set(response.data.nodes.map(n => n.uid))
+                    let oldNodes = new Set(getNodes.value.map(n => n.id))
+                    console.log(response.data.nodes)
+                    console.log(getNodes.value)
+                    store.dispatch("core/showMessage", {
+                        variant: "success",
+                        title: t("dependencies loaded"),
+                        message: t("loaded x dependencies", [...newNodes].filter(node => !oldNodes.has(node)).length),
+                    })
+                }
+
                 removeEdges(getEdges.value)
                 removeNodes(getNodes.value)
+                initialLoad.value = false
 
                 nextTick(() => {
                     generateGraph();
@@ -59,6 +75,7 @@
     };
 
     const expand = (data) => {
+        expanded.value.push(data.node.uid)
         load({namespace: data.namespace, id: data.flowId})
     };
 
@@ -110,7 +127,8 @@
                     flowId: node.id,
                     current: node.namespace === route.params.namespace && node.id === route.params.id,
                     color: "pink",
-                    link: true
+                    link: true,
+                    expandEnabled: !expanded.value.includes(node.uid)
                 }
             }]);
         }

diff --git a/ui/src/translations.json b/ui/src/translations.json
@@ -599,7 +599,9 @@
     "Set labels": "Set labels",
     "Set labels to execution": "Add or update the labels of the execution <code>{id}</code>",
     "Set labels done": "Successfully set the labels of the execution",
-    "bulk set labels": "Are you sure you want to set labels to <code>{executionCount}</code>  executions(s)?"
+    "bulk set labels": "Are you sure you want to set labels to <code>{executionCount}</code>  executions(s)?",
+    "dependencies loaded": "Dependencies loaded",
+    "loaded x dependencies": "{count} dependencies loaded"
   },
   "fr": {
     "id": "Identifiant",
@@ -1188,7 +1190,9 @@
     "Set labels": "Ajouter des labels",
     "Set labels to execution": "Ajouter ou mettre à jour des labels à l'exécution <code>{id}</code>",
     "Set labels done": "Labels ajoutés avec succès à l'exécution",
-    "bulk set labels": "Etes-vous sûr de vouloir ajouter des labels à <code>{executionCount}</code>  exécutions(s)?"
+    "bulk set labels": "Etes-vous sûr de vouloir ajouter des labels à <code>{executionCount}</code>  exécutions(s)?",
+    "dependencies loaded": "Dépendances chargées",
+    "loaded x dependencies": "{count} dépendances chargées"
   }
 }