From 8b7f533cb240573600dec9b78257df8e996d27fd Mon Sep 17 00:00:00 2001
From: yuri <1969yuri1969@gmail.com>
Date: Mon, 2 Sep 2024 14:33:16 +0200
Subject: [PATCH] feat(ui): make executions view more compact (#4728)

---
 ui/src/components/executions/Executions.vue | 51 +++++++++++++++------
 ui/src/translations/en.json                 |  1 +
 ui/src/utils/constants.js                   |  1 +
 3 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/ui/src/components/executions/Executions.vue b/ui/src/components/executions/Executions.vue
index 117f154c74..984301f61f 100644
--- 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"
@@ -479,6 +486,7 @@
                 dblClickRouteName: "executions/update",
                 flowTriggerDetails: undefined,
                 recomputeInterval: false,
+                showChart: ["true", null].includes(localStorage.getItem(storageKeys.SHOW_CHART)),
                 optionalColumns: [
                     {
                         label: "start date",
@@ -554,7 +562,6 @@
             }
             this.displayColumns = localStorage.getItem(this.storageKey)?.split(",")
                 || this.optionalColumns.filter(col => col.default).map(col => col.prop);
-
         },
         computed: {
             ...mapState("execution", ["executions", "total"]),
@@ -627,6 +634,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();
@@ -662,19 +680,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({
@@ -751,7 +772,7 @@
             },
             deleteExecutions() {
                 const includeNonTerminated = ref(false);
-                
+
                 const deleteLogs = ref(true);
                 const deleteMetrics = ref(true);
                 const deleteStorage = ref(true);
@@ -770,7 +791,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
index ba777ee46e..7412b47c85 100644
--- a/ui/src/translations/en.json
+++ b/ui/src/translations/en.json
@@ -562,6 +562,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
index 1c1ac13ce6..dc5192b4b3 100644
--- 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",