feat: Implement visualizing alarm (#23)

src/assets/icons/spam.svg

@@ -0,0 +1,16 @@
+<!-- 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. -->
+
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M12.79 3.554c.749.461 1.21 1.315 1.21 2.239v4.414c0 .924-.461 1.778-1.21 2.24l-3.58 2.207a2.288 2.288 0 0 1-2.42 0l-3.58-2.208C2.461 11.985 2 11.131 2 10.207V5.793c0-.924.461-1.778 1.21-2.24l3.58-2.207a2.288 2.288 0 0 1 2.42 0l3.58 2.208zm-4.548-.416a.458.458 0 0 0-.484 0l-3.58 2.207a.525.525 0 0 0-.241.448v4.414c0 .185.092.356.242.448l3.579 2.207c.15.093.334.093.484 0l3.58-2.207a.525.525 0 0 0 .241-.448V5.793a.525.525 0 0 0-.242-.448L8.242 3.138zM8 5a1 1 0 0 1 1 1v2a1 1 0 1 1-2 0V6a1 1 0 0 1 1-1zm0 6.5c-.552 0-1-.336-1-.75S7.448 10 8 10s1 .336 1 .75-.448.75-1 .75z" id="a"/></svg>

src/graphql/fragments/alarm.ts

@@ -0,0 +1,50 @@
+/**
+ * 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.
+ */
+
+export const Alarm = {
+  variable:
+    "$keyword: String, $scope: Scope, $duration:Duration!, $tags:[AlarmTag], $paging: Pagination!",
+  query: `
+    getAlarm(keyword: $keyword, scope: $scope, duration: $duration, paging: $paging, tags: $tags) {
+      items: msgs {
+        key: id
+        message
+        startTime
+        scope
+        tags {
+          key
+          value
+        }
+        events {
+          uuid
+          source {
+            service serviceInstance endpoint
+          }
+          name
+          type
+          message
+          parameters {
+            key
+            value
+          }
+          startTime
+          endTime
+        }
+      }
+      total
+    }`,
+};

src/graphql/index.ts

@@ -23,6 +23,7 @@ import * as topology from "./query/topology";
 import * as trace from "./query/trace";
 import * as log from "./query/log";
 import * as profile from "./query/profile";
+import * as alarm from "./query/alarm";
 
 const query: { [key: string]: string } = {
   ...app,
@@ -32,6 +33,7 @@ const query: { [key: string]: string } = {
   ...trace,
   ...log,
   ...profile,
+  ...alarm,
 };
 class Graphql {
   private queryData = "";

src/graphql/query/alarm.ts

@@ -0,0 +1,20 @@
+/**
+ * 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 { Alarm } from "../fragments/alarm";
+
+export const queryAlarms = `query queryAlarms(${Alarm.variable}) {${Alarm.query}}`;

src/locales/lang/en.ts

@@ -187,7 +187,7 @@ const msg = {
   list: "List",
   tree: "Tree",
   filterScope: "Filter Scope",
-  searchKeyword: "Search Keyword",
+  searchKeyword: "Keyword",
   quarterHourCutTip: "Last 15 mins",
   halfHourCutTip: "Last 30 mins",
   hourCutTip: "Last 1 hour",
@@ -223,7 +223,7 @@ const msg = {
   view: "View",
   timeTips: "Time interval cannot exceed 60 days",
   standardAPM: "Standard",
-  entityType: "Entity type",
+  entityType: "Entity Type",
   maxItemNum: "Max number of Item",
   independentSelector: "Selectors",
   unknownMetrics: "Unknown Metrics",

src/locales/lang/zh.ts

@@ -189,7 +189,7 @@ const msg = {
   list: "列表",
   tree: "树结构",
   filterScope: "过滤范围",
-  searchKeyword: "关键字搜索",
+  searchKeyword: "关键字",
   quarterHourCutTip: "最近15分钟",
   halfHourCutTip: "最近30分钟",
   hourCutTip: "最近1小时",

src/router/alarm.ts

@@ -33,10 +33,9 @@ export const routesAlarm: Array<RouteRecordRaw> = [
         path: "/alarm",
         name: "Alarm",
         meta: {
-          title: "alarmList",
           exact: false,
         },
-        component: () => import("@/views/Log.vue"),
+        component: () => import("@/views/Alarm.vue"),
       },
     ],
   },

src/router/index.ts

@@ -21,7 +21,6 @@ import { routesMesh } from "./serviceMesh";
 import { routesDatabase } from "./database";
 import { routesInfra } from "./infrastructure";
 import { routesDashboard } from "./dashboard";
-// import { routesLog } from "./log";
 import { routesEvent } from "./event";
 import { routesSetting } from "./setting";
 import { routesAlarm } from "./alarm";
@@ -32,9 +31,9 @@ const routes: Array<RouteRecordRaw> = [
   ...routesDatabase,
   ...routesInfra,
   ...routesDashboard,
+  ...routesAlarm,
   ...routesEvent,
   ...routesSetting,
-  ...routesAlarm,
 ];
 
 const router = createRouter({

src/store/modules/alarm.ts

@@ -0,0 +1,55 @@
+/**
+ * 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 { defineStore } from "pinia";
+import { store } from "@/store";
+import graphql from "@/graphql";
+import { AxiosResponse } from "axios";
+import { Alarm } from "@/types/alarm";
+
+interface AlarmState {
+  loading: boolean;
+  alarms: Alarm[];
+  total: number;
+}
+
+export const alarmStore = defineStore({
+  id: "alarm",
+  state: (): AlarmState => ({
+    loading: false,
+    alarms: [],
+    total: 0,
+  }),
+  actions: {
+    async getAlarms(params: any) {
+      const res: AxiosResponse = await graphql
+        .query("queryAlarms")
+        .params(params);
+      if (res.data.errors) {
+        return res.data;
+      }
+      if (res.data.data.getAlarm.items) {
+        this.alarms = res.data.data.getAlarm.items;
+        this.total = res.data.data.getAlarm.total;
+      }
+      return res.data;
+    },
+  },
+});
+
+export function useAlarmStore(): any {
+  return alarmStore(store);
+}

src/styles/lib.scss

@@ -146,6 +146,12 @@
 .mr-20 {
   margin-right: 20px;
 }
+
+.clear::after {
+  display: table;
+  content: "";
+  clear: both;
+}
 @keyframes loading {
   0% {
     transform: rotate(0deg);

src/types/alarm.d.ts

@@ -0,0 +1,46 @@
+/**
+ * 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.
+ */
+
+export interface AlarmParams {
+  paging: number;
+  type: string;
+}
+
+export interface Alarm {
+  message: string;
+  key: string;
+  startTime: string;
+  scope: string;
+  tags: Array<{ key: string; value: string }>;
+  events: Event[];
+}
+
+export interface Event {
+  endTime: number;
+  startTime: number;
+  type: string;
+  name: string;
+  message: string;
+  uuid: string;
+  source: Source;
+}
+
+export interface Source {
+  service?: string;
+  endpoint?: string;
+  serviceInstance?: string;
+}

src/views/Alarm.vue

@@ -0,0 +1,35 @@
+<!-- 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 class="alarm flex-v">
+    <Header />
+    <Content />
+  </div>
+</template>
+<script lang="ts" setup>
+import { useAppStoreWithOut } from "@/store/modules/app";
+import Header from "./alarm/Header.vue";
+import Content from "./alarm/Content.vue";
+
+const appStore = useAppStoreWithOut();
+appStore.setPageTitle("Alarm");
+</script>
+<style lang="scss" scoped>
+.alarm {
+  flex-grow: 1;
+  height: 100%;
+  font-size: 12px;
+}
+</style>

src/views/alarm/Content.vue

@@ -0,0 +1,190 @@
+<!-- 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 class="timeline-table clear">
+    <div
+      v-for="(i, index) in alarmStore.alarms"
+      :key="index"
+      class="clear timeline-item"
+    >
+      <div class="g-sm-3 grey sm hide-xs time-line tr">
+        {{ dateFormat(parseInt(i.startTime)) }}
+      </div>
+      <div class="timeline-table-i g-sm-9" @click="showDetails(i)">
+        <div class="message mb-5 b">
+          {{ i.message }}
+        </div>
+        <div
+          class="timeline-table-i-scope mr-10 l sm"
+          :class="{
+            blue: i.scope === 'Service',
+            green: i.scope === 'Endpoint',
+            yellow: i.scope === 'ServiceInstance',
+          }"
+        >
+          {{ t(i.scope.toLowerCase()) }}
+        </div>
+        <div class="grey sm show-xs">
+          {{ dateFormat(parseInt(i.startTime)) }}
+        </div>
+      </div>
+    </div>
+    <div v-if="!alarmStore.alarms.length" class="tips">{{ t("noData") }}</div>
+  </div>
+  <el-dialog
+    v-model="isShowDetails"
+    :title="t('alarmDetail')"
+    fullscreen
+    :destroy-on-close="true"
+    @closed="isShowDetails = false"
+  >
+    <div
+      class="mb-10 clear alarm-detail"
+      v-for="(item, index) in AlarmDetailCol"
+      :key="index"
+    >
+      <span class="g-sm-2 grey">{{ t(item.value) }}:</span>
+      <span v-if="item.label === 'startTime'">
+        {{ dateFormat(currentDetail[item.label]) }}
+      </span>
+      <span v-else-if="item.label === 'tags'">
+        <div v-for="(d, index) in alarmTags" :key="index">{{ d }}</div>
+      </span>
+      <span v-else-if="item.label === 'events'" class="event-detail">
+        <div>
+          <ul>
+            <li>
+              <span
+                v-for="(i, index) of EventsDetailHeaders"
+                :class="i.class"
+                :key="i.class + index"
+              >
+                {{ t(i.text) }}
+              </span>
+            </li>
+            <li
+              v-for="event in currentEvents"
+              :key="event.uuid"
+              @click="viewEventDetail(event)"
+            >
+              <span
+                v-for="(d, index) of EventsDetailHeaders"
+                :class="d.class"
+                :key="event.uuid + index"
+              >
+                <span v-if="d.class === 'startTime' || d.class === 'endTime'">
+                  {{ dateFormat(event[d.class]) }}
+                </span>
+                <span v-else>
+                  {{ event[d.class] }}
+                </span>
+              </span>
+            </li>
+          </ul>
+        </div>
+      </span>
+      <span v-else>{{ currentDetail[item.label] }}</span>
+    </div>
+  </el-dialog>
+  <el-dialog
+    v-model="showEventDetails"
+    :title="t('eventDetail')"
+    fullscreen
+    :destroy-on-close="true"
+    @closed="showEventDetails = false"
+  >
+    <div class="event-detail">
+      <div
+        class="mb-10"
+        v-for="(eventKey, index) in EventsDetailKeys"
+        :key="index"
+      >
+        <span class="keys">{{ t(eventKey.text) }}</span>
+        <span v-if="eventKey.class === 'parameters'">
+          <span v-for="(d, index) of currentEvent[eventKey.class]" :key="index">
+            {{ d.key }}={{ d.value }};
+          </span>
+        </span>
+        <span
+          v-else-if="
+            eventKey.class === 'startTime' || eventKey.class === 'endTime'
+          "
+        >
+          {{ dateFormat(currentEvent[eventKey.class]) }}
+        </span>
+        <span v-else-if="eventKey.class === 'source'" class="source">
+          <span
+            >{{ t("service") }}:
+            {{ currentEvent[eventKey.class].service }}</span
+          >
+          <div v-show="currentEvent[eventKey.class].endpoint">
+            {{ t("endpoint") }}:
+            {{ currentEvent[eventKey.class].endpoint }}
+          </div>
+          <div v-show="currentEvent[eventKey.class].serviceInstance">
+            {{ t("instance") }}:
+            {{ currentEvent[eventKey.class].serviceInstance }}
+          </div>
+        </span>
+        <span v-else>{{ currentEvent[eventKey.class] }}</span>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+<script lang="ts" setup>
+import { ref } from "vue";
+import dayjs from "dayjs";
+import { useI18n } from "vue-i18n";
+import { Alarm, Event } from "@/types/alarm";
+import { useAlarmStore } from "@/store/modules/alarm";
+import { EventsDetailHeaders, AlarmDetailCol, EventsDetailKeys } from "./data";
+
+const { t } = useI18n();
+const alarmStore = useAlarmStore();
+const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
+  dayjs(date).format(pattern);
+const isShowDetails = ref<boolean>(false);
+const showEventDetails = ref<boolean>(false);
+const currentDetail = ref<Alarm | any>({});
+const alarmTags = ref<string[]>([]);
+const currentEvents = ref<any[]>([]);
+const currentEvent = ref<Event | any>({});
+
+function showDetails(item: Alarm) {
+  isShowDetails.value = true;
+  currentDetail.value = item;
+  currentEvents.value = item.events;
+  alarmTags.value = currentDetail.value.tags.map(
+    (d: { key: string; value: string }) => {
+      return `${d.key} = ${d.value}`;
+    }
+  );
+}
+
+function viewEventDetail(event: Event) {
+  currentEvent.value = event;
+  showEventDetails.value = true;
+}
+</script>
+<style lang="scss" scoped>
+@import "./index.scss";
+
+.tips {
+  width: 100%;
+  margin: 20px 0;
+  text-align: center;
+  font-size: 14px;
+}
+</style>

src/views/alarm/Header.vue

@@ -0,0 +1,126 @@
+<!-- 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>
+  <nav class="alarm-tool flex-v">
+    <div class="flex-h">
+      <div class="mr-10">
+        <span class="grey">{{ t("entityType") }}: </span>
+        <Selector
+          v-model="entity"
+          :options="AlarmOptions"
+          placeholder="Select a layer"
+          @change="changeEntity"
+          class="alarm-tool-input"
+          size="small"
+        />
+      </div>
+      <div class="mr-10 ml-10">
+        <span class="grey">{{ t("searchKeyword") }}: </span>
+        <el-input
+          v-model="keyword"
+          class="alarm-tool-input"
+          @change="refreshAlarms({ pageNum: 1 })"
+        />
+      </div>
+      <div class="pagination">
+        <el-pagination
+          v-model:currentPage="pageNum"
+          v-model:page-size="pageSize"
+          layout="prev, jumper, total, next"
+          :total="alarmStore.total"
+          @current-change="changePage"
+          :pager-count="5"
+          small
+          :style="`--el-pagination-bg-color: #f0f2f5; --el-pagination-button-disabled-bg-color: #f0f2f5;`"
+        />
+      </div>
+    </div>
+    <ConditionTags
+      :type="'ALARM'"
+      @update="(data) => refreshAlarms({ pageNum: 1, tagsMap: data.tagsMap })"
+    />
+  </nav>
+</template>
+<script lang="ts" setup>
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+import ConditionTags from "@/views/components/ConditionTags.vue";
+import { AlarmOptions } from "./data";
+import { useAppStoreWithOut } from "@/store/modules/app";
+import { useAlarmStore } from "@/store/modules/alarm";
+import { ElMessage } from "element-plus";
+
+const appStore = useAppStoreWithOut();
+const alarmStore = useAlarmStore();
+const { t } = useI18n();
+const pageSize = 20;
+const entity = ref<string>("");
+const keyword = ref<string>("");
+const pageNum = ref<number>(1);
+
+refreshAlarms({ pageNum: 1 });
+
+async function refreshAlarms(param: { pageNum: number; tagsMap?: any }) {
+  const params: any = {
+    duration: appStore.durationTime,
+    paging: {
+      pageNum: param.pageNum,
+      pageSize,
+      needTotal: true,
+    },
+    tags: param.tagsMap,
+  };
+  params.scope = entity.value || undefined;
+  params.keyword = keyword.value || undefined;
+  const res = await alarmStore.getAlarms(params);
+
+  if (res.errors) {
+    ElMessage.error(res.errors);
+  }
+}
+
+function changeEntity(param: any) {
+  entity.value = param[0].value;
+  refreshAlarms({ pageNum: 1 });
+}
+
+function changePage(p: number) {
+  pageNum.value = p;
+  refreshAlarms({ pageNum: p });
+}
+</script>
+<style lang="scss" scoped>
+.alarm-tool {
+  font-size: 12px;
+  border-bottom: 1px solid #c1c5ca41;
+  background-color: #f0f2f5;
+  padding: 10px;
+  position: relative;
+}
+
+.alarm-tool-input {
+  border-style: unset;
+  outline: 0;
+  padding: 2px 5px;
+  width: 250px;
+  border-radius: 3px;
+}
+
+.pagination {
+  position: absolute;
+  top: 10px;
+  right: 5px;
+}
+</style>

src/views/alarm/data.ts

@@ -0,0 +1,65 @@
+/**
+ * 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.
+ */
+export const AlarmOptions = [
+  { label: "All", value: "" },
+  { label: "Service", value: "Service" },
+  { label: "ServiceInstance", value: "ServiceInstance" },
+  { label: "Endpoint", value: "Endpoint" },
+  { label: "ServiceRelation", value: "ServiceRelation" },
+  { label: "ServiceInstanceRelation", value: "ServiceInstanceRelation" },
+  { label: "EndpointRelation", value: "EndpointRelation" },
+];
+export const EventsDetailHeaders = [
+  { text: "eventID", class: "uuid" },
+  { text: "eventName", class: "name" },
+  { text: "eventsType", class: "type" },
+  { text: "startTime", class: "startTime" },
+  { text: "endTime", class: "endTime" },
+];
+
+export const AlarmDetailCol = [
+  {
+    label: "scope",
+    value: "scope",
+  },
+  {
+    label: "startTime",
+    value: "startTime",
+  },
+  {
+    label: "tags",
+    value: "tags",
+  },
+  {
+    label: "message",
+    value: "message",
+  },
+  {
+    label: "events",
+    value: "eventDetail",
+  },
+];
+
+export const EventsDetailKeys = [
+  { text: "eventID", class: "uuid" },
+  { text: "eventName", class: "name" },
+  { text: "eventsType", class: "type" },
+  { text: "startTime", class: "startTime" },
+  { text: "endTime", class: "endTime" },
+  { text: "eventsMessage", class: "message" },
+  { text: "eventSource", class: "source" },
+];

src/views/alarm/index.scss

@@ -0,0 +1,115 @@
+/**
+ * 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.
+ */
+
+.timeline-table {
+  padding: 30px 20px 20px 40px;
+  flex-grow: 1;
+  overflow: auto;
+  height: 100%;
+}
+
+.time-line {
+  padding: 14px 30px;
+  min-height: 63px;
+  max-width: 132px;
+}
+
+.timeline-table-i {
+  padding: 10px 15px;
+  border-left: 4px solid #eee;
+  position: relative;
+
+  &::after {
+    content: "";
+    display: inline-block;
+    position: absolute;
+    width: 7px;
+    height: 7px;
+    left: -23px;
+    top: 25px;
+    border-radius: 4px;
+    background-color: #448dfe;
+  }
+
+  &::before {
+    content: "";
+    display: inline-block;
+    position: absolute;
+    width: 1px;
+    height: calc(100% + 11px);
+    top: 0;
+    left: -20px;
+    border-radius: 5px;
+    background-color: #448dfe99;
+  }
+}
+
+.timeline-table-i-scope {
+  display: inline-block;
+  padding: 0 8px;
+  border: 1px solid;
+  margin-top: -1px;
+  border-radius: 4px;
+}
+
+.timeline-item {
+  cursor: pointer;
+  margin-bottom: 9px;
+}
+
+.alarm-detail {
+  max-height: 600px;
+  overflow: auto;
+
+  ul {
+    min-height: 100px;
+    overflow: auto;
+    margin-bottom: 20px;
+  }
+
+  li {
+    cursor: pointer;
+
+    > span {
+      width: 160px;
+      height: 20px;
+      line-height: 20px;
+      text-align: center;
+      display: inline-block;
+      border-bottom: 1px solid #ccc;
+      overflow: hidden;
+    }
+  }
+}
+
+.keys {
+  font-weight: bold;
+  display: inline-block;
+  width: 120px;
+}
+
+.source > span {
+  display: inline-block;
+}
+
+.source > div {
+  padding-left: 120px;
+}
+
+.uuid {
+  width: 280px;
+}

src/views/components/ConditionTags.vue

@@ -43,7 +43,7 @@ limitations under the License. -->
             <Icon class="icon-help mr-5" iconName="help" size="middle" />
           </span>
         </el-tooltip>
-        <b v-if="type === 'TRACE'">{{ t("noticeTag") }}</b>
+        <b v-if="type !== 'LOG'">{{ t("noticeTag") }}</b>
       </span>
     </div>
   </div>
@@ -59,7 +59,6 @@ defineProps({
 });
 const { t } = useI18n();
 const theme = ref<string>("dark");
-const type = ref<string>("");
 const tags = ref<string>("");
 const tagsList = ref<string[]>([]);
 

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

@@ -123,7 +123,7 @@ import { useLogStore } from "@/store/modules/log";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import { useSelectorStore } from "@/store/modules/selectors";
-import ConditionTags from "@/views/dashboard/related/components/ConditionTags.vue";
+import ConditionTags from "@/views/components/ConditionTags.vue";
 import { ElMessage } from "element-plus";
 import { EntityType } from "../../data";
 

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

@@ -95,7 +95,7 @@ import { useTraceStore } from "@/store/modules/trace";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import { useSelectorStore } from "@/store/modules/selectors";
-import ConditionTags from "@/views/dashboard/related/components/ConditionTags.vue";
+import ConditionTags from "@/views/components/ConditionTags.vue";
 import { ElMessage } from "element-plus";
 import { EntityType } from "../../data";