Merge pull request #31 from stc-community/feat-mesh-logs-2023.07.26

Feat: add mesh service logs

.gitignore

@@ -1,5 +1,4 @@
 # Logs
-logs
 *.log
 npm-debug.log*
 yarn-debug.log*

locales/en.yaml

@@ -49,6 +49,7 @@ nav:
   services: Services
   fuse: Fuse
   "rate limit": Rate Limit
+  logs: Logs
 
   deployments: Deployments
   pods: Pods
@@ -172,6 +173,15 @@ mesh:
 
   "service monitor": Service Monitor
 
+  # mesh logs section
+  "Type your service id here": Type your service id here
+  "Last 5 minutes": Last 5 minutes
+  "Last 30 minutes": Last 30 minutes
+  "Last 1 hour": Last 1 hour
+  Service: Service
+  Message: Message
+  Time: Time
+
 wasm:
   "Information": Information
   arch: ARCH

locales/zh-CN.yaml

@@ -49,6 +49,7 @@ nav:
   services: 服务列表
   fuse: 服务熔断
   "rate limit": 服务限流
+  logs: 服务日志
 
   deployments: Deployments
   pods: Pods
@@ -172,6 +173,15 @@ mesh:
 
   "service monitor": 服务监控
 
+  # mesh logs section
+  "Type your service id here": 输入服务识别号
+  "Last 5 minutes": 过去 5 分钟
+  "Last 30 minutes": 过去 30 分钟
+  "Last 1 hour": 过去 1 小时
+  Service: 服务
+  Message: 日志内容
+  Time: 时间
+
 wasm:
   Information: 信息
   arch: 架构

src/router/modules/mesh.ts

@@ -43,6 +43,15 @@ export default {
         title: "Rate Limit",
         icon: "simple-icons:speedtest"
       }
+    },
+    {
+      path: "logs",
+      name: "mesh.logs",
+      component: () => import("@/views/mesh/logs/index.vue"),
+      meta: {
+        title: "Logs",
+        icon: "ep:document"
+      }
     }
   ]
 } as RouteConfigsTable;

src/views/mesh/logs/index.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from "vue";
+import { loadData } from "@/utils/shared";
+import dayjs from "dayjs";
+import { useLang } from "@/hooks/useLang";
+const { t } = useLang();
+
+const data = reactive({
+  logs: [],
+  disabled: true,
+  page: 1,
+  limit_num: 3
+});
+const loading = ref(false);
+
+const loadMore = async () => {
+  loadServiceLogs();
+};
+
+const form = reactive({
+  unique_id: "",
+  start_time: dayjs().subtract(5, "minutes").unix(),
+  end_time: dayjs().unix()
+});
+
+const loadServiceLogs = async () => {
+  loading.value = true;
+  loadData(
+    data.logs,
+    "log.log.list",
+    {
+      unique_id: form.unique_id,
+      start_time: form.start_time,
+      end_time: form.end_time,
+      page: data.page,
+      limit_num: data.limit_num
+    },
+    loading
+  );
+  data.page++;
+};
+
+onMounted(async () => {
+  loadServiceLogs();
+});
+
+const onSearch = () => {
+  data.logs.length = 0;
+  data.page = 1;
+  loadServiceLogs();
+};
+const onChangeTimerange = e => {
+  const value = e.target.value;
+  form.start_time = dayjs().subtract(value, "minutes").unix();
+};
+</script>
+
+<template>
+  <h2>{{ t("nav." + $route.meta.title.toLowerCase()) }}</h2>
+  <div class="flex items-end space-x-5 mt-10 mb-10">
+    <input
+      type="text"
+      :placeholder="t('mesh.Type your service id here')"
+      class="input input-bordered w-[300px]"
+      v-model="form.unique_id"
+    />
+
+    <select
+      class="select select-bordered w-full max-w-xs"
+      @change="onChangeTimerange"
+    >
+      <option value="5" selected>{{ t("mesh.Last 5 minutes") }}</option>
+      <option value="30">{{ t("mesh.Last 30 minutes") }}</option>
+      <option value="60">{{ t("mesh.Last 1 hour") }}</option>
+    </select>
+
+    <button class="btn btn-square btn-primary" @click="onSearch">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-6 w-6"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+        />
+      </svg>
+    </button>
+  </div>
+  <div class="overflow-x-auto">
+    <table class="table">
+      <thead>
+        <tr>
+          <th class="w-[50px]" />
+          <th>{{ t("mesh.Service") }}</th>
+          <th>{{ t("mesh.Message") }}</th>
+          <th>{{ t("mesh.Time") }}</th>
+        </tr>
+      </thead>
+      <tbody class="text-xs">
+        <tr v-for="(i, k) in data.logs || []">
+          <th>{{ k + 1 }}</th>
+          <td>{{ i.uniqueId }}</td>
+          <td class="w-8/12">
+            <p class="break-all line-clamp-2">{{ i.message }}</p>
+          </td>
+          <td>
+            <span class="w-[240px] inline-block">{{ i.timestamp }}</span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <button class="btn btn-primary mt-10" :disabled="loading" @click="loadMore">
+      <span v-if="loading" class="loading loading-spinner" />
+      {{ t("common.loadmore") }}
+    </button>
+  </div>
+</template>