feat(notifications): add machine notifications table

frontend/components/notifications/NotificationsMachinesTable.vue

@@ -0,0 +1,205 @@
+<script setup lang="ts">
+import type { Cursor } from '~/types/datatable'
+
+defineEmits<{ (e: 'openDialog'): void }>()
+
+const { width } = useWindowSize()
+const cursor = ref<Cursor>()
+const pageSize = ref<number>(10)
+const { t: $t } = useTranslation()
+
+const {
+  isLoading,
+  machineNotifications,
+  onSort,
+  query,
+  setCursor,
+  setPageSize,
+  setSearch,
+} = useNotificationsMachineStore()
+
+const colsVisible = computed(() => {
+  return {
+    footer: 1024,
+    threshold: width.value > 830,
+  }
+})
+</script>
+
+<template>
+  <div>
+    <BcTableControl
+      :title="$t('notifications.dashboards.title')"
+      :search-placeholder="$t('notifications.dashboards.search_placeholder')"
+      @set-search="setSearch"
+    >
+      <template #table>
+        <ClientOnly fallback-tag="span">
+          <BcTable
+            :data="machineNotifications"
+            data-key="notification_id"
+            :cursor
+            :page-size
+            :selected-sort="query?.sort"
+            :loading="isLoading"
+            :add-spacer="true"
+            :expandable="!colsVisible.threshold"
+            @set-cursor="setCursor"
+            @sort="onSort"
+            @set-page-size="setPageSize"
+          >
+            <Column
+              field="machine_name"
+              sortable
+              header-class="col-machine-name"
+              body-class="col-machine-name"
+              :header="$t('notifications.machine.col.machine_name')"
+            >
+              <template #body="slotProps">
+                <div>
+                  {{ slotProps.data.machine_name }}
+                </div>
+              </template>
+            </Column>
+            <Column
+              v-if="colsVisible.threshold"
+              field="threshold"
+              sortable
+              header-class="col-threshold"
+              body-class="col-threshold"
+              :header="$t('notifications.machine.col.threshold')"
+            >
+              <template #body="slotProps">
+                <BcFormatPercent
+                  v-if="slotProps.data.threshold"
+                  :percent="slotProps.data.threshold * 100"
+                />
+                <span v-else>-</span>
+              </template>
+            </Column>
+            <Column
+              field="event_type"
+              sortable
+              header-class="col-event-type"
+              body-class="col-event-type"
+              :header="$t('notifications.machine.col.event_type')"
+            >
+              <template #body="slotProps">
+                <div>
+                  {{ $t(`notifications.machine.event_type.${slotProps.data.event_type}`, slotProps.data.event_type) }}
+                </div>
+              </template>
+            </Column>
+            <Column
+              field="timestamp"
+              sortable
+              header-class="col-age"
+              body-class="col-age"
+            >
+              <template #header>
+                <BcTableAgeHeader />
+              </template>
+              <template #body="slotProps">
+                <BcFormatTimePassed
+                  :value="slotProps.data.timestamp"
+                  type="go-timestamp"
+                />
+              </template>
+            </Column>
+            <template #expansion="slotProps">
+              <div class="expansion">
+                <div class="group">
+                  <div class="label">
+                    {{
+                      $t('notifications.machine.col.threshold')
+                    }}
+                  </div>
+                  <BcFormatPercent
+                    v-if="slotProps.data.threshold"
+                    :percent="slotProps.data.threshold * 100"
+                  />
+                  <span v-else>-</span>
+                </div>
+              </div>
+            </template>
+            <template #empty>
+              <NotificationsDashboardsTableEmpty
+                v-if="!machineNotifications?.data.length"
+                @open-dialog="$emit('openDialog')"
+              />
+            </template>
+            <!-- TODO: implement number of subscriptions -->
+            <template #bc-table-footer-right>
+              <template v-if="colsVisible">
+                {{ $t('notifications.machine.footer.subscriptions', { count: 1 }) }}
+              </template>
+            </template>
+          </BcTable>
+        </ClientOnly>
+      </template>
+    </BcTableControl>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@use "~/assets/css/utils.scss";
+
+$breakpoint-sm: 630px;
+$breakpoint-md: 780px;
+$breakpoint-lg: 1024px;
+
+:deep(.col-event-type),
+:deep(.col-machine-name) {
+  *:not([data-pc-section="sort"]) {
+    @include utils.truncate-text;
+  }
+
+  @media (max-width: $breakpoint-lg) {
+    @include utils.set-all-width(240px);
+  }
+
+  @media (max-width: $breakpoint-md) {
+    @include utils.set-all-width(200px);
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    @include utils.set-all-width(106px);
+  }
+}
+
+:deep(.col-threshold) {
+  @include utils.set-all-width(140px);
+  *:not([data-pc-section="sort"]) {
+    @include utils.truncate-text;
+  }
+}
+
+:deep(.col-age) {
+  @media (max-width: $breakpoint-lg) {
+    @include utils.set-all-width(140px);
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    @include utils.set-all-width(78px);
+  }
+
+  *:not([data-pc-section="sort"]) {
+    @include utils.truncate-text;
+  }
+}
+
+.expansion {
+  background-color: var(--table-header-background);
+  padding: 14px 7px;
+
+  .group {
+    display: flex;
+    gap: var(--padding);
+
+    .label {
+      width: 78px;
+      font-weight: var(--standard_text_bold_font_weight);
+    }
+  }
+}
+</style>

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": {

frontend/pages/notifications.vue

@@ -106,7 +106,7 @@ const openManageNotifications = () => {
               :icon="faMonitorWaveform"
             />
           </template>
-          Machines coming soon!
+          <NotificationsMachinesTable />
         </TabPanel>
         <TabPanel :disabled="tabs.clients.disabled">
           <template #header>

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<InternalGetUserNotificationMachinesResponse | undefined>()
+  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<InternalGetUserNotificationMachinesResponse>(
+        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,
+  }
+}

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<string, MappingData> = {
     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,