From 9ddb1523d00da5e6ee73b33a9ad10e13b95a025c Mon Sep 17 00:00:00 2001
From: Joris-k <joris.kosacki@vates.tech>
Date: Fri, 6 Dec 2024 17:40:13 +0100
Subject: [PATCH] feat(xo-lite): add host network tab and pif table / status
 component and pif store

---
 .../lite/src/components/host/HostTabBar.vue   |   2 +-
 .../components/host/network/HostPifStatus.vue |  44 ++++
 .../components/host/network/HostPifTable.vue  | 228 ++++++++++++++++++
 @xen-orchestra/lite/src/locales/en.json       |   7 +
 @xen-orchestra/lite/src/locales/fr.json       |   7 +
 .../lite/src/stores/xen-api/pif.store.ts      |  34 +++
 .../lite/src/views/host/HostNetworkView.vue   |  17 +-
 .../lib/components/ui/checkbox/UiCheckbox.vue |   2 +-
 .../lib/components/ui/input/UiInput.vue       |   1 +
 9 files changed, 338 insertions(+), 4 deletions(-)
 create mode 100644 @xen-orchestra/lite/src/components/host/network/HostPifStatus.vue
 create mode 100644 @xen-orchestra/lite/src/components/host/network/HostPifTable.vue
 create mode 100644 @xen-orchestra/lite/src/stores/xen-api/pif.store.ts

diff --git a/@xen-orchestra/lite/src/components/host/HostTabBar.vue b/@xen-orchestra/lite/src/components/host/HostTabBar.vue
index e918ee34e70..d64d5cf2626 100644
--- a/@xen-orchestra/lite/src/components/host/HostTabBar.vue
+++ b/@xen-orchestra/lite/src/components/host/HostTabBar.vue
@@ -6,7 +6,7 @@
     <RouterTab :to="{ name: 'host.console', params: { uuid } }">
       {{ $t('console') }}
     </RouterTab>
-    <RouterTab :to="{ name: 'host.network', params: { uuid } }" disabled>
+    <RouterTab :to="{ name: 'host.network', params: { uuid } }">
       {{ $t('network') }}
     </RouterTab>
     <RouterTab :to="{ name: 'host.tasks', params: { uuid } }" disabled>
