Skip to content

Commit

Permalink
feat: apply design qa issue (#5403)
Browse files Browse the repository at this point in the history 
Signed-off-by: NaYeong,Kim <[email protected]>
  • Loading branch information
@skdud4659
skdud4659 authored Jan 3, 2025
1 parent 4751fd0 commit d545719
Show file tree
Hide file tree
Showing 7 changed files with 87 additions and 37 deletions.
27 changes: 23 additions & 4 deletions apps/web/src/services/alert-manager/components/AlertDetailInfoTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,9 +119,9 @@ const getAssetInfo = (assetId: string) => {
--
</span>
<template v-else>
<div v-for="(item, idx) in value.slice(0, 3)"
<div v-for="(item, idx) in value"
:key="`resource-item-${idx}`"
class="flex items-center justify-between"
class="resource-item-wrapper flex items-center justify-between"
>
<p class="resource-item truncate">
{{ item?.name }}
Expand All @@ -131,7 +131,7 @@ const getAssetInfo = (assetId: string) => {
name: ASSET_INVENTORY_ROUTE.CLOUD_SERVICE.DETAIL._NAME,
params: getAssetInfo(item.asset_id)
}"
size="sm"
size="md"
highlight
action-icon="internal-link"
new-tab
Expand All @@ -151,7 +151,7 @@ const getAssetInfo = (assetId: string) => {
serviceId: value
}
}"
size="sm"
size="md"
highlight
action-icon="internal-link"
new-tab
Expand All @@ -172,3 +172,22 @@ const getAssetInfo = (assetId: string) => {
</p-definition-table>
</p-pane-layout>
</template>

<style scoped lang="postcss">
.alert-detail-info-table {
.resource-item-wrapper {
& + .resource-item-wrapper {
@apply relative;
margin-top: 1rem;
&::before {
@apply absolute border-t border-gray-200;
content: '';
top: -0.5rem;
left: 0;
width: 100%;
height: 0.125rem;
}
}
}
}
</style>
19 changes: 14 additions & 5 deletions apps/web/src/services/alert-manager/components/AlertsManagementTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -252,30 +252,32 @@ watch(() => route.query, async (query) => {
/>
</template>
<template #toolbox-bottom>
<div class="quick-filter-wrapper flex justify-between mr-4 mb-4 ml-4">
<div class="quick-filter-wrapper flex flex-col mr-4 mb-4 ml-4 gap-2">
<div class="status-filter-wrapper">
<span>{{ $t('ALERT_MANAGER.STATUS') }}</span>
<span class="label">{{ $t('ALERT_MANAGER.STATUS') }}</span>
<p-divider class="divider"
vertical
/>
<p-select-status v-for="(item, idx) in filterState.statusFields"
:key="idx"
:selected="filterState.selectedStatusFilter"
:value="item.name"
class="status"
@change="handleSelectFilter('status', item.name)"
>
{{ item.label }}
</p-select-status>
</div>
<div class="status-filter-wrapper">
<span>{{ $t('ALERT_MANAGER.ALERTS.LABEL_URGENCY') }}</span>
<span class="label">{{ $t('ALERT_MANAGER.ALERTS.LABEL_URGENCY') }}</span>
<p-divider class="divider"
vertical
/>
<p-select-status v-for="(item, idx) in filterState.urgencyFields"
:key="idx"
:selected="filterState.selectedUrgencyFilter"
:value="item.name"
class="status"
@change="handleSelectFilter('urgency', item.name)"
>
{{ item.label }}
Expand Down Expand Up @@ -374,14 +376,21 @@ watch(() => route.query, async (query) => {
}
.quick-filter-wrapper {
.status-filter-wrapper {
@apply flex items-center flex-wrap text-label-md text-gray-600;
@apply flex items-center flex-wrap text-label-sm;
gap: 0.75rem;
margin-top: -0.5rem;
padding-top: 0.125rem;
padding-bottom: 0.125rem;
.label {
@apply font-bold;
}
.divider {
height: 1rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.status {
@apply text-label-md;
}
}
@screen mobile {
Expand Down
6 changes: 4 additions & 2 deletions apps/web/src/services/alert-manager/components/ServiceDetailTabsOverviewStatusTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,8 +180,10 @@ watch(() => storeState.serviceInfo.service_id, (service_id) => {
height="0.75rem"
:color="red[200]"
/>
<span>{{ $t('ALERT_MANAGER.ALERTS.LOW') }}:</span>
<span>{{ item.low }}</span>
<p class="flex gap-1 text-gray-700">
<span>{{ $t('ALERT_MANAGER.ALERTS.LOW') }}:</span>
<span>{{ item.low }}</span>
</p>
</div>
</div>
</p-pane-layout>
Expand Down
14 changes: 13 additions & 1 deletion apps/web/src/services/alert-manager/components/ServiceDetailTabsSettingsEscalationPolicy.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import {
reactive, computed, watch,
reactive, computed, watch, onUnmounted,
} from 'vue';
import { makeDistinctValueHandler } from '@cloudforet/core-lib/component-util/query-search';
Expand Down Expand Up @@ -77,6 +77,7 @@ const storeState = reactive({
serviceId: computed<string>(() => serviceDetailPageState.serviceInfo.service_id),
defaultEscalationPolicyId: computed<string>(() => serviceDetailPageState.serviceInfo.escalation_policy_id),
timezone: computed<string>(() => serviceDetailPageGetters.timezone),
selectedEscalationPolicyId: computed<string|undefined>(() => serviceDetailPageState.selectedEscalationPolicyId),
});
const state = reactive({
loading: false,
Expand All @@ -95,6 +96,9 @@ const escalationPolicyListApiQueryHelper = new ApiQueryHelper().setSort('created
const queryTagHelper = useQueryTags({ keyItemSets: ESCALATION_POLICY_MANAGEMENT_TABLE_KEY_ITEMS_SETS });
const { queryTags } = queryTagHelper;
const initSelectedEscalationPolicy = () => {
state.selectIndex = state.items.findIndex((item) => item.escalation_policy_id === storeState.selectedEscalationPolicyId);
};
const getConnectChannelCount = (rules: EscalationPolicyRulesType[]): number => {
const allChannels = rules.flatMap((item) => item.channels);
const uniqueChannels = new Set(allChannels);
Expand Down Expand Up @@ -152,10 +156,18 @@ const fetchEscalationPolicyList = async () => {
}
};
watch([() => storeState.selectedEscalationPolicyId, () => state.items], ([id]) => {
if (!id) return;
initSelectedEscalationPolicy();
}, { immediate: true });
watch(() => storeState.serviceId, (id) => {
if (!id) return;
fetchEscalationPolicyList();
}, { immediate: true });
onUnmounted(() => {
serviceDetailPageStore.setSelectedEscalationPolicyId(undefined);
});
</script>

<template>
Expand Down
46 changes: 27 additions & 19 deletions apps/web/src/services/alert-manager/components/ServiceList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,10 @@ const handleClickServiceItem = (id: string) => {
},
}));
};
const handleClickEscalationPolicy = (id: string) => {
const handleClickEscalationPolicy = (id: string, escalationPolicyId: string) => {
if (id) {
serviceDetailPageStore.setSelectedEscalationPolicyId(escalationPolicyId);
}
router.push(getProperRouteLocation({
name: ALERT_MANAGER_ROUTE.SERVICE.DETAIL._NAME,
params: {
Expand Down Expand Up @@ -208,7 +211,7 @@ onMounted(async () => {
<p class="title text-gray-700">
{{ $t('ALERT_MANAGER.SERVICE.OPEN_ALERTS') }}
</p>
<p class="count font-medium">
<p class="text-display-md font-medium">
{{ (item?.alerts.TRIGGERED?.HIGH || 0) + (item?.alerts.TRIGGERED?.LOW || 0)
+ (item?.alerts.ACKNOWLEDGED?.HIGH || 0) + (item?.alerts.ACKNOWLEDGED?.LOW || 0) }}
</p>
Expand All @@ -234,7 +237,7 @@ onMounted(async () => {
<p class="count">
{{ (item?.alerts.TRIGGERED?.HIGH || 0) + (item?.alerts.TRIGGERED?.LOW || 0) }}
</p>
<div class="ml-2 text-gray-700">
<div class="ml-2 text-label-sm text-gray-700">
<span class="pl-1">{{ $t('ALERT_MANAGER.ALERTS.HIGH') }}:</span>
<span> {{ item?.alerts.TRIGGERED?.HIGH || 0 }}</span>
</div>
Expand Down Expand Up @@ -283,11 +286,11 @@ onMounted(async () => {
</span>
</div>
</div>
<div class="flex flex-col items-end">
<div class="flex flex-col gap-1 items-end">
<p class="title">
{{ $t('ALERT_MANAGER.ESCALATION_POLICY.TITLE', { cnt: 11 }) }}
</p>
<p-text-button @click.stop="handleClickEscalationPolicy(item.service_id)">
<p-text-button @click.stop="handleClickEscalationPolicy(item.service_id, item.escalation_policy_id)">
<p class="truncate text-blue-700 pr-1 pl-1">
{{ getEscalationPolicyName(item.escalation_policy_id) }}
</p>
Expand Down Expand Up @@ -337,6 +340,7 @@ onMounted(async () => {
width: 28rem;
max-width: 28rem;
padding: 1.25rem 1.5rem 1.5rem;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
.card-inner-wrapper {
@apply flex flex-col w-full;
gap: 1.25rem;
Expand All @@ -346,36 +350,40 @@ onMounted(async () => {
@apply relative flex flex-col;
gap: 0.25rem;
width: calc(50% - 1rem);
&::before {
@apply absolute;
content: '';
width: 0.063rem;
height: 100%;
top: 0;
left: 0;
}
.title {
@apply text-label-md;
@apply text-label-md font-medium;
}
.count {
@apply text-display-md;
@apply text-display-sm;
}
.triggered-info {
@apply flex items-center;
}
&.triggered {
padding-left: 1rem;
&::before {
@apply absolute bg-red-400;
content: '';
width: 0.063rem;
height: 100%;
top: 0;
left: 0;
@apply bg-red-400;
}
}
&.acknowledged {
padding-left: 1rem;
&::before {
@apply bg-gray-300;
}
}
&.healthy {
@apply flex justify-center;
padding-left: 1rem;
&::before {
@apply absolute bg-green-400;
content: '';
width: 0.063rem;
height: 100%;
top: 0;
left: 0;
@apply bg-green-400;
}
}
}
Expand Down
6 changes: 0 additions & 6 deletions apps/web/src/services/alert-manager/constants/alert-table-constant.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ export const ALERT_MANAGEMENT_TABLE_FIELDS: DataTableFieldType[] = [
{ name: 'status', label: 'Status' },
{ name: 'service_id', label: 'Service' },
{ name: 'urgency', label: 'Urgency' },
{ name: 'triggered_type', label: 'Category' },
{ name: 'resources', label: 'Resource', width: '20rem' },
{ name: 'created_at', label: 'Created at' },
];
Expand All @@ -28,14 +27,12 @@ export const ALERT_MANAGEMENT_TABLE_HANDLER: AlertManagementTableHandlerType = {
items: [
{ name: 'alert_id', label: 'Alert ID' },
{ name: 'title', label: 'Title' },
{ name: 'triggered_type', label: 'Category' },
{ name: 'resource.resource_type', label: 'Resource Name' },
],
}],
valueHandlerMap: {
alert_id: makeDistinctValueHandler('alert_manager.Alert', 'alert_id'),
title: makeDistinctValueHandler('alert_manager.Alert', 'title'),
triggered_type: makeDistinctValueHandler('alert_manager.Alert', 'triggered_type'),
'resource.resource_type': makeDistinctValueHandler('alert_manager.Alert', 'resource.resource_type'),
},
};
Expand All @@ -45,9 +42,6 @@ export const ALERT_EXCEL_FIELDS: ExcelDataField[] = [
{ key: 'status', name: 'Status' },
{ key: 'service_id', name: 'Service' },
{ key: 'urgency', name: 'Urgency' },
{ key: 'triggered_type', name: 'Category' },
{ key: 'resources', name: 'Resource' },
{ key: 'created_at', name: 'Created at' },
// { key: 'resolved_by', name: 'Resolved by' },
// { key: 'acknowledged_by', name: 'Acknowledged by' },
];
6 changes: 6 additions & 0 deletions apps/web/src/services/alert-manager/stores/service-detail-page-store.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ interface ServiceFormStoreState {
notificationProtocolList: ProtocolCardItemType[];
selectedWebhookId?: string;
selectedNotificationId?: string;
selectedEscalationPolicyId?: string;
}
interface ServiceFormStoreGetters {
serviceInfo: ComputedRef<Service>;
Expand All @@ -61,6 +62,7 @@ export const useServiceDetailPageStore = defineStore('page-service-detail', () =
notificationProtocolList: [],
selectedWebhookId: undefined,
selectedNotificationId: undefined,
selectedEscalationPolicyId: undefined,
});

const getters = reactive<ServiceFormStoreGetters>({
Expand Down Expand Up @@ -108,6 +110,9 @@ export const useServiceDetailPageStore = defineStore('page-service-detail', () =
setSelectedNotificationId(id?: string) {
state.selectedNotificationId = id;
},
setSelectedEscalationPolicyId(id?: string) {
state.selectedEscalationPolicyId = id;
},
};

const actions = {
Expand All @@ -118,6 +123,7 @@ export const useServiceDetailPageStore = defineStore('page-service-detail', () =
state.notificationProtocolList = [];
state.selectedWebhookId = undefined;
state.selectedNotificationId = undefined;
state.selectedEscalationPolicyId = undefined;
},
async fetchServiceDetailData(id: string) {
state.loading = true;
Expand Down

0 comments on commit d545719

Please sign in to comment.