feat(ui): refreshing the main dashboard

core/src/test/java/io/kestra/core/schedulers/SchedulerScheduleOnDatesTest.java

@@ -212,7 +212,7 @@ void recoverLASTMissing() throws Exception {
             // needed for RetryingTest to work since there is no context cleaning between method => we have to clear assertion receiver manually
             receive.blockLast();
 
-            assertThat(queueCount.getCount(), is(0L));
+           assertThat(queueCount.getCount(), is(0L));
             Trigger newTrigger = this.triggerState.findLast(lastTrigger).orElseThrow();
             // depending on the exact timing of events, the trigger date can be before or after
             assertThat(newTrigger.getDate().toLocalDateTime(), oneOf(before.toLocalDateTime(), after.toLocalDateTime()));

ui/src/components/dashboard/Dashboard.vue

@@ -0,0 +1,390 @@
+<template>
+    <Header v-if="!embed" />
+
+    <div class="filters">
+        <el-row :gutter="10" class="mx-0">
+            <el-col :xs="24" :lg="4">
+                <namespace-select
+                    v-model="filters.namespace"
+                    :data-type="'flow'"
+                    :disabled="!!props.flow || !!props.namespace"
+                    @update:model-value="updateParams()"
+                />
+            </el-col>
+            <el-col :xs="24" :lg="4">
+                <el-select
+                    v-model="filters.state"
+                    clearable
+                    filterable
+                    collapse-tags
+                    multiple
+                    :placeholder="$t('state')"
+                    @update:model-value="updateParams()"
+                >
+                    <el-option
+                        v-for="item in State.allStates()"
+                        :key="item.key"
+                        :label="item.key"
+                        :value="item.key"
+                    />
+                </el-select>
+            </el-col>
+            <el-col :xs="24" :lg="8">
+                <date-filter
+                    @update:is-relative="toggleAutoRefresh"
+                    @update:filter-value="(dates) => updateParams(dates)"
+                    absolute
+                    class="d-flex flex-row"
+                />
+            </el-col>
+            <el-col :xs="24" :sm="16" :lg="4">
+                <scope-filter-buttons
+                    v-model="filters.scope"
+                    :label="$t('data')"
+                    @update:model-value="updateParams()"
+                />
+            </el-col>
+            <el-col :xs="24" :sm="8" :lg="4">
+                <refresh-button
+                    class="float-right"
+                    @refresh="fetchAll()"
+                    :can-auto-refresh="canAutoRefresh"
+                />
+            </el-col>
+        </el-row>
+    </div>
+
+    <div class="dashboard">
+        <el-row :gutter="20" class="mx-0">
+            <el-col :xs="24" :sm="12" :lg="6">
+                <Card
+                    :icon="CheckBold"
+                    :label="t('dashboard.success_ratio')"
+                    :value="stats.success"
+                    :redirect="{
+                        name: 'executions/list',
+                        query: {state: State.SUCCESS, scope: 'USER'},
+                    }"
+                />
+            </el-col>
+            <el-col :xs="24" :sm="12" :lg="6">
+                <Card
+                    :icon="Alert"
+                    :label="t('dashboard.failure_ratio')"
+                    :value="stats.failed"
+                    :redirect="{
+                        name: 'executions/list',
+                        query: {state: State.FAILED, scope: 'USER'},
+                    }"
+                />
+            </el-col>
+            <el-col :xs="24" :sm="12" :lg="6">
+                <Card
+                    :icon="FileTree"
+                    :label="t('flows')"
+                    :value="numbers.flows"
+                    :redirect="{
+                        name: 'flows/list',
+                        query: {scope: 'USER'},
+                    }"
+                />
+            </el-col>
+            <el-col :xs="24" :sm="12" :lg="6">
+                <Card
+                    :icon="LightningBolt"
+                    :label="t('triggers')"
+                    :value="numbers.triggers"
+                    :redirect="{
+                        name: 'admin/triggers',
+                    }"
+                />
+            </el-col>
+        </el-row>
+
+        <el-row :gutter="20" class="mx-0">
+            <el-col :xs="24" :lg="16">
+                <ExecutionsBar :data="graphData" :total="stats.total" />
+            </el-col>
+            <el-col :xs="24" :lg="8">
+                <ExecutionsDoughnut :data="graphData" :total="stats.total" />
+            </el-col>
+        </el-row>
+
+        <el-row :gutter="20" class="mx-0">
+            <el-col :xs="24" :lg="12">
+                <ExecutionsInProgress
+                    :flow="props.flow"
+                    :namespace="props.namespace"
+                />
+            </el-col>
+            <el-col :xs="24" :lg="12">
+                <ExecutionsNextScheduled
+                    :flow="props.flow"
+                    :namespace="props.namespace"
+                />
+            </el-col>
+        </el-row>
+
+        <el-row :gutter="20" class="mx-0">
+            <el-col :xs="24">
+                <ExecutionsNamespace
+                    :data="namespaceExecutions"
+                    :total="stats.total"
+                />
+            </el-col>
+        </el-row>
+
+        <el-row :gutter="20" class="mx-0">
+            <el-col :xs="24">
+                <Logs :data="logs" />
+            </el-col>
+        </el-row>
+    </div>
+</template>
+
+<script setup>
+    import {onBeforeMount, ref, computed} from "vue";
+    import {useRouter} from "vue-router";
+    import {useStore} from "vuex";
+    import {useI18n} from "vue-i18n";
+
+    import moment from "moment";
+    import _cloneDeep from "lodash/cloneDeep";
+
+    import {apiUrl} from "override/utils/route";
+    import State from "../../utils/state";
+
+    import Header from "./components/Header.vue";
+    import Card from "./components/Card.vue";
+
+    import NamespaceSelect from "../namespace/NamespaceSelect.vue";
+    import DateFilter from "../executions/date-select/DateFilter.vue";
+    import ScopeFilterButtons from "../layout/ScopeFilterButtons.vue";
+    import RefreshButton from "../layout/RefreshButton.vue";
+
+    import ExecutionsBar from "./components/charts/executions/Bar.vue";
+    import ExecutionsDoughnut from "./components/charts/executions/Doughnut.vue";
+    import ExecutionsNamespace from "./components/charts/executions/Namespace.vue";
+    import Logs from "./components/charts/logs/Bar.vue";
+
+    import ExecutionsInProgress from "./components/tables/executions/InProgress.vue";
+    import ExecutionsNextScheduled from "./components/tables/executions/NextScheduled.vue";
+
+    import CheckBold from "vue-material-design-icons/CheckBold.vue";
+    import Alert from "vue-material-design-icons/Alert.vue";
+    import LightningBolt from "vue-material-design-icons/LightningBolt.vue";
+    import FileTree from "vue-material-design-icons/FileTree.vue";
+
+    const router = useRouter();
+    const store = useStore();
+    const {t} = useI18n({useScope: "global"});
+
+    const props = defineProps({
+        embed: {
+            type: Boolean,
+            default: false,
+        },
+        flow: {
+            type: String,
+            required: false,
+            default: null,
+        },
+        namespace: {
+            type: String,
+            required: false,
+            default: null,
+        },
+    });
+
+    const filters = ref({
+        namespace: null,
+        state: [],
+        startDate: null,
+        endDate: null,
+        timeRange: "PT720H",
+        scope: ["USER"],
+    });
+
+    const canAutoRefresh = ref(false);
+    const toggleAutoRefresh = (event) => {
+        canAutoRefresh.value = event;
+    };
+
+    const numbers = ref({flows: 0, triggers: 0});
+    const fetchNumbers = () => {
+        store.$http
+            .post(`${apiUrl(store)}/stats/summary`, filters.value)
+            .then((response) => {
+                if (!response.data) return;
+                numbers.value = response.data;
+            });
+    };
+
+    const executions = ref({raw: {}, all: {}, yesterday: {}, today: {}});
+    const stats = computed(() => {
+        const counts = executions?.value?.all?.executionCounts || {};
+        const total = Object.values(counts).reduce((sum, count) => sum + count, 0);
+
+        function percentage(count, total) {
+            return total ? Math.round((count / total) * 100) : 0;
+        }
+
+        return {
+            total,
+            success: `${percentage(counts[State.SUCCESS] || 0, total)}%`,
+            failed: `${percentage(counts[State.FAILED] || 0, total)}%`,
+        };
+    });
+    const transformer = (data) => {
+        return data.reduce((accumulator, value) => {
+            if (!accumulator) accumulator = _cloneDeep(value);
+            else {
+                for (const key in value.executionCounts) {
+                    accumulator.executionCounts[key] += value.executionCounts[key];
+                }
+
+                for (const key in value.duration) {
+                    accumulator.duration[key] += value.duration[key];
+                }
+            }
+
+            return accumulator;
+        }, null);
+    };
+    const fetchExecutions = () => {
+        store.dispatch("stat/daily", filters.value).then((response) => {
+            const sorted = response.sort(
+                (a, b) => new Date(b.date) - new Date(a.date),
+            );
+
+            executions.value = {
+                raw: sorted,
+                all: transformer(sorted),
+                yesterday: sorted.at(-2),
+                today: sorted.at(-1),
+            };
+        });
+    };
+
+    const graphData = computed(() => store.state.stat.daily || []);
+
+    const namespaceExecutions = ref({});
+    const fetchNamespaceExecutions = () => {
+        store
+            .dispatch("stat/dailyGroupByFlow", {
+                ...filters.value,
+                namespaceOnly: true,
+            })
+            .then((response) => {
+                namespaceExecutions.value = response;
+            });
+    };
+
+    const logs = ref([]);
+    const fetchLogs = () => {
+        store.dispatch("stat/logDaily", filters.value).then((response) => {
+            logs.value = response;
+        });
+    };
+
+    const handleDatesUpdate = (dates) => {
+        const {startDate, endDate, timeRange} = dates;
+
+        if (startDate && endDate) {
+            filters.value = {...filters.value, startDate, endDate, timeRange};
+        } else if (timeRange) {
+            filters.value = {
+                ...filters.value,
+                startDate: moment()
+                    .subtract(moment.duration(timeRange).as("milliseconds"))
+                    .toISOString(true),
+                endDate: moment().toISOString(true),
+                timeRange,
+            };
+        }
+
+        return Promise.resolve(filters.value);
+    };
+
+    const updateParams = async (params) => {
+        const completeParams = await handleDatesUpdate({
+            ...filters.value,
+            ...params,
+        });
+
+        filters.value = {
+            namespace: props.namespace ?? completeParams.namespace,
+            flowId: props.flow ?? null,
+            state: completeParams.state?.filter(Boolean).length
+                ? [].concat(completeParams.state)
+                : undefined,
+            startDate: completeParams.startDate,
+            endDate: completeParams.endDate,
+            scope: completeParams.scope?.filter(Boolean).length
+                ? [].concat(completeParams.scope)
+                : undefined,
+        };
+
+        completeParams.flowId = props.flow ?? null;
+
+        delete completeParams.timeRange;
+        for (const key in completeParams) {
+            if (completeParams[key] == null) {
+                delete completeParams[key];
+            }
+        }
+
+        router.push({query: completeParams}).then(fetchAll());
+    };
+
+    const fetchAll = async () => {
+        try {
+            await Promise.any([
+                fetchNumbers(),
+                fetchExecutions(),
+                fetchNamespaceExecutions(),
+                fetchLogs(),
+            ]);
+        } catch (error) {
+            console.error("All promises failed:", error);
+        }
+    };
+
+    onBeforeMount(() => updateParams());
+</script>
+
+<style lang="scss" scoped>
+@import "@kestra-io/ui-libs/src/scss/variables";
+
+$spacing: 20px;
+
+.filters,
+.dashboard {
+    padding: $spacing;
+
+    & .el-row {
+        width: 100%;
+
+        & .el-col {
+            padding-bottom: $spacing;
+
+            & div {
+                border-radius: $border-radius;
+                background: var(--card-bg);
+            }
+        }
+    }
+}
+
+.filters {
+    padding-bottom: 0;
+
+    & .el-row {
+        padding: 0 5px;
+    }
+
+    & .el-col {
+        padding-bottom: 0 !important;
+    }
+}
+</style>