diff --git a/@xen-orchestra/lite/src/components/host/network/HostPifStatus.vue b/@xen-orchestra/lite/src/components/host/network/HostPifStatus.vue
new file mode 100644
index 00000000000..1590f46082d
--- /dev/null
+++ b/@xen-orchestra/lite/src/components/host/network/HostPifStatus.vue
@@ -0,0 +1,44 @@
+<template>
+  <UiInfo class="pif-status text-ellipsis" :accent="getStatusProps(status).accent">
+    <p class="text-ellipsis" :class="{ card }">{{ getStatusProps(status).text }}</p>
+  </UiInfo>
+</template>
+
+<script setup lang="ts">
+import UiInfo from '@core/components/ui/info/UiInfo.vue'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { faCheck, faExclamation } from '@fortawesome/free-solid-svg-icons'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { pifStatus, card } = defineProps<{
+  pifStatus: any
+  card?: boolean
+}>()
+
+const { t } = useI18n()
+
+type Status = 'connected' | 'disconnected' | 'partial'
+type Accent = 'success' | 'warning' | 'danger'
+
+const states = computed<Record<Status, { text: string; icon: IconDefinition; accent: Accent }>>(() => ({
+  connected: { text: t('connected'), icon: faCheck, accent: 'success' },
+  disconnected: { text: t('disconnected'), icon: faCheck, accent: 'danger' },
+  partial: { text: t('disconnected-from-physical-device'), icon: faExclamation, accent: 'warning' },
+}))
+
+const status = computed(() => {
+  if (pifStatus) {
+    return 'connected'
+  }
+  return 'disconnected'
+})
+
+const getStatusProps = (status: Status) => states.value[status]
+</script>
+
+<style scoped lang="postcss">
+p:not(.card) {
+  font-size: 1.4rem !important;
+}
+</style>
diff --git a/@xen-orchestra/lite/src/components/host/network/HostPifTable.vue b/@xen-orchestra/lite/src/components/host/network/HostPifTable.vue
new file mode 100644
index 00000000000..2ff5b292c5c
--- /dev/null
+++ b/@xen-orchestra/lite/src/components/host/network/HostPifTable.vue
@@ -0,0 +1,228 @@
+<template>
+  <div class="host-pif-table">
+    <UiTitle>
+      {{ $t('pifs') }}
+      <template #actions>
+        <UiButton
+          v-tooltip="$t('coming-soon')"
+          disabled
+          :left-icon="faPlus"
+          variant="secondary"
+          accent="info"
+          size="medium"
+        >
+          {{ $t('scan-pifs') }}
+        </UiButton>
+      </template>
+    </UiTitle>
+    <div class="container">
+      <UiQuerySearchBar class="table-query" @search="(value: string) => (searchQuery = value)" />
+      <UiTableActions title="Table actions">
+        <UiButton
+          v-tooltip="$t('coming-soon')"
+          disabled
+          :left-icon="faEdit"
+          variant="tertiary"
+          accent="info"
+          size="medium"
+        >
+          {{ $t('edit') }}
+        </UiButton>
+        <UiButton
+          v-tooltip="$t('coming-soon')"
+          disabled
+          :left-icon="faTrash"
+          variant="tertiary"
+          accent="danger"
+          size="medium"
+        >
+          {{ $t('delete') }}
+        </UiButton>
+      </UiTableActions>
+      <UiTopBottomTable
+        :selected-items="selected.length"
+        :total-items="pifsUuids.length"
+        @toggle-select-all="toggleSelect"
+      />
+      <div class="table">
+        <VtsTable vertical-border>
+          <thead>
+            <tr>
+              <template v-for="column of visibleColumns" :key="column.id">
+                <th v-if="column.id === 'checkbox'" class="checkbox">
+                  <UiCheckbox :v-model="areAllSelected" accent="info" @update:model-value="toggleSelect" />
+                </th>
+                <th v-else-if="column.id === 'more'" class="more">
+                  <UiButtonIcon size="small" accent="info" :icon="getHeaderIcon(column.id)" />
+                  {{ column.label }}
+                </th>
+                <ColumnTitle v-else id="networks" :icon="getHeaderIcon(column.id)"> {{ column.label }}</ColumnTitle>
+              </template>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="row of rows" :key="row.id">
+              <td v-for="column of row.visibleColumns" :key="column.id" class="typo p2-regular">
+                <UiCheckbox v-if="column.id === 'checkbox'" v-model="selected" accent="info" :value="row.id" />
+                <VtsIcon v-else-if="column.id === 'more'" accent="info" :icon="faEllipsis" />
+                <div v-else-if="column.id === 'status'" v-tooltip>
+                  <HostPifStatus class="status" :pif-status="column.value" />
+                </div>
+                <div v-else-if="column.id === 'network'" class="network">
+                  <UiComplexIcon size="medium" class="icon">
+                    <VtsIcon :icon="faNetworkWired" accent="current" />
+                    <VtsIcon accent="success" :icon="faCircle" :overlay-icon="faCheck" />
+                  </UiComplexIcon>
+                  <a v-tooltip href="" class="text-ellipsis name">{{ column.value }}</a>
+                </div>
+                <div v-else v-tooltip="{ placement: 'bottom-end' }" class="text-ellipsis">
+                  {{ column.value }}
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </VtsTable>
+      </div>
+      <UiTopBottomTable
+        :selected-items="selected.length"
+        :total-items="pifsUuids.length"
+        @toggle-select-all="toggleSelect"
+      />
+    </div>
+  </div>
+  <UiCardSpinner v-if="!isReady" />
+</template>
+
+<script lang="ts" setup>
+import HostPifStatus from '@/components/host/network/HostPifStatus.vue'
+import UiCardSpinner from '@/components/ui/UiCardSpinner.vue'
+import useMultiSelect from '@/composables/multi-select.composable'
+import type { XenApiNetwork, XenApiPif } from '@/libs/xen-api/xen-api.types'
+import { useNetworkStore } from '@/stores/xen-api/network.store'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import ColumnTitle from '@core/components/table/ColumnTitle.vue'
+import VtsTable from '@core/components/table/VtsTable.vue'
+import UiButton from '@core/components/ui/button/UiButton.vue'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import UiCheckbox from '@core/components/ui/checkbox/UiCheckbox.vue'
+import UiComplexIcon from '@core/components/ui/complex-icon/UiComplexIcon.vue'
+import UiQuerySearchBar from '@core/components/ui/query-search-bar/UiQuerySearchBar.vue'
+import UiTableActions from '@core/components/ui/table-actions/UiTableActions.vue'
+import UiTitle from '@core/components/ui/title/UiTitle.vue'
+import UiTopBottomTable from '@core/components/ui/top-bottom-table/UiTopBottomTable.vue'
+import { useTable } from '@core/composables/table.composable'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import {
+  faAlignLeft,
+  faAt,
+  faCaretDown,
+  faCheck,
+  faCircle,
+  faEdit,
+  faEllipsis,
+  faNetworkWired,
+  faPlus,
+  faPowerOff,
+  faTrash,
+} from '@fortawesome/free-solid-svg-icons'
+import { computed, ref } from 'vue'
+
+const { pifs } = defineProps<{
+  pifs: XenApiPif[]
+  isReady: boolean
+}>()
+
+const { getByOpaqueRef } = useNetworkStore().subscribe()
+
+const getNetworkName = (pif: string) => {
+  const network: XenApiNetwork = getByOpaqueRef(pif as XenApiNetwork['$ref'])!
+  return network?.name_label ? network.name_label : ''
+}
+
+const searchQuery = ref('')
+
+const filteredNetworks = computed(() => {
+  const searchTerm = searchQuery.value.trim().toLocaleLowerCase()
+  if (!searchTerm) {
+    return pifs
+  }
+  return pifs.filter(pif => Object.values(pif).some(value => String(value).toLocaleLowerCase().includes(searchTerm)))
+})
+
+const pifsUuids = computed(() => pifs.map(pif => pif.uuid))
+
+const { selected, areAllSelected } = useMultiSelect(pifsUuids)
+
+const toggleSelect = () => {
+  selected.value = selected.value.length === 0 ? pifsUuids.value : []
+}
+
+const { visibleColumns, rows } = useTable('pifs', filteredNetworks, {
+  rowId: record => record.uuid,
+  columns: define => [
+    define('checkbox', () => '', { label: '', isHideable: false }),
+    define('network', record => getNetworkName(record.network), { label: 'Network', isHideable: true }),
+    define('device', { label: 'Device', isHideable: true }),
+    define('status', record => record.currently_attached, { label: 'Status', isHideable: true }),
+    define('VLAN', { label: 'Vlan', isHideable: true }),
+    define('IP', { label: 'IP', isHideable: true }),
+    define('MAC', { label: 'MAC', isHideable: true }),
+    define('ip_configuration_mode', { label: 'Mode', isHideable: true }),
+    define('more', () => '', { label: '', isHideable: false }),
+  ],
+})
+type PifHeader = 'network' | 'device' | 'status' | 'VLAN' | 'IP' | 'MAC' | 'ip_configuration_mode' | 'more'
+const headerIcon: Record<PifHeader, { icon: IconDefinition }> = {
+  network: { icon: faAlignLeft },
+  device: { icon: faAlignLeft },
+  status: { icon: faPowerOff },
+  VLAN: { icon: faAlignLeft },
+  IP: { icon: faAt },
+  MAC: { icon: faAt },
+  ip_configuration_mode: { icon: faCaretDown },
+  more: { icon: faEllipsis },
+}
+const getHeaderIcon = (status: PifHeader) => headerIcon[status].icon
+</script>
+
+<style scoped lang="postcss">
+.host-pif-table,
+.container {
+  display: flex;
+  flex-direction: column;
+}
+
+.host-pif-table {
+  gap: 2.4rem;
+
+  .container {
+    gap: 0.8rem;
+
+    .table {
+      overflow-x: auto;
+
+      .network {
+        display: flex;
+        align-items: center;
+        gap: 1.8rem;
+      }
+
+      tr:last-child {
+        border-bottom: 1px solid var(--color-neutral-border);
+      }
+    }
+
+    .checkbox,
+    .more {
+      width: 4.8rem;
+    }
+  }
+
+  @media (max-width: 1440px) {
+    .table table {
+      width: 160rem;
+    }
+  }
+}
+</style>
diff --git a/@xen-orchestra/lite/src/locales/en.json b/@xen-orchestra/lite/src/locales/en.json
index a9217ed7ae1..1dde1a40903 100644
--- a/@xen-orchestra/lite/src/locales/en.json
+++ b/@xen-orchestra/lite/src/locales/en.json
@@ -35,6 +35,7 @@
   "close": "Close",
   "community": "Community",
   "community-name": "{name} community",
