fix: add tooltips for list graphs (#47)

src/views/dashboard/configuration/Text.vue

@@ -92,7 +92,7 @@ const { t } = useI18n();
 const dashboardStore = useDashboardStore();
 const originConfig = dashboardStore.selectedGrid;
 const graph = originConfig.graph || {};
-const url = ref(originConfig.graph.url || "");
+const url = ref(graph.url || "");
 const backgroundColor = ref(graph.backgroundColor || "green");
 const fontColor = ref(graph.fontColor || "white");
 const content = ref<string>(graph.content || "");

src/views/dashboard/configuration/widget/graph-styles/Area.vue

@@ -34,16 +34,16 @@ import { useDashboardStore } from "@/store/modules/dashboard";
 
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
-const { selectedGrid } = dashboardStore;
+const graph = dashboardStore.selectedGrid.graph || {};
 
-const opacity = ref(selectedGrid.graph.opacity);
+const opacity = ref(graph.opacity);
 
 function updateConfig(param: { [key: string]: unknown }) {
   const graph = {
-    ...selectedGrid.graph,
+    ...dashboardStore.selectedGrid.graph,
     ...param,
   };
-  dashboardStore.selectWidget({ ...selectedGrid, graph });
+  dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
 }
 </script>
 <style lang="scss" scoped>

src/views/dashboard/configuration/widget/graph-styles/Bar.vue

@@ -30,15 +30,15 @@ import { useI18n } from "vue-i18n";
 
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
-const { selectedGrid } = dashboardStore;
-const showBackground = ref(selectedGrid.graph.showBackground || false);
+const graph = dashboardStore.selectedGrid.graph;
+const showBackground = ref(graph.showBackground || false);
 
 function changeConfig(param: { [key: string]: unknown }) {
   const graph = {
-    ...selectedGrid.graph,
+    ...dashboardStore.selectedGrid.graph,
     ...param,
   };
-  dashboardStore.selectWidget({ ...selectedGrid, graph });
+  dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
 }
 </script>
 <style lang="scss" scoped>

src/views/dashboard/configuration/widget/graph-styles/Card.vue

@@ -43,9 +43,9 @@ import { useDashboardStore } from "@/store/modules/dashboard";
 
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
-const { selectedGrid } = dashboardStore;
-const fontSize = ref(selectedGrid.graph.fontSize);
-const showUnit = ref<boolean>(selectedGrid.graph.showUnit);
+const graph = dashboardStore.selectedGrid.graph || {};
+const fontSize = ref(graph.fontSize);
+const showUnit = ref<boolean>(graph.showUnit);
 
 function updateConfig(param: { [key: string]: unknown }) {
   const graph = {

src/views/dashboard/configuration/widget/graph-styles/EndpointList.vue

@@ -33,17 +33,17 @@ import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
 
 const dashboardStore = useDashboardStore();
-const { selectedGrid } = dashboardStore;
+const graph = dashboardStore.selectedGrid.graph;
 const { t } = useI18n();
 
-const fontSize = ref(selectedGrid.graph.fontSize);
+const fontSize = ref(graph.fontSize);
 
 function updateConfig(param: { [key: string]: unknown }) {
   const graph = {
-    ...selectedGrid.graph,
+    ...dashboardStore.selectedGrid.graph,
     ...param,
   };
-  dashboardStore.selectWidget({ ...selectedGrid, graph });
+  dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
 }
 </script>
 <style lang="scss" scoped>

src/views/dashboard/configuration/widget/graph-styles/InstanceList.vue

@@ -34,15 +34,15 @@ import { useDashboardStore } from "@/store/modules/dashboard";
 
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
-const { selectedGrid } = dashboardStore;
-const fontSize = ref(selectedGrid.graph.fontSize);
+const graph = dashboardStore.selectedGrid.graph;
+const fontSize = ref(graph.fontSize);
 
 function updateConfig(param: { [key: string]: unknown }) {
   const graph = {
-    ...selectedGrid.graph,
+    ...dashboardStore.selectedGrid.graph,
     ...param,
   };
-  dashboardStore.selectWidget({ ...selectedGrid, graph });
+  dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
 }
 </script>
 <style lang="scss" scoped>

src/views/dashboard/configuration/widget/graph-styles/Line.vue

@@ -16,19 +16,19 @@ limitations under the License. -->
   <div>
     <span class="label">{{ t("showXAxis") }}</span>
     <el-switch
-      v-model="selectedGrid.graph.showXAxis"
+      v-model="graph.showXAxis"
       active-text="Yes"
       inactive-text="No"
-      @change="updateConfig({ showXAxis: selectedGrid.graph.showXAxis })"
+      @change="updateConfig({ showXAxis: graph.showXAxis })"
     />
   </div>
   <div>
     <span class="label">{{ t("showYAxis") }}</span>
     <el-switch
-      v-model="selectedGrid.graph.showYAxis"
+      v-model="graph.showYAxis"
       active-text="Yes"
       inactive-text="No"
-      @change="updateConfig({ showYAxis: selectedGrid.graph.showYAxis })"
+      @change="updateConfig({ showYAxis: graph.showYAxis })"
     />
   </div>
   <div>
@@ -60,23 +60,23 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
 
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
-const { selectedGrid } = dashboardStore;
-const smooth = ref(selectedGrid.graph.smooth);
-const showSymbol = ref(selectedGrid.graph.showSymbol);
-const step = ref(selectedGrid.graph.step);
+const graph = computed(() => dashboardStore.selectedGrid.graph || {});
+const smooth = ref(graph.value.smooth);
+const showSymbol = ref(graph.value.showSymbol);
+const step = ref(graph.value.step);
 
 function updateConfig(param: { [key: string]: unknown }) {
   const graph = {
-    ...selectedGrid.graph,
+    ...dashboardStore.selectedGrid.graph,
     ...param,
   };
-  dashboardStore.selectWidget({ ...selectedGrid, graph });
+  dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
 }
 </script>
 <style lang="scss" scoped>

src/views/dashboard/configuration/widget/graph-styles/ServiceList.vue

@@ -16,10 +16,10 @@ limitations under the License. -->
   <div class="item">
     <span class="label">{{ t("showGroup") }}</span>
     <el-switch
-      v-model="selectedGrid.graph.showGroup"
+      v-model="graph.showGroup"
       active-text="Yes"
       inactive-text="No"
-      @change="updateConfig({ showGroup: selectedGrid.graph.showGroup })"
+      @change="updateConfig({ showGroup: graph.showGroup })"
     />
   </div>
   <div class="item">
@@ -37,14 +37,14 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
 
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
-const { selectedGrid } = dashboardStore;
-const fontSize = ref(selectedGrid.graph.fontSize);
+const graph = computed(() => dashboardStore.selectedGrid.graph || {});
+const fontSize = ref(graph.value.fontSize);
 
 function updateConfig(param: { [key: string]: unknown }) {
   const { selectedGrid } = dashboardStore;

src/views/dashboard/configuration/widget/graph-styles/Table.vue

@@ -50,17 +50,17 @@ import { useDashboardStore } from "@/store/modules/dashboard";
 
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
-const { selectedGrid } = dashboardStore;
-const showTableValues = ref(selectedGrid.graph.showTableValues);
-const tableHeaderCol1 = ref(selectedGrid.graph.tableHeaderCol1);
-const tableHeaderCol2 = ref(selectedGrid.graph.tableHeaderCol2);
+const graph = dashboardStore.selectedGrid.graph || {};
+const showTableValues = ref(graph.showTableValues);
+const tableHeaderCol1 = ref(graph.tableHeaderCol1);
+const tableHeaderCol2 = ref(graph.tableHeaderCol2);
 
 function updateConfig(param: { [key: string]: unknown }) {
   const graph = {
-    ...selectedGrid.graph,
+    ...dashboardStore.selectedGrid.graph,
     ...param,
   };
-  dashboardStore.selectWidget({ ...selectedGrid, graph });
+  dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
 }
 </script>
 <style lang="scss" scoped>

src/views/dashboard/configuration/widget/graph-styles/TopList.vue

@@ -32,8 +32,8 @@ import { useDashboardStore } from "@/store/modules/dashboard";
 
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
-const { selectedGrid } = dashboardStore;
-const color = ref(selectedGrid.graph.color || "purple");
+const graph = dashboardStore.selectedGrid.graph || {};
+const color = ref(graph.color || "purple");
 const Colors = [
   { label: "Purple", value: "purple" },
   {

src/views/dashboard/configuration/widget/metric/Index.vue

@@ -349,6 +349,9 @@ async function queryMetrics() {
     return;
   }
   const { metricConfig, metricTypes, metrics } = dashboardStore.selectedGrid;
+  if (!(metrics && metrics[0] && metricTypes && metricTypes[0])) {
+    return;
+  }
   const catalog = await useGetMetricEntity(metrics[0], metricTypes[0]);
   const params = useQueryProcessor({ ...states, metricConfig, catalog });
   if (!params) {

src/views/dashboard/controls/Tab.vue

@@ -83,8 +83,8 @@ limitations under the License. -->
       v-model:layout="dashboardStore.currentTabItems"
       :col-num="24"
       :row-height="10"
-      :is-draggable="true"
-      :is-resizable="true"
+      :is-draggable="dashboardStore.editMode"
+      :is-resizable="dashboardStore.editMode"
       @layout-updated="layoutUpdatedEvent"
     >
       <grid-item
@@ -320,7 +320,7 @@ export default defineComponent({
 .vue-grid-item:not(.vue-grid-placeholder) {
   background: #fff;
   box-shadow: 0px 1px 4px 0px #00000029;
-  border-radius: 5px;
+  border-radius: 3px;
 }
 
 .tab-layout {

src/views/dashboard/controls/Text.vue

@@ -36,21 +36,21 @@ limitations under the License. -->
     </div>
     <div
       class="body"
-      :class="data.graph.textAlign === 'center' ? 'center' : ''"
       :style="{
-        backgroundColor: TextColors[data.graph.backgroundColor],
-        color: TextColors[data.graph.fontColor],
-        fontSize: data.graph.fontSize + 'px',
-        textAlign: data.graph.textAlign,
+        backgroundColor: TextColors[graph.backgroundColor],
+        color: TextColors[graph.fontColor],
+        fontSize: graph.fontSize + 'px',
+        textAlign: graph.textAlign,
       }"
     >
-      <a :href="data.graph.url" target="_blank">
-        {{ data.graph.content }}
+      <a :href="graph.url" target="_blank">
+        {{ graph.content }}
       </a>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
+import { computed } from "vue";
 import type { PropType } from "vue";
 import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
@@ -65,6 +65,7 @@ const props = defineProps({
   activeIndex: { type: String, default: "" },
 });
 const { t } = useI18n();
+const graph = computed(() => props.data.graph || {});
 const dashboardStore = useDashboardStore();
 
 function removeTopo() {
@@ -93,16 +94,11 @@ function editConfig() {
 }
 
 .body {
-  text-align: center;
+  padding: 5px 20px 0 10px;
   width: 100%;
   height: 100%;
   line-height: 100%;
   cursor: pointer;
-  -webkit-box-orient: horizontal;
-  -webkit-box-pack: center;
-  box-sizing: border-box;
-  display: -webkit-box;
-  // -webkit-box-align: left;
 }
 
 .tools {

src/views/dashboard/graphs/EndpointList.vue

@@ -53,7 +53,12 @@ limitations under the License. -->
                 v-if="config.metricTypes[index] === 'readMetricsValues'"
                 :data="{ [metric]: scope.row[metric] }"
                 :intervalTime="intervalTime"
-                :config="{ showXAxis: false, showYAxis: false }"
+                :config="{
+                  showXAxis: false,
+                  showYAxis: false,
+                  smallTips: true,
+                  showSymbol: true,
+                }"
               />
               <Card
                 v-else
@@ -204,7 +209,7 @@ watch(
 @import "./style.scss";
 
 .chart {
-  height: 39px;
+  height: 60px;
 }
 
 .inputs {

src/views/dashboard/graphs/HeatMap.vue

@@ -36,8 +36,11 @@ const props = defineProps({
 const option = computed(() => getOption());
 
 function getOption() {
-  const metric = props.config.metrics[0];
-  const nodes = (props.data[metric] && props.data[metric].nodes) || [];
+  const metric = props.config.metrics && props.config.metrics[0];
+  let nodes: any = [];
+  if (metric) {
+    nodes = (props.data[metric] && props.data[metric].nodes) || [];
+  }
   const source = (nodes || []).map((d: number[]) => d[2]);
   const maxItem = Math.max(...source);
   const minItem = Math.min(...source);

src/views/dashboard/graphs/InstanceList.vue

@@ -53,7 +53,12 @@ limitations under the License. -->
                 v-if="config.metricTypes[index] === 'readMetricsValues'"
                 :data="metric ? { [metric]: scope.row[metric] } : {}"
                 :intervalTime="intervalTime"
-                :config="{ showXAxis: false, showYAxis: false }"
+                :config="{
+                  showXAxis: false,
+                  showYAxis: false,
+                  smallTips: true,
+                  showSymbol: true,
+                }"
               />
               <Card
                 v-else
@@ -255,7 +260,7 @@ watch(
 @import "./style.scss";
 
 .chart {
-  height: 40px;
+  height: 60px;
 }
 
 .inputs {

src/views/dashboard/graphs/Line.vue

@@ -39,6 +39,7 @@ const props = defineProps({
       opacity: 0.4,
       showXAxis: true,
       showYAxis: true,
+      smallTips: false,
     }),
   },
 });
@@ -79,7 +80,7 @@ function getOption() {
       name: i,
       type: "line",
       symbol: "circle",
-      symbolSize: 8,
+      symbolSize: 6,
       showSymbol: props.config.showSymbol,
       step: props.config.step,
       smooth: props.config.smooth,
@@ -141,20 +142,31 @@ function getOption() {
       ];
       break;
   }
+  const tooltip = {
+    trigger: "axis",
+    backgroundColor: "rgb(50,50,50)",
+    textStyle: {
+      fontSize: 12,
+      color: "#ccc",
+    },
+    enterable: true,
+    extraCssText: "max-height: 300px; overflow: auto; border: none;",
+  };
+  const tips = {
+    formatter(params: any) {
+      return `${params[0].value[1]}`;
+    },
+    extraCssText: `height: 20px; padding:0 2px;`,
+    trigger: "axis",
+    textStyle: {
+      fontSize: 12,
+      color: "#333",
+    },
+  };
+
   return {
     color,
-    tooltip: {
-      trigger: "axis",
-      zlevel: 1000,
-      z: 60,
-      backgroundColor: "rgb(50,50,50)",
-      textStyle: {
-        fontSize: 13,
-        color: "#ccc",
-      },
-      enterable: true,
-      extraCssText: "max-height: 300px; overflow: auto; border: none",
-    },
+    tooltip: props.config.smallTips ? tips : tooltip,
     legend: {
       type: "scroll",
       show: keys.length === 1 ? false : true,

src/views/dashboard/graphs/ServiceList.vue

@@ -65,7 +65,12 @@ limitations under the License. -->
                 v-if="config.metricTypes[index] === 'readMetricsValues'"
                 :data="{ [metric]: scope.row[metric] }"
                 :intervalTime="intervalTime"
-                :config="{ showXAxis: false, showYAxis: false }"
+                :config="{
+                  showXAxis: false,
+                  showYAxis: false,
+                  smallTips: true,
+                  showSymbol: true,
+                }"
               />
               <Card
                 v-else
@@ -288,7 +293,7 @@ watch(
 @import "./style.scss";
 
 .chart {
-  height: 39px;
+  height: 60px;
 }
 
 .inputs {

src/views/dashboard/panel/Layout.vue

@@ -17,8 +17,8 @@ limitations under the License. -->
     v-model:layout="dashboardStore.layout"
     :col-num="24"
     :row-height="10"
-    :is-draggable="true"
-    :is-resizable="true"
+    :is-draggable="dashboardStore.editMode"
+    :is-resizable="dashboardStore.editMode"
     v-if="dashboardStore.layout.length"
   >
     <grid-item
@@ -86,7 +86,7 @@ export default defineComponent({
 .vue-grid-item:not(.vue-grid-placeholder) {
   background: #fff;
   box-shadow: 0px 1px 4px 0px #00000029;
-  border-radius: 5px;
+  border-radius: 3px;
 }
 
 .vue-grid-item.active {

src/views/dashboard/related/topology/components/PodTopology.vue

@@ -16,7 +16,9 @@ limitations under the License. -->
   <div class="tool">
     <span
       v-show="
-        dashboardStore.entity === EntityType[2].value && config.graph.showDepth
+        dashboardStore.entity === EntityType[2].value &&
+        config.graph &&
+        config.graph.showDepth
       "
     >
       <span class="label">{{ t("currentDepth") }}</span>
@@ -111,7 +113,9 @@ const width = ref<number>(100);
 const showSettings = ref<boolean>(false);
 const settings = ref<any>(props.config);
 const operationsPos = reactive<{ x: number; y: number }>({ x: NaN, y: NaN });
-const depth = ref<number>(props.config.graph.depth || 3);
+const depth = ref<number>(
+  (props.config.graph && props.config.graph.depth) || 3
+);
 const items = [
   { id: "inspect", title: "Inspect", func: inspect },
   { id: "dashboard", title: "View Dashboard", func: goDashboard },