fix: update style and set labels (#50)

src/layout/components/NavBar.vue

@@ -34,7 +34,8 @@ limitations under the License. -->
         <el-popover
           trigger="hover"
           width="250"
-          placement="left-end"
+          placement="bottom"
+          effect="light"
           :content="appStore.version"
         >
           <template #reference>

src/views/dashboard/configuration/Widget.vue

@@ -37,8 +37,6 @@ limitations under the License. -->
             metricTypes: dashboardStore.selectedGrid.metricTypes,
             metricConfig: dashboardStore.selectedGrid.metricConfig,
           }"
-          :isEdit="isEdit"
-          @changeOpt="setStatus"
         />
         <div v-show="!graph.type" class="no-data">
           {{ t("noData") }}
@@ -51,11 +49,7 @@ limitations under the License. -->
         :style="{ '--el-collapse-header-font-size': '15px' }"
       >
         <el-collapse-item :title="t('selectVisualization')" name="1">
-          <MetricOptions
+          <MetricOptions @update="getSource" @loading="setLoading" />
-            @update="getSource"
-            @changeOpt="setStatus"
-            @loading="setLoading"
-          />
         </el-collapse-item>
         <el-collapse-item :title="t('graphStyles')" name="2">
           <component :is="`${graph.type}Config`" />
