feat: add alarm details

src/types/alarm.d.ts

@@ -26,7 +26,7 @@ export interface Alarm {
   startTime: string;
   scope: string;
   tags: Array<{ key: string; value: string }>;
-  events: any[];
+  events: Event[];
 }
 
 export interface Event {

src/views/alarm/Content.vue

@@ -17,7 +17,7 @@ limitations under the License. -->
     <div
       v-for="(i, index) in alarmStore.alarms"
       :key="index"
-      class="mb-10 clear timeline-item"
+      class="clear timeline-item"
       @click="showDetails(i)"
     >
       <div class="g-sm-3 grey sm hide-xs time-line tr">
@@ -43,30 +43,97 @@ limitations under the License. -->
       </div>
     </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>
 </template>
 <script lang="ts" setup>
 import { ref } from "vue";
 import dayjs from "dayjs";
 import { useI18n } from "vue-i18n";
-import { Alarm } from "@/types/alarm";
+import { Alarm, Event } from "@/types/alarm";
 import { useAlarmStore } from "@/store/modules/alarm";
+import { EventsDetailHeaders, AlarmDetailCol } 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">
+<style lang="scss" scoped>
 @import "./index.scss";
 </style>

src/views/alarm/data.ts

@@ -7,3 +7,33 @@ export const AlarmOptions = [
   { 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",
+  },
+];

src/views/alarm/index.scss

@@ -20,6 +20,60 @@
   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;
@@ -59,51 +113,3 @@
     padding-left: 120px;
   }
 }
-
-.time-line {
-  padding: 14px 30px;
-  min-height: 63px;
-  max-width: 132px;
-}
-
-.timeline-table-i {
-  padding: 10px 15px;
-  border-left: 4px solid #2e2f331a;
-  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;
-}