init test of tracedetailTools

src/store/modules/trace.ts

@@ -29,6 +29,8 @@ interface TraceState {
   instances: Instance[];
   endpoints: Endpoint[];
   traceList: Trace[];
+  displayMode: string;
+  currentView: string;
   traceTotal: number;
   traceSpans: Span[];
   currentTrace: Trace | any;
@@ -48,6 +50,8 @@ export const traceStore = defineStore({
     services: [{ value: "0", label: "All" }],
     instances: [{ value: "0", label: "All" }],
     endpoints: [{ value: "0", label: "All" }],
+    displayMode: "Table",
+    currentView: "traceList",
     traceList: [],
     traceSpans: [],
     traceTotal: 0,
@@ -67,6 +71,9 @@ export const traceStore = defineStore({
     setTraceCondition(data: any) {
       this.condition = { ...this.condition, ...data };
     },
+    setDisplayMode(data:string){
+      this.displayMode = data
+    },
     setCurrentTrace(trace: Trace) {
       this.currentTrace = trace;
     },

src/views/dashboard/panel/component/TraceDetailsTools.vue

@@ -129,7 +129,7 @@
 
 <script lang="ts">
 import dayjs from "dayjs";
-import { ref, defineComponent } from "vue";
+import { ref, computed, defineComponent } from "vue";
 import { useI18n } from "vue-i18n";
 import { useTraceStore } from "@/store/modules/trace";
 import { Option } from "@/types/app";
@@ -147,7 +147,9 @@ export default defineComponent({
     const traceStore = useTraceStore();
     const loading = ref<boolean>(false);
     const traceId = ref<string>("");
-    const displayMode = ref<string>("List");
+    const displayMode = computed(() => {
+      return traceStore.displayMode;
+    });
     const pageNum = ref<number>(1);
     const pageSize = 10;
     const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
@@ -214,3 +216,67 @@ export default defineComponent({
   },
 });
 </script>
+
+<style lang="scss" scoped>
+.trace-detail {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+.trace-chart {
+  height: calc(100% - 100px);
+  overflow: auto;
+  padding-bottom: 20px;
+}
+
+.trace-detail-wrapper {
+  font-size: 12px;
+  padding: 5px 10px;
+  border-bottom: 1px solid #eee;
+  width: 100%;
+  height: 95px;
+
+  .grey {
+    color: #fff;
+    background-color: #448dfe;
+  }
+
+  .ghost {
+    cursor: pointer;
+    background: rgba(0, 0, 0, 0.3);
+  }
+}
+
+.item {
+  justify-content: space-between;
+}
+
+.trace-detail-ids {
+  background-color: rgba(0, 0, 0, 0);
+  outline: 0;
+  border-style: unset;
+  color: inherit;
+  border: 1px solid;
+  border-radius: 4px;
+  width: 300px;
+}
+
+.trace-log-btn {
+  float: right;
+}
+
+.tag {
+  display: inline-block;
+  border-radius: 4px;
+  padding: 0px 7px;
+  background-color: #40454e;
+  color: #eee;
+}
+
+.no-data {
+  padding-top: 50px;
+  width: 100%;
+  text-align: center;
+}
+</style>

src/views/dashboard/related/trace/Detail.vue

@@ -12,7 +12,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="trace-detail" v-loading="loading">
-    <!-- <div
+    <div
       class="trace-detail-wrapper clear"
       v-if="traceStore.currentTrace.endpointNames"
     >
@@ -54,7 +54,7 @@ limitations under the License. -->
               :small="true"
               :total="traceStore.traceSpanLogsTotal"
               @current-change="turnLogsPage"
-            />            
+            />
             <LogTable
               :tableData="traceStore.traceSpanLogs || []"
               :type="`service`"
@@ -138,13 +138,13 @@ limitations under the License. -->
           </el-button>
         </div>
       </div>
-    </div> -->
-    <!-- <div class="no-data" v-else>{{ t("noData") }}</div> -->
+    </div>
+    <div class="no-data" v-else>{{ t("noData") }}</div>
 
     <div class="trace-chart">
       <component
         v-if="traceStore.currentTrace.endpointNames"
-        :is="displayMode"
+        :is="traceStore.displayMode"
         :data="traceStore.traceSpans"
         :traceId="traceStore.currentTrace.traceIds[0].value"
         :showBtnDetail="false"
@@ -155,7 +155,7 @@ limitations under the License. -->
 </template>
 <script lang="ts">
 import dayjs from "dayjs";
-import { ref, defineComponent } from "vue";
+import { ref, computed, defineComponent } from "vue";
 import { useI18n } from "vue-i18n";
 import { useTraceStore } from "@/store/modules/trace";
 import { Option } from "@/types/app";
@@ -177,12 +177,15 @@ export default defineComponent({
     const traceStore = useTraceStore();
     const loading = ref<boolean>(false);
     const traceId = ref<string>("");
-    const displayMode = ref<string>("List");
+    // const displayMode = ref<string>("List");
+    const displayMode = computed(() => {
+      return traceStore.displayMode;
+    });
     const pageNum = ref<number>(1);
     const pageSize = 10;
     const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
       dayjs(date).format(pattern);
-    const showTraceLogs = ref<boolean>(false);    
+    const showTraceLogs = ref<boolean>(false);
 
     function showTraceList() {
       ctx.emit("show:list");