fix: update tooltips and controls (#49)

src/views/dashboard/graphs/Card.vue

@@ -22,13 +22,14 @@ limitations under the License. -->
   >
     {{ singleVal.toFixed(2) }}
     <span v-show="config.showUnit">
-      {{ metricConfig[0]?.unit }}
+      {{ decodeURIComponent(unit) }}
     </span>
   </div>
-  <div class="center no-data" v-else>No Data</div>
+  <div class="center no-data" v-else>{{ t("noData") }}</div>
 </template>
 <script lang="ts" setup>
 import { computed, PropType } from "vue";
+import { useI18n } from "vue-i18n";
 import { CardConfig, MetricConfigOpt } from "@/types/dashboard";
 
 /*global defineProps */
@@ -47,9 +48,13 @@ const props = defineProps({
     }),
   },
 });
+const { t } = useI18n();
 const metricConfig = computed(() => props.config.metricConfig || []);
 const key = computed(() => Object.keys(props.data)[0]);
 const singleVal = computed(() => Number(props.data[key.value]));
+const unit = computed(
+  () => metricConfig.value[0] && encodeURIComponent(metricConfig.value[0].unit)
+);
 </script>
 <style lang="scss" scoped>
 .chart-card {

src/views/dashboard/graphs/EndpointList.vue

@@ -43,8 +43,8 @@ limitations under the License. -->
           </template>
         </el-table-column>
         <el-table-column
-          v-for="(metric, index) in config.metrics"
-          :label="`${metric} ${getUnit(index)}`"
+          v-for="(metric, index) in colMetrics"
+          :label="`${metric} ${decodeURIComponent(getUnit(index))}`"
           :key="metric + index"
         >
           <template #default="scope">
@@ -73,7 +73,7 @@ limitations under the License. -->
   </div>
 </template>
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref, watch, computed } from "vue";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { ElMessage } from "element-plus";
 import type { PropType } from "vue";
@@ -118,6 +118,7 @@ const dashboardStore = useDashboardStore();
 const chartLoading = ref<boolean>(false);
 const endpoints = ref<Endpoint[]>([]);
 const searchText = ref<string>("");
+const colMetrics = computed(() => props.config.metrics.map((d: string) => d));
 
 queryEndpoints();
 
@@ -187,9 +188,9 @@ function getUnit(index: number) {
       props.config.metricConfig[index].unit) ||
     "";
   if (u) {
-    return `(${u})`;
+    return `(${encodeURIComponent(u)})`;
   }
-  return u;
+  return encodeURIComponent("");
 }
 watch(
   () => [props.config.metricTypes, props.config.metrics],

src/views/dashboard/graphs/InstanceList.vue

@@ -43,8 +43,8 @@ limitations under the License. -->
           </template>
         </el-table-column>
         <el-table-column
-          v-for="(metric, index) in config.metrics"
-          :label="`${metric} ${getUnit(index)}`"
+          v-for="(metric, index) in colMetrics"
+          :label="`${metric} ${decodeURIComponent(getUnit(index))}`"
           :key="metric + index"
         >
           <template #default="scope">
@@ -103,7 +103,7 @@ limitations under the License. -->
   </div>
 </template>
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref, watch, computed } from "vue";
 import { useI18n } from "vue-i18n";
 import { ElMessage } from "element-plus";
 import type { PropType } from "vue";
@@ -149,6 +149,7 @@ const chartLoading = ref<boolean>(false);
 const instances = ref<Instance[]>([]); // current instances
 const pageSize = 10;
 const searchText = ref<string>("");
+const colMetrics = computed(() => props.config.metrics.map((d: string) => d));
 
 queryInstance();
 async function queryInstance() {
@@ -238,9 +239,9 @@ function getUnit(index: number) {
       props.config.metricConfig[index].unit) ||
     "";
   if (u) {
-    return `(${u})`;
+    return `(${encodeURIComponent(u)})`;
   }
-  return u;
+  return encodeURIComponent("");
 }
 
 watch(

src/views/dashboard/graphs/Line.vue

@@ -150,12 +150,14 @@ function getOption() {
       color: "#ccc",
     },
     enterable: true,
+    confine: true,
     extraCssText: "max-height: 300px; overflow: auto; border: none;",
   };
   const tips = {
     formatter(params: any) {
       return `${params[0].value[1]}`;
     },
+    confine: true,
     extraCssText: `height: 20px; padding:0 2px;`,
     trigger: "axis",
     textStyle: {

src/views/dashboard/graphs/ServiceList.vue

@@ -55,8 +55,8 @@ limitations under the License. -->
           </template>
         </el-table-column>
         <el-table-column
-          v-for="(metric, index) in config.metrics"
-          :label="`${metric} ${getUnit(index)}`"
+          v-for="(metric, index) in colMetrics"
+          :label="`${metric} ${decodeURIComponent(getUnit(index))}`"
           :key="metric + index"
         >
           <template #default="scope">
@@ -96,7 +96,7 @@ limitations under the License. -->
   </div>
 </template>
 <script setup lang="ts">
-import { watch, ref } from "vue";
+import { watch, ref, computed } from "vue";
 import { ElMessage } from "element-plus";
 import type { PropType } from "vue";
 import { ServiceListConfig } from "@/types/dashboard";
@@ -138,6 +138,9 @@ const services = ref<Service[]>([]);
 const searchText = ref<string>("");
 const groups = ref<any>({});
 const sortServices = ref<(Service & { merge: boolean })[]>([]);
+const colMetrics = computed(() =>
+  props.config.metrics.filter((d: string) => d)
+);
 
 queryServices();
 
@@ -278,9 +281,9 @@ function getUnit(index: number) {
       props.config.metricConfig[index].unit) ||
     "";
   if (u) {
-    return `(${u})`;
+    return `(${encodeURIComponent(u)})`;
   }
-  return u;
+  return encodeURIComponent("");
 }
 watch(
   () => [props.config.metricTypes, props.config.metrics],