From 18ef9590aaeb992182e5fa26888ceabbedaba96c Mon Sep 17 00:00:00 2001
From: Piyush Bhaskar <102078527+Piyush-r-bhaskar@users.noreply.github.com>
Date: Sat, 15 Feb 2025 20:05:49 +0530
Subject: [PATCH] chore(ui): improved Logs empty page

---
 .../dashboard/components/charts/logs/Bar.vue  |  4 +-
 .../components/charts/logs/LogsNoData.vue     | 74 +++++++++++++++++++
 ui/src/components/logs/LogsWrapper.vue        |  6 +-
 ui/src/translations/en.json                   |  2 +
 4 files changed, 81 insertions(+), 5 deletions(-)
 create mode 100644 ui/src/components/dashboard/components/charts/logs/LogsNoData.vue

diff --git a/ui/src/components/dashboard/components/charts/logs/Bar.vue b/ui/src/components/dashboard/components/charts/logs/Bar.vue
index 401c2f09754..65bb18cbd43 100644
--- 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
new file mode 100644
index 00000000000..edfb02e5d10
--- /dev/null
+++ 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> 
\ No newline at end of file
diff --git a/ui/src/components/logs/LogsWrapper.vue b/ui/src/components/logs/LogsWrapper.vue
index 33d0bbe7cf5..58028a6a6d3 100644
--- 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
index 02a8510c294..6f2054d04b5 100644
--- 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",