chore(ui): improved Logs empty page

kestra-io · Feb 15, 2025 · 18ef959 · 18ef959
1 parent 49960d6
commit 18ef959
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 5 deletions.
diff --git a/ui/src/components/dashboard/components/charts/logs/Bar.vue b/ui/src/components/dashboard/components/charts/logs/Bar.vue
@@ -19,7 +19,7 @@
             :plugins="[barLegend]"
             class="tall"
         />
-        <NoData v-else />
+        <LogsNoData v-else />
     </div>
 </template>
 
@@ -36,7 +36,7 @@
     import {useScheme} from "../../../../../utils/scheme.js";
     import Logs from "../../../../../utils/logs.js";
 
-    import NoData from "../../../../layout/NoData.vue";
+    import LogsNoData from "./LogsNoData.vue";
     import {useTheme} from "../../../../../utils/utils.js";
 
     const {t} = useI18n({useScope: "global"});

diff --git a/ui/src/components/dashboard/components/charts/logs/LogsNoData.vue b/ui/src/components/dashboard/components/charts/logs/LogsNoData.vue
@@ -0,0 +1,74 @@
+<template>
+    <div class="p-3">
+        <div>
+            <p class="m-0 fs-6">
+                <span class="fw-bold">{{ t("logs") }}</span>
+            </p>
+        </div>
+        <div class="text-center">
+            <h5 class="text mb-2 fw-bold">
+                {{ t("no_logs_data") }}
+            </h5>
+            <p class="text mb-6">
+                {{ t("no_logs_data_description") }}
+            </p>
+            <Bar
+                :data="chartData"
+                :options="options"
+                class="tall"
+            />
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import {computed} from "vue";
+    import {useI18n} from "vue-i18n";
+    import {Bar} from "vue-chartjs";
+    import {defaultConfig} from "../../../../../utils/charts.js";
+
+    const {t} = useI18n({useScope: "global"});
+
+    const placeholderData = () => {
+        const data = [];
+        for (let i = 0; i < 30; i++) {
+            data.push(Math.floor(Math.random() * 40) + 10);
+        }
+        return data;
+    };
+
+    const chartData = computed(() => ({
+        labels: Array(30).fill().map((_, i) => i + 1),
+        datasets: [{
+            data: placeholderData(),
+            backgroundColor: "rgba(128, 128, 128, 0.15)",
+            borderRadius: 2,
+            barThickness: 12
+        }]
+    }));
+
+    const options = computed(() => 
+        defaultConfig({
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    display: false
+                }
+            }
+        })
+    );
+</script>
+
+<style lang="scss" scoped>
+$height: 200px;
+
+.tall {
+    height: $height;
+    max-height: $height;
+}
+
+.text {
+    color: var(--ks-content-secondary);
+}
+</style> 
diff --git a/ui/src/components/logs/LogsWrapper.vue b/ui/src/components/logs/LogsWrapper.vue
@@ -20,7 +20,7 @@
                             <template v-if="hasStatsData">
                                 <Logs :data="logDaily" />
                             </template>
-                            <NoData v-else />
+                            <LogsNoData v-else />
                         </div>
                     </el-card>
                 </template>
@@ -52,7 +52,7 @@
     import RestoreUrl from "../../mixins/restoreUrl";
     import DataTableActions from "../../mixins/dataTableActions";
     import DataTable from "../../components/layout/DataTable.vue";
-    import NoData from "../layout/NoData.vue";
+    import LogsNoData from "../dashboard/components/charts/logs/LogsNoData.vue";
     import _merge from "lodash/merge";
     import Logs from "../dashboard/components/charts/logs/Bar.vue";
     import {storageKeys} from "../../utils/constants";
@@ -62,7 +62,7 @@
         mixins: [RouteContext, RestoreUrl, DataTableActions],
         components: {
             KestraFilter,
-            DataTable, LogLine, TopNavBar, Logs, NoData},
+            DataTable, LogLine, TopNavBar, Logs, LogsNoData},
         props: {
             logLevel: {
                 type: String,

diff --git a/ui/src/translations/en.json b/ui/src/translations/en.json
@@ -62,6 +62,8 @@
     "overview": "Overview",
     "gantt": "Gantt",
     "logs": "Logs",
+    "no_logs_data": "No Data",
+    "no_logs_data_description": "Either no flows are running, or you may need to adjust your filters.",
     "duration": "Duration",
     "running duration": "Running duration",
     "queued duration": "Queued duration",