diff --git a/frontend/components/notifications/NotificationsMachinesTable.vue b/frontend/components/notifications/NotificationsMachinesTable.vue new file mode 100644 index 000000000..05495f084 --- /dev/null +++ b/frontend/components/notifications/NotificationsMachinesTable.vue @@ -0,0 +1,205 @@ + + + + + + + + + + + + {{ slotProps.data.machine_name }} + + + + + + + - + + + + + + {{ $t(`notifications.machine.event_type.${slotProps.data.event_type}`, slotProps.data.event_type) }} + + + + + + + + + + + + + + + + {{ + $t('notifications.machine.col.threshold') + }} + + + - + + + + + + + + + + {{ $t('notifications.machine.footer.subscriptions', { count: 1 }) }} + + + + + + + + + + diff --git a/frontend/i18n/en.json b/frontend/i18n/en.json index 5e3e6242b..890ddae2c 100644 --- a/frontend/i18n/en.json +++ b/frontend/i18n/en.json @@ -310,6 +310,22 @@ "rocketpool": "Rocket Pool", "network": "Network" }, + "machine": { + "event_type": { + "is_machine_offline": "Machine is offline", + "machine_storage_usage": "No storage left", + "machine_cpu_usage": "CPU overheated", + "machine_memory_usage": "High memory usage" + }, + "footer": { + "subscriptions": "Machines (1 Subscription) |Machines ({count} Subscriptions)" + }, + "col": { + "machine_name": "Machine", + "threshold": "Threshold", + "event_type": "Event" + } + }, "subscriptions": { "dialog_title": "Edit Subscriptions", "validators": { diff --git a/frontend/pages/notifications.vue b/frontend/pages/notifications.vue index 28a026552..3cfa1af98 100644 --- a/frontend/pages/notifications.vue +++ b/frontend/pages/notifications.vue @@ -106,7 +106,7 @@ const openManageNotifications = () => { :icon="faMonitorWaveform" /> - Machines coming soon! + diff --git a/frontend/stores/notifications/useNotificationsMachineStore.ts b/frontend/stores/notifications/useNotificationsMachineStore.ts new file mode 100644 index 000000000..da7aa7d88 --- /dev/null +++ b/frontend/stores/notifications/useNotificationsMachineStore.ts @@ -0,0 +1,69 @@ +import { defineStore } from 'pinia' +import type { InternalGetUserNotificationMachinesResponse } from '~/types/api/notifications' +import { API_PATH } from '~/types/customFetch' +import type { TableQueryParams } from '~/types/datatable' + +const notificationsMachineStore = defineStore('notifications-network-store', () => { + const data = ref() + return { data } +}) + +export function useNotificationsMachineStore() { + const { isLoggedIn } = useUserStore() + + const { fetch } = useCustomFetch() + const { data } = storeToRefs(notificationsMachineStore()) + const { + cursor, isStoredQuery, onSort, pageSize, pendingQuery, query, setCursor, setPageSize, setSearch, setStoredQuery, + } = useTableQuery({ + limit: 10, sort: 'timestamp:desc', + }, 10) + const isLoading = ref(false) + + async function loadMachineNotifications(q: TableQueryParams) { + isLoading.value = true + setStoredQuery(q) + try { + const result = await fetch( + API_PATH.NOTIFICATIONS_MACHINE, + undefined, + undefined, + q, + ) + + isLoading.value = false + if (!isStoredQuery(q)) { + return // in case some query params change while loading + } + + data.value = result + } + catch (e) { + data.value = undefined + isLoading.value = false + } + return data.value + } + + const machineNotifications = computed(() => { + return data.value + }) + + watch(query, (q) => { + if (q) { + isLoggedIn.value && loadMachineNotifications(q) + } + }, { immediate: true }) + + return { + cursor, + isLoading, + machineNotifications, + onSort, + pageSize, + query: pendingQuery, + setCursor, + setPageSize, + setSearch, + } +} diff --git a/frontend/types/customFetch.ts b/frontend/types/customFetch.ts index 7a7e02f1f..60d634cac 100644 --- a/frontend/types/customFetch.ts +++ b/frontend/types/customFetch.ts @@ -40,6 +40,7 @@ export enum API_PATH { LOGIN = '/login', LOGOUT = '/logout', NOTIFICATIONS_DASHBOARDS = '/notifications/dashboards', + NOTIFICATIONS_MACHINE = '/notifications/machines', NOTIFICATIONS_MANAGEMENT_GENERAL = '/notifications/managementGeneral', NOTIFICATIONS_TEST_EMAIL = '/notifications/test_email', NOTIFICATIONS_TEST_PUSH = '/notifications/test_push', @@ -271,8 +272,10 @@ export const mapping: Record = { path: '/logout', }, [API_PATH.NOTIFICATIONS_DASHBOARDS]: { - mock: true, - path: '/notifications/dashboards', + path: '/users/me/notifications/dashboards', + }, + [API_PATH.NOTIFICATIONS_MACHINE]: { + path: '/users/me/notifications/machines', }, [API_PATH.NOTIFICATIONS_MANAGEMENT_GENERAL]: { mock: true,