feat: add content

src/components/Selector.vue

@@ -55,7 +55,7 @@ const props = defineProps({
     type: [Array, String] as PropType<string[] | string>,
     default: () => [],
   },
-  size: { type: String },
+  size: { type: String, default: "default" },
   placeholder: { type: String, default: "Select a option" },
   borderRadius: { type: Number, default: 3 },
   multiple: { type: Boolean, default: false },

src/locales/lang/en.ts

@@ -75,6 +75,12 @@ const msg = {
   areaOpacity: "Area Opacity",
   editGraph: "Edit Graph Options",
   dashboardName: "Select Dashboard Name",
+  linkDashboard: "Dashboard name related with topology calls",
+  linkMetrics: "Metrics related with topology calls",
+  nodeDashboard: "Dashboard name related with topology nodes",
+  nodeMetrics: "Metrics related with topology nodes",
+  instanceDashboard: "Dashboard name related with service instances",
+  endpointDashboard: "Dashboard name related with endpoints",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",
   secondTip: "Select Second",

src/locales/lang/zh.ts

@@ -74,6 +74,12 @@ const msg = {
   areaOpacity: "透明度",
   editGraph: "编辑图表选项",
   dashboardName: "选择仪表板名称",
+  linkDashboard: "拓扑线关联的仪表板名称",
+  linkMetrics: "拓扑线关联的指标",
+  nodeDashboard: "拓节点关联的仪表板名称",
+  nodeMetrics: "拓扑节点关联的指标",
+  instanceDashboard: "拓节点关联的实例的仪表板名称",
+  endpointDashboard: "拓节点端点的实例的仪表板名称",
   hourTip: "选择小时",
   minuteTip: "选择分钟",
   secondTip: "选择秒数",

src/views/dashboard/related/topology/Graph.vue

@@ -19,7 +19,7 @@ limitations under the License. -->
     v-loading="loading"
     :style="`height: ${height}`"
   >
-    <div class="setting" v-show="showSetting">
+    <div class="setting" v-if="showSetting">
       <Settings @update="updateSettings" />
     </div>
     <Icon

src/views/dashboard/related/topology/Settings.vue

@@ -15,7 +15,7 @@ limitations under the License. -->
 <template>
   <div class="link-settings">
     <h5 class="title">Call settings</h5>
-    <div class="label">{{ t("dashboards") }}</div>
+    <div class="label">{{ t("linkDashboard") }}</div>
     <el-input
       v-model="states.linkDashboard"
       placeholder="Please input a dashboard name for calls"
@@ -23,20 +23,20 @@ limitations under the License. -->
       size="small"
       class="inputs"
     />
-    <div class="label">{{ t("metrics") }}</div>
+    <div class="label">{{ t("linkMetrics") }}</div>
     <Selector
       class="inputs"
       :multiple="true"
       :value="states.linkMetrics"
       :options="states.linkMetricList"
       size="small"
-      placeholder="Select a metric"
+      placeholder="Select metrics"
       @change="changeLinkMetrics"
     />
   </div>
   <div class="node-settings">
     <h5 class="title">Node settings</h5>
-    <div class="label">{{ t("dashboards") }}</div>
+    <div class="label">{{ t("nodeDashboard") }}</div>
     <el-input
       v-model="states.nodeDashboard"
       placeholder="Please input a dashboard name for nodes"
@@ -44,7 +44,7 @@ limitations under the License. -->
       size="small"
       class="inputs"
     />
-    <div class="label">{{ t("dashboards") }}</div>
+    <div class="label">{{ t("instanceDashboard") }}</div>
     <el-input
       v-model="states.instanceDashboard"
       placeholder="Please input a dashboard name for service instances"
@@ -52,7 +52,7 @@ limitations under the License. -->
       size="small"
       class="inputs"
     />
-    <div class="label">{{ t("dashboards") }}</div>
+    <div class="label">{{ t("endpointDashboard") }}</div>
     <el-input
       v-model="states.endpointDashboard"
       placeholder="Please input a dashboard name for endpoints"
@@ -60,14 +60,14 @@ limitations under the License. -->
       size="small"
       class="inputs"
     />
-    <div class="label">{{ t("metrics") }}</div>
+    <div class="label">{{ t("nodeMetrics") }}</div>
     <Selector
       class="inputs"
       :multiple="true"
       :value="states.nodeMetrics"
       :options="states.nodeMetricList"
       size="small"
-      placeholder="Select a metric"
+      placeholder="Select metrics"
       @change="changeNodeMetrics"
     />
   </div>