From 0c6d46777f5052337e8c9c183269c70159bfc14a Mon Sep 17 00:00:00 2001
From: YannC <37600690+Skraye@users.noreply.github.com>
Date: Thu, 19 Jan 2023 22:12:30 +0100
Subject: [PATCH] feat(ui): add home dashboard (#910)

Co-authored-by: Ludovic DEHON <tchiot.ludo@gmail.com>
---
 ui/package-lock.json                          |  18 ++
 ui/package.json                               |   2 +
 ui/src/charts/MatrixChart.js                  |   5 +
 ui/src/charts/TreeMapChart.js                 |   5 +
 ui/src/components/flows/FlowRoot.vue          |  15 +-
 ui/src/components/flows/Overview.vue          |  25 ++
 ui/src/components/home/Home.vue               | 247 ++++++++++++++++++
 ui/src/components/home/HomeDescription.vue    |  35 +++
 ui/src/components/home/HomeSummaryFailed.vue  |  32 +++
 ui/src/components/home/HomeSummaryLog.vue     |  31 +++
 .../components/home/HomeSummaryNamespace.vue  |  66 +++++
 ui/src/components/home/HomeSummaryPie.vue     |  48 ++++
 .../home/HomeSummaryStatusLabel.vue           | 100 +++++++
 ui/src/components/home/NamespaceTreeMap.vue   | 156 +++++++++++
 ui/src/components/home/StatusPie.vue          | 103 ++++++++
 ui/src/components/layout/DateRange.vue        |   2 +-
 ui/src/override/components/LeftMenu.vue       |   9 +
 ui/src/routes/routes.js                       |   3 +-
 ui/src/translations.json                      |  22 +-
 ui/src/utils/init.js                          |  28 +-
 20 files changed, 945 insertions(+), 7 deletions(-)
 create mode 100644 ui/src/charts/MatrixChart.js
 create mode 100644 ui/src/charts/TreeMapChart.js
 create mode 100644 ui/src/components/flows/Overview.vue
 create mode 100644 ui/src/components/home/Home.vue
 create mode 100644 ui/src/components/home/HomeDescription.vue
 create mode 100644 ui/src/components/home/HomeSummaryFailed.vue
 create mode 100644 ui/src/components/home/HomeSummaryLog.vue
 create mode 100644 ui/src/components/home/HomeSummaryNamespace.vue
 create mode 100644 ui/src/components/home/HomeSummaryPie.vue
 create mode 100644 ui/src/components/home/HomeSummaryStatusLabel.vue
 create mode 100644 ui/src/components/home/NamespaceTreeMap.vue
 create mode 100644 ui/src/components/home/StatusPie.vue

diff --git a/ui/package-lock.json b/ui/package-lock.json
index d9e8aa6806d..7832e02a54b 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -15,6 +15,8 @@
         "bootstrap": "^5.2.3",
         "buffer": "^6.0.3",
         "chart.js": "^4.1.2",
+        "chartjs-chart-matrix": "^1.3.0",
+        "chartjs-chart-treemap": "^2.2.0",
         "core-js": "^3.27.0",
         "cron-parser": "^4.7.0",
         "cron-validator": "^1.3.1",
@@ -1202,6 +1204,22 @@
         "pnpm": "^7.0.0"
       }
     },
+    "node_modules/chartjs-chart-matrix": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/chartjs-chart-matrix/-/chartjs-chart-matrix-1.3.0.tgz",
+      "integrity": "sha512-oPmyxY60tJDBFbnhXcmcJujs+F1a2uMvb9HOhSeV2/5k8L9LApWtyRJzwNWawMl8vDbWdhAfobq06b4AcdwE3Q==",
+      "peerDependencies": {
+        "chart.js": ">=3.0.0"
+      }
+    },
+    "node_modules/chartjs-chart-treemap": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/chartjs-chart-treemap/-/chartjs-chart-treemap-2.2.0.tgz",
+      "integrity": "sha512-SfOHPIPmJb7u1EZAap3lAHcqQIc5jmcd+N4NW8WJHiDPG8oXP9dYR9KrNHPn7CgZIfyU4oRmIF3oqAi3QWO8ug==",
+      "peerDependencies": {
+        "chart.js": ">=3.0.0"
+      }
+    },
     "node_modules/check-error": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.2.tgz",
diff --git a/ui/package.json b/ui/package.json
index 6c91d9d6329..8a884b358cc 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -17,6 +17,8 @@
     "bootstrap": "^5.2.3",
     "buffer": "^6.0.3",
     "chart.js": "^4.1.2",
+    "chartjs-chart-matrix": "^1.3.0",
+    "chartjs-chart-treemap": "^2.2.0",
     "core-js": "^3.27.0",
     "cron-parser": "^4.7.0",
     "cron-validator": "^1.3.1",
