From b98ba1b096eb2f7059fc9caed87efecf7c676c89 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Mon, 7 Mar 2022 16:42:57 +0800
Subject: [PATCH] feat: add log list

---
 src/router/alert.ts                           | 45 ------------
 src/router/index.ts                           |  2 -
 src/styles/lib.scss                           |  8 +++
 src/views/components/LogTable/LogDetail.vue   | 31 ++++-----
 src/views/components/LogTable/LogService.vue  |  2 +-
 src/views/components/LogTable/data.ts         |  4 +-
 src/views/dashboard/controls/Log.vue          |  5 +-
 src/views/dashboard/related/log/Header.vue    |  7 ++
 src/views/dashboard/related/log/List.vue      | 69 +++++++++++++++++++
 src/views/dashboard/related/trace/Detail.vue  |  4 +-
 .../dashboard/related/trace/TraceList.vue     |  2 +-
 11 files changed, 109 insertions(+), 70 deletions(-)
 delete mode 100644 src/router/alert.ts

diff --git a/src/router/alert.ts b/src/router/alert.ts
deleted file mode 100644
index c0e27fb2..00000000
--- a/src/router/alert.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { RouteRecordRaw } from "vue-router";
-import Layout from "@/layout/Index.vue";
-
-export const routesAlert: Array<RouteRecordRaw> = [
-  {
-    path: "",
-    name: "Alerts",
-    meta: {
-      title: "alerts",
-      icon: "notification_important",
-      hasGroup: false,
-      exact: false,
-    },
-    component: Layout,
-    children: [
-      {
-        path: "/alerts",
-        name: "Alerts",
-        meta: {
-          title: "alerts",
-          icon: "notification_important",
-          hasGroup: false,
-          exact: false,
-        },
-        component: () => import("@/views/Log.vue"),
-      },
-    ],
-  },
-];
diff --git a/src/router/index.ts b/src/router/index.ts
index f3e5557f..aa6e470d 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -23,7 +23,6 @@ import { routesInfra } from "./infrastructure";
 import { routesDashboard } from "./dashboard";
 // import { routesLog } from "./log";
 import { routesEvent } from "./event";
-import { routesAlert } from "./alert";
 import { routesSetting } from "./setting";
 import { routesAlarm } from "./alarm";
 
@@ -34,7 +33,6 @@ const routes: Array<RouteRecordRaw> = [
   ...routesInfra,
   ...routesDashboard,
   ...routesEvent,
-  ...routesAlert,
   ...routesSetting,
   ...routesAlarm,
 ];
diff --git a/src/styles/lib.scss b/src/styles/lib.scss
index 3462512e..a589ae10 100644
--- a/src/styles/lib.scss
+++ b/src/styles/lib.scss
@@ -107,6 +107,10 @@
   margin-bottom: 5px;
 }
 
+.mt-5 {
+  margin-top: 5px;
+}
+
 .ml-5 {
   margin-left: 5px;
 }
@@ -123,6 +127,10 @@
   margin-left: 20px;
 }
 
+.mb-10 {
+  margin-bottom: 10px;
+}
+
 .mr-5 {
   margin-right: 5px;
 }
diff --git a/src/views/components/LogTable/LogDetail.vue b/src/views/components/LogTable/LogDetail.vue
index 45881327..d7170f86 100644
--- a/src/views/components/LogTable/LogDetail.vue
+++ b/src/views/components/LogTable/LogDetail.vue
@@ -19,22 +19,20 @@ limitations under the License. -->
       v-for="(item, index) in columns"
       :key="index"
     >
-      <template>
-        <span class="g-sm-4 grey">{{ t(item.value) }}:</span>
-        <span v-if="item.label === 'timestamp'" class="g-sm-8">
-          {{ dateFormat(currentLog[item.label]) }}
-        </span>
-        <textarea
-          class="content"
-          :readonly="true"
-          v-else-if="item.label === 'content'"
-          :value="currentLog[item.label]"
-        />
-        <span v-else-if="item.label === 'tags'" class="g-sm-8">
-          <div v-for="(d, index) in logTags" :key="index">{{ d }}</div>
-        </span>
-        <span v-else class="g-sm-8">{{ currentLog[item.label] }}</span>
-      </template>
+      <span class="g-sm-4 grey">{{ t(item.value) }}:</span>
+      <span v-if="item.label === 'timestamp'" class="g-sm-8 mb-10">
+        {{ dateFormat(currentLog[item.label]) }}
+      </span>
+      <textarea
+        class="content mb-10"
+        :readonly="true"
+        v-else-if="item.label === 'content'"
+        :value="currentLog[item.label]"
+      />
+      <span v-else-if="item.label === 'tags'" class="g-sm-8 mb-10">
+        <div v-for="(d, index) in logTags" :key="index">{{ d }}</div>
+      </span>
+      <span v-else class="g-sm-8 mb-10">{{ currentLog[item.label] }}</span>
     </div>
   </div>
 </template>
@@ -49,6 +47,7 @@ import { ServiceLogDetail } from "@/views/components/LogTable/data";
 const props = defineProps({
   currentLog: { type: Object as PropType<any>, default: () => ({}) },
 });
