fix: polish pages and bugs fix (#36)

src/views/dashboard/related/components/LogTable/Index.vue

@@ -114,6 +114,7 @@ function setCurrentLog(log: any) {
   }
 
   .serviceInstanceName,
+  .endpointName,
   .serviceName {
     width: 200px;
   }

src/views/dashboard/related/components/LogTable/LogService.vue

@@ -82,6 +82,7 @@ function showSelectSpan() {
   }
 
   .serviceInstanceName,
+  .endpointName,
   .serviceName {
     width: 200px;
   }
@@ -98,6 +99,7 @@ function showSelectSpan() {
   border: 1px solid transparent;
   border-right: 1px dotted silver;
   overflow: hidden;
+  height: 30px;
   line-height: 30px;
   text-overflow: ellipsis;
   white-space: nowrap;

src/views/dashboard/related/components/LogTable/data.ts

@@ -24,6 +24,10 @@ export const ServiceLogConstants = [
     label: "serviceInstanceName",
     value: "instance",
   },
+  {
+    label: "endpointName",
+    value: "endpoint",
+  },
   {
     label: "timestamp",
     value: "time",

src/views/dashboard/related/log/Header.vue

@@ -143,7 +143,7 @@ const isBrowser = ref<boolean>(dashboardStore.layerId === "BROWSER");
 const state = reactive<any>({
   instance: { value: "0", label: "All" },
   endpoint: { value: "0", label: "All" },
-  service: { value: "0", label: "All" },
+  service: { value: "", label: "" },
 });
 
 init();
@@ -154,11 +154,10 @@ async function init() {
     ElMessage.error(resp.errors);
     return;
   }
+  await fetchSelectors();
+  await searchLogs();
   state.instance = { value: "0", label: "All" };
   state.endpoint = { value: "0", label: "All" };
-  state.service = { value: "0", label: "All" };
-  searchLogs();
-  fetchSelectors();
 }
 
 function fetchSelectors() {
@@ -187,18 +186,20 @@ async function getServices() {
     return;
   }
   state.service = logStore.services[0];
+  getInstances(state.service.id);
+  getEndpoints(state.service.id);
 }
 
-async function getEndpoints() {
-  const resp = await logStore.getEndpoints();
+async function getEndpoints(id?: string) {
+  const resp = await logStore.getEndpoints(id);
   if (resp.errors) {
     ElMessage.error(resp.errors);
     return;
   }
   state.endpoint = logStore.endpoints[0];
 }
-async function getInstances() {
-  const resp = await logStore.getInstances();
+async function getInstances(id?: string) {
+  const resp = await logStore.getInstances(id);
   if (resp.errors) {
     ElMessage.error(resp.errors);
     return;
@@ -238,8 +239,8 @@ async function queryLogs() {
 function changeField(type: string, opt: any) {
   state[type] = opt[0];
   if (type === "service") {
-    getEndpoints();
-    getInstances();
+    getEndpoints(state.service.id);
+    getInstances(state.service.id);
   }
 }
 function updateTags(data: { tagsMap: Array<Option>; tagsList: string[] }) {

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

@@ -113,7 +113,7 @@ const state = reactive<any>({
   status: { label: "All", value: "ALL" },
   instance: { value: "0", label: "All" },
   endpoint: { value: "0", label: "All" },
-  service: { value: "0", label: "All" },
+  service: { value: "", label: "" },
 });
 
 // const dateTime = computed(() => [
@@ -121,24 +121,21 @@ const state = reactive<any>({
 //   appStore.durationRow.end,
 // ]);
 init();
-function init() {
-  searchTraces();
+async function init() {
   if (dashboardStore.entity === EntityType[1].value) {
-    getServices();
-    return;
+    await getServices();
   }
   if (dashboardStore.entity === EntityType[2].value) {
-    getInstances();
-    return;
+    await getInstances();
   }
   if (dashboardStore.entity === EntityType[3].value) {
-    getEndpoints();
-    return;
+    await getEndpoints();
   }
   if (dashboardStore.entity === EntityType[0].value) {
-    getInstances();
-    getEndpoints();
+    await getInstances();
+    await getEndpoints();
   }
+  await searchTraces();
 }
 
 async function getServices() {
@@ -148,18 +145,20 @@ async function getServices() {
     return;
   }
   state.service = traceStore.services[0];
+  getEndpoints(state.service.id);
+  getInstances(state.service.id);
 }
 
-async function getEndpoints() {
-  const resp = await traceStore.getEndpoints();
+async function getEndpoints(id?: string) {
+  const resp = await traceStore.getEndpoints(id);
   if (resp.errors) {
     ElMessage.error(resp.errors);
     return;
   }
   state.endpoint = traceStore.endpoints[0];
 }
-async function getInstances() {
-  const resp = await traceStore.getInstances();
+async function getInstances(id?: string) {
+  const resp = await traceStore.getInstances(id);
   if (resp.errors) {
     ElMessage.error(resp.errors);
     return;
@@ -201,8 +200,8 @@ async function queryTraces() {
 function changeField(type: string, opt: any) {
   state[type] = opt[0];
   if (type === "service") {
-    getEndpoints();
-    getInstances();
+    getEndpoints(state.service.id);
+    getInstances(state.service.id);
   }
 }
 function updateTags(data: { tagsMap: Array<Option>; tagsList: string[] }) {