update table

src/store/modules/dashboard.ts

@@ -227,6 +227,7 @@ export const dashboardStore = defineStore({
       this.showConfig = show;
     },
     selectWidget(item: Nullable<LayoutConfig>) {
+      console.log(item);
       this.selectedGrid = item;
     },
     setLayer(id: string) {

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

@@ -144,10 +144,14 @@ async function setMetricType() {
   }
   states.metricList = (json.data.metrics || []).filter(
     (d: { catalog: string; type: string }) => {
-      if (states.isList || graph.type === "Table") {
+      if (states.isList) {
         if (d.type === MetricsType.REGULAR_VALUE) {
           return d;
         }
+      } else if (graph.type === "Table") {
+        if (d.type === MetricsType.LABELED_VALUE) {
+          return d;
+        }
       } else {
         return d;
       }

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

@@ -33,7 +33,7 @@ limitations under the License. -->
       @change="changeStandardOpt({ sortOrder })"
     />
   </div>
-  <div class="item" v-show="percentile">
+  <div class="item">
     <span class="label">{{ t("labels") }}</span>
     <el-input
       class="input"
@@ -43,7 +43,7 @@ limitations under the License. -->
       @change="changeStandardOpt"
     />
   </div>
-  <div class="item" v-show="percentile">
+  <div class="item">
     <span class="label">{{ t("labelsIndex") }}</span>
     <el-input
       class="input"
@@ -134,7 +134,7 @@ const emit = defineEmits(["update", "loading"]);
 const dashboardStore = useDashboardStore();
 const { selectedGrid } = dashboardStore;
 const percentile = ref<boolean>(
-  selectedGrid.metricTypes.includes("readLabeledMetricsValues")
+  dashboardStore.selectedGrid.metricTypes.includes("readLabeledMetricsValues")
 );
 const sortOrder = ref<string>(selectedGrid.standard.sortOrder || "DES");
 

src/views/dashboard/graphs/Table.vue

@@ -21,13 +21,13 @@ limitations under the License. -->
         :style="`width: ${nameWidth + initWidth}px`"
       >
         <div class="name" :style="`width: ${nameWidth}px`">
-          {{ config.graph.tableHeaderCol1 || t("name") }}
+          {{ config.tableHeaderCol1 || t("name") }}
           <i class="r cp" ref="draggerName">
             <Icon iconName="settings_ethernet" size="middle" />
           </i>
         </div>
         <div class="value-col" v-if="showTableValues">
-          {{ config.graph.tableHeaderCol2 || t("value") }}
+          {{ config.tableHeaderCol2 || t("value") }}
         </div>
       </div>
       <div
@@ -60,11 +60,9 @@ const props = defineProps({
   },
   config: {
     type: Object as PropType<{
-      graph: {
-        showTableValues: boolean;
-        tableHeaderCol2: string;
-        tableHeaderCol1: string;
-      };
+      showTableValues: boolean;
+      tableHeaderCol2: string;
+      tableHeaderCol1: string;
       metricTypes: string[];
     }>,
     default: () => ({ showTableValues: true }),
@@ -77,15 +75,15 @@ const chartTable = ref<Nullable<HTMLElement>>(null);
 const initWidth = ref<number>(0);
 const nameWidth = ref<number>(0);
 const draggerName = ref<Nullable<HTMLElement>>(null);
-const showTableValues = ref<boolean>(props.config.graph.showTableValues);
+const showTableValues = ref<boolean>(props.config.showTableValues || false);
 onMounted(() => {
   if (!chartTable.value) {
     return;
   }
-  const width = props.config.graph.showTableValues
+  const width = props.config.showTableValues
     ? chartTable.value.offsetWidth / 2
     : chartTable.value.offsetWidth;
-  initWidth.value = props.config.graph.showTableValues
+  initWidth.value = props.config.showTableValues
     ? chartTable.value.offsetWidth / 2
     : 0;
   nameWidth.value = width - 5;