diff --git a/ui/src/charts/MatrixChart.js b/ui/src/charts/MatrixChart.js
new file mode 100644
index 00000000000..0d88ce4449f
--- /dev/null
+++ b/ui/src/charts/MatrixChart.js
@@ -0,0 +1,5 @@
+import {defineChartComponent} from "vue-chart-3";
+
+const MatrixChart = defineChartComponent("MatrixChart", "matrix");
+
+export default MatrixChart;
\ No newline at end of file
diff --git a/ui/src/charts/TreeMapChart.js b/ui/src/charts/TreeMapChart.js
new file mode 100644
index 00000000000..3d0fddc183e
--- /dev/null
+++ b/ui/src/charts/TreeMapChart.js
@@ -0,0 +1,5 @@
+import {defineChartComponent} from "vue-chart-3";
+
+const TreeMapChart = defineChartComponent("TreeMapChart", "treemap");
+
+export default TreeMapChart;
\ No newline at end of file
diff --git a/ui/src/components/flows/FlowRoot.vue b/ui/src/components/flows/FlowRoot.vue
index f3d0e6a38bd..a05da1ded4d 100644
--- a/ui/src/components/flows/FlowRoot.vue
+++ b/ui/src/components/flows/FlowRoot.vue
@@ -27,6 +27,7 @@
     import Tabs from "../Tabs.vue";
     import BottomLine from "../../components/layout/BottomLine.vue";
     import TriggerFlow from "../../components/flows/TriggerFlow.vue";