+console.log(props.currentLog);
 const { t } = useI18n();
 const columns = ServiceLogDetail;
 const logTags = computed(() => {
diff --git a/src/views/components/LogTable/LogService.vue b/src/views/components/LogTable/LogService.vue
index 59943d47..2331d12e 100644
--- a/src/views/components/LogTable/LogService.vue
+++ b/src/views/components/LogTable/LogService.vue
@@ -38,7 +38,7 @@ import dayjs from "dayjs";
 import { ServiceLogConstants } from "./data";
 /*global defineProps, defineEmits */
 const props = defineProps({
-  data: { type: Array as any, default: () => [] },
+  data: { type: Object as any, default: () => ({}) },
   noLink: { type: Boolean, default: true },
 });
 const emit = defineEmits(["select"]);
diff --git a/src/views/components/LogTable/data.ts b/src/views/components/LogTable/data.ts
index 9765e019..6a51b30c 100644
--- a/src/views/components/LogTable/data.ts
+++ b/src/views/components/LogTable/data.ts
@@ -48,11 +48,11 @@ export const ServiceLogConstants = [
 export const ServiceLogDetail = [
   {
     label: "serviceName",
-    value: "currentService",
+    value: "service",
   },
   {
     label: "serviceInstanceName",
-    value: "currentInstance",
+    value: "instance",
   },
   {
     label: "timestamp",
diff --git a/src/views/dashboard/controls/Log.vue b/src/views/dashboard/controls/Log.vue
index 542e6448..e3d8972e 100644
--- a/src/views/dashboard/controls/Log.vue
+++ b/src/views/dashboard/controls/Log.vue
@@ -27,7 +27,9 @@ limitations under the License. -->
     <div class="header">
       <Header />
     </div>
-    <div class="log flex-h">log list</div>
+    <div class="log">
+      <List />
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -35,6 +37,7 @@ import type { PropType } from "vue";
 import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import Header from "../related/log/Header.vue";
+import List from "../related/log/List.vue";
 
 /*global defineProps */
 const props = defineProps({
diff --git a/src/views/dashboard/related/log/Header.vue b/src/views/dashboard/related/log/Header.vue
index e441c65d..107be20b 100644
--- a/src/views/dashboard/related/log/Header.vue
+++ b/src/views/dashboard/related/log/Header.vue
@@ -219,6 +219,13 @@ 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);
diff --git a/src/views/dashboard/related/log/List.vue b/src/views/dashboard/related/log/List.vue
index e69de29b..eb976179 100644
--- a/src/views/dashboard/related/log/List.vue
+++ b/src/views/dashboard/related/log/List.vue
@@ -0,0 +1,69 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+  <div>
+    <div class="log-t-loading" v-show="loading">
+      <Icon iconName="spinner" />
+    </div>
+    <LogTable :tableData="logStore.logs || []" :type="type" :noLink="true">
+      <div class="log-tips" v-if="!logStore.logs.length">{{ t("noData") }}</div>
+    </LogTable>
+    <div class="mt-5 mb-5">
+      <el-pagination
+        v-model:currentPage="logStore.conditions.paging.pageNum"
+        v-model:page-size="pageSize"
+        layout="prev, pager, next, jumper"
+        :total="logStore.logsTotal"
+        @current-change="updatePage"
+        :style="`float: right`"
+      />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+import LogTable from "@/views/components/LogTable/Index.vue";
+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"
+);
+const pageSize = ref<number>(15);
+function updatePage(p: number) {
+  logStore.setLogCondition({
+    paging: { pageNum: p, pageSize: pageSize.value, needTotal: true },
+  });
+  queryLogs();
+}
+async function queryLogs() {
+  loading.value = true;
+  const res = await logStore.getLogs();
+  if (res && res.errors) {
+    ElMessage.error(res.errors);
+  }
+  loading.value = false;
+}
+</script>
diff --git a/src/views/dashboard/related/trace/Detail.vue b/src/views/dashboard/related/trace/Detail.vue
index ade0f74e..3d13b2f4 100644
--- a/src/views/dashboard/related/trace/Detail.vue
+++ b/src/views/dashboard/related/trace/Detail.vue
@@ -166,7 +166,7 @@ export default defineComponent({
       dayjs(date).format(pattern);
     const showTraceLogs = ref<boolean>(false);
 
-    function handleClick(ids: string[]) {
+    function handleClick(ids: string[] | any) {
       let copyValue = null;
       if (ids.length === 1) {
         copyValue = ids[0];
@@ -176,7 +176,7 @@ export default defineComponent({
       copy(copyValue);
     }
 
-    async function changeTraceId(opt: Option[]) {
+    async function changeTraceId(opt: Option[] | any) {
       traceId.value = opt[0].value;
       loading.value = true;
       const res = await traceStore.getTraceSpans({ traceId: opt[0].value });
diff --git a/src/views/dashboard/related/trace/TraceList.vue b/src/views/dashboard/related/trace/TraceList.vue
index 8f863e50..9240e5de 100644
--- a/src/views/dashboard/related/trace/TraceList.vue
+++ b/src/views/dashboard/related/trace/TraceList.vue
@@ -101,7 +101,7 @@ function updatePage(p: number) {
   searchTrace();
 }
 
-function changeSort(opt: Option[]) {
+function changeSort(opt: Option[] | any) {
   traceStore.setTraceCondition({
     queryOrder: opt[0].value,
     paging: { pageNum: 1, pageSize: pageSize.value, needTotal: true },