fix: update selectors

src/components/Selector.vue

@@ -33,7 +33,7 @@ limitations under the License. -->
   </el-select>
 </template>
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import type { PropType } from "vue";
 import { ElSelect, ElOption } from "element-plus";
 
@@ -70,6 +70,12 @@ function changeSelected() {
   );
   emit("change", options);
 }
+watch(
+  () => props.value,
+  (data) => {
+    selected.value = data;
+  }
+);
 </script>
 <style lang="scss" scope>
 .icon {

src/views/dashboard/configuration/MetricOptions.vue

@@ -44,20 +44,26 @@ limitations under the License. -->
       @change="changeMetricType(index, $event)"
       class="selectors"
     />
-    <Icon
-      class="cp mr-5"
-      v-show="index === states.metrics.length - 1 && states.metrics.length < 5"
-      iconName="add_circle_outlinecontrol_point"
-      size="middle"
-      @click="addMetric"
-    />
-    <Icon
-      class="cp"
-      v-show="states.metrics.length > 1"
-      iconName="remove_circle_outline"
-      size="middle"
-      @click="deleteMetric(index)"
-    />
+    <span
+      v-show="states.isTable || states.metricTypes[0] === 'readMetricsValues'"
+    >
+      <Icon
+        class="cp mr-5"
+        v-show="
+          index === states.metrics.length - 1 && states.metrics.length < 5
+        "
+        iconName="add_circle_outlinecontrol_point"
+        size="middle"
+        @click="addMetric"
+      />
+      <Icon
+        class="cp"
+        v-show="states.metrics.length > 1"
+        iconName="remove_circle_outline"
+        size="middle"
+        @click="deleteMetric(index)"
+      />
+    </span>
   </div>
 </template>
 <script lang="ts" setup>

src/views/dashboard/data.ts

@@ -117,18 +117,6 @@ export const MetricChartType: { [key: string]: string } = {
   readHeatMap: "ChartHeatmap",
   readSampledRecords: "ChartSlow",
 };
-export const CalculationType = [
-  { label: "Plus", value: "+" },
-  { label: "Minus", value: "-" },
-  { label: "Multiplication", value: "*" },
-  { label: "Division", value: "/" },
-  { label: "Convert Unix Timestamp(milliseconds)", value: "milliseconds" },
-  { label: "Convert Unix Timestamp(seconds)", value: "seconds" },
-];
-export const ReadValueChartType = [
-  { value: "ChartNum", label: "Digital Card" },
-  { value: "ChartSlow", label: "Slow Chart" },
-];
 
 export enum MetricCatalog {
   SERVICE = "Service",
@@ -139,14 +127,6 @@ export enum MetricCatalog {
   SERVICE_INSTANCE_RELATION = "ServiceInstanceRelation",
   ENDPOINT_RELATION = "EndpointRelation",
 }
-
-export enum MetricsName {
-  SERVICE_RESP_TIME = "service_resp_time",
-  SERVICE_SLA = "service_sla",
-  SERVICE_CPM = "service_cpm",
-  SERVICE_PERCENTILE = "service_percentile",
-  SERVICE_APDEX = "service_apdex",
-}
 export const EntityType = [
   { value: "Service", label: "Service", key: 1 },
   { value: "All", label: "All", key: 10 },