feat(ui): add chart visibility toggle to flows and logs page (#5345)

Co-authored-by: Sachin KS <mac@apples-MacBook-Air.local>
kestra-io · Oct 8, 2024 · dfa5875 · dfa5875
1 parent ac4f7f2
commit dfa5875
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 6 deletions.
diff --git a/ui/src/components/flows/Flows.vue b/ui/src/components/flows/Flows.vue
@@ -67,13 +67,20 @@
                             @update:model-value="onDataTableValue('labels', $event)"
                         />
                     </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="storageKeys.FLOWS_FILTERS" />
                     </el-form-item>
                 </template>
 
                 <template #top>
-                    <el-card v-if="daily" shadow="never" class="mb-4">
+                    <el-card v-if="showStatChart()" shadow="never" class="mb-4">
                         <ExecutionsBar :data="daily" :total="executionsCount" />
                     </el-card>
                 </template>
@@ -282,6 +289,7 @@
                 lastExecutionByFlowReady: false,
                 dailyReady: false,
                 file: undefined,
+                showChart: ["true", null].includes(localStorage.getItem(storageKeys.SHOW_FLOWS_CHART))
             };
         },
         computed: {
@@ -335,6 +343,14 @@
                     enabled: !element.disabled
                 }
             },
+            showStatChart() {
+                return this.daily && this.showChart;
+            },
+            onShowChartChange(value) {
+                this.showChart = value;
+                localStorage.setItem(storageKeys.SHOW_FLOWS_CHART, value);
+                this.loadStats();
+            },
             exportFlows() {
                 this.$toast().confirm(
                     this.$t("flow export", {"flowCount": this.queryBulkAction ? this.total : this.selection.length}),
@@ -492,10 +508,10 @@
 
                 return _merge(base, queryFilter)
             },
-            loadData(callback) {
+            loadStats() {
                 this.dailyReady = false;
 
-                if (this.user.hasAny(permission.EXECUTION)) {
+                if (this.user.hasAny(permission.EXECUTION) && this.showStatChart) {
                     this.$store
                         .dispatch("stat/daily", this.loadQuery({
                             startDate: this.$moment(this.startDate).add(-1, "day").startOf("day").toISOString(true),
@@ -505,6 +521,9 @@
                             this.dailyReady = true;
                         });
                 }
+            },
+            loadData(callback) {
+                this.loadStats();
 
                 this.$store
                     .dispatch("flow/findFlows", this.loadQuery({

diff --git a/ui/src/components/logs/LogsWrapper.vue b/ui/src/components/logs/LogsWrapper.vue
@@ -29,6 +29,13 @@
                             @update:filter-value="onDataTableValue"
                         />
                     </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="storageKeys.LOGS_FILTERS" />
                     </el-form-item>
@@ -37,7 +44,7 @@
                     </el-form-item>
                 </template>
 
-                <template v-if="charts" #top>
+                <template v-if="showStatChart()" #top>
                     <el-card shadow="never" class="mb-3" v-loading="!statsReady">
                         <div class="state-global-charts">
                             <template v-if="hasStatsData">
@@ -135,7 +142,8 @@
                 refreshDates: false,
                 statsReady: false,
                 statsData: [],
-                canAutoRefresh: false
+                canAutoRefresh: false,
+                showChart: ["true", null].includes(localStorage.getItem(storageKeys.SHOW_LOGS_CHART))
             };
         },
         computed: {
@@ -195,6 +203,16 @@
             onDateFilterTypeChange(event) {
                 this.canAutoRefresh = event;
             },
+            showStatChart() {
+                return this.charts && this.showChart;
+            },
+            onShowChartChange(value) {
+                this.showChart = value;
+                localStorage.setItem(storageKeys.SHOW_LOGS_CHART, value);
+                if (this.showStatChart) {
+                    this.loadStats();
+                }
+            },
             refresh() {
                 this.refreshDates = !this.refreshDates;
                 this.load();
@@ -287,4 +305,4 @@
             }
         }
     }
-</style>
+</style>
diff --git a/ui/src/utils/constants.js b/ui/src/utils/constants.js
@@ -31,6 +31,8 @@ export const storageKeys = {
     SELECTED_TENANT: "selectedTenant",
     EXECUTE_FLOW_BEHAVIOUR: "executeFlowBehaviour",
     SHOW_CHART: "showChart",
+    SHOW_FLOWS_CHART: "showFlowsChart",
+    SHOW_LOGS_CHART: "showLogsChart",
     DEFAULT_NAMESPACE: "defaultNamespace",
     LATEST_NAMESPACE: "latestNamespace",
     PAGINATION_SIZE: "paginationSize",