feat(ui): make executions view more compact (#4728)

kestra-io · Sep 5, 2024 · 81d54ef · 81d54ef
1 parent abe2086
commit 81d54ef
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 15 deletions.
diff --git a/ui/src/components/executions/Executions.vue b/ui/src/components/executions/Executions.vue
@@ -106,6 +106,13 @@
                         />
                     </el-select>
                 </el-form-item>
+                <el-form-item>
+                    <el-switch
+                        :model-value="showChart"
+                        @update:model-value="onShowChartChange"
+                        :active-text="$t('show chart')"
+                    />
+                </el-form-item>
                 <el-form-item>
                     <filters :storage-key="filterStorageKey" />
                 </el-form-item>
@@ -118,7 +125,7 @@
                 </el-form-item>
             </template>
 
-            <template #top v-if="isDisplayedTop">
+            <template #top v-if="showStatChart()">
                 <state-global-chart
                     v-if="daily"
                     class="mb-4"
@@ -493,6 +500,7 @@
                 dblClickRouteName: "executions/update",
                 flowTriggerDetails: undefined,
                 recomputeInterval: false,
+                showChart: ["true", null].includes(localStorage.getItem(storageKeys.SHOW_CHART)),
                 optionalColumns: [
                     {
                         label: "start date",
@@ -568,7 +576,6 @@
             }
             this.displayColumns = localStorage.getItem(this.storageKey)?.split(",")
                 || this.optionalColumns.filter(col => col.default).map(col => col.prop);
-
         },
         computed: {
             ...mapState("execution", ["executions", "total"]),
@@ -641,6 +648,17 @@
             displayColumn(column) {
                 return this.hidden ? !this.hidden.includes(column) : this.displayColumns.includes(column);
             },
+            onShowChartChange(value) {
+                this.showChart = value;
+                localStorage.setItem(storageKeys.SHOW_CHART, value);
+
+                if (this.showChart) {
+                    this.loadStats();
+                }
+            },
+            showStatChart() {
+                return this.isDisplayedTop && this.showChart;
+            },
             refresh() {
                 this.recomputeInterval = !this.recomputeInterval;
                 this.load();
@@ -676,19 +694,22 @@
 
                 return _merge(base, queryFilter)
             },
+            loadStats() {
+                this.dailyReady = false;
+
+                this.$store
+                    .dispatch("stat/daily", this.loadQuery({
+                        startDate: this.$moment(this.startDate).toISOString(true),
+                        endDate: this.$moment(this.endDate).toISOString(true)
+                    }, true))
+                    .then(() => {
+                        this.dailyReady = true;
+                    });
+            },
             loadData(callback) {
                 this.refreshDates = !this.refreshDates;
-                if (this.isDisplayedTop) {
-                    this.dailyReady = false;
-
-                    this.$store
-                        .dispatch("stat/daily", this.loadQuery({
-                            startDate: this.$moment(this.startDate).toISOString(true),
-                            endDate: this.$moment(this.endDate).toISOString(true)
-                        }, true))
-                        .then(() => {
-                            this.dailyReady = true;
-                        });
+                if (this.showStatChart()) {
+                    this.loadStats();
                 }
 
                 this.$store.dispatch("execution/findExecutions", this.loadQuery({
@@ -765,7 +786,7 @@
             },
             deleteExecutions() {
                 const includeNonTerminated = ref(false);
-                
+
                 const deleteLogs = ref(true);
                 const deleteMetrics = ref(true);
                 const deleteStorage = ref(true);
@@ -784,7 +805,7 @@
                             "onUpdate:modelValue": (val) => {
                                 includeNonTerminated.value = val
                             },
-                        }),                       
+                        }),
                     ]),
                     h(ElAlert, {
                         title: this.$t("execution-warn-deleting-still-running"),

diff --git a/ui/src/translations/en.json b/ui/src/translations/en.json
@@ -633,6 +633,7 @@
         "MAIN": "Parent Executions"
       }
     },
+    "show chart": "Show Chart",
     "namespace files": {
       "toggle": {
         "show": "Show namespace files",

diff --git a/ui/src/utils/constants.js b/ui/src/utils/constants.js
@@ -30,6 +30,7 @@ export const storageKeys = {
     DISPLAY_FLOW_EXECUTIONS_COLUMNS: "displayFlowExecutionsColumns",
     SELECTED_TENANT: "selectedTenant",
     EXECUTE_FLOW_BEHAVIOUR: "executeFlowBehaviour",
+    SHOW_CHART: "showChart",
     DEFAULT_NAMESPACE: "defaultNamespace",
     LATEST_NAMESPACE: "latestNamespace",
     PAGINATION_SIZE: "paginationSize",