+  "connected": "Connected",
   "configuration": "Configuration",
   "confirm-cancel": "Are you sure you want to cancel?",
   "confirm-delete": "You're about to delete {0}",
@@ -60,11 +61,14 @@
   "descending": "descending",
   "description": "Description",
   "dhcp": "DHCP",
+  "disconnected": "Disconnected",
+  "disconnected-from-physical-device": "Disconnected from physical device",
   "disabled": "Disabled",
   "display": "Display",
   "dns": "DNS",
   "do-you-have-needs": "You have needs and/or expectations? Let us know",
   "documentation": "Documentation",
+  "edit": "Edit",
   "edit-config": "Edit config",
   "enabled": "Enabled",
   "error-occurred": "An error has occurred",
@@ -186,6 +190,7 @@
   "new-features-are-coming": "New features are coming soon!",
   "news": "News",
   "news-name": "{name} news",
+  "none": "None",
   "no-alarm-triggered": "No alarm triggered",
   "no-result": "No result",
   "no-selected-vm-can-be-exported": "No selected VM can be exported",
@@ -199,6 +204,7 @@
   "password": "Password",
   "password-invalid": "Password invalid",
   "pause": "Pause",
+  "pifs": "PIFs",
   "please-confirm": "Please confirm",
   "pool-cpu-usage": "Pool CPU Usage",
   "pool-ram-usage": "Pool RAM Usage",
