update list graph

src/components/Graph.vue

@@ -38,7 +38,7 @@ const props = defineProps({
 
 onMounted(async () => {
   await setOptions(props.option);
-  addResizeListener(unref(chartRef), resize);
+  chartRef.value && addResizeListener(unref(chartRef), resize);
   setTimeout(() => {
     const instance = getInstance();
 

src/components/Selector.vue

@@ -22,6 +22,7 @@ limitations under the License. -->
     :multiple="multiple"
     :disabled="disabled"
     :style="{ borderRadius }"
+    :clearable="clearable"
   >
     <el-option
       v-for="item in options"
@@ -60,6 +61,7 @@ const props = defineProps({
   borderRadius: { type: Number, default: 3 },
   multiple: { type: Boolean, default: false },
   disabled: { type: Boolean, default: false },
+  clearable: { type: Boolean, default: false },
 });
 
 const selected = ref<string[] | string>(props.value);

src/hooks/useEcharts.ts

@@ -96,6 +96,7 @@ export function useECharts(
   }
 
   function setOptions(options: ECOption, clear = true) {
+    console.log(options);
     cacheOptions.value = options;
     if (unref(elRef)?.offsetHeight === 0) {
       useTimeoutFn(() => {

src/views/dashboard/configuration/Widget.vue

@@ -37,8 +37,9 @@ limitations under the License. -->
             metrics: dashboardStore.selectedGrid.metrics,
             metricTypes: dashboardStore.selectedGrid.metricTypes,
             standard: dashboardStore.selectedGrid.standard,
-            isEdit: true,
           }"
+          :isEdit="isEdit"
+          @changeOpt="setStatus"
         />
         <div v-show="!dashboardStore.selectedGrid.graph.type" class="no-data">
           {{ t("noData") }}
@@ -51,7 +52,11 @@ limitations under the License. -->
         :style="{ '--el-collapse-header-font-size': '15px' }"
       >
         <el-collapse-item :title="t('selectVisualization')" name="1">
-          <MetricOptions @update="getSource" @loading="setLoading" />
+          <MetricOptions
+            @update="getSource"
+            @changeOpt="setStatus"
+            @loading="setLoading"
+          />
         </el-collapse-item>
         <el-collapse-item :title="t('graphStyles')" name="2">
           <component :is="`${dashboardStore.selectedGrid.graph.type}Config`" />
@@ -85,6 +90,7 @@ import configs from "./widget/graph-styles";
 import WidgetOptions from "./widget/WidgetOptions.vue";
 import StandardOptions from "./widget/StandardOptions.vue";
 import MetricOptions from "./widget/MetricOptions.vue";
+import { ListChartTypes } from "../data";
 
 export default defineComponent({
   name: "ConfigEdit",
@@ -101,6 +107,7 @@ export default defineComponent({
     const dashboardStore = useDashboardStore();
     const appStoreWithOut = useAppStoreWithOut();
     const loading = ref<boolean>(false);
+    const isEdit = ref<boolean>(false);
     const states = reactive<{
       activeNames: string;
       source: unknown;
@@ -123,8 +130,13 @@ export default defineComponent({
     }
 
     function applyConfig() {
-      dashboardStore.setConfigs(dashboardStore.selectedGrid);
       dashboardStore.setConfigPanel(false);
+      setStatus(true);
+      dashboardStore.setConfigs(dashboardStore.selectedGrid);
+    }
+
+    function setStatus(p: boolean) {
+      isEdit.value = p;
     }
 
     function cancelConfig() {
@@ -143,6 +155,8 @@ export default defineComponent({
       cancelConfig,
       getSource,
       setLoading,
+      setStatus,
+      isEdit,
     };
   },
 });

src/views/dashboard/configuration/widget/MetricOptions.vue

@@ -22,6 +22,7 @@ limitations under the License. -->
       placeholder="Please select a dashboard name"
       @change="changeDashboard"
       class="selectors"
+      :clearable="true"
     />
   </div>
   <div>{{ t("metrics") }}</div>
@@ -63,7 +64,6 @@ limitations under the License. -->
       />
       <Icon
         class="cp"
-        v-show="states.metrics.length > 1"
         iconName="remove_circle_outline"
         size="middle"
         @click="deleteMetric(index)"
@@ -105,7 +105,7 @@ import { DashboardItem } from "@/types/dashboard";
 
 /*global defineEmits */
 const { t } = useI18n();
-const emit = defineEmits(["update", "loading"]);
+const emit = defineEmits(["update", "loading", "changeOpt"]);
 const dashboardStore = useDashboardStore();
 const { metrics, metricTypes, graph } = dashboardStore.selectedGrid;
 const states = reactive<{
@@ -116,7 +116,7 @@ const states = reactive<{
   isList: boolean;
   metricList: (Option & { type: string })[];
   dashboardName: string;
-  dashboardList: (DashboardItem & { label: string; value: string })[];
+  dashboardList: ((DashboardItem & { label: string; value: string }) | any)[];
 }>({
   metrics: metrics && metrics.length ? metrics : [""],
   metricTypes: metricTypes && metricTypes.length ? metricTypes : [""],
@@ -125,11 +125,11 @@ const states = reactive<{
   isList: false,
   metricList: [],
   dashboardName: graph.dashboardName,
-  dashboardList: [],
+  dashboardList: [{ label: "", value: "" }],
 });
 
 states.isList = ListChartTypes.includes(graph.type);
-const defaultLen = ref<number>(states.isList ? 5 : 10);
+const defaultLen = ref<number>(states.isList ? 5 : 20);
 states.visTypes = setVisTypes();
 
 setDashboards();
@@ -197,7 +197,7 @@ async function setMetricType() {
 function setDashboards() {
   const { graph } = dashboardStore.selectedGrid;
   const list = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
-  states.dashboardList = list.reduce(
+  const arr = list.reduce(
     (
       prev: (DashboardItem & { label: string; value: string })[],
       d: DashboardItem
@@ -219,6 +219,8 @@ function setDashboards() {
     },
     []
   );
+
+  states.dashboardList = arr.length ? arr : [{ label: "", value: "" }];
 }
 
 function setVisTypes() {
@@ -281,6 +283,7 @@ function changeMetrics(
     ...{ metricTypes: states.metricTypes, metrics: states.metrics },
   });
   if (states.isList) {
+    emit("changeOpt", true);
     return;
   }
   queryMetrics();
@@ -311,6 +314,7 @@ function changeMetricType(index: number, opt: Option[] | any) {
     ...{ metricTypes: states.metricTypes },
   });
   if (states.isList) {
+    emit("changeOpt", true);
     return;
   }
   queryMetrics();
@@ -338,7 +342,11 @@ async function queryMetrics() {
 }
 
 function changeDashboard(opt: any) {
+  if (!opt[0]) {
+    states.dashboardName = "";
+  } else {
     states.dashboardName = opt[0].value;
+  }
   const graph = {
     ...dashboardStore.selectedGrid.graph,
     dashboardName: states.dashboardName,
@@ -358,6 +366,11 @@ function addMetric() {
   states.metricTypes.push("");
 }
 function deleteMetric(index: number) {
+  if (states.metrics.length === 1) {
+    states.metrics = [""];
+    states.metricTypes = [""];
+    return;
+  }
   states.metrics.splice(index, 1);
   states.metricTypes.splice(index, 1);
 }

src/views/dashboard/graphs/EndpointList.vue

@@ -93,7 +93,7 @@ import { EntityType } from "../data";
 import router from "@/router";
 import getDashboard from "@/hooks/useDashboardsSession";
 
-/*global defineProps */
+/*global defineProps, defineEmits */
 const props = defineProps({
   data: {
     type: Object,
@@ -104,14 +104,14 @@ const props = defineProps({
         i: string;
         metrics: string[];
         metricTypes: string[];
-        isEdit: boolean;
       }
     >,
     default: () => ({ dashboardName: "", fontSize: 12, i: "" }),
   },
   intervalTime: { type: Array as PropType<string[]>, default: () => [] },
-  needQuery: { type: Boolean, default: false },
+  isEdit: { type: Boolean, default: false },
 });
+const emit = defineEmits(["changeOpt"]);
 const selectorStore = useSelectorStore();
 const dashboardStore = useDashboardStore();
 const chartLoading = ref<boolean>(false);
@@ -135,12 +135,12 @@ async function queryEndpoints(limit?: number) {
     return;
   }
   endpoints.value = selectorStore.pods.splice(0, pageSize);
-  if (!endpoints.value.length || props.config.isEdit) {
-    return;
-  }
   await 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]) {
@@ -186,11 +186,9 @@ async function searchList() {
 }
 watch(
   () => [props.config.metricTypes, props.config.metrics],
-  () => {
+  async () => {
-    if (!endpoints.value.length) {
+    await queryEndpointMetrics(endpoints.value);
-      return;
+    emit("changeOpt", false);
-    }
-    queryEndpointMetrics(endpoints.value);
   }
 );
 watch(

src/views/dashboard/graphs/InstanceList.vue

@@ -158,6 +158,9 @@ async function queryInstance() {
 }
 
 async function queryInstanceMetrics(currentInstances: Instance[]) {
+  if (!instances.value.length) {
+    return;
+  }
   const { metrics } = props.config;
 
   if (metrics.length && metrics[0]) {
@@ -209,9 +212,6 @@ function searchList() {
 watch(
   () => [props.config.metricTypes, props.config.metrics],
   () => {
-    if (!instances.value.length) {
-      return;
-    }
     queryInstanceMetrics(instances.value);
   }
 );