feat: add controls in tab

src/components/Icon.vue

@@ -21,7 +21,7 @@ limitations under the License. -->
       lg: size === 'lg',
       xl: size === 'xl',
       logo: size === 'logo',
-      loading: loading,
+      loading,
     }"
   >
     <use :xlink:href="`#${iconName}`"></use>
@@ -73,4 +73,15 @@ defineProps({
     width: 30px;
   }
 }
+@keyframes loading {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  to {
+    -webkit-transform: rotate(1turn);
+    transform: rotate(1turn);
+  }
+}
 </style>

src/router/index.ts

@@ -26,7 +26,6 @@ import { routesEvent } from "./event";
 import { routesAlert } from "./alert";
 import { routesSetting } from "./setting";
 import { routesAlarm } from "./alarm";
-import { useTimeoutFn } from "@/hooks/useTimeout";
 
 const routes: Array<RouteRecordRaw> = [
   ...routesGen,
@@ -52,7 +51,7 @@ router.beforeEach((to, from, next) => {
   // const token = window.localStorage.getItem("skywalking-authority");
   if ((window as any).axiosCancel.length !== 0) {
     for (const func of (window as any).axiosCancel) {
-      useTimeoutFn(func(), 0);
+      setTimeout(func(), 0);
     }
     (window as any).axiosCancel = [];
   }

src/store/modules/dashboard.ts

@@ -71,7 +71,8 @@ export const dashboardStore = defineStore({
         metrics: [""],
       };
       if (type === "Tab") {
-        newItem.h = 24;
+        newItem.h = 36;
+        newItem.activedTabIndex = 0;
         newItem.children = [
           {
             name: "Tab1",
@@ -96,14 +97,15 @@ export const dashboardStore = defineStore({
         };
       }
       if (type === "Trace" || type === "Profile") {
-        newItem.h = 36;
+        newItem.h = 24;
       }
+      this.activedGridItem = newItem.i;
+      this.selectedGrid = newItem;
       this.layout = this.layout.map((d: LayoutConfig) => {
         d.y = d.y + newItem.h;
         return d;
       });
       this.layout.push(newItem);
-      this.activedGridItem = newItem.i;
     },
     addTabItem(item: LayoutConfig) {
       const idx = this.layout.findIndex((d: LayoutConfig) => d.i === item.i);
@@ -117,7 +119,7 @@ export const dashboardStore = defineStore({
       };
       this.layout[idx].children?.push(i);
     },
-    addTabWidget(tabIndex: number) {
+    addTabControls(type: string) {
       const activedGridItem = this.activedGridItem.split("-")[0];
       const idx = this.layout.findIndex(
         (d: LayoutConfig) => d.i === activedGridItem
@@ -125,32 +127,52 @@ export const dashboardStore = defineStore({
       if (idx < 0) {
         return;
       }
+      const tabIndex = this.layout[idx].activedTabIndex;
       const { children } = this.layout[idx].children[tabIndex];
-      const newWidget = {
+      const newItem: LayoutConfig = {
-        x: 0,
+        ...NewControl,
-        y: 0,
-        w: 24,
-        h: 12,
         i: String(children.length),
-        type: "Widget",
+        type,
-        widget: {
+        metricTypes: [""],
-          title: "Title",
+        metrics: [""],
-        },
-        graph: {},
-        standard: {},
       };
+      if (type === "Topology") {
+        newItem.w = 4;
+        newItem.h = 6;
+        newItem.graph = {
+          fontColor: "white",
+          backgroundColor: "green",
+          iconTheme: true,
+          content: "Topology",
+          fontSize: 18,
+          showDepth: true,
+        };
+      }
+      if (type === "Trace" || type === "Profile") {
+        newItem.h = 24;
+      }
       if (this.layout[idx].children) {
         const items = children.map((d: LayoutConfig) => {
-          d.y = d.y + newWidget.h;
+          d.y = d.y + newItem.h;
           return d;
         });
-        items.push(newWidget);
+        console.log(type);
+        items.push(newItem);
         this.layout[idx].children[tabIndex].children = items;
       }
     },
     activeGridItem(index: string) {
       this.activedGridItem = index;
     },
+    setActiveTabIndex(index: number) {
+      const idx = this.layout.findIndex(
+        (d: LayoutConfig) => d.i === this.activedGridItem
+      );
+      if (idx < 0) {
+        return;
+      }
+      this.layout[idx].activedTabIndex = index;
+    },
     removeControls(item: LayoutConfig) {
       this.layout = this.layout.filter((d: LayoutConfig) => d.i !== item.i);
     },

src/types/dashboard.ts

@@ -27,6 +27,7 @@ export interface LayoutConfig {
   type: string;
   metricTypes: string[];
   children?: any;
+  activedTabIndex?: number;
 }
 
 export interface WidgetConfig {

src/views/dashboard/controls/Tab.vue

@@ -37,16 +37,11 @@ limitations under the License. -->
         />
       </span>
       <span class="tab-icons">
-        <el-tooltip effect="dark" content="Add tab items" placement="bottom">
+        <el-tooltip content="Add tab items" placement="bottom">
           <i @click="addTabItem">
             <Icon size="middle" iconName="add" />
           </i>
         </el-tooltip>
-        <el-tooltip effect="dark" content="Add widgets" placement="bottom">
-          <i @click="addTabWidget">
-            <Icon size="middle" iconName="playlist_add" />
-          </i>
-        </el-tooltip>
       </span>
     </div>
     <div class="operations">
@@ -74,7 +69,8 @@ limitations under the License. -->
         @click="clickTabGrid($event, item)"
         :class="{ active: activeTabWidget === item.i }"
       >
-        <Widget
+        <component
+          :is="item.type"
           :data="item"
           :activeIndex="`${data.i}-${activeTabIndex}-${item.i}`"
         />
@@ -83,94 +79,117 @@ limitations under the License. -->
     <div class="no-data-tips" v-else>Please add widgets.</div>
   </div>
 </template>
-<script lang="ts" setup>
+<script lang="ts">
-import { ref, watch, reactive } from "vue";
+import { ref, watch, reactive, defineComponent, toRefs } from "vue";
 import type { PropType } from "vue";
-import Widget from "./Widget.vue";
 import { LayoutConfig } from "@/types/dashboard";
 import { useDashboardStore } from "@/store/modules/dashboard";
-/*global defineProps */
+import Topology from "./Topology.vue";
-const props = defineProps({
+import Widget from "./Widget.vue";
+import Trace from "./Trace.vue";
+import Profile from "./Profile.vue";
+
+const props = {
   data: {
     type: Object as PropType<LayoutConfig>,
     default: () => ({ children: [] }),
   },
   active: { type: Boolean, default: false },
-});
+};
-const dashboardStore = useDashboardStore();
+export default defineComponent({
-const activeTabIndex = ref<number>(0);
+  name: "Tab",
-const activeTabWidget = ref<string>("0");
+  components: { Topology, Widget, Trace, Profile },
-const editTabIndex = ref<number>(NaN); // edit tab item name
+  props,
-const state = reactive<{
+  setup(props) {
-  layout: LayoutConfig[];
+    const dashboardStore = useDashboardStore();
-}>({
+    const activeTabIndex = ref<number>(0);
-  layout:
+    const activeTabWidget = ref<string>("");
-    dashboardStore.layout[props.data.i].children[activeTabIndex.value].children,
+    const editTabIndex = ref<number>(NaN); // edit tab item name
-});
+    const state = reactive<{
+      layout: LayoutConfig[];
+    }>({
+      layout:
+        dashboardStore.layout[props.data.i].children[activeTabIndex.value]
+          .children,
+    });
 
-function layoutUpdatedEvent(newLayout: LayoutConfig[]) {
+    function layoutUpdatedEvent(newLayout: LayoutConfig[]) {
-  state.layout = newLayout;
+      state.layout = newLayout;
-}
-function clickTabs(e: Event, idx: number) {
-  e.stopPropagation();
-  activeTabIndex.value = idx;
-}
-function removeTab() {
-  dashboardStore.removeControls(props.data);
-}
-function deleteTabItem(idx: number) {
-  dashboardStore.removeTabItem(props.data, idx);
-}
-function addTabItem() {
-  dashboardStore.addTabItem(props.data);
-}
-function editTabName(el: Event, index: number) {
-  el.stopPropagation();
-  editTabIndex.value = index;
-}
-function handleClick(el: any) {
-  if (el.target.className === "tab-name") {
-    return;
-  }
-  editTabIndex.value = NaN;
-}
-function addTabWidget(e: Event) {
-  e.stopPropagation();
-  activeTabWidget.value = String(state.layout.length);
-  dashboardStore.addTabWidget(activeTabIndex.value);
-  dashboardStore.activeGridItem(
-    `${props.data.i}-${activeTabIndex.value}-${activeTabWidget.value}`
-  );
-}
-function clickTabGrid(e: Event, item: LayoutConfig) {
-  e.stopPropagation();
-  activeTabWidget.value = item.i;
-  dashboardStore.activeGridItem(
-    `${props.data.i}-${activeTabIndex.value}-${item.i}`
-  );
-}
-document.body.addEventListener("click", handleClick, false);
-
-const children = ref(
-  dashboardStore.layout[props.data.i].children[activeTabIndex.value].children
-);
-watch(
-  () => children.value,
-  (data) => {
-    state.layout = data;
-  }
-);
-watch(
-  () => dashboardStore.activedGridItem,
-  (data) => {
-    const i = data.split("-");
-    if (i[0] === props.data.i && activeTabIndex.value === Number(i[1])) {
-      activeTabWidget.value = i[2];
-    } else {
-      activeTabWidget.value = "";
     }
-  }
+    function clickTabs(e: Event, idx: number) {
-);
+      e.stopPropagation();
+      activeTabIndex.value = idx;
+      dashboardStore.activeGridItem(idx);
+    }
+    function removeTab() {
+      dashboardStore.removeControls(props.data);
+    }
+    function deleteTabItem(idx: number) {
+      dashboardStore.removeTabItem(props.data, idx);
+    }
+    function addTabItem() {
+      dashboardStore.addTabItem(props.data);
+    }
+    function editTabName(el: Event, index: number) {
+      el.stopPropagation();
+      editTabIndex.value = index;
+    }
+    function handleClick(el: any) {
+      if (el.target.className === "tab-name") {
+        return;
+      }
+      editTabIndex.value = NaN;
+    }
+    function clickTabGrid(e: Event, item: LayoutConfig) {
+      e.stopPropagation();
+      activeTabWidget.value = item.i;
+      dashboardStore.activeGridItem(
+        `${props.data.i}-${activeTabIndex.value}-${item.i}`
+      );
+    }
+    document.body.addEventListener("click", handleClick, false);
+
+    const items =
+      dashboardStore.layout[props.data.i].children[activeTabIndex.value] || {};
+    watch(
+      () => items.children,
+      (data) => {
+        if (!data) {
+          return data;
+        }
+        state.layout = data;
+      }
+    );
+    watch(
+      () => dashboardStore.activedGridItem,
+      (data) => {
+        if (!data) {
+          return;
+        }
+        const i = data.split("-");
+        if (i[0] === props.data.i && activeTabIndex.value === Number(i[1])) {
+          activeTabWidget.value = i[2];
+        } else {
+          activeTabWidget.value = "";
+        }
+      }
+    );
+    return {
+      clickTabGrid,
+      editTabName,
+      addTabItem,
+      deleteTabItem,
+      removeTab,
+      clickTabs,
+      layoutUpdatedEvent,
+      ...toRefs(props),
+      activeTabWidget,
+      state,
+      activeTabIndex,
+      editTabIndex,
+    };
+  },
+});
 </script>
 <style lang="scss" scoped>
 .tabs {
@@ -218,10 +237,6 @@ watch(
   }
 }
 
-.el-input__inner {
-  border: none !important;
-}
-
 .operations {
   color: #aaa;
   cursor: pointer;

src/views/dashboard/data.ts

@@ -165,9 +165,9 @@ export const SortOrder = [
 export const ToolIcons = [
   { name: "playlist_add", content: "Add Widget", id: "addWidget" },
   { name: "all_inbox", content: "Add Tab", id: "addTab" },
-  { name: "device_hub", content: "Add Topology", id: "topology" },
+  { name: "device_hub", content: "Add Topology", id: "addTopology" },
-  { name: "merge", content: "Add Trace", id: "trace" },
+  { name: "merge", content: "Add Trace", id: "addTrace" },
-  { name: "timeline", content: "Add Profile", id: "profile" },
+  { name: "timeline", content: "Add Profile", id: "addProfile" },
   // { name: "save_alt", content: "Export", id: "export" },
   // { name: "folder_open", content: "Import", id: "import" },
   // { name: "settings", content: "Settings", id: "settings" },

src/views/dashboard/panel/Tool.vue

@@ -288,20 +288,50 @@ function changePods(pod: Option[]) {
 }
 
 function clickIcons(t: { id: string; content: string; name: string }) {
-  switch (t.id) {
+  if (
+    dashboardStore.selectedGrid &&
+    dashboardStore.selectedGrid.type === "Tab"
+  ) {
+    setTabControls(t.id);
+    return;
+  }
+  setControls(t.id);
+}
+
+function setTabControls(id: string) {
+  switch (id) {
+    case "addWidget":
+      dashboardStore.addTabControls("Widget");
+      break;
+    case "addTrace":
+      dashboardStore.addTabControls("Trace");
+      break;
+    case "addProfile":
+      dashboardStore.addTabControls("Profile");
+      break;
+    case "addTopology":
+      dashboardStore.addTabControls("Topology");
+      break;
+    default:
+      dashboardStore.addControl("Widget");
+  }
+}
+
+function setControls(id: string) {
+  switch (id) {
     case "addWidget":
       dashboardStore.addControl("Widget");
       break;
     case "addTab":
       dashboardStore.addControl("Tab");
       break;
-    case "trace":
+    case "addTrace":
       dashboardStore.addControl("Trace");
       break;
-    case "profile":
+    case "addProfile":
       dashboardStore.addControl("Profile");
       break;
-    case "topology":
+    case "addTopology":
       dashboardStore.addControl("Topology");
       break;
     case "settings":

src/views/dashboard/related/trace/components/Table/TableItem.vue

@@ -136,7 +136,7 @@ limitations under the License. -->
 <script lang="ts">
 import dayjs from "dayjs";
 import { useI18n } from "vue-i18n";
-import { ref, watch, computed, defineComponent } from "vue";
+import { ref, computed, defineComponent } from "vue";
 import type { PropType } from "vue";
 import SpanDetail from "../D3Graph/SpanDetail.vue";
 
@@ -152,7 +152,6 @@ export default defineComponent({
   emits: ["select"],
   components: { SpanDetail },
   setup(props, { emit }) {
-    /* global Nullable */
     const displayChildren = ref<boolean>(true);
     const showDetail = ref<boolean>(false);
     const { t } = useI18n();