Alec 114

ui/package.json

@@ -14,8 +14,8 @@
   },
   "scripts": {
     "dev": "vite --config vite.config.dev.ts",
-    "build": "vue-tsc --noEmit && vite build",
-    "preview": "vite preview --port 5002"
+    "build": "vue-tsc --noEmit && vite build && cp dist/* ../features/ui/src/main/resources/ui-ext/ ",
+    "preview": "vite build --mode development && vite preview --port 5002"
   },
   "dependencies": {
     "axios": "^0.26.1",

ui/src/components/AlarmsCountBySeverity.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { groupBy } from 'lodash'
-import { SEVERITY_COLOR } from '@/helpers/constants'
 import { TRelatedAlarm } from '@/types/TSituation'
 
 const props = defineProps<{
@@ -12,7 +11,7 @@ const props = defineProps<{
 	<div class="alarms-list">
 		<div
 			class="alarm-count"
-			:style="{ color: SEVERITY_COLOR[key.toString().toLowerCase()] }"
+			:class="[`${key.toString().toLowerCase()}-color`]"
 			v-for="(list, key) in groupBy(props?.relatedAlarms, 'severity')"
 			:key="key"
 		>
@@ -21,7 +20,9 @@ const props = defineProps<{
 	</div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
+@import '@/styles/variables.scss';
+
 .alarms-list {
 	display: flex;
 	flex-direction: row;

ui/src/components/SituationCard.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { SEVERITY_COLOR } from '@/helpers/constants'
 import SeverityStatus from '@/elements/SeverityStatus.vue'
 import AlarmsCountBySeverity from '@/components/AlarmsCountBySeverity.vue'
 import { TSituation } from '@/types/TSituation'
@@ -8,7 +7,6 @@ const props = defineProps<{
 	alarmInfo: TSituation
 }>()
 
-const severity = SEVERITY_COLOR[props.alarmInfo?.severity?.toLowerCase()]
 const emit = defineEmits(['situation-selected'])
 const handleSituationSelected = () => {
 	emit('situation-selected', props.alarmInfo?.id)
@@ -17,7 +15,10 @@ const handleSituationSelected = () => {
 
 <template>
 	<div v-on:click="handleSituationSelected" class="card">
-		<div class="severity-line"></div>
+		<div
+			class="severity-line"
+			:class="[`${props.alarmInfo?.severity?.toLowerCase()}-bg dark`]"
+		></div>
 		<div class="content">
 			<div class="title-row">
 				<span class="title">Situation {{ props.alarmInfo?.id }} </span>
@@ -57,7 +58,6 @@ const handleSituationSelected = () => {
 
 .severity-line {
 	width: 8px;
-	background-color: v-bind('severity');
 }
 
 .content {

ui/src/components/SituationDetail.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import SeverityStatus from '@/elements/SeverityStatus.vue'
-import AlarmsCountBySeverity from '@/components/AlarmsCountBySeverity.vue'
 import {
 	FeatherTab,
 	FeatherTabContainer,
 	FeatherTabPanel
 } from '@featherds/tabs'
+import { FeatherSortHeader, SORT } from '@featherds/table'
 import { TSituation } from '@/types/TSituation'
 
 const props = defineProps<{
@@ -23,7 +23,7 @@ const props = defineProps<{
 			</template>
 			<FeatherTabPanel class="panel">
 				<div class="id">
-					Situation - {{ props.alarmInfo?.id }}
+					<span>Situation - {{ props.alarmInfo?.id }}</span>
 					<SeverityStatus :severity="props.alarmInfo?.severity" />
 				</div>
 
@@ -39,7 +39,36 @@ const props = defineProps<{
 				<p>
 					<strong>Reduction key: </strong>{{ props.alarmInfo.reductionKey }}
 				</p>
-				<AlarmsCountBySeverity :relatedAlarms="props.alarmInfo.relatedAlarms" />
+				<div>
+					<table class="tc1 tr2 tc4 tr6" :class="{ condensed: true }">
+						<thead>
+							<tr>
+								<FeatherSortHeader
+									scope="col"
+									property="Id"
+									:sort="SORT.ASCENDING"
+								>
+									ID
+								</FeatherSortHeader>
+								<th scope="col">Severity</th>
+								<th scope="col">Node</th>
+								<th scope="col">Log msg</th>
+							</tr>
+						</thead>
+						<tbody>
+							<tr
+								:class="[`${alarm.severity.toLowerCase()}-bg`]"
+								v-for="alarm in props?.alarmInfo?.relatedAlarms"
+								:key="alarm.id"
+							>
+								<td>{{ alarm.id }}</td>
+								<td>{{ alarm.severity }}</td>
+								<td>{{ alarm.nodeLabel }}</td>
+								<td>{{ alarm.logMessage }}</td>
+							</tr>
+						</tbody>
+					</table>
+				</div>
 			</FeatherTabPanel>
 			<FeatherTabPanel class="panel">Topology</FeatherTabPanel>
 			<FeatherTabPanel class="panel">Metrics</FeatherTabPanel>
@@ -49,6 +78,7 @@ const props = defineProps<{
 
 <style scoped lang="scss">
 @import '@/styles/variables.scss';
+@import '@featherds/table/scss/table';
 
 .detail {
 	width: 100%;
@@ -64,5 +94,20 @@ const props = defineProps<{
 	font-weight: 600;
 	font-size: 22px;
 	margin-bottom: 20px;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+}
+
+table {
+	width: 100%;
+	@include table();
+	@include row-select();
+	&.hover {
+		@include row-hover();
+	}
+	&.condensed {
+		@include table-condensed();
+	}
 }
 </style>

ui/src/elements/SeverityStatus.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { SEVERITY_COLOR } from '@/helpers/constants'
-
 const props = defineProps({
 	severity: {
 		required: false,
@@ -13,10 +11,7 @@ const props = defineProps({
 	<span
 		v-if="props?.severity"
 		class="severity-status"
-		:style="{
-			color: SEVERITY_COLOR[props?.severity?.toLowerCase()],
-			borderColor: SEVERITY_COLOR[props?.severity?.toLowerCase()]
-		}"
+		:class="[`${props.severity.toLowerCase()}-color`]"
 		>{{ props.severity }}</span
 	>
 </template>

ui/src/helpers/constants.ts

@@ -1,7 +0,0 @@
-export const SEVERITY_COLOR: Record<string, string> = {
-	critical: 'red',
-	major: 'orange',
-	warning: 'orange',
-	minor: '#dae830',
-	normal: 'green'
-}

ui/src/services/AlarmService.ts

@@ -1,11 +1,11 @@
 import { ApiResponse } from '@/types/TSituation'
 import { v2 } from './axiosInstances'
 
-const endpoint = '/alarms'
+const situationEndpoint = '/alarms?_s=isSituation==true'
 
 export const getSituations = async (): Promise<ApiResponse | false> => {
 	try {
-		const resp = await v2.get(endpoint)
+		const resp = await v2.get(situationEndpoint)
 		if (resp.status === 204) {
 			return { alarm: [], totalCount: 0, count: 0, offset: 0 }
 		}

ui/src/styles/variables.scss

@@ -1,8 +1,103 @@
 @import '@featherds/styles/themes/variables';
 
 $border-grey: #dfdfdf;
-$severity-normal: $success;
-$severity-warning: $warning;
-$severity-minor: $warning;
-$severity-major: $warning;
-$severity-critical: $error;
+
+$severity-alarm-critical-text: black;
+$severity-alarm-critical-bg: #f5cdcd;
+$severity-alarm-critical-border: #cc0000;
+
+$severity-alarm-major-text: black;
+$severity-alarm-major-bg: #ffd7cd;
+$severity-alarm-major-border: #ff3300;
+
+$severity-alarm-minor-text: black;
+$severity-alarm-minor-bg: #ffebcd;
+$severity-alarm-minor-border: #ff9900;
+
+$severity-alarm-warning-text: black;
+$severity-alarm-warning-bg: #fff5cd;
+$severity-alarm-warning-border: #ffcc00;
+
+$severity-alarm-indeterminate-text: black;
+$severity-alarm-indeterminate-bg: #ebebcd;
+$severity-alarm-indeterminate-border: #999000;
+
+$severity-alarm-normal-text: black;
+$severity-alarm-normal-bg: #d7e1cd;
+$severity-alarm-normal-border: #336600;
+
+$severity-alarm-cleared-text: black;
+$severity-alarm-cleared-bg: #eeeeee;
+$severity-alarm-cleared-border: #999999;
+
+.critical-bg {
+	background-color: $severity-alarm-critical-bg;
+	&.dark {
+		background-color: $severity-alarm-critical-border;
+	}
+}
+
+.major-bg {
+	background-color: $severity-alarm-major-bg;
+	&.dark {
+		background-color: $severity-alarm-major-border;
+	}
+}
+
+.minor-bg {
+	background-color: $severity-alarm-minor-bg;
+	&.dark {
+		background-color: $severity-alarm-minor-border;
+	}
+}
+
+.indeterminate-bg {
+	background-color: $severity-alarm-indeterminate-bg;
+	&.dark {
+		background-color: $severity-alarm-indeterminate-border;
+	}
+}
+
+.normal-bg {
+	background-color: $severity-alarm-normal-bg;
+	&.dark {
+		background-color: $severity-alarm-normal-border;
+	}
+}
+
+.cleared-bg {
+	background-color: $severity-alarm-cleared-bg;
+	&.dark {
+		background-color: $severity-alarm-cleared-border;
+	}
+}
+
+.critical-color {
+	border-color: $severity-alarm-critical-border;
+	color: $severity-alarm-critical-border;
+}
+
+.major-color {
+	border-color: $severity-alarm-major-border;
+	color: $severity-alarm-major-border;
+}
+
+.minor-color {
+	border-color: $severity-alarm-minor-border;
+	color: $severity-alarm-minor-border;
+}
+
+.indeterminate-color {
+	border-color: $severity-alarm-indeterminate-border;
+	color: $severity-alarm-indeterminate-border;
+}
+
+.normal-color {
+	border-color: $severity-alarm-normal-border;
+	color: $severity-alarm-normal-border;
+}
+
+.cleared-color {
+	border-color: $severity-alarm-cleared-border;
+	color: $severity-alarm-cleared-border;
+}

ui/src/types/TSituation.ts

@@ -54,6 +54,7 @@ export type TRelatedAlarm = {
 	reductionKey: string
 	description: string
 	logMessage: string
+	nodeLabel: string
 }
 
 export type TAlarm = {