@@ -220,6 +226,7 @@
 
   "resume": "Resume",
   "save": "Save",
+  "scan-pifs": "Scan PIFs",
   "select-compression": "Select a compression",
   "select-destination-host": "Select a destination host",
   "selected-vms-in-execution": "Some selected VMs are running",
diff --git a/@xen-orchestra/lite/src/locales/fr.json b/@xen-orchestra/lite/src/locales/fr.json
index d9f86ea546e..a7ac3f46e1f 100644
--- a/@xen-orchestra/lite/src/locales/fr.json
+++ b/@xen-orchestra/lite/src/locales/fr.json
@@ -36,6 +36,7 @@
   "community": "Communauté",
   "community-name": "Communauté {name}",
   "configuration": "Configuration",
+  "connected": "Connecté",
   "confirm-cancel": "Êtes-vous sûr de vouloir annuler ?",
   "confirm-delete": "Vous êtes sur le point de supprimer {0}",
   "console-unavailable": "Console indisponible",
@@ -60,11 +61,14 @@
   "descending": "descendant",
   "description": "Description",
   "dhcp": "DHCP",
+  "disconnected": "Déconnecté",
+  "disconnected-from-physical-device": "Déconnecté de l'appareil physique",
   "dns": "DNS",
   "disabled": "Désactivé",
   "display": "Affichage",
   "do-you-have-needs": "Vous avez des besoins et/ou des attentes ? Faites le nous savoir",
   "documentation": "Documentation",
+  "edit": "Modifier",
   "edit-config": "Modifier config",
   "enabled": "Activé",
   "error-occurred": "Une erreur est survenue",
@@ -186,6 +190,7 @@
   "new-features-are-coming": "De nouvelles fonctionnalités arrivent bientôt !",
   "news": "Actualités",
   "news-name": "Actualités {name}",
+  "none": "Aucun",
   "no-alarm-triggered": "Aucune alarme déclenchée",
   "no-result": "Aucun résultat",
   "no-selected-vm-can-be-exported": "Aucune VM sélectionnée ne peut être exportée",
@@ -199,6 +204,7 @@
   "password": "Mot de passe",
   "password-invalid": "Mot de passe incorrect",
   "pause": "Pause",
+  "pifs": "PIFs",
   "please-confirm": "Veuillez confirmer",
   "pool-cpu-usage": "Utilisation CPU du Pool",
   "pool-ram-usage": "Utilisation RAM du Pool",
@@ -220,6 +226,7 @@
 
   "resume": "Reprendre",
   "save": "Enregistrer",
+  "scan-pifs": "Scanner les PIFs",
   "select-compression": "Sélectionnez une compression",
   "select-destination-host": "Sélectionnez un hôte de destination",
   "selected-vms-in-execution": "Certaines VMs sélectionnées sont en cours d'exécution",