+    import Overview from "./Overview.vue";
 
     export default {
         mixins: [RouteContext],
@@ -68,7 +69,7 @@
                 return this.$route.params.namespace +  "/" + this.$route.params.id;
             },
             getTabs() {
-                const tabs = [
+                let tabs = [
                     {
                         name: undefined,
                         component: Topology,
@@ -76,6 +77,18 @@
                     },
                 ];
 
+                if (this.user.hasAny(permission.EXECUTION)) {
+                    tabs[0].name = "topology";
+
+                    tabs = [
+                        {
+                            name: undefined,
+                            component: Overview,
+                            title: this.$t("overview"),
+                        },
+                    ].concat(tabs)
+                }
+
                 if (this.user && this.flow && this.user.isAllowed(permission.EXECUTION, action.READ, this.flow.namespace)) {
                     tabs.push({
                         name: "executions",
diff --git a/ui/src/components/flows/Overview.vue b/ui/src/components/flows/Overview.vue
new file mode 100644
index 00000000000..930d9513cac
--- /dev/null
+++ b/ui/src/components/flows/Overview.vue
@@ -0,0 +1,25 @@
+<template>
+    <div>
+        <home
+            v-if="flow"
+            :namespace="flow.namespace"
+            :flow-id="flow.id"
+            :prevent-route-info="true"
+            :restore-url="false"
+        />
+    </div>
+</template>
+
+<script>
+    import Home from "../home/Home.vue";
+    import {mapGetters} from "vuex";
+
+    export default {
+        components: {
+            Home
+        },
+        computed: {
+            ...mapGetters("flow", ["flow"]),
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/ui/src/components/home/Home.vue b/ui/src/components/home/Home.vue
new file mode 100644
index 00000000000..11adbcf020a
--- /dev/null
+++ b/ui/src/components/home/Home.vue
@@ -0,0 +1,247 @@
+<template>
+    <div class="home">
+        <div>
+            <collapse v-if="!flowId">
+                <el-form-item>
+                    <namespace-select
+                        :data-type="'flow'"
+                        :model-value="selectedNamespace"
+                        @update:model-value="onNamespaceSelect"
+                    />
+                </el-form-item>
+            </collapse>
+
+            <state-global-chart
+                class="big mb-4"
+                v-if="dailyReady"
+                :ready="dailyReady"
+                :data="daily"
+                :big="true"
+            />
+
+            <home-description v-if="namespace" class="mb-4" />
+
+            <el-row :gutter="15" class="auto-height mb-4">
+                <el-col :lg="8" class="mb-3 mb-xl-0">
+                    <home-summary-pie
+                        v-if="dailyReady"
+                        :title="$t('homeDashboard.today')"
+                        :data="today"
+                    />
+                </el-col>
+                <el-col :lg="8" class="mb-3 mb-xl-0">
+                    <home-summary-pie
+                        v-if="dailyReady"
+                        :title="$t('homeDashboard.yesterday')"
+                        :data="yesterday"
+                    />
+                </el-col>
+                <el-col :lg="8" class="mb-3 mb-xl-0">
+                    <home-summary-pie
+                        v-if="dailyReady"
+                        :title="$t('homeDashboard.last28Days')"
+                        :data="alls"
+                    />
+                </el-col>
+            </el-row>
+
+            <el-row :gutter="15" v-if="!namespace" class="auto-height mb-4">
+                <el-col :lg="12">
+                    <home-summary-namespace
+                        v-if="dailyGroupByFlowReady"
+                        :data="namespacesStats"
+                    />
+                </el-col>
+                <el-col :lg="12">
+                    <home-summary-namespace
+                        v-if="dailyGroupByFlowReady"
+                        :failed="true"
+                        :data="namespacesStats"
+                    />
+                </el-col>
+            </el-row>
+
+            <el-row :gutter="15">
+                <el-col :lg="12">
+                    <home-summary-failed
+                        v-if="dailyReady"
+                        :filters="defaultFilters"
+                        class="mb-4"
+                    />
+                </el-col>
+                <el-col :lg="12">
+                    <home-summary-log
+                        v-if="dailyReady"
+                        :filters="defaultFilters"
+                        class="mb-4"
+                    />
+                </el-col>
+            </el-row>
+        </div>
+    </div>
+</template>
+<script>
+    import Collapse from "../layout/Collapse.vue";
+    import RouteContext from "../../mixins/routeContext";
+    import StateGlobalChart from "../stats/StateGlobalChart.vue";
+    import {mapState} from "vuex";
+    import _cloneDeep from "lodash/cloneDeep"
+    import NamespaceSelect from "../namespace/NamespaceSelect.vue";
+    import HomeSummaryPie from "./HomeSummaryPie.vue";
+    import HomeSummaryFailed from "./HomeSummaryFailed.vue";
+    import HomeSummaryLog from "./HomeSummaryLog.vue";
+    import RestoreUrl from "../../mixins/restoreUrl";
+    import HomeSummaryNamespace from "./HomeSummaryNamespace.vue";
+    import HomeDescription from "./HomeDescription.vue";
+    import _merge from "lodash/merge";
+
+    export default {
+        mixins: [RouteContext, RestoreUrl],
+        components: {
+            Collapse,
+            StateGlobalChart,
+            NamespaceSelect,
+            HomeSummaryPie,
+            HomeSummaryFailed,
+            HomeSummaryLog,
+            HomeSummaryNamespace,
+            HomeDescription
+        },
+        props: {
+            namespace: {
+                type: String,
+                default: undefined
+            },
+            flowId: {
+                type: String,
+                default: undefined
+            },
+        },
+        created() {
+            this.loadStats();
+        },
+        watch: {
+            $route(newValue, oldValue) {
+                if (oldValue.name === newValue.name && newValue.query !== oldValue.query) {
+                    this.loadStats();
+                }
+            }
+        },
+        data() {
+            return {
+                isDefaultNamespaceAllow: true,
+                dailyReady: false,
+                dailyGroupByFlowReady: false,
+                today: undefined,
+                yesterday: undefined,
+                alls: undefined,
+                namespacesStats: undefined
+            };
+        },
+        methods: {
+            loadQuery(base) {
+                let queryFilter = this.$route.query;
+
+                if (this.selectedNamespace) {
+                    queryFilter["namespace"] = this.selectedNamespace;
+                }
+
+                if (this.flowId) {
+                    queryFilter["flowId"] = this.flowId;
+                }
+
+                return _merge(base, queryFilter)
+            },
+            loadStats() {
+                this.dailyReady = false;
+                this.$store
+                    .dispatch("stat/daily", this.loadQuery({
+                        startDate: this.startDate,
+                        endDate: this.endDate
+                    }))
+                    .then((daily) => {
+                        let data = [...daily];
+                        let sorted = data.sort((a, b) => {
+                            return new Date(b.startDate) - new Date(a.startDate);
+                        });
+                        this.today = sorted.shift();
+                        this.yesterday = sorted.shift();
+                        this.alls = this.mergeStats(sorted);
+                        this.dailyReady = true;
+                    });
+
+                if (!this.flowId) {
+                    this.dailyGroupByFlowReady = false;
+                    this.$store
+                        .dispatch("stat/dailyGroupByFlow", this.loadQuery({
+                            startDate: this.startDate,
+                            endDate: this.endDate,
+                            namespaceOnly: true
+                        }))
+                        .then((daily) => {
+                            this.namespacesStats = daily;
+                            this.dailyGroupByFlowReady = true;
+                        });
+                }
+            },
+            mergeStats(daily) {
+                return daily
+                    .reduce((accumulator, value)  => {
+                        if (!accumulator) {
+                            accumulator = _cloneDeep(value);
+                        } else {
+                            this.sumAll(value.executionCounts, accumulator.executionCounts);
+                            this.sumAll(value.duration, accumulator.duration);
+                        }
+                        return accumulator;
+                    }, null);
+            },
+            sumAll(object, accumulator) {
+                for (const key in object) {
+                    accumulator[key] += object[key]
+                }
+            },
+            onNamespaceSelect(namespace) {
+                this.$router.push({
+                    query: {...this.$route.query, namespace}
+                });
+            },
+        },
+        computed: {
+            ...mapState("stat", ["daily", "dailyGroupByFlow"]),
+            routeInfo() {
+                return {
+                    title: this.$t("home"),
+                };
+            },
+            defaultFilters() {
+                return {
+                    start: this.$moment(this.startDate).unix() * 1000,
+                    end: this.$moment(this.endDate).unix() * 1000 ,
+                }
+            },
+            selectedNamespace() {
+                return this.namespace || this.$route.query.namespace;
+            },
+            endDate() {
+                return this.$moment(new Date()).endOf("day").toISOString(true)
+            },
+            startDate() {
+                return this.$moment(this.endDate)
+                    .add(-30, "days")
+                    .startOf("day")
+                    .toISOString(true)
+            }
+        }
+    };
+</script>
+
+<style lang="scss">
+    .home {
+        .auto-height {
+            .el-card {
+                height: 100%;
+            }
+        }
+    }
+</style>
diff --git a/ui/src/components/home/HomeDescription.vue b/ui/src/components/home/HomeDescription.vue
new file mode 100644
index 00000000000..fff83841e86
--- /dev/null
+++ b/ui/src/components/home/HomeDescription.vue
@@ -0,0 +1,35 @@
+<template>
+    <el-card
+        class="description"
+        v-if="flow.description"
+        :header="$t('description')"
+    >
+        <div>
+            <markdown class="markdown-tooltip" v-if="flow.description" :source="flow.description" />
+        </div>
+    </el-card>
+</template>
+<script>
+    import Markdown from "../layout/Markdown.vue";
+    import {mapGetters} from "vuex";
+
+    export default {
+        components: {
+            Markdown
+        },
+        computed: {
+            ...mapGetters("flow", ["flow"]),
+        }
+    };
+</script>
+
+<style lang="scss" scoped>
+    .description {
+        font-size: var(--font-size-sm);
+        .card-body > div {
+            max-height: 300px;
+            padding-right: 0.25rem;
+            overflow: auto;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/ui/src/components/home/HomeSummaryFailed.vue b/ui/src/components/home/HomeSummaryFailed.vue
new file mode 100644
index 00000000000..618d75c817a
--- /dev/null
+++ b/ui/src/components/home/HomeSummaryFailed.vue
@@ -0,0 +1,32 @@
+<template>
+    <el-card
+        :header="$t('homeDashboard.failedExecutions')"
+    >
+        <executions
+            :page-size="10"
+            :filters="filters"
+            :prevent-route-info="true"
+            :restore-url="false"
+            :statuses="['FAILED', 'KILLED', 'WARNING']"
+            :embed="true"
+            :hidden="['id', 'state.endDate', 'triggers']"
+        />
+    </el-card>
+</template>
+<script>
+    import Executions from "../executions/Executions.vue";
+
+    export default {
+        components: {
+            Executions
+        },
+        props: {
+            filters: {
+                type: Object,
+                required: true
+            },
+        },
+        computed: {
+        }
+    };
+</script>
diff --git a/ui/src/components/home/HomeSummaryLog.vue b/ui/src/components/home/HomeSummaryLog.vue
new file mode 100644
index 00000000000..43a9dbc3d04
--- /dev/null
+++ b/ui/src/components/home/HomeSummaryLog.vue
@@ -0,0 +1,31 @@
+<template>
+    <el-card
+        :header="$t('homeDashboard.errorLogs')"
+    >
+        <logs-wrapper
+            :page-size="10"
+            :filters="filters"
+            :prevent-route-info="true"
+            :restore-url="false"
+            log-level="WARN"
+            :embed="true"
+        />
+    </el-card>
+</template>
+<script>
+    import LogsWrapper from "../logs/LogsWrapper.vue";
+
+    export default {
+        components: {
+            LogsWrapper
+        },
+        props: {
+            filters: {
+                type: Object,
+                required: true
+            },
+        },
+        computed: {
+        }
+    };
+</script>
diff --git a/ui/src/components/home/HomeSummaryNamespace.vue b/ui/src/components/home/HomeSummaryNamespace.vue
new file mode 100644
index 00000000000..15200d16a04
--- /dev/null
+++ b/ui/src/components/home/HomeSummaryNamespace.vue
@@ -0,0 +1,66 @@
+<template>
+    <el-card
+        :header="$t('homeDashboard.' + (failed ? 'namespacesErrorExecutions' : 'namespacesExecutions'))"
+    >
+        <namespace-tree-map
+            :data="namespaceData"
+        />
+    </el-card>
+</template>
+<script>
+    import NamespaceTreeMap from "./NamespaceTreeMap.vue";
+    import State from "../../utils/state";
+
+    export default {
+        components: {
+            NamespaceTreeMap
+        },
+        props: {
+            data: {
+                type: Object,
+                required: true
+            },
+            failed: {
+                type: Boolean,
+                default: false
+            },
+        },
+        computed: {
+            namespaceData() {
+                return Object.keys(this.data)
+                    .flatMap((namespace) => {
+                        return this.data[namespace]["*"]
+                            .flatMap(date => {
+                                return Object.keys(date.executionCounts)
+                                    .filter(r => this.failed === false || (this.failed === true && State.isFailed(r)))
+                                    .map(current => {
+                                        return {
+                                            date: date.startDate,
+                                            namespace: namespace,
+                                            state: current.toLowerCase().capitalize(),
+                                            count: date.executionCounts[current]
+                                        };
+                                    })
+                            })
+                    });
+            },
+        }
+    };
+</script>
+
+<style lang="scss" scoped>
+@import "../../styles/_variable.scss";
+
+@media (min-width: map-get($grid-breakpoints, "lg")) and (max-width: 1500px) {
+    .row.home-summary > div {
+        -webkit-box-flex: 0;
+        -ms-flex: 0 0 100%;
+        flex: 0 0 100%;
+        max-width: 100%;
+        &.legend {
+            margin-top: $spacer * 1.5;
+        }
+    }
+}
+
+</style>
\ No newline at end of file
diff --git a/ui/src/components/home/HomeSummaryPie.vue b/ui/src/components/home/HomeSummaryPie.vue
new file mode 100644
index 00000000000..301333f84e3
--- /dev/null
+++ b/ui/src/components/home/HomeSummaryPie.vue
@@ -0,0 +1,48 @@
+<template>
+    <el-card
+        shadow="never"
+        :header="title"
+    >
+        <el-row :span="12" :gutter="15" v-if="count > 0" class="home-summary">
+            <el-col :md="6" :lg="12" :xl="6">
+                <status-pie :data="data" />
+            </el-col>
+            <el-col :md="6" :lg="12" :xl="6">
+                <home-summary-status-label class="mt-sm-4 mt-md-0 mt-lg-4 mt-xl-0" :data="data" />
+            </el-col>
+        </el-row>
+        <span v-else>
+            <el-alert type="info" :closable="false">
+                {{ $t("no result") }}
+            </el-alert>
+        </span>
+    </el-card>
+</template>
+<script>
+    import StatusPie from "./StatusPie.vue";
+    import HomeSummaryStatusLabel from "./HomeSummaryStatusLabel.vue"
+
+    export default {
+        components: {
+            StatusPie,
+            HomeSummaryStatusLabel
+        },
+        props: {
+            title: {
+                type: String,
+                required: true
+            },
+            data: {
+                type: Object,
+                required: false,
+                default: () => {},
+            },
+        },
+        computed: {
+            count() {
+                return this.data ? Object.values(this.data.executionCounts).reduce((a, b) => a + b, 0) : 0;
+            }
+        }
+    };
+</script>
+
diff --git a/ui/src/components/home/HomeSummaryStatusLabel.vue b/ui/src/components/home/HomeSummaryStatusLabel.vue
new file mode 100644
index 00000000000..38c2367a59e
--- /dev/null
+++ b/ui/src/components/home/HomeSummaryStatusLabel.vue
@@ -0,0 +1,100 @@
+<template>
+    <div class="list">
+        <template v-for="[status, count] of sorted">
+            <div v-if="count > 0" :key="status" class="d-flex w-100 justify-content-between mb-2">
+                <div class="me-4 icon">
+                    <status :label="false" :status="status" />
+                </div>
+
+                <div class="me-4 center">
+                    <h6>
+                        {{ status.toLowerCase().capitalize() }}
+                    </h6>
+                    <div class="percent">
+                        {{ percent(count) }}%
+                    </div>
+                </div>
+
+                <div class="big-number">
+                    <el-tag type="info" disable-transitions>
+                        {{ count }}
+                    </el-tag>
+                </div>
+            </div>
+        </template>
+    </div>
+</template>
+<script>
+    import Status from "../Status.vue";
+
+    export default {
+        components: {
+            Status
+        },
+        props: {
+            data: {
+                type: Object,
+                required: true
+            },
+        },
+        methods: {
+            percent(count) {
+                const sum = Object.values(this.data.executionCounts).reduce((a, b) => a + b, 0);
+                return Math.round(count * 100 / sum);
+            },
+        },
+        computed: {
+            sorted() {
+                return new Map(Object.entries(this.data.executionCounts).sort((a, b) => b[1] - a[1]));
+            }
+        }
+    };
+</script>
+
+<style lang="scss" scoped>
+    .list {
+        border: 0;
+        padding: 0;
+        max-width: 100%;
+
+        > div {
+            justify-content: center;
+            align-items: center;
+
+
+            .icon {
+                vertical-align: middle;
+            }
+
+            .center {
+                flex-grow: 1;
+
+                h6 {
+                    font-weight: 400;
+                    line-height: 1;
+                    margin-bottom: 0;
+                }
+
+                .percent {
+                    color: var(--bs-gray-500);
+                    line-height: 1.5;
+                    font-size: var(--font-size-xs);
+                }
+            }
+
+            :deep(.el-tag) {
+                font-size: 150%;
+                background: none;
+                color: var(--bs-gray-600);
+                font-weight: 400;
+                padding: 0;
+            }
+
+            .big-number {
+                vertical-align: middle;
+            }
+        }
+    }
+
+</style>
+
diff --git a/ui/src/components/home/NamespaceTreeMap.vue b/ui/src/components/home/NamespaceTreeMap.vue
new file mode 100644
index 00000000000..27d370bfca4
--- /dev/null
+++ b/ui/src/components/home/NamespaceTreeMap.vue
@@ -0,0 +1,156 @@
+<template>
+    <div :id="uuid" class="namespace-treemap" v-if="dataReady">
+        <el-tooltip
+            popper-class="tooltip-stats"
+            :persistent="false"
+            :hide-after="0"
+            transition=""
+        >
+            <template #content>
+                <span v-html="tooltipContent" />
+            </template>
+            <TreeMapChart ref="chartRef" :chart-data="chartData" :options="options" />
+        </el-tooltip>
+    </div>
+</template>
+
+<script>
+    import {computed, defineComponent, ref, getCurrentInstance} from "vue";
+    import {useRoute, useRouter} from "vue-router"
+    import Utils from "../../utils/utils.js";
+    import TreeMapChart from "../../charts/TreeMapChart"
+    import {defaultConfig, chartClick} from "../../utils/charts";
+    import {color} from "chart.js/helpers";
+    import State from "../../utils/state";
+
+    export default defineComponent({
+        components: {TreeMapChart},
+        props: {
+            data: {
+                type: Array,
+                required: true
+            },
+        },
+        setup(props) {
+            const moment = getCurrentInstance().appContext.config.globalProperties.$moment;
+            const route = useRoute();
+            const router = useRouter();
+
+            const chartRef = ref();
+            const tooltipContent = ref("");
+            const darkTheme = document.getElementsByTagName("html")[0].className.indexOf("dark") >= 0;
+
+            const dataReady = computed(() => props.data !== undefined)
+
+            const backgroundFromState = (state) => {
+                return State.color()[state]
+            }
+
+            const tooltip = (context) => {
+                const tooltip = context.tooltip;
+                const tree = tooltip.dataPoints[0].dataset.tree;
+                const namespace = tooltip.dataPoints[0].raw._data.children[0].namespace;
+
+                let innerHtml = "";
+                innerHtml += "<h6>" + namespace + "</h6>";
+
+                const reduce = tree
+                    .filter(data => data.namespace === namespace)
+                    .reduce(function (accumulator, value) {
+                        const state = value.state.toUpperCase();
+                        if (accumulator[state] === undefined) {
+                            accumulator[state] = 0
+                        }
+
+                        accumulator[state] += value.count;
+
+                        return accumulator;
+                    }, Object.create(null))
+
+                Object.keys(reduce)
+                    .map((state) => {
+                        if (reduce[state] > 0) {
+                            const stateColor = backgroundFromState(state);
+                            const style = "background:" + stateColor + ";" +
+                                "border-color:" + color(stateColor).darken(0.8).hexString();
+                            let span = "<span class=\"square\" style=\"" + style + "\"></span>";
+                            innerHtml += span + state + ": " + reduce[state]  + "<br />";
+                        }
+                    });
+
+
+                tooltipContent.value = innerHtml;
+            }
+
+            const options = computed(() => defaultConfig({
+                onClick: (e, elements) => {
+                    if (elements.length > 0 && elements[1].index !== undefined  && elements[1].datasetIndex !== undefined ) {
+                        let data = e.chart.data.datasets[elements[0].datasetIndex].data[elements[0].index];
+                        let dates = data._data.children.map(r => moment(r.date).unix());
+                        let states = [...new Set(data._data.children.map(r => r.state.toUpperCase()))];
+
+                        chartClick(
+                            moment,
+                            router,
+                            route,
+                            {
+                                namespace: data.g,
+                                startDate: moment.unix(Math.min(...dates)).toISOString(true),
+                                state: states,
+                                endDate: moment.unix(Math.max(...dates)).endOf("day").toISOString(true),
+                            }
+                        );
+                    }
+                },
+                plugins: {
+                    tooltip: {
+                        external: tooltip
+                    },
+                },
+                elements: {
+                    treemap: {
+                        captions: {
+                            color: (darkTheme ? "#7081b9" : "#7081b9")
+                        }
+                    }
+                }
+            }));
+
+            return {
+                chartData: {
+                    datasets: [{
+                        tree: props.data,
+                        key: "count",
+                        groups: ["namespace", "state"],
+                        backgroundColor(ctx) {
+                            const item = ctx.dataset.data[ctx.dataIndex];
+                            const color = item ? backgroundFromState(item.g.toUpperCase()) : undefined;
+
+                            return color !== undefined ? color : (darkTheme ? "#303e67" : "#eaf0f9");
+                        },
+                        spacing: 1,
+                        borderWidth: 1,
+                        color: "#FFFFFF",
+                    }]
+                },
+                tooltipContent,
+                chartRef,
+                options,
+                dataReady
+            };
+        },
+        data() {
+            return {
+                uuid: Utils.uid(),
+            };
+        },
+    });
+</script>
+
+<style lang="scss" scoped>
+    .namespace-treemap {
+        div {
+            height: 200px;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/ui/src/components/home/StatusPie.vue b/ui/src/components/home/StatusPie.vue
new file mode 100644
index 00000000000..0c2fc16d408
--- /dev/null
+++ b/ui/src/components/home/StatusPie.vue
@@ -0,0 +1,103 @@
+<template>
+    <div class="status-pie" v-if="dataReady">
+        <el-tooltip
+            popper-class="tooltip-stats"
+            placement="right"
+            :persistent="false"
+            :hide-after="0"
+            transition=""
+        >
+            <template #content>
+                <span v-html="tooltipContent" />
+            </template>
+            <DoughnutChart ref="chartRef" :chart-data="chartData" :options="options" />
+        </el-tooltip>
+    </div>
+</template>
+
+<script>
+    import {defineComponent, computed, ref} from "vue";
+    import {DoughnutChart} from "vue-chart-3"
+    import {tooltip, defaultConfig} from "../../utils/charts.js";
+    import State from "../../utils/state";
+    import {cssVariable} from "../../utils/global";
+
+    export default defineComponent({
+        components: {DoughnutChart},
+        props: {
+            data: {
+                type: Object,
+                required: true
+            },
+        },
+        setup(props) {
+            const chartRef = ref();
+            const tooltipContent = ref("");
+
+            const dataReady = computed(() => props.data !== undefined)
+
+            const options = computed(() => defaultConfig({
+                layout: {
+                    padding: 0
+                },
+                spacing: 0,
+                cutout: "75%",
+                borderColor: cssVariable("--bs-border-color"),
+                hoverBorderColor: cssVariable("--bs-border-color"),
+                plugins: {
+                    tooltip: {
+                        external: function (context) {
+                            let content = tooltip(context.tooltip);
+                            if (content) {
+                                tooltipContent.value = content;
+                            }
+                        },
+                    },
+                }
+            }))
+
+            const backgroundFromState = (state, alpha = 1) => {
+                const hex = State.color()[state];
+                const [r, g, b] = hex.match(/\w\w/g).map(x => parseInt(x, 16));
+                return `rgba(${r},${g},${b},${alpha})`;
+            }
+
+            const chartData = computed(() => {
+                let background = Object.keys(props.data.executionCounts).map(function (state) {
+                    return backgroundFromState(state)
+                });
+
+                let datasets = [
+                    {
+                        backgroundColor: background,
+                        data: Object.values(props.data.executionCounts)
+                    }
+                ];
+
+                return {
+                    labels: Object.keys(props.data.executionCounts),
+                    datasets: datasets
+                }
+            });
+
+            return {chartData, tooltipContent, chartRef, options, dataReady};
+        },
+    });
+</script>
+
+<style lang="scss" scoped>
+@import "../../styles/_variable.scss";
+
+.status-pie {
+    div {
+        height: 100px;
+
+        @media (min-width: map-get($grid-breakpoints, "md")) {
+            & {
+                height: 200px;
+            }
+        }
+    }
+}
+
+</style>
\ No newline at end of file
diff --git a/ui/src/components/layout/DateRange.vue b/ui/src/components/layout/DateRange.vue
index a2708978388..ff2aef399b3 100644
--- a/ui/src/components/layout/DateRange.vue
+++ b/ui/src/components/layout/DateRange.vue
@@ -1,6 +1,6 @@
 <template>
     <el-date-picker
-        v-model="date"
+        :model-value="date"
         @update:model-value="onDate"
         type="datetimerange"
         :shortcuts="shortcuts"
diff --git a/ui/src/override/components/LeftMenu.vue b/ui/src/override/components/LeftMenu.vue
index f26e5726da1..d9f2b167b54 100644
--- a/ui/src/override/components/LeftMenu.vue
+++ b/ui/src/override/components/LeftMenu.vue
@@ -43,6 +43,7 @@
     import Slack from "vue-material-design-icons/Slack.vue";
     import Github from "vue-material-design-icons/Github.vue";
     import CogOutline from "vue-material-design-icons/CogOutline.vue";
+    import ViewDashboardVariantOutline from "vue-material-design-icons/ViewDashboardVariantOutline.vue";
     import {mapState} from "vuex";
 
     export default {
@@ -74,6 +75,14 @@
             },
             generateMenu() {
                 return [
+                    {
+                        href: "/",
+                        title: this.$t("home"),
+                        icon: {
+                            element: shallowRef(ViewDashboardVariantOutline),
+                            class: "menu-icon",
+                        },
+                    },
                     {
                         href: "/flows",
                         alias: [
diff --git a/ui/src/routes/routes.js b/ui/src/routes/routes.js
index b2c952c9b89..ad37fd01528 100644
--- a/ui/src/routes/routes.js
+++ b/ui/src/routes/routes.js
@@ -11,10 +11,11 @@ import TemplateEdit from "../components/templates/TemplateEdit.vue"
 import Templates from "../components/templates/Templates.vue"
 import FlowsSearch from "../components/flows/FlowsSearch.vue";
 import Errors from "../components/errors/Errors.vue";
+import Home from "../components/home/Home.vue";
 
 export default [
     //Flows
-    {name: "home", path: "/", redirect: "/flows"},
+    {name: "home", path: "/", component: Home},
     {name: "flows/list", path: "/flows", component: Flows},
     {name: "flows/search", path: "/flows/search", component: FlowsSearch},
     {name: "flows/create", path: "/flows/new", component: FlowEdit},
diff --git a/ui/src/translations.json b/ui/src/translations.json
index d687db5f335..ad9bda536d2 100644
--- a/ui/src/translations.json
+++ b/ui/src/translations.json
@@ -240,7 +240,16 @@
     },
     "delete execution running": "<div class=\"alert alert-warning mt-2 mb-0\">This execution is still running, deleting it will not stopped this one.<br />You need to kill it if you want to stop it!</div>",
     "restore": "Restore",
-    "restore confirm": "Are you sure to restore the revision <code>{revision}</code>?"
+    "restore confirm": "Are you sure to restore the revision <code>{revision}</code>?",
+    "homeDashboard": {
+      "today": "Today",
+      "yesterday": "Yesterday",
+      "last28Days": "Last 28 days",
+      "namespacesExecutions": "Executions per namespace",
+      "namespacesErrorExecutions": "Executions errors per namespace",
+      "failedExecutions": "Failed executions",
+      "errorLogs": "Errors logs"
+    }
   },
   "fr": {
     "id": "Identifiant",
@@ -484,6 +493,15 @@
     },
     "delete execution running": "<div class=\"alert alert-warning mt-2 mb-0\">Cette exécution est en cours, l'effacer ne stoppera pas celle-ci.<br />Vous devez l'arrêter auparavant!</div>",
     "restore": "Restaurer",
-    "restore revision": "Êtes-vous sur de vouloir restaurer la revision <code>{revision}</code> ?"
+    "restore revision": "Êtes-vous sur de vouloir restaurer la revision <code>{revision}</code> ?",
+    "homeDashboard": {
+      "today": "Aujourd'hui",
+      "yesterday": "Hier",
+      "last28Days": "Dernier 28 jours",
+      "namespacesExecutions": "Exécutions par espace de nom",
+      "namespacesErrorExecutions": "Exécutions en erreur par espace de nom",
+      "failedExecutions": "Exécutions en échec",
+      "errorLogs": "Journaux d'erreurs"
+    }
   }
 }
diff --git a/ui/src/utils/init.js b/ui/src/utils/init.js
index adff1be0813..8858222b801 100644
--- a/ui/src/utils/init.js
+++ b/ui/src/utils/init.js
@@ -6,7 +6,22 @@ import moment from "moment/moment";
 import "moment/locale/fr"
 import {extendMoment} from "moment-range";
 import VueSidebarMenu from "vue-sidebar-menu";
-import {Chart, CategoryScale, LinearScale, BarElement, BarController, LineElement, LineController, PointElement, Tooltip, Filler} from "chart.js";
+import {
+    Chart,
+    CategoryScale,
+    LinearScale,
+    BarElement,
+    BarController,
+    LineElement,
+    LineController,
+    PointElement,
+    Tooltip,
+    Filler,
+    ArcElement,
+    DoughnutController,
+} from "chart.js";
+import {TreemapController, TreemapElement} from "chartjs-chart-treemap"
+import {MatrixController, MatrixElement} from "chartjs-chart-matrix";
 
 
 import Toast from "./toast";
@@ -27,7 +42,16 @@ export default (app, routes, stores, translations) => {
         LineController,
         PointElement,
         Tooltip,
-        Filler
+        Filler,
+        ArcElement,
+        DoughnutController,
+        Tooltip,
+        CategoryScale,
+        LinearScale,
+        TreemapController,
+        TreemapElement,
+        MatrixController,
+        MatrixElement
     );
 
     // store