feat: Implement templates for dashboards (#28)

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() {

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);

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"
@@ -84,7 +85,6 @@ limitations under the License. -->
       :row-height="10"
       :is-draggable="true"
       :is-resizable="true"
-      :responsive="true"
       @layout-updated="layoutUpdatedEvent"
     >
       <grid-item
@@ -106,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";
@@ -134,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>("");
@@ -144,9 +146,11 @@ export default defineComponent({
     const l = dashboardStore.layout.findIndex(
       (d: LayoutConfig) => d.i === props.data.i
     );
-    dashboardStore.setCurrentTabItems(
-      dashboardStore.layout[l].children[activeTabIndex.value].children
-    );
+    if (dashboardStore.layout[l].children.length) {
+      dashboardStore.setCurrentTabItems(
+        dashboardStore.layout[l].children[activeTabIndex.value].children
+      );
+    }
 
     function clickTabs(e: Event, idx: number) {
       e.stopPropagation();
@@ -169,6 +173,12 @@ export default defineComponent({
     function deleteTabItem(e: Event, idx: number) {
       e.stopPropagation();
       dashboardStore.removeTabItem(props.data, idx);
+      const kids = dashboardStore.layout[l].children[0];
+      const arr = (kids && kids.children) || [];
+      dashboardStore.setCurrentTabItems(arr);
+      dashboardStore.activeGridItem(0);
+      activeTabIndex.value = 0;
+      needQuery.value = true;
     }
     function addTabItem() {
       dashboardStore.addTabItem(props.data);
@@ -236,6 +246,7 @@ export default defineComponent({
       needQuery,
       canEditTabName,
       showTools,
+      routeParams,
       t,
     };
   },
@@ -256,7 +267,7 @@ export default defineComponent({
   }
 
   .tab-name {
-    max-width: 80px;
+    max-width: 130px;
     height: 20px;
     line-height: 20px;
     outline: none;

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() {

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);

src/views/dashboard/controls/Widget.vue

@@ -15,7 +15,14 @@ limitations under the License. -->
 <template>
   <div class="widget">
     <div class="header flex-h">
-      <div>{{ data.widget?.title || "" }}</div>
+      <div>
+        <span>
+          {{ data.widget?.title || "" }}
+        </span>
+        <span class="unit" v-show="data.standard?.unit">
+          ({{ data.standard?.unit }})
+        </span>
+      </div>
       <div>
         <el-tooltip :content="data.widget?.tips">
           <span>
@@ -27,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" />
@@ -62,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";
@@ -69,7 +82,7 @@ import { useSelectorStore } from "@/store/modules/selectors";
 import graphs from "../graphs";
 import { useI18n } from "vue-i18n";
 import { useQueryProcessor, useSourceProcessor } from "@/hooks/useProcessor";
-import { EntityType, TableChartTypes } from "../data";
+import { EntityType, ListChartTypes } from "../data";
 
 const props = {
   data: {
@@ -85,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: {},
@@ -94,7 +108,11 @@ export default defineComponent({
     const dashboardStore = useDashboardStore();
     const selectorStore = useSelectorStore();
 
-    if (dashboardStore.entity === EntityType[1].value || props.needQuery) {
+    if (
+      dashboardStore.entity === EntityType[1].value ||
+      props.needQuery ||
+      !dashboardStore.currentDashboard.id
+    ) {
       queryMetrics();
     }
 
@@ -111,7 +129,12 @@ export default defineComponent({
       if (!json) {
         return;
       }
-      state.source = useSourceProcessor(json, props.data);
+      const d = {
+        metrics: props.data.metrics,
+        metricTypes: props.data.metricTypes,
+        standard: props.data.standard,
+      };
+      state.source = useSourceProcessor(json, d);
     }
 
     function removeWidget() {
@@ -127,22 +150,26 @@ export default defineComponent({
       }
     }
     watch(
-      () => [props.data.metricTypes, props.data.metrics],
+      () => [props.data.metricTypes, props.data.metrics, props.data.standard],
       () => {
-        if (
-          dashboardStore.selectedGrid &&
-          props.data.i !== dashboardStore.selectedGrid.i
-        ) {
+        if (!dashboardStore.selectedGrid) {
           return;
         }
-        if (TableChartTypes.includes(dashboardStore.selectedGrid.graph.type)) {
+        if (props.data.i !== dashboardStore.selectedGrid.i) {
+          return;
+        }
+        if (ListChartTypes.includes(dashboardStore.selectedGrid.graph.type)) {
           return;
         }
         queryMetrics();
       }
     );
     watch(
-      () => [selectorStore.currentService, selectorStore.currentDestService],
+      () => [
+        selectorStore.currentService,
+        selectorStore.currentDestService,
+        appStore.durationTime,
+      ],
       () => {
         if (
           dashboardStore.entity === EntityType[0].value ||
@@ -169,6 +196,7 @@ export default defineComponent({
       editConfig,
       data,
       loading,
+      routeParams,
       t,
     };
   },
@@ -218,4 +246,9 @@ export default defineComponent({
   text-align: center;
   padding-top: 20px;
 }
+
+.unit {
+  display: inline-block;
+  margin-left: 5px;
+}
 </style>