feat(xo-6/host): add VMs table list view (#7851)

@xen-orchestra/web/src/components/host/HostHeader.vue

@@ -0,0 +1,36 @@
+<template>
+  <HeadBar>
+    <template #icon>
+      <ObjectIcon type="host" :state="host.power_state.toLocaleLowerCase() as HostState" />
+    </template>
+    {{ host.name_label }}
+  </HeadBar>
+  <TabList>
+    <TabItem disabled>{{ $t('dashboard') }}</TabItem>
+    <TabItem disabled>{{ $t('console') }}</TabItem>
+    <TabItem disabled>{{ $t('alarms') }}</TabItem>
+    <TabItem disabled>{{ $t('stats') }}</TabItem>
+    <TabItem disabled>{{ $t('system') }}</TabItem>
+    <TabItem disabled>{{ $t('network') }}</TabItem>
+    <TabItem disabled>{{ $t('storage') }}</TabItem>
+    <TabItem disabled>{{ $t('tasks') }}</TabItem>
+    <RouterLink v-slot="{ isActive, href }" :to="`/host/${host.id}/vms`" custom>
+      <TabItem :active="isActive" :href tag="a">
+        {{ $t('vms') }}
+      </TabItem>
+    </RouterLink>
+  </TabList>
+</template>
+
+<script lang="ts" setup>
+import type { Host } from '@/types/host.type'
+import type { HostState } from '@core/types/object-icon.type'
+import HeadBar from '@core/components/head-bar/HeadBar.vue'
+import ObjectIcon from '@core/components/icon/ObjectIcon.vue'
+import TabItem from '@core/components/tab/TabItem.vue'
+import TabList from '@core/components/tab/TabList.vue'
+
+defineProps<{
+  host: Host
+}>()
+</script>

@xen-orchestra/web/src/pages/host/[id].vue

@@ -1,7 +1,24 @@
 <template>
-  <ComingSoonHero type="page" />
+  <LoadingHero v-if="!isReady" type="page" />
+  <ObjectNotFoundHero v-else-if="!host" :id="route.params.id" />
+  <RouterView v-else v-slot="{ Component }">
+    <HostHeader :host />
+    <component :is="Component" :host />
+  </RouterView>
 </template>
 
 <script setup lang="ts">
-import ComingSoonHero from '@core/components/state-hero/ComingSoonHero.vue'
+import HostHeader from '@/components/host/HostHeader.vue'
+import { useHostStore } from '@/stores/xo-rest-api/host.store'
+import type { RecordId } from '@/types/xo-object.type'
+import LoadingHero from '@core/components/state-hero/LoadingHero.vue'
+import ObjectNotFoundHero from '@core/components/state-hero/ObjectNotFoundHero.vue'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router/auto'
+
+const route = useRoute<'/host/[id]'>()
+
+const { isReady, get } = useHostStore().subscribe()
+
+const host = computed(() => get(route.params.id as RecordId<'host'>))
 </script>

@xen-orchestra/web/src/pages/host/[id]/index.vue

@@ -0,0 +1,6 @@
+<script lang="ts" setup>
+definePage({
+  name: '/host/:id',
+  redirect: (to: any) => `/host/${to.params.id}/vms`,
+})
+</script>

@xen-orchestra/web/src/pages/host/[id]/vms.vue

@@ -0,0 +1,71 @@
+<template>
+  <LoadingHero v-if="!isReady" type="page" />
+  <UiCard v-else class="vms">
+    <!-- TODO: update with item selection button and TopBottomTable component when available -->
+    <p class="typo p3-regular count">{{ $t('n-vms', { n: vms.length }) }}</p>
+    <UiTable vertical-border>
+      <thead>
+        <tr>
+          <ColumnTitle id="vm" :icon="faDesktop">{{ $t('vm') }}</ColumnTitle>
+          <ColumnTitle id="description" :icon="faAlignLeft">{{ $t('vm-description') }}</ColumnTitle>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="vm in vms" :key="vm.id">
+          <CellObject :id="vm.data.id">
+            <ObjectLink :route="`/vm/${vm.data.id}/console`">
+              <template #icon>
+                <ObjectIcon :state="vm.data.power_state.toLocaleLowerCase() as VmState" type="vm" />
+              </template>
+              {{ vm.data.name_label }}
+            </ObjectLink>
+          </CellObject>
+          <CellText>{{ vm.data.name_description }}</CellText>
+        </tr>
+      </tbody>
+    </UiTable>
+  </UiCard>
+</template>
+
+<script lang="ts" setup>
+import { useVmStore } from '@/stores/xo-rest-api/vm.store'
+import type { Host } from '@/types/host.type'
+import type { VmState } from '@core/types/object-icon.type'
+import CellObject from '@core/components/cell-object/CellObject.vue'
+import CellText from '@core/components/cell-text/CellText.vue'
+import ObjectIcon from '@core/components/icon/ObjectIcon.vue'
+import ObjectLink from '@core/components/object-link/ObjectLink.vue'
+import LoadingHero from '@core/components/state-hero/LoadingHero.vue'
+import ColumnTitle from '@core/components/table/ColumnTitle.vue'
+import UiTable from '@core/components/table/UiTable.vue'
+import UiCard from '@core/components/UiCard.vue'
+import { defineTree } from '@core/composables/tree/define-tree'
+import { useTree } from '@core/composables/tree.composable'
+import { faAlignLeft, faDesktop } from '@fortawesome/free-solid-svg-icons'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  host: Host
+}>()
+
+const { isReady, vmsByHost } = useVmStore().subscribe()
+
+const definitions = computed(() =>
+  defineTree(vmsByHost.value.get(props.host.id) ?? [], {
+    getLabel: 'name_label',
+  })
+)
+
+const { nodes: vms } = useTree(definitions)
+</script>
+
+<style lang="scss" scoped>
+.vms {
+  margin: 1rem;
+  gap: 0.8rem;
+}
+
+.count {
+  color: var(--color-grey-200);
+}
+</style>

@xen-orchestra/web/typed-router.d.ts

@@ -22,6 +22,8 @@ declare module 'vue-router/auto-routes' {
     '/dev/': RouteRecordInfo<'/dev/', '/dev', Record<never, never>, Record<never, never>>,
     '/dev/token': RouteRecordInfo<'/dev/token', '/dev/token', Record<never, never>, Record<never, never>>,
     '/host/[id]': RouteRecordInfo<'/host/[id]', '/host/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
+    '/host/:id': RouteRecordInfo<'/host/:id', '/host/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
+    '/host/[id]/vms': RouteRecordInfo<'/host/[id]/vms', '/host/:id/vms', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     '/pool/[id]': RouteRecordInfo<'/pool/[id]', '/pool/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     '/pool/:id': RouteRecordInfo<'/pool/:id', '/pool/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     '/pool/[id]/hosts': RouteRecordInfo<'/pool/[id]/hosts', '/pool/:id/hosts', { id: ParamValue<true> }, { id: ParamValue<false> }>,