view trace

src/styles/reset.scss

@@ -153,6 +153,14 @@ pre {
   margin-left: 5px;
 }
 
+.el-drawer__header {
+  margin-bottom: 0;
+}
+
+.el-drawer__body {
+  padding: 0;
+}
+
 .switch {
   margin: 0 5px;
 }

src/views/dashboard/data.ts

@@ -172,7 +172,7 @@ export const SortOrder = [
 ];
 export const AllTools = [
   { name: "playlist_add", content: "Add Widget", id: "addWidget" },
-  { name: "all_inbox", content: "Add Tab", id: "addTab" },
+  { name: "all_inbox", content: "Add Tabs", id: "addTab" },
   { name: "library_books", content: "Add Text", id: "addText" },
   { name: "device_hub", content: "Add Topology", id: "addTopology" },
   { name: "merge", content: "Add Trace", id: "addTrace" },
@@ -180,7 +180,7 @@ export const AllTools = [
 ];
 export const ServiceTools = [
   { name: "playlist_add", content: "Add Widget", id: "addWidget" },
-  { name: "all_inbox", content: "Add Tab", id: "addTab" },
+  { name: "all_inbox", content: "Add Tabs", id: "addTab" },
   { name: "library_books", content: "Add Text", id: "addText" },
   { name: "device_hub", content: "Add Topology", id: "addTopology" },
   { name: "merge", content: "Add Trace", id: "addTrace" },
@@ -192,7 +192,7 @@ export const ServiceTools = [
 ];
 export const InstanceTools = [
   { name: "playlist_add", content: "Add Widget", id: "addWidget" },
-  { name: "all_inbox", content: "Add Tab", id: "addTab" },
+  { name: "all_inbox", content: "Add Tabs", id: "addTab" },
   { name: "library_books", content: "Add Text", id: "addText" },
   { name: "merge", content: "Add Trace", id: "addTrace" },
   { name: "assignment", content: "Add Log", id: "addLog" },
@@ -206,7 +206,7 @@ export const InstanceTools = [
 ];
 export const EndpointTools = [
   { name: "playlist_add", content: "Add Widget", id: "addWidget" },
-  { name: "all_inbox", content: "Add Tab", id: "addTab" },
+  { name: "all_inbox", content: "Add Tabs", id: "addTab" },
   { name: "library_books", content: "Add Text", id: "addText" },
   { name: "device_hub", content: "Add Topology", id: "addTopology" },
   { name: "merge", content: "Add Trace", id: "addTrace" },
@@ -215,25 +215,25 @@ export const EndpointTools = [
 ];
 export const ProcessTools = [
   { name: "playlist_add", content: "Add Widget", id: "addWidget" },
-  { name: "all_inbox", content: "Add Tab", id: "addTab" },
+  { name: "all_inbox", content: "Add Tabs", id: "addTab" },
   { name: "library_books", content: "Add Text", id: "addText" },
   { name: "time_range", content: "Add Time Range Text", id: "addTimeRange" },
 ];
 export const ServiceRelationTools = [
   { name: "playlist_add", content: "Add Widget", id: "addWidget" },
-  { name: "all_inbox", content: "Add Tab", id: "addTab" },
+  { name: "all_inbox", content: "Add Tabs", id: "addTab" },
   { name: "library_books", content: "Add Text", id: "addText" },
   { name: "device_hub", content: "Add Topology", id: "addTopology" },
 ];
 
 export const EndpointRelationTools = [
   { name: "playlist_add", content: "Add Widget", id: "addWidget" },
-  { name: "all_inbox", content: "Add Tab", id: "addTab" },
+  { name: "all_inbox", content: "Add Tabs", id: "addTab" },
   { name: "library_books", content: "Add Text", id: "addText" },
 ];
 export const InstanceRelationTools = [
   { name: "playlist_add", content: "Add Widget", id: "addWidget" },
-  { name: "all_inbox", content: "Add Tab", id: "addTab" },
+  { name: "all_inbox", content: "Add Tabs", id: "addTab" },
   { name: "library_books", content: "Add Text", id: "addText" },
   { name: "device_hub", content: "Add Topology", id: "addTopology" },
 ];

src/views/dashboard/graphs/TopList.vue

@@ -47,12 +47,12 @@ limitations under the License. -->
     <el-drawer
       v-model="showTrace"
       :title="t('trace')"
-      size="70%"
+      size="100%"
       :destroy-on-close="true"
       :before-close="() => (showTrace = false)"
       :append-to-body="true"
     >
-      <span>Hi, trace!</span>
+      <Trace :data="traceOptions" />
     </el-drawer>
   </div>
   <div class="center no-data" v-else>No Data</div>
@@ -63,6 +63,7 @@ import { useI18n } from "vue-i18n";
 import { computed, ref } from "vue";
 import copy from "@/utils/copy";
 import { TextColors } from "@/views/dashboard/data";
+import Trace from "../controls/Trace.vue";
 /*global defineProps */
 const props = defineProps({
   data: {
@@ -79,6 +80,10 @@ const props = defineProps({
 });
 const { t } = useI18n();
 const showTrace = ref<boolean>(false);
+const traceOptions = ref<{ id: string; type: string; filter?: unknown }>({
+  id: "related" + Math.round(Math.random() * 100),
+  type: "Trace",
+});
 const key = computed(() => Object.keys(props.data)[0] || "");
 const available = computed(
   () =>
@@ -98,7 +103,10 @@ function handleClick(event: PointerEvent, i: string) {
   copy(i);
 }
 function viewTrace(item: { name: string }) {
-  console.log(item);
+  traceOptions.value = {
+    ...traceOptions.value,
+    filter: item,
+  };
   showTrace.value = true;
 }
 </script>