feat(xo-lite/network): add side panel informations and some trad

@xen-orchestra/lite/src/components/pool/PoolTabBar.vue

@@ -12,7 +12,7 @@
     <RouterTab :to="{ name: 'pool.system', params: { uuid: pool?.uuid } }" disabled>
       {{ $t('system') }}
     </RouterTab>
-    <RouterTab :to="{ name: 'pool.network', params: { uuid: pool?.uuid } }" disabled>
+    <RouterTab :to="{ name: 'pool.network', params: { uuid: pool?.uuid } }">
       {{ $t('network') }}
     </RouterTab>
     <RouterTab :to="{ name: 'pool.storage', params: { uuid: pool?.uuid } }" disabled>

@xen-orchestra/lite/src/components/pool/network/PoolHostInternalNetworkTable.vue

@@ -0,0 +1,222 @@
+<template>
+  <div class="container">
+    <UiTitle>
+      {{ $t('host-internal-networks') }}
+      <template #actions>
+        <UiButton
+          v-tooltip="$t('coming-soon')"
+          disabled
+          :left-icon="faPlus"
+          variant="secondary"
+          accent="info"
+          size="medium"
+        >
+          {{ $t('new') }}
+        </UiButton>
+      </template>
+    </UiTitle>
+    <div class="content">
+      <UiQuerySearchBar class="table-query" @search="value => (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="networkUuids.length"
+        @toggle-select-all="toggleSelect"
+      />
+      <div v-if="filteredNetworks.length > 0" 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 :icon="getHeaderIcon(column.id)">
+                  <span class="text-ellipsis">{{ column.label }}</span>
+                </ColumnTitle>
+              </template>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="row of rows"
+              :key="row.id"
+              :class="{ 'row-selected': selectedRowId === (row.value as XenApiNetwork).uuid }"
+              @click="selectRow(row.value, 'host-internal-network')"
+            >
+              <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 v-tooltip="{ placement: 'bottom-end' }" class="text-ellipsis">
+                  {{ column.value }}
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </VtsTable>
+      </div>
+
+      <VtsStateHero v-if="searchQuery && filteredNetworks.length === 0" type="table" image="no-result">
+        <div>{{ $t('no-result') }}</div>
+      </VtsStateHero>
+
+      <UiCardSpinner v-if="!isReady" />
+      <UiTopBottomTable
+        :selected-items="selected.length"
+        :total-items="networkUuids.length"
+        @toggle-select-all="toggleSelect"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import UiCardSpinner from '@/components/ui/UiCardSpinner.vue'
+import useMultiSelect from '@/composables/multi-select.composable'
+import type { XenApiNetwork } from '@/libs/xen-api/xen-api.types'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import VtsStateHero from '@core/components/state-hero/VtsStateHero.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 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,
+  faCaretDown,
+  faEdit,
+  faEllipsis,
+  faHashtag,
+  faPlus,
+  faTrash,
+} from '@fortawesome/free-solid-svg-icons'
+import { computed, ref } from 'vue'
+
+const { networks, isReady } = defineProps<{
+  networks: XenApiNetwork[]
+  isReady: boolean
+  selectedRowId: string | null
+}>()
+
+const emit = defineEmits<{
+  rowSelectNetwork: [value: any]
+}>()
+
+const searchQuery = ref('')
+
+const selectRow = (item: any, table: string) => {
+  emit('rowSelectNetwork', { item, table })
+}
+
+const filteredNetworks = computed(() => {
+  const searchTerm = searchQuery.value.trim().toLocaleLowerCase()
+  if (!searchTerm) {
+    return networks
+  }
+  return networks.filter(network =>
+    Object.values(network).some(value => String(value).toLocaleLowerCase().includes(searchTerm))
+  )
+})
+
+const networkUuids = computed(() => networks.map(network => network.uuid))
+
+const { selected, areAllSelected } = useMultiSelect(networkUuids)
+
+const toggleSelect = () => {
+  selected.value = selected.value.length === 0 ? networkUuids.value : []
+}
+
+const { visibleColumns, rows } = useTable('networks', filteredNetworks, {
+  rowId: record => record.uuid,
+  columns: define => [
+    define('checkbox', () => '', { label: '', isHideable: false }),
+    define('name_label', { label: 'Name', isHideable: true }),
+    define('name_description', { label: 'Description', isHideable: true }),
+    define('MTU', { label: 'MTU', isHideable: true }),
+    define('default_locking_mode', { label: 'Default Locking mode', isHideable: true }),
+    define('more', () => '', { label: '', isHideable: false }),
+  ],
+})
+
+type NetworkHeader = 'name_label' | 'name_description' | 'MTU' | 'default_locking_mode' | 'more'
+
+const headerIcon: Record<NetworkHeader, IconDefinition> = {
+  name_label: faAlignLeft,
+  name_description: faAlignLeft,
+  MTU: faHashtag,
+  default_locking_mode: faCaretDown,
+  more: faEllipsis,
+}
+
+const getHeaderIcon = (status: NetworkHeader) => headerIcon[status]
+</script>
+
+<style scoped lang="postcss">
+.container,
+.content {
+  display: flex;
+  flex-direction: column;
+}
+
+.container {
+  gap: 2.4rem;
+
+  .content {
+    gap: 0.8rem;
+
+    .table {
+      overflow-x: auto;
+
+      tbody tr:hover {
+        cursor: pointer;
+        background-color: var(--color-info-background-hover);
+      }
+
+      tr:last-child {
+        border-bottom: 1px solid var(--color-neutral-border);
+      }
+    }
+
+    .row-selected {
+      background-color: var(--color-info-background-selected);
+    }
+
+    .checkbox,
+    .more {
+      width: 4.8rem;
+    }
+  }
+}
+</style>