From e8f376fccbe713db58581c3af7c9cf53c9fef7b1 Mon Sep 17 00:00:00 2001
From: Ludovic DEHON <tchiot.ludo@gmail.com>
Date: Thu, 10 Mar 2022 10:12:17 +0100
Subject: [PATCH] feat(ui): add a click on all state charts

---
 ui/src/components/flows/Flows.vue            | 19 ++------
 ui/src/components/stats/StateChart.vue       | 38 ++++++++++++---
 ui/src/components/stats/StateGlobalChart.vue |  1 +
 ui/src/utils/charts.js                       | 51 ++++++++++++++++++++
 4 files changed, 87 insertions(+), 22 deletions(-)

diff --git a/ui/src/components/flows/Flows.vue b/ui/src/components/flows/Flows.vue
index 79a7fd47177..45b5316ee5e 100644
--- a/ui/src/components/flows/Flows.vue
+++ b/ui/src/components/flows/Flows.vue
@@ -54,13 +54,9 @@
 
                         <template #cell(state)="row">
                             <state-chart
-                                v-if="dailyGroupByFlowReady"
-                                :data="chartData(row)"
-                            />
-                        </template>
-
-                        <template #cell(duration)="row">
-                            <duration-chart
+                                :duration="true"
+                                :namespace="row.item.namespace"
+                                :flow-id="row.item.id"
                                 v-if="dailyGroupByFlowReady"
                                 :data="chartData(row)"
                             />
@@ -132,7 +128,6 @@
     import DataTable from "../layout/DataTable";
     import SearchField from "../layout/SearchField";
     import StateChart from "../stats/StateChart";
-    import DurationChart from "../stats/DurationChart";
     import StateGlobalChart from "../stats/StateGlobalChart";
     import TriggerAvatar from "./TriggerAvatar";
     import MarkdownTooltip from "../layout/MarkdownTooltip"
@@ -150,7 +145,6 @@
             DataTable,
             SearchField,
             StateChart,
-            DurationChart,
             StateGlobalChart,
             TriggerAvatar,
             MarkdownTooltip,
@@ -199,17 +193,10 @@
                             label: title("execution statistics"),
                             sortable: false,
                             class: "row-graph"
-                        },
-                        {
-                            key: "duration",
-                            label: title("duration"),
-                            sortable: false,
-                            class: "row-graph"
                         }
                     );
                 }
 
-
                 fields.push(
                     {
                         key: "triggers",
diff --git a/ui/src/components/stats/StateChart.vue b/ui/src/components/stats/StateChart.vue
index 75d2be5f105..ed5785db850 100644
--- a/ui/src/components/stats/StateChart.vue
+++ b/ui/src/components/stats/StateChart.vue
@@ -17,7 +17,7 @@
     import {computed, defineComponent, ref} from "@vue/composition-api"
     import {BarChart} from "vue-chart-3";
     import Utils from "../../utils/utils.js";
-    import {defaultConfig, tooltip} from "../../utils/charts.js";
+    import {defaultConfig, tooltip, chartClick} from "../../utils/charts.js";
     import State from "../../utils/state";
 
     export default defineComponent({
@@ -27,6 +27,10 @@
                 type: Array,
                 required: true
             },
+            duration: {
+                type: Boolean,
+                default: () => false
+            },
             global: {
                 type: Boolean,
                 default: () => false
@@ -34,7 +38,18 @@
             big: {
                 type: Boolean,
                 default: () => false
-            }
+            },
+            namespace: {
+                type: String,
+                required: false,
+                default: undefined
+            },
+            flowId: {
+                type: String,
+                required: false,
+                default: undefined
+            },
+
         },
         setup(props, {root}) {
             let duration = root.$i18n.t("duration")
@@ -45,6 +60,19 @@
             const dataReady = computed(() => props.data.length > 0)
 
             const options = computed(() => defaultConfig({
+                onClick: (e, elements) => {
+                    if (elements.length > 0 && elements[0].index !== undefined && elements[0].datasetIndex !== undefined ) {
+                        chartClick(
+                            root,
+                            {
+                                date: e.chart.data.labels[elements[0].index],
+                                status: e.chart.data.datasets[elements[0].datasetIndex].label,
+                                namespace: props.namespace,
+                                flowId: props.flowId
+                            }
+                        )
+                    }
+                },
                 plugins: {
                     tooltip: {
                         external: function (context) {
@@ -109,16 +137,14 @@
 
                 return {
                     labels: props.data.map(r => r.startDate),
-                    datasets: props.big || props.global ?
+                    datasets: props.big || props.global || props.duration ?
                         [{
-                            order: 2,
                             type: "line",
                             label: duration,
                             fill: "start",
                             pointRadius: 0,
-                            opacity: 0.5,
                             borderWidth: 0.2,
-                            backgroundColor: !darkTheme ? "#eaf0f9" : "#292e40",
+                            backgroundColor: Utils.hexToRgba(!darkTheme ? "#eaf0f9" : "#292e40", 0.5),
                             borderColor: !darkTheme ? "#7081b9" : "#7989b4",
                             yAxisID: "yAxesB",
                             data: props.data
diff --git a/ui/src/components/stats/StateGlobalChart.vue b/ui/src/components/stats/StateGlobalChart.vue
index b390062e95e..0dec8a19b86 100644
--- a/ui/src/components/stats/StateGlobalChart.vue
+++ b/ui/src/components/stats/StateGlobalChart.vue
@@ -66,6 +66,7 @@
 
 
     .executions-charts {
+        user-select: none;
         top: 0;
         height: 100%;
         display: flex;
diff --git a/ui/src/utils/charts.js b/ui/src/utils/charts.js
index 30aa91a97fe..0749054e0c9 100644
--- a/ui/src/utils/charts.js
+++ b/ui/src/utils/charts.js
@@ -68,3 +68,54 @@ export function defaultConfig(override) {
         }
     }, override);
 }
+
+export function chartClick(self, event) {
+    const query = {};
+
+    if (event.date) {
+        query.start = self.$moment(event.date).toISOString(true);
+        query.end = self.$moment(event.date).add(1, "d").toISOString(true);
+    }
+
+    if (event.startDate) {
+        query.start = self.$moment(event.startDate).toISOString(true);
+    }
+
+    if (event.endDate) {
+        query.end = self.$moment(event.endDate).toISOString(true);
+    }
+
+    if (event.status) {
+        query.status = event.status.toUpperCase();
+    }
+
+    if (self.$route.query.namespace) {
+        query.namespace = self.$route.query.namespace;
+    }
+
+    if (self.$route.query.q) {
+        query.q = self.$route.query.q;
+    }
+
+    if (event.namespace && event.flowId) {
+        self.$router.push({
+            name: "flows/update",
+            params: {
+                namespace: event.namespace,
+                id: event.flowId,
+                tab: "executions",
+            },
+            query: query
+        });
+    }
+
+    if (event.namespace) {
+        query.namespace = event.namespace;
+    }
+
+    self.$router.push({
+        name: "executions/list",
+        params: {tab: "executions"},
+        query: query
+    });
+}
\ No newline at end of file