fix: polish pages and validate data (#46)

src/views/dashboard/graphs/Bar.vue

@@ -137,13 +137,15 @@ function getOption() {
     color,
     tooltip: {
       trigger: "axis",
-      // backgroundColor: "rgb(50,50,50)",
-      // textStyle: {
-      //   fontSize: 13,
-      //   color: "#ccc",
-      // },
-      // enterable: true,
-      // extraCssText: "max-height: 300px; overflow: auto;",
+      zlevel: 1000,
+      z: 60,
+      backgroundColor: "rgb(50,50,50)",
+      textStyle: {
+        fontSize: 13,
+        color: "#ccc",
+      },
+      enterable: true,
+      extraCssText: "max-height: 300px; overflow: auto; border: none",
     },
     legend: {
       type: "scroll",

src/views/dashboard/graphs/Card.vue

@@ -15,21 +15,17 @@ limitations under the License. -->
 
 <template>
   <div
+    v-if="!isNaN(singleVal)"
     class="chart-card"
     :class="{ center: config.textAlign === 'center' }"
     :style="{ fontSize: `${config.fontSize}px`, textAlign: config.textAlign }"
   >
-    {{
-      typeof singleVal === "string"
-        ? singleVal
-        : isNaN(singleVal)
-        ? null
-        : singleVal.toFixed(2)
-    }}
+    {{ singleVal.toFixed(2) }}
     <span v-show="config.showUnit">
       {{ metricConfig[0]?.unit }}
     </span>
   </div>
+  <div class="center no-data" v-else>No Data</div>
 </template>
 <script lang="ts" setup>
 import { computed, PropType } from "vue";
@@ -53,7 +49,7 @@ const props = defineProps({
 });
 const metricConfig = computed(() => props.config.metricConfig || []);
 const key = computed(() => Object.keys(props.data)[0]);
-const singleVal = computed(() => props.data[key.value]);
+const singleVal = computed(() => Number(props.data[key.value]));
 </script>
 <style lang="scss" scoped>
 .chart-card {
@@ -68,4 +64,9 @@ const singleVal = computed(() => props.data[key.value]);
   -webkit-box-pack: center;
   -webkit-box-align: center;
 }
+
+.no-data {
+  height: 100%;
+  color: #666;
+}
 </style>

src/views/dashboard/graphs/EndpointList.vue

@@ -65,17 +65,6 @@ limitations under the License. -->
         </el-table-column>
       </el-table>
     </div>
-    <el-pagination
-      class="pagination"
-      background
-      small
-      layout="prev, pager, next"
-      :page-size="pageSize"
-      :total="selectorStore.pods.length"
-      @current-change="changePage"
-      @prev-click="changePage"
-      @next-click="changePage"
-    />
   </div>
 </template>
 <script setup lang="ts">
@@ -107,7 +96,13 @@ const props = defineProps({
         metricTypes: string[];
       } & { metricConfig: MetricConfigOpt[] }
     >,
-    default: () => ({ dashboardName: "", fontSize: 12, i: "" }),
+    default: () => ({
+      metrics: [],
+      metricTypes: [],
+      dashboardName: "",
+      fontSize: 12,
+      i: "",
+    }),
   },
   intervalTime: { type: Array as PropType<string[]>, default: () => [] },
   isEdit: { type: Boolean, default: false },
@@ -117,7 +112,6 @@ const selectorStore = useSelectorStore();
 const dashboardStore = useDashboardStore();
 const chartLoading = ref<boolean>(false);
 const endpoints = ref<Endpoint[]>([]);
-const pageSize = 10;
 const searchText = ref<string>("");
 
 queryEndpoints();
@@ -133,18 +127,16 @@ async function queryEndpoints() {
     ElMessage.error(resp.errors);
     return;
   }
-  endpoints.value = selectorStore.pods.filter(
-    (d: unknown, index: number) => index < pageSize
-  );
+  endpoints.value = selectorStore.pods;
   queryEndpointMetrics(endpoints.value);
 }
 async function queryEndpointMetrics(currentPods: Endpoint[]) {
   if (!currentPods.length) {
     return;
   }
-  const metrics = props.config.metrics.filter((d: string) => d);
-
-  if (metrics.length && metrics[0]) {
+  const metrics = (props.config.metrics || []).filter((d: string) => d);
+  const metricTypes = props.config.metricTypes || [];
+  if (metrics.length && metrics[0] && metricTypes.length && metricTypes[0]) {
     const params = await useQueryPodsMetrics(
       currentPods,
       props.config,
@@ -180,14 +172,6 @@ function clickEndpoint(scope: any) {
     `/dashboard/${d.layer}/${d.entity}/${selectorStore.currentService.id}/${scope.row.id}/${d.name}`
   );
 }
-function changePage(pageIndex: number) {
-  endpoints.value = selectorStore.pods.filter((d: unknown, index: number) => {
-    if (index >= (pageIndex - 1) * pageSize && index < pageIndex * pageSize) {
-      return d;
-    }
-  });
-  queryEndpointMetrics(endpoints.value);
-}
 async function searchList() {
   await queryEndpoints();
 }

src/views/dashboard/graphs/HeatMap.vue

@@ -18,7 +18,6 @@ limitations under the License. -->
 <script lang="ts" setup>
 import { computed } from "vue";
 import type { PropType } from "vue";
-import { StandardConfig } from "@/types/dashboard";
 
 /*global defineProps */
 const props = defineProps({
@@ -31,11 +30,7 @@ const props = defineProps({
   intervalTime: { type: Array as PropType<string[]>, default: () => [] },
   config: {
     type: Object as PropType<any>,
-    default: () => ({}),
-  },
-  standard: {
-    type: Object as PropType<StandardConfig>,
-    default: () => ({}),
+    default: () => ({ metrics: [] }),
   },
 });
 const option = computed(() => getOption());

src/views/dashboard/graphs/InstanceList.vue

@@ -166,9 +166,9 @@ async function queryInstanceMetrics(currentInstances: Instance[]) {
   if (!currentInstances.length) {
     return;
   }
-  const { metrics } = props.config;
+  const { metrics, metricTypes } = props.config;
 
-  if (metrics.length && metrics[0]) {
+  if (metrics.length && metrics[0] && metricTypes.length && metricTypes[0]) {
     const params = await useQueryPodsMetrics(
       currentInstances,
       props.config,

src/views/dashboard/graphs/Line.vue

@@ -153,7 +153,7 @@ function getOption() {
         color: "#ccc",
       },
       enterable: true,
-      extraCssText: "max-height: 300px; overflow: auto;",
+      extraCssText: "max-height: 300px; overflow: auto; border: none",
     },
     legend: {
       type: "scroll",

src/views/dashboard/graphs/ServiceList.vue

@@ -210,9 +210,9 @@ async function queryServiceMetrics(currentServices: Service[]) {
   if (!currentServices.length) {
     return;
   }
-  const { metrics } = props.config;
+  const { metrics, metricTypes } = props.config;
 
-  if (metrics.length && metrics[0]) {
+  if (metrics.length && metrics[0] && metricTypes.length && metricTypes[0]) {
     const params = await useQueryPodsMetrics(
       currentServices,
       props.config,

src/views/dashboard/graphs/TopList.vue

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 
 <template>
-  <div class="top-list">
+  <div class="top-list" v-if="available">
     <div class="chart-slow-i" v-for="(i, index) in data[key]" :key="index">
       <div class="ell tools flex-h">
         <div>
@@ -35,11 +35,12 @@ limitations under the License. -->
       <el-progress
         :stroke-width="6"
         :percentage="(i.value / maxValue) * 100"
-        :color="TextColors[config.color]"
+        :color="TextColors[config.color || 'purple']"
         :show-text="false"
       />
     </div>
   </div>
+  <div class="center no-data" v-else>No Data</div>
 </template>
 <script lang="ts" setup>
 import type { PropType } from "vue";
@@ -61,6 +62,12 @@ const props = defineProps({
   intervalTime: { type: Array as PropType<string[]>, default: () => [] },
 });
 const key = computed(() => Object.keys(props.data)[0] || "");
+const available = computed(
+  () =>
+    Array.isArray(props.data[key.value]) &&
+    props.data[key.value][0] &&
+    props.data[key.value][0].value
+);
 const maxValue = computed(() => {
   if (!(props.data[key.value] && props.data[key.value].length)) {
     return 0;
@@ -114,4 +121,14 @@ function handleClick(i: string) {
   will-change: opacity, background-color;
   transition: opacity 0.3s, background-color 0.3s;
 }
+
+.no-data {
+  height: 100%;
+  color: #666;
+  box-sizing: border-box;
+  display: -webkit-box;
+  -webkit-box-orient: horizontal;
+  -webkit-box-pack: center;
+  -webkit-box-align: center;
+}
 </style>