feat: add Log in tab

src/store/modules/dashboard.ts

@@ -150,7 +150,7 @@ export const dashboardStore = defineStore({
           showDepth: true,
         };
       }
-      if (type === "Trace" || type === "Profile") {
+      if (type === "Trace" || type === "Profile" || type === "Log") {
         newItem.h = 24;
       }
       if (this.layout[idx].children) {

src/store/modules/log.ts

@@ -22,6 +22,7 @@ import graphql from "@/graphql";
 import { AxiosResponse } from "axios";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import { useSelectorStore } from "@/store/modules/selectors";
+import { useDashboardStore } from "@/store/modules/dashboard";
 
 interface LogState {
   services: Service[];
@@ -33,6 +34,7 @@ interface LogState {
   supportQueryLogsByKeywords: boolean;
   logs: any[];
   logsTotal: number;
+  loadLogs: boolean;
 }
 
 export const logStore = defineStore({
@@ -50,6 +52,7 @@ export const logStore = defineStore({
     selectorStore: useSelectorStore(),
     logs: [],
     logsTotal: 0,
+    loadLogs: false,
   }),
   actions: {
     setLogCondition(data: any) {
@@ -111,22 +114,33 @@ export const logStore = defineStore({
       return res.data;
     },
     async getLogs() {
+      const dashboardStore = useDashboardStore();
+      if (dashboardStore.layerId === "BROWSER") {
+        return this.getBrowserLogs();
+      }
+      return this.getServiceLogs();
+    },
+    async getServiceLogs() {
+      this.loadLogs = true;
       const res: AxiosResponse = await graphql
         .query("queryServiceLogs")
         .params({ condition: this.conditions });
-
+      this.loadLogs = false;
       if (res.data.errors) {
         return res.data;
       }
+
       this.logs = res.data.data.queryLogs.logs;
       this.logsTotal = res.data.data.queryLogs.total;
       return res.data;
     },
     async getBrowserLogs() {
+      this.loadLogs = true;
       const res: AxiosResponse = await graphql
         .query("queryBrowserErrorLogs")
         .params({ condition: this.conditions });
 
+      this.loadLogs = false;
       if (res.data.errors) {
         return res.data;
       }

src/views/dashboard/controls/Log.vue

@@ -33,7 +33,6 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import type { PropType } from "vue";
 import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import Header from "../related/log/Header.vue";
@@ -42,8 +41,8 @@ import List from "../related/log/List.vue";
 /*global defineProps */
 const props = defineProps({
   data: {
-    type: Object as PropType<any>,
+    type: Object,
-    default: () => ({ graph: {} }),
+    default: () => ({}),
   },
   activeIndex: { type: String, default: "" },
 });

src/views/dashboard/controls/Tab.vue

@@ -119,6 +119,7 @@ import Topology from "./Topology.vue";
 import Widget from "./Widget.vue";
 import Trace from "./Trace.vue";
 import Profile from "./Profile.vue";
+import Log from "./Log.vue";
 
 const props = {
   data: {
@@ -129,7 +130,7 @@ const props = {
 };
 export default defineComponent({
   name: "Tab",
-  components: { Topology, Widget, Trace, Profile },
+  components: { Topology, Widget, Trace, Profile, Log },
   props,
   setup(props) {
     const { t } = useI18n();

src/views/dashboard/data.ts

@@ -165,10 +165,10 @@ 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: "assignment", content: "Add Log", id: "log" },
+  { name: "assignment", content: "Add Log", id: "addLog" },
   // { 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

@@ -309,6 +309,9 @@ function setTabControls(id: string) {
     case "addTrace":
       dashboardStore.addTabControls("Trace");
       break;
+    case "addLog":
+      dashboardStore.addTabControls("Log");
+      break;
     case "addProfile":
       dashboardStore.addTabControls("Profile");
       break;
@@ -335,10 +338,10 @@ function setControls(id: string) {
     case "addProfile":
       dashboardStore.addControl("Profile");
       break;
-    case "log":
+    case "addLog":
       dashboardStore.addControl("Log");
       break;
-    case "topology":
+    case "addTopology":
       dashboardStore.addControl("Topology");
       break;
     case "settings":

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

@@ -224,13 +224,6 @@ function searchLogs() {
   queryLogs();
 }
 async function queryLogs() {
-  if (dashboardStore.layerId === "Browser") {
-    const res = await logStore.getBrowserLogs();
-    if (res && res.errors) {
-      ElMessage.error(res.errors);
-    }
-    return;
-  }
   const res = await logStore.getLogs();
   if (res && res.errors) {
     ElMessage.error(res.errors);
@@ -289,7 +282,7 @@ watch(
     if (dashboardStore.entity !== EntityType[0].value) {
       return;
     }
-    searchLogs();
+    init();
   }
 );
 </script>

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

@@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div>
-    <div class="log-t-loading" v-show="loading">
+    <div class="log-t-loading" v-show="logStore.loadLogs">
-      <Icon iconName="spinner" />
+      <Icon iconName="spinner" size="lg" />
     </div>
     <LogTable :tableData="logStore.logs || []" :type="type" :noLink="true">
       <div class="log-tips" v-if="!logStore.logs.length">{{ t("noData") }}</div>
@@ -40,14 +40,9 @@ import { useLogStore } from "@/store/modules/log";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { ElMessage } from "element-plus";
 
-/* global defineProps*/
-defineProps({
-  traceId: { type: String, default: "" },
-});
 const { t } = useI18n();
 const logStore = useLogStore();
 const dashboardStore = useDashboardStore();
-const loading = ref<boolean>(false);
 const type = ref<string>(
   dashboardStore.layerId === "BROWSER" ? "browser" : "service"
 );
@@ -59,12 +54,10 @@ function updatePage(p: number) {
   queryLogs();
 }
 async function queryLogs() {
-  loading.value = true;
   const res = await logStore.getLogs();
   if (res && res.errors) {
     ElMessage.error(res.errors);
   }
-  loading.value = false;
 }
 </script>
 <style lang="scss" scoped>
@@ -73,4 +66,8 @@ async function queryLogs() {
   text-align: center;
   margin: 50px 0;
 }
+
+.log-t-loading {
+  text-align: center;
+}
 </style>