diff --git a/@xen-orchestra/lite/src/stores/xen-api/pif.store.ts b/@xen-orchestra/lite/src/stores/xen-api/pif.store.ts
new file mode 100644
index 00000000000..b0e11880f15
--- /dev/null
+++ b/@xen-orchestra/lite/src/stores/xen-api/pif.store.ts
@@ -0,0 +1,34 @@
+import type { XenApiHost } from '@/libs/xen-api/xen-api.types'
+import { createXapiStoreConfig } from '@/stores/xen-api/create-xapi-store-config'
+import { useHostStore } from '@/stores/xen-api/host.store'
+import { createSubscribableStoreContext } from '@core/utils/create-subscribable-store-context.util'
+import { defineStore } from 'pinia'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+export const usePifStore = defineStore('xen-api-pif', () => {
+  const route = useRoute()
+
+  const deps = {
+    hostStore: useHostStore(),
+  }
+  const { context: baseContext, ...configRest } = createXapiStoreConfig('pif')
+
+  const hostContext = deps.hostStore.getContext()
+
+  const currentHostPifs = computed(() => {
+    const currentHostUuid = route.params.uuid as XenApiHost['uuid']
+
+    return baseContext.records.value.filter(pif => {
+      const host = hostContext.getByOpaqueRef(pif.host)
+      return host?.uuid === currentHostUuid
+    })
+  })
+
+  const context = {
+    ...baseContext,
+    currentHostPifs,
+  }
+
+  return createSubscribableStoreContext({ context, ...configRest }, deps)
+})
diff --git a/@xen-orchestra/lite/src/views/host/HostNetworkView.vue b/@xen-orchestra/lite/src/views/host/HostNetworkView.vue
index 4a52297b68a..60cba06b207 100644
--- a/@xen-orchestra/lite/src/views/host/HostNetworkView.vue
+++ b/@xen-orchestra/lite/src/views/host/HostNetworkView.vue
@@ -1,11 +1,24 @@
 <template>
-  <PageUnderConstruction />
+  <UiCard class="host-network-view">
+    <HostPifTable :pifs="pifs" :is-ready />
+  </UiCard>
 </template>
 
 <script lang="ts" setup>
-import PageUnderConstruction from '@/components/PageUnderConstruction.vue'
+import HostPifTable from '@/components/host/network/HostPifTable.vue'
 import { usePageTitleStore } from '@/stores/page-title.store'
+import { usePifStore } from '@/stores/xen-api/pif.store'
+import UiCard from '@core/components/ui/card/UiCard.vue'
 import { useI18n } from 'vue-i18n'
 
 usePageTitleStore().setTitle(useI18n().t('network'))
+
+const { currentHostPifs: pifs, isReady } = usePifStore().subscribe()
 </script>
+
+<style lang="postcss" scoped>
+.host-network-view {
+  border: solid 0.1rem var(--color-neutral-border);
+  margin: 0.8rem;
+}
+</style>
diff --git a/@xen-orchestra/web-core/lib/components/ui/checkbox/UiCheckbox.vue b/@xen-orchestra/web-core/lib/components/ui/checkbox/UiCheckbox.vue
index 8b1bdaf05b3..2092b8a2d93 100644
--- a/@xen-orchestra/web-core/lib/components/ui/checkbox/UiCheckbox.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/checkbox/UiCheckbox.vue
@@ -43,7 +43,7 @@ const props = withDefaults(
   { disabled: undefined }
 )
 
-const checkboxModel = defineModel<boolean | undefined>({ default: undefined })
+const checkboxModel = defineModel<boolean | undefined | string[]>({ default: undefined })
 
 const slots = defineSlots<{
   default?(): any
diff --git a/@xen-orchestra/web-core/lib/components/ui/input/UiInput.vue b/@xen-orchestra/web-core/lib/components/ui/input/UiInput.vue
index 03b1c8cb5d5..d72eed42c28 100644
--- a/@xen-orchestra/web-core/lib/components/ui/input/UiInput.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/input/UiInput.vue
@@ -88,6 +88,7 @@ const id = computed(() => uniqueId('input-'))
 /* IMPLEMENTATION */
 .ui-input {
   position: relative;
+  flex: 1;
 
   .before + .input {
     padding-inline-start: 4.8rem;