@@ -100,7 +94,6 @@ 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;
@@ -128,14 +121,9 @@ export default defineComponent({
 
     function applyConfig() {
       dashboardStore.setConfigPanel(false);
-      setStatus();
       dashboardStore.setConfigs(dashboardStore.selectedGrid);
     }
 
-    function setStatus() {
-      isEdit.value = true;
-    }
-
     function cancelConfig() {
       dashboardStore.selectWidget(originConfig);
       dashboardStore.setConfigPanel(false);
@@ -152,8 +140,6 @@ export default defineComponent({
       cancelConfig,
       getSource,
       setLoading,
-      setStatus,
-      isEdit,
       widget,
       graph,
       title,

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

@@ -120,7 +120,7 @@ import Standard from "./Standard.vue";
 
 /*global defineEmits */
 const { t } = useI18n();
-const emit = defineEmits(["update", "loading", "changeOpt"]);
+const emit = defineEmits(["update", "loading"]);
 const dashboardStore = useDashboardStore();
 const metrics = computed(() => dashboardStore.selectedGrid.metrics || []);
 const graph = computed(() => dashboardStore.selectedGrid.graph || {});
@@ -308,7 +308,6 @@ function changeMetrics(
     ...{ metricTypes: states.metricTypes, metrics: states.metrics },
   });
   if (states.isList) {
-    emit("changeOpt");
     return;
   }
   queryMetrics();
@@ -339,7 +338,6 @@ function changeMetricType(index: number, opt: Option[] | any) {
     ...{ metricTypes: states.metricTypes },
   });
   if (states.isList) {
-    emit("changeOpt");
     return;
   }
   queryMetrics();

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

@@ -26,7 +26,7 @@ limitations under the License. -->
         "
       />
     </div>
-    <div class="item mb-10" v-show="metricType === 'readLabeledMetricsValues'">
+    <div class="item mb-10" v-if="hasLabel">
       <span class="label">{{ t("labels") }}</span>
       <el-input
         class="input"
@@ -40,7 +40,7 @@ limitations under the License. -->
         "
       />
     </div>
-    <div class="item mb-10" v-show="metricType === 'readLabeledMetricsValues'">
+    <div class="item mb-10" v-if="metricType === 'readLabeledMetricsValues'">
       <span class="label">{{ t("labelsIndex") }}</span>
       <el-input
         class="input"
@@ -95,6 +95,7 @@ import { useI18n } from "vue-i18n";
 import { SortOrder, CalculationOpts } from "../../../data";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { MetricConfigOpt } from "@/types/dashboard";
+import { ListChartTypes } from "../../../data";
 
 /*global defineEmits, defineProps */
 const props = defineProps({
@@ -113,6 +114,13 @@ const currentMetric = ref<MetricConfigOpt>({
 });
 const metricTypes = dashboardStore.selectedGrid.metricTypes || [];
 const metricType = ref<string>(metricTypes[props.index]);
+const hasLabel = computed(() => {
+  const graph = dashboardStore.selectedGrid.graph || {};
+  return (
+    ListChartTypes.includes(graph.type) ||
+    metricType.value === "readLabeledMetricsValues"
+  );
+});
 const isTopn = computed(() =>
   ["sortMetrics", "readSampledRecords"].includes(metricTypes[props.index])
 );
@@ -121,7 +129,7 @@ function updateConfig(index: number, param: { [key: string]: string }) {
   if (!key) {
     return;
   }
-  changeConfigs(index, { key: decodeURIComponent(param[key]) });
+  changeConfigs(index, { [key]: decodeURIComponent(param[key]) });
 }
 function changeConfigs(
   index: number,
@@ -130,7 +138,6 @@ function changeConfigs(
   const metricConfig = dashboardStore.selectedGrid.metricConfig || [];
 
   metricConfig[index] = { ...metricConfig[index], ...param };
-  currentMetric.value = metricConfig[index];
   dashboardStore.selectWidget({
     ...dashboardStore.selectedGrid,
     metricConfig,

src/views/dashboard/graphs/EndpointList.vue

@@ -44,7 +44,9 @@ limitations under the License. -->
         </el-table-column>
         <el-table-column
           v-for="(metric, index) in colMetrics"
-          :label="`${metric} ${decodeURIComponent(getUnit(index))}`"
+          :label="`${decodeURIComponent(
+            getLabel(metric, index)
+          )} ${decodeURIComponent(getUnit(index))}`"
           :key="metric + index"
         >
           <template #default="scope">
@@ -110,7 +112,6 @@ const props = defineProps({
     }),
   },
   intervalTime: { type: Array as PropType<string[]>, default: () => [] },
-  isEdit: { type: Boolean, default: false },
 });
 // const emit = defineEmits(["changeOpt"]);
 const selectorStore = useSelectorStore();
@@ -183,20 +184,28 @@ async function searchList() {
 }
 function getUnit(index: number) {
   const u =
-    (props.config.metricConfig &&
+    props.config.metricConfig &&
     props.config.metricConfig[index] &&
-      props.config.metricConfig[index].unit) ||
+    props.config.metricConfig[index].unit;
-    "";
   if (u) {
     return `(${encodeURIComponent(u)})`;
   }
   return encodeURIComponent("");
 }
+function getLabel(metric: string, index: number) {
+  const label =
+    props.config.metricConfig &&
+    props.config.metricConfig[index] &&
+    props.config.metricConfig[index].label;
+  if (label) {
+    return encodeURIComponent(label);
+  }
+  return encodeURIComponent(metric);
+}
 watch(
   () => [props.config.metricTypes, props.config.metrics],
   async () => {
     queryEndpointMetrics(endpoints.value);
-    // emit("changeOpt", false);
   }
 );
 watch(

src/views/dashboard/graphs/InstanceList.vue

@@ -44,7 +44,9 @@ limitations under the License. -->
         </el-table-column>
         <el-table-column
           v-for="(metric, index) in colMetrics"
-          :label="`${metric} ${decodeURIComponent(getUnit(index))}`"
+          :label="`${decodeURIComponent(
+            getLabel(metric, index)
+          )} ${decodeURIComponent(getUnit(index))}`"
           :key="metric + index"
         >
           <template #default="scope">
@@ -234,16 +236,26 @@ function searchList() {
 
 function getUnit(index: number) {
   const u =
-    (props.config.metricConfig &&
+    props.config.metricConfig &&
     props.config.metricConfig[index] &&
-      props.config.metricConfig[index].unit) ||
+    props.config.metricConfig[index].unit;
-    "";
   if (u) {
     return `(${encodeURIComponent(u)})`;
   }
   return encodeURIComponent("");
 }
 
+function getLabel(metric: string, index: number) {
+  const label =
+    props.config.metricConfig &&
+    props.config.metricConfig[index] &&
+    props.config.metricConfig[index].label;
+  if (label) {
+    return encodeURIComponent(label);
+  }
+  return encodeURIComponent(metric);
+}
+
 watch(
   () => [props.config.metricTypes, props.config.metrics],
   () => {

src/views/dashboard/graphs/ServiceList.vue

@@ -56,7 +56,9 @@ limitations under the License. -->
         </el-table-column>
         <el-table-column
           v-for="(metric, index) in colMetrics"
-          :label="`${metric} ${decodeURIComponent(getUnit(index))}`"
+          :label="`${decodeURIComponent(
+            getLabel(metric, index)
+          )} ${decodeURIComponent(getUnit(index))}`"
           :key="metric + index"
         >
           <template #default="scope">
@@ -276,15 +278,24 @@ function searchList() {
 }
 function getUnit(index: number) {
   const u =
-    (props.config.metricConfig &&
+    props.config.metricConfig &&
     props.config.metricConfig[index] &&
-      props.config.metricConfig[index].unit) ||
+    props.config.metricConfig[index].unit;
-    "";
   if (u) {
     return `(${encodeURIComponent(u)})`;
   }
   return encodeURIComponent("");
 }
+function getLabel(metric: string, index: number) {
+  const label =
+    props.config.metricConfig &&
+    props.config.metricConfig[index] &&
+    props.config.metricConfig[index].label;
+  if (label) {
+    return encodeURIComponent(label);
+  }
+  return encodeURIComponent(metric);
+}
 watch(
   () => [props.config.metricTypes, props.config.metrics],
   () => {

src/views/dashboard/panel/Tool.vue

@@ -98,7 +98,7 @@ limitations under the License. -->
             </el-dropdown-menu>
           </template>
         </el-dropdown>
-        <el-tooltip content="Apply" placement="bottom">
+        <el-tooltip content="Apply" placement="bottom" effect="light">
           <i @click="applyDashboard">
             <Icon class="icon-btn" size="sm" iconName="save" />
           </i>