From 846aada0e28378ad41cdc1b6b9cbfaadc0bb3d82 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Fri, 18 Mar 2022 21:30:27 +0800
Subject: [PATCH] update table style

---
 src/locales/lang/en.ts                        |  2 +
 src/locales/lang/zh.ts                        |  2 +
 src/views/Layer.vue                           |  8 ++-
 src/views/dashboard/Edit.vue                  | 18 ++---
 .../widget/graph-styles/ServiceList.vue       |  8 ++-
 src/views/dashboard/controls/Log.vue          |  9 ++-
 src/views/dashboard/controls/Profile.vue      |  9 ++-
 src/views/dashboard/controls/Tab.vue          | 10 ++-
 src/views/dashboard/controls/Topology.vue     |  9 ++-
 src/views/dashboard/controls/Trace.vue        |  4 +-
 src/views/dashboard/controls/Widget.vue       | 10 ++-
 src/views/dashboard/graphs/EndpointList.vue   | 70 ++++++++++---------
 src/views/dashboard/graphs/InstanceList.vue   | 70 ++++++++++---------
 src/views/dashboard/graphs/ServiceList.vue    |  8 +--
 src/views/dashboard/graphs/style.scss         |  5 ++
 src/views/dashboard/panel/Layout.vue          |  5 +-
 16 files changed, 148 insertions(+), 99 deletions(-)

diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts
index 306fdf5a..2c56f8b4 100644
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@@ -110,6 +110,8 @@ const msg = {
   showYAxis: "Show Y Axis",
   nameError: "The dashboard name cannot be duplicate",
   showGroup: "Show Group",
+  noRoot: "Please set a root dashboard for",
+  noWidget: "Please add widgets.",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",
   secondTip: "Select Second",
diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts
index ecfdce28..36c4a195 100644
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@@ -109,7 +109,9 @@ const msg = {
   showXAxis: "显示X轴",
   showYAxis: "显示Y轴",
   nameError: "仪表板名称不能重复",
+  noRoot: "请设置根仪表板，为",
   showGroup: "显示分组",
+  noWidget: "请添加组件",
   hourTip: "选择小时",
   minuteTip: "选择分钟",
   secondTip: "选择秒数",
diff --git a/src/views/Layer.vue b/src/views/Layer.vue
index 954023a5..9df046cc 100644
--- a/src/views/Layer.vue
+++ b/src/views/Layer.vue
@@ -14,16 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <Edit v-if="dashboardStore.currentDashboard" />
-  <div class="no-root" v-else>Please set a root dashboard for {{ layer }}</div>
+  <div class="no-root" v-else>{{ t("noRoot") }}{{ layer }}</div>
 </template>
 
 <script lang="ts" setup>
 import { ref, watch } from "vue";
 import { useRoute } from "vue-router";
+import { useI18n } from "vue-i18n";
 import { EntityType } from "./dashboard/data";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import Edit from "./dashboard/Edit.vue";
 
+const { t } = useI18n();
 const route = useRoute();
 const dashboardStore = useDashboardStore();
 const routeNames = [
@@ -90,4 +92,8 @@ watch(
   text-align: center;
   color: #888;
 }
+
+.layer {
+  height: 100%;
+}
 </style>
diff --git a/src/views/dashboard/Edit.vue b/src/views/dashboard/Edit.vue
index f0f0df03..cde7b6b1 100644
--- a/src/views/dashboard/Edit.vue
+++ b/src/views/dashboard/Edit.vue
@@ -14,7 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <Tool v-if="p.entity" />
-  <div class="ds-main" @click="handleClick">
+  <div
+    class="ds-main"
+    @click="handleClick"
+    :style="{ height: p.entity ? 'calc(100% - 45px)' : '100%' }"
+  >
     <grid-layout />
     <el-dialog
       v-model="dashboardStore.showConfig"
@@ -92,18 +96,6 @@ function handleClick(e: any) {
 </script>
 <style lang="scss" scoped>
 .ds-main {
-  height: calc(100% - 45px);
   overflow: auto;
 }
-
-.layout {
-  height: 100%;
-  flex-grow: 2;
-  overflow: hidden;
-}
-
-.grids {
-  height: 100%;
-  overflow-y: auto;
-}
 </style>
diff --git a/src/views/dashboard/configuration/widget/graph-styles/ServiceList.vue b/src/views/dashboard/configuration/widget/graph-styles/ServiceList.vue
index 9c0caea7..0e2936d7 100644
--- a/src/views/dashboard/configuration/widget/graph-styles/ServiceList.vue
+++ b/src/views/dashboard/configuration/widget/graph-styles/ServiceList.vue
@@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <div>
+  <div class="item">
     <span class="label">{{ t("showGroup") }}</span>
     <el-switch
       v-model="selectedGrid.graph.showGroup"
@@ -22,7 +22,7 @@ limitations under the License. -->
       @change="updateConfig({ showGroup: selectedGrid.graph.showGroup })"
     />
   </div>
-  <div>
+  <div class="item">
     <span class="label">{{ t("fontSize") }}</span>
     <el-slider
       class="slider"
@@ -67,4 +67,8 @@ function updateConfig(param: { [key: string]: unknown }) {
   display: block;
   margin-bottom: 5px;
 }
+
+.item {
+  margin-top: 5px;
+}
 </style>
diff --git a/src/views/dashboard/controls/Log.vue b/src/views/dashboard/controls/Log.vue
index d0a22405..9f0f9a17 100644
--- a/src/views/dashboard/controls/Log.vue
+++ b/src/views/dashboard/controls/Log.vue
@@ -14,7 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="log-wrapper flex-v">
-    <el-popover placement="bottom" trigger="click" :width="100">
+    <el-popover
+      placement="bottom"
+      trigger="click"
+      :width="100"
+      v-if="routeParams.entity"
+    >
       <template #reference>
         <span class="delete cp">
           <Icon iconName="ellipsis_v" size="middle" class="operation" />
@@ -34,6 +39,7 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import { useI18n } from "vue-i18n";
+import { useRoute } from "vue-router";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import Header from "../related/log/Header.vue";
 import List from "../related/log/List.vue";
@@ -47,6 +53,7 @@ const props = defineProps({
   activeIndex: { type: String, default: "" },
 });
 const { t } = useI18n();
+const routeParams = useRoute().params;
 const dashboardStore = useDashboardStore();
 
 function removeWidget() {
diff --git a/src/views/dashboard/controls/Profile.vue b/src/views/dashboard/controls/Profile.vue
index 87f73411..e6bce9e1 100644
--- a/src/views/dashboard/controls/Profile.vue
+++ b/src/views/dashboard/controls/Profile.vue
@@ -14,7 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="profile-wrapper flex-v">
-    <el-popover placement="bottom" trigger="click" :width="100">
+    <el-popover
+      placement="bottom"
+      trigger="click"
+      :width="100"
+      v-if="routeParams.entity"
+    >
       <template #reference>
         <span class="delete cp">
           <Icon iconName="ellipsis_v" size="middle" class="operation" />
@@ -34,6 +39,7 @@ import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import Header from "../related/profile/Header.vue";
 import Content from "../related/profile/Content.vue";
+import { useRoute } from "vue-router";
 
 /*global defineProps */
 const props = defineProps({
@@ -44,6 +50,7 @@ const props = defineProps({
   activeIndex: { type: String, default: "" },
 });
 const { t } = useI18n();
+const routeParams = useRoute().params;
 const dashboardStore = useDashboardStore();
 function removeWidget() {
   dashboardStore.removeControls(props.data);
diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue
index 68013d6f..c4f8d5fd 100644
--- a/src/views/dashboard/controls/Tab.vue
+++ b/src/views/dashboard/controls/Tab.vue
@@ -34,9 +34,10 @@ limitations under the License. -->
           size="sm"
           iconName="cancel"
           @click="deleteTabItem($event, idx)"
+          v-if="routeParams.entity"
         />
       </span>
-      <span class="tab-icons">
+      <span class="tab-icons" v-if="routeParams.entity">
         <el-tooltip content="Add tab items" placement="bottom">
           <i @click="addTabItem">
             <Icon size="middle" iconName="add" />
@@ -44,7 +45,7 @@ limitations under the License. -->
         </el-tooltip>
       </span>
     </div>
-    <div class="operations">
+    <div class="operations" v-if="routeParams.entity">
       <el-popover
         placement="bottom"
         trigger="click"
@@ -105,12 +106,13 @@ limitations under the License. -->
         />
       </grid-item>
     </grid-layout>
-    <div class="no-data-tips" v-else>Please add widgets.</div>
+    <div class="no-data-tips" v-else>{{ t("noWidget") }}</div>
   </div>
 </template>
 <script lang="ts">
 import { ref, watch, defineComponent, toRefs } from "vue";
 import { useI18n } from "vue-i18n";
+import { useRoute } from "vue-router";
 import type { PropType } from "vue";
 import { LayoutConfig } from "@/types/dashboard";
 import { useDashboardStore } from "@/store/modules/dashboard";
@@ -133,6 +135,7 @@ export default defineComponent({
   props,
   setup(props) {
     const { t } = useI18n();
+    const routeParams = useRoute().params;
     const dashboardStore = useDashboardStore();
     const activeTabIndex = ref<number>(0);
     const activeTabWidget = ref<string>("");
@@ -237,6 +240,7 @@ export default defineComponent({
       needQuery,
       canEditTabName,
       showTools,
+      routeParams,
       t,
     };
   },
diff --git a/src/views/dashboard/controls/Topology.vue b/src/views/dashboard/controls/Topology.vue
index 67ef3993..56bd7968 100644
--- a/src/views/dashboard/controls/Topology.vue
+++ b/src/views/dashboard/controls/Topology.vue
@@ -27,7 +27,12 @@ limitations under the License. -->
             />
           </span>
         </el-tooltip>
-        <el-popover placement="bottom" trigger="click" :width="100">
+        <el-popover
+          placement="bottom"
+          trigger="click"
+          :width="100"
+          v-if="routeParams.entity"
+        >
           <template #reference>
             <span>
               <Icon iconName="ellipsis_v" size="middle" class="operation" />
@@ -64,6 +69,7 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import type { PropType } from "vue";
+import { useRoute } from "vue-router";
 import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { Colors } from "../data";
@@ -76,6 +82,7 @@ const props = defineProps({
   activeIndex: { type: String, default: "" },
 });
 const { t } = useI18n();
+const routeParams = useRoute().params;
 const dashboardStore = useDashboardStore();
 
 function editConfig() {
diff --git a/src/views/dashboard/controls/Trace.vue b/src/views/dashboard/controls/Trace.vue
index 4a466a57..236c3a5c 100644
--- a/src/views/dashboard/controls/Trace.vue
+++ b/src/views/dashboard/controls/Trace.vue
@@ -20,7 +20,7 @@ limitations under the License. -->
           <Icon iconName="ellipsis_v" size="middle" class="operation" />
         </span>
       </template>
-      <div class="tools" @click="removeWidget">
+      <div class="tools" @click="removeWidget" v-if="routeParams.entity">
         <span>{{ t("delete") }}</span>
       </div>
     </el-popover>
@@ -35,6 +35,7 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import type { PropType } from "vue";
+import { useRoute } from "vue-router";
 import Filter from "../related/trace/Filter.vue";
 import TraceList from "../related/trace/TraceList.vue";
 import TraceDetail from "../related/trace/Detail.vue";
@@ -50,6 +51,7 @@ const props = defineProps({
   activeIndex: { type: String, default: "" },
 });
 const { t } = useI18n();
+const routeParams = useRoute().params;
 const dashboardStore = useDashboardStore();
 function removeWidget() {
   dashboardStore.removeControls(props.data);
diff --git a/src/views/dashboard/controls/Widget.vue b/src/views/dashboard/controls/Widget.vue
index 46cf7af4..3a21969f 100644
--- a/src/views/dashboard/controls/Widget.vue
+++ b/src/views/dashboard/controls/Widget.vue
@@ -34,7 +34,12 @@ limitations under the License. -->
             />
           </span>
         </el-tooltip>
-        <el-popover placement="bottom" trigger="click" :width="100">
+        <el-popover
+          placement="bottom"
+          trigger="click"
+          :width="100"
+          v-if="routeParams.entity"
+        >
           <template #reference>
             <span>
               <Icon iconName="ellipsis_v" size="middle" class="operation" />
@@ -69,6 +74,7 @@ limitations under the License. -->
 <script lang="ts">
 import { toRefs, reactive, defineComponent, ref, watch } from "vue";
 import type { PropType } from "vue";
+import { useRoute } from "vue-router";
 import { LayoutConfig } from "@/types/dashboard";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
@@ -92,6 +98,7 @@ export default defineComponent({
   props,
   setup(props) {
     const { t } = useI18n();
+    const routeParams = useRoute().params;
     const loading = ref<boolean>(false);
     const state = reactive<{ source: { [key: string]: unknown } }>({
       source: {},
@@ -189,6 +196,7 @@ export default defineComponent({
       editConfig,
       data,
       loading,
+      routeParams,
       t,
     };
   },
diff --git a/src/views/dashboard/graphs/EndpointList.vue b/src/views/dashboard/graphs/EndpointList.vue
index fcbdefba..46b9cac0 100644
--- a/src/views/dashboard/graphs/EndpointList.vue
+++ b/src/views/dashboard/graphs/EndpointList.vue
@@ -29,40 +29,42 @@ limitations under the License. -->
         </template>
       </el-input>
     </div>
-    <el-table v-loading="chartLoading" :data="endpoints" style="width: 100%">
-      <el-table-column label="Endpoints">
-        <template #default="scope">
-          <router-link
-            class="link"
-            :to="`/dashboard/${dashboardStore.layerId}/${EntityType[2].value}/${selectorStore.currentService.id}/${scope.row.id}/${config.dashboardName}`"
-            :style="{ fontSize: `${config.fontSize}px` }"
-          >
-            {{ scope.row.label }}
-          </router-link>
-        </template>
-      </el-table-column>
-      <el-table-column
-        v-for="(metric, index) in config.metrics"
-        :label="metric"
-        :key="metric + index"
-      >
-        <template #default="scope">
-          <div class="chart">
-            <Line
-              v-if="config.metricTypes[index] === 'readMetricsValues'"
-              :data="{ [metric]: scope.row[metric] }"
-              :intervalTime="intervalTime"
-              :config="{ showXAxis: false, showYAxis: false }"
-            />
-            <Card
-              v-else
-              :data="{ [metric]: scope.row[metric] }"
-              :config="{ textAlign: 'left' }"
-            />
-          </div>
-        </template>
-      </el-table-column>
-    </el-table>
+    <div class="list">
+      <el-table v-loading="chartLoading" :data="endpoints" style="width: 100%">
+        <el-table-column label="Endpoints">
+          <template #default="scope">
+            <router-link
+              class="link"
+              :to="`/dashboard/${dashboardStore.layerId}/${EntityType[2].value}/${selectorStore.currentService.id}/${scope.row.id}/${config.dashboardName}`"
+              :style="{ fontSize: `${config.fontSize}px` }"
+            >
+              {{ scope.row.label }}
+            </router-link>
+          </template>
+        </el-table-column>
+        <el-table-column
+          v-for="(metric, index) in config.metrics"
+          :label="metric"
+          :key="metric + index"
+        >
+          <template #default="scope">
+            <div class="chart">
+              <Line
+                v-if="config.metricTypes[index] === 'readMetricsValues'"
+                :data="{ [metric]: scope.row[metric] }"
+                :intervalTime="intervalTime"
+                :config="{ showXAxis: false, showYAxis: false }"
+              />
+              <Card
+                v-else
+                :data="{ [metric]: scope.row[metric] }"
+                :config="{ textAlign: 'left' }"
+              />
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
     <el-pagination
       class="pagination"
       background
diff --git a/src/views/dashboard/graphs/InstanceList.vue b/src/views/dashboard/graphs/InstanceList.vue
index c35318a0..781293ea 100644
--- a/src/views/dashboard/graphs/InstanceList.vue
+++ b/src/views/dashboard/graphs/InstanceList.vue
@@ -29,40 +29,42 @@ limitations under the License. -->
         </template>
       </el-input>
     </div>
-    <el-table v-loading="chartLoading" :data="instances" style="width: 100%">
-      <el-table-column label="Service Instances">
-        <template #default="scope">
-          <router-link
-            class="link"
-            :to="`/dashboard/${dashboardStore.layerId}/${EntityType[3].value}/${selectorStore.currentService.id}/${scope.row.id}/${config.dashboardName}`"
-            :style="{ fontSize: `${config.fontSize}px` }"
-          >
-            {{ scope.row.label }}
-          </router-link>
-        </template>
-      </el-table-column>
-      <el-table-column
-        v-for="(metric, index) in config.metrics"
-        :label="metric"
-        :key="metric + index"
-      >
-        <template #default="scope">
-          <div class="chart">
-            <Line
-              v-if="config.metricTypes[index] === 'readMetricsValues'"
-              :data="metric ? { [metric]: scope.row[metric] } : {}"
-              :intervalTime="intervalTime"
-              :config="{ showXAxis: false, showYAxis: false }"
-            />
-            <Card
-              v-else
-              :data="{ [metric]: scope.row[metric] }"
-              :config="{ textAlign: 'left' }"
-            />
-          </div>
-        </template>
-      </el-table-column>
-    </el-table>
+    <div class="list">
+      <el-table v-loading="chartLoading" :data="instances" style="width: 100%">
+        <el-table-column label="Service Instances">
+          <template #default="scope">
+            <router-link
+              class="link"
+              :to="`/dashboard/${dashboardStore.layerId}/${EntityType[3].value}/${selectorStore.currentService.id}/${scope.row.id}/${config.dashboardName}`"
+              :style="{ fontSize: `${config.fontSize}px` }"
+            >
+              {{ scope.row.label }}
+            </router-link>
+          </template>
+        </el-table-column>
+        <el-table-column
+          v-for="(metric, index) in config.metrics"
+          :label="metric"
+          :key="metric + index"
+        >
+          <template #default="scope">
+            <div class="chart">
+              <Line
+                v-if="config.metricTypes[index] === 'readMetricsValues'"
+                :data="metric ? { [metric]: scope.row[metric] } : {}"
+                :intervalTime="intervalTime"
+                :config="{ showXAxis: false, showYAxis: false }"
+              />
+              <Card
+                v-else
+                :data="{ [metric]: scope.row[metric] }"
+                :config="{ textAlign: 'left' }"
+              />
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
     <el-pagination
       class="pagination"
       background
diff --git a/src/views/dashboard/graphs/ServiceList.vue b/src/views/dashboard/graphs/ServiceList.vue
index c7efb778..57d29f79 100644
--- a/src/views/dashboard/graphs/ServiceList.vue
+++ b/src/views/dashboard/graphs/ServiceList.vue
@@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <div class="list">
+  <div class="table">
     <div class="search">
       <el-input
         v-model="searchText"
@@ -29,7 +29,7 @@ limitations under the License. -->
         </template>
       </el-input>
     </div>
-    <div class="table">
+    <div class="list">
       <el-table
         v-loading="chartLoading"
         :data="services"
@@ -232,8 +232,4 @@ watch(
 .inputs {
   width: 300px;
 }
-
-.table {
-  margin: 10px 0;
-}
 </style>
diff --git a/src/views/dashboard/graphs/style.scss b/src/views/dashboard/graphs/style.scss
index 3fe0aa43..a1b83a93 100644
--- a/src/views/dashboard/graphs/style.scss
+++ b/src/views/dashboard/graphs/style.scss
@@ -20,6 +20,11 @@
   padding: 0 10px 5px 0;
 }
 
+.list {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
 .pagination {
   width: 100%;
   text-align: center;
diff --git a/src/views/dashboard/panel/Layout.vue b/src/views/dashboard/panel/Layout.vue
index dd88845c..3bbc9d2c 100644
--- a/src/views/dashboard/panel/Layout.vue
+++ b/src/views/dashboard/panel/Layout.vue
@@ -36,10 +36,11 @@ limitations under the License. -->
       <component :is="item.type" :data="item" />
     </grid-item>
   </grid-layout>
-  <div class="no-data-tips" v-else>Please add widgets.</div>
+  <div class="no-data-tips" v-else>{{ t("noWidget") }}</div>
 </template>
 <script lang="ts">
 import { defineComponent, onBeforeUnmount } from "vue";
+import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { LayoutConfig } from "@/types/dashboard";
 import controls from "../controls/index";
@@ -48,6 +49,7 @@ export default defineComponent({
   name: "Layout",
   components: { ...controls },
   setup() {
+    const { t } = useI18n();
     const dashboardStore = useDashboardStore();
     function layoutUpdatedEvent(newLayout: LayoutConfig[]) {
       dashboardStore.setLayout(newLayout);
@@ -63,6 +65,7 @@ export default defineComponent({
       dashboardStore,
       layoutUpdatedEvent,
       clickGrid,
+      t,
     };
   },
 });