From 349514171435ec30a45b9ed6f65711c75481fbef Mon Sep 17 00:00:00 2001
From: wxq <wangxiqian4@h-partners.com>
Date: Mon, 8 Dec 2025 19:26:18 +0800
Subject: [PATCH] add tip when chart is empty

---
 .../client/src/components/empty-chart.vue     | 19 +++++++++++++++++++
 .../src/pages/cluster/cluster-chart.vue       |  3 ++-
 .../src/pages/instances/instances-chart.vue   |  3 ++-
 .../client/src/pages/jobs/jobs-chart.vue      |  3 ++-
 4 files changed, 25 insertions(+), 3 deletions(-)
 create mode 100644 go/pkg/dashboard/client/src/components/empty-chart.vue

diff --git a/go/pkg/dashboard/client/src/components/empty-chart.vue b/go/pkg/dashboard/client/src/components/empty-chart.vue
new file mode 100644
index 00000000..1ed53def
--- /dev/null
+++ b/go/pkg/dashboard/client/src/components/empty-chart.vue
@@ -0,0 +1,19 @@
+/*
+* Copyright (c) Huawei Technologies Co., Ltd. 2025. All rights reserved.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+<template>
+  <span class="font-size16">There is no data available! Please try adjusting or clearing the filters.</span>
+</template>
\ No newline at end of file
diff --git a/go/pkg/dashboard/client/src/pages/cluster/cluster-chart.vue b/go/pkg/dashboard/client/src/pages/cluster/cluster-chart.vue
index e85c5f2e..ea124f4c 100644
--- a/go/pkg/dashboard/client/src/pages/cluster/cluster-chart.vue
+++ b/go/pkg/dashboard/client/src/pages/cluster/cluster-chart.vue
@@ -48,7 +48,7 @@
           <tiny-grid-column field="logicalCPU" title="Logical Resources" :renderer="logicalResourcesRender"
                             width="11%"></tiny-grid-column>
           <template #empty>
-            <span class="font-size16">There is no more data available!</span>
+            <EmptyChart />
           </template>
         </tiny-grid>
       </div>
@@ -62,6 +62,7 @@ import { TinyGrid, TinyGridColumn } from '@opentiny/vue';
 import { GetCompAPI, GetInstAPI, GetPromQueryAPI } from '@/api/api';
 import { pagerConfig } from '@/components/chart-config';
 import CommonCard from '@/components/common-card.vue';
+import EmptyChart from '@/components/empty-chart.vue';
 import { MultiProgressBar, ProgressBar, SimpleProgressBar } from '@/components/progress-bar-template';
 import { WarningNotify } from '@/components/warning-notify';
 import { CPUConvert, MBToGB } from '@/utils/handleNum';
diff --git a/go/pkg/dashboard/client/src/pages/instances/instances-chart.vue b/go/pkg/dashboard/client/src/pages/instances/instances-chart.vue
index 40d2b712..55e0c97e 100644
--- a/go/pkg/dashboard/client/src/pages/instances/instances-chart.vue
+++ b/go/pkg/dashboard/client/src/pages/instances/instances-chart.vue
@@ -75,7 +75,7 @@
           <tiny-grid-column field="log" title="Log" align="center" width="4%"
                             :renderer="{component: TinyLink, attrs: toInstanceDetails}"></tiny-grid-column>
           <template #empty>
-            <span class="font-size16">There is no more data available!</span>
+            <EmptyChart />
           </template>
         </tiny-grid>
       </div>
@@ -89,6 +89,7 @@ import { TinyGrid, TinyGridColumn, TinyLink } from '@opentiny/vue';
 import { GetInstAPI, GetInstParentIDAPI } from '@/api/api';
 import { pagerConfig, statusFilter } from '@/components/chart-config';
 import CommonCard from '@/components/common-card.vue';
+import EmptyChart from '@/components/empty-chart.vue';
 import { WarningNotify } from '@/components/warning-notify';
 import { DayFormat } from '@/utils/dayFormat';
 import { ChartSort } from '@/utils/sort';
diff --git a/go/pkg/dashboard/client/src/pages/jobs/jobs-chart.vue b/go/pkg/dashboard/client/src/pages/jobs/jobs-chart.vue
index 0dc22e6e..cf2b240b 100644
--- a/go/pkg/dashboard/client/src/pages/jobs/jobs-chart.vue
+++ b/go/pkg/dashboard/client/src/pages/jobs/jobs-chart.vue
@@ -37,7 +37,7 @@
           <tiny-grid-column field="log" title="Log" align="center"
                             :renderer="{component: TinyLink, attrs: toJobDetails}"></tiny-grid-column>
           <template #empty>
-            <span class="font-size16">There is no more data available!</span>
+            <EmptyChart />
           </template>
         </tiny-grid>
       </div>
@@ -51,6 +51,7 @@ import { TinyGrid, TinyGridColumn, TinyLink } from '@opentiny/vue';
 import { ListJobsAPI } from '@/api/api';
 import { pagerConfig, statusFilter } from '@/components/chart-config';
 import CommonCard from '@/components/common-card.vue';
+import EmptyChart from '@/components/empty-chart.vue';
 import { WarningNotify } from '@/components/warning-notify';
 import { DayFormat } from '@/utils/dayFormat';
 import { ChartSort } from '@/utils/sort';
-- 
Gitee