adding VtsConnectionStatus component and some improvements

vatesfr · Jan 17, 2025 · da88ca8 · da88ca8
1 parent 5baccd0
commit da88ca8
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 69 deletions.
diff --git a/@xen-orchestra/lite/src/components/host/network/HostPifSidePanel.vue b/@xen-orchestra/lite/src/components/host/network/HostPifSidePanel.vue
@@ -56,15 +56,15 @@
             {{ $t('pif-status') }}
           </template>
           <template #value>
-            <HostPifStatus :pif-status="pif.currently_attached" card />
+            <VtsConnectionStatus :status="getPifStatus(pif)" />
           </template>
         </VtsCardRowKeyValue>
         <VtsCardRowKeyValue>
           <template #key>
             {{ $t('physical-interface-status') }}
           </template>
           <template #value>
-            <HostPifStatus :pif-status="pif.currently_attached" card />
+            <VtsConnectionStatus :status="getPhysicalInterfaceStatus(pif)" />
           </template>
         </VtsCardRowKeyValue>
         <VtsCardRowKeyValue>
@@ -203,11 +203,11 @@
 </template>
 
 <script setup lang="ts">
-import HostPifStatus from '@/components/host/network/HostPifStatus.vue'
 import type { XenApiNetwork, XenApiPif } from '@/libs/xen-api/xen-api.types'
 import { useNetworkStore } from '@/stores/xen-api/network.store'
 import { usePifMetricsStore } from '@/stores/xen-api/pif-metrics.store'
 import VtsCardRowKeyValue from '@core/components/card/VtsCardRowKeyValue.vue'
+import VtsConnectionStatus from '@core/components/connection-status/VtsConnectionStatus.vue'
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import UiButton from '@core/components/ui/button/UiButton.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
@@ -235,7 +235,7 @@ const { pif } = defineProps<{
 }>()
 
 const { getByOpaqueRef: getOpaqueRefNetwork } = useNetworkStore().subscribe()
-const { getByOpaqueRef: getOpaqueRefMetrics } = usePifMetricsStore().subscribe()
+const { getByOpaqueRef: getOpaqueRefMetrics, getPifCarrier } = usePifMetricsStore().subscribe()
 
 const allIps = computed(() => {
   return [pif.IP, ...pif.IPv6].filter(ip => ip)
@@ -254,6 +254,23 @@ const getNetworkData = (type: keyof XenApiNetwork) => {
   }
 }
 
+const getPifStatus = (pif: XenApiPif) => {
+  const carrier = getPifCarrier(pif)
+  const currentlyAttached = pif.currently_attached
+
+  if (currentlyAttached && carrier) {
+    return 'connected'
+  }
+  if (currentlyAttached && !carrier) {
+    return 'partially-connected'
+  }
+  return 'disconnected'
+}
+
+const getPhysicalInterfaceStatus = (pif: XenApiPif) => {
+  return pif.physical ? 'connected' : 'disconnected-from-physical-device'
+}
+
 const getSpeedData = (speedRef: string) => {
   const metrics = getOpaqueRefMetrics(speedRef)
   return metrics?.speed ? metrics.speed : 0

diff --git a/@xen-orchestra/lite/src/components/host/network/HostPifStatus.vue b/@xen-orchestra/lite/src/components/host/network/HostPifStatus.vue
diff --git a/@xen-orchestra/lite/src/components/host/network/HostPifTable.vue b/@xen-orchestra/lite/src/components/host/network/HostPifTable.vue
@@ -45,23 +45,24 @@
         @toggle-select-all="toggleSelect"
       />
       <VtsLoadingHero :disabled="isReady" type="table">
-        <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>
+      <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)" />
+                </th>
+                <ColumnTitle v-else id="networks" :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"
@@ -145,7 +146,7 @@ import {
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-const { pifs, hasError } = defineProps<{
+const { pifs } = defineProps<{
   pifs: XenApiPif[]
   isReady: boolean
   hasError: boolean

diff --git a/@xen-orchestra/lite/src/views/host/HostNetworkView.vue b/@xen-orchestra/lite/src/views/host/HostNetworkView.vue
@@ -4,7 +4,7 @@
       <HostPifTable :pifs="pifs" :is-ready @row-select="selectPif" :has-error />
     </UiCard>
     <HostPifSidePanel v-if="selectedPif" :pif="selectedPif" />
-    <UiPanel v-else class="panel-container">
+    <UiPanel v-else class="panel">
       <VtsNoSelectionHero type="panel" />
     </UiPanel>
   </div>
@@ -43,9 +43,9 @@ const selectPif = (id: XenApiPif['uuid']) => {
     margin: 0.8rem;
   }
 
-  .panel-container {
-    min-width: 40rem;
+  .panel {
     border-top: none;
+    border-right: none;
   }
 }
 </style>
diff --git a/@xen-orchestra/web-core/lib/components/ui/panel/UiPanel.vue b/@xen-orchestra/web-core/lib/components/ui/panel/UiPanel.vue
@@ -44,6 +44,7 @@ const slots = defineSlots<{
     flex-direction: column;
     padding: 0.8rem;
     gap: 0.8rem;
+    min-width: calc(40rem - 0.1rem);
   }
 
   &.error {