Merge remote-tracking branch 'origin/status-component' into status-component

@xen-orchestra/lite/src/stories/web-core/connection-status/vts-connection-status.story.vue

@@ -0,0 +1,20 @@
+<template>
+  <ComponentStory
+    v-slot="{ properties }"
+    :params="[
+      prop('status')
+        .enum('connected', 'disconnected', 'partially-connected', 'disconnected-from-physical-device')
+        .required()
+        .preset('connected')
+        .widget(),
+    ]"
+  >
+    <VtsConnectionStatus v-bind="properties" />
+  </ComponentStory>
+</template>
+
+<script lang="ts" setup>
+import ComponentStory from '@/components/component-story/ComponentStory.vue'
+import { prop } from '@/libs/story/story-param'
+import VtsConnectionStatus from '@core/components/connection-status/VtsConnectionStatus.vue'
+</script>

@xen-orchestra/lite/src/stories/web-core/network/vts-network-status.story.vue

@@ -0,0 +1,45 @@
+<template>
+  <ComponentStory :params="[prop('items').obj().required()]">
+    <div class="container">
+      <div class="content">
+        <p>Xo-6 type</p>
+        <div v-for="item in xo6Items" :key="item">
+          <VtsNetworkStatus :items="item" />
+        </div>
+      </div>
+      <div class="content">
+        <p>Xo-lite type</p>
+        <div v-for="item in xoLiteItems" :key="item">
+          <VtsNetworkStatus :items="item" />
+        </div>
+      </div>
+    </div>
+  </ComponentStory>
+</template>
+
+<script lang="ts" setup>
+import ComponentStory from '@/components/component-story/ComponentStory.vue'
+import { prop } from '@/libs/story/story-param'
+import VtsNetworkStatus from '@core/components/network/VtsNetworkStatus.vue'
+import { ref } from 'vue'
+
+const xo6Items = ref([
+  { attached: true, carrier: true },
+  { attached: true, carrier: false },
+  { attached: false, carrier: false },
+])
+const xoLiteItems = ref([{ currentlyAttached: true }, { currentlyAttached: false }])
+</script>
+
+<style lang="postcss" scoped>
+.container {
+  display: flex;
+  gap: 10rem;
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+}
+</style>

@xen-orchestra/web-core/lib/components/connection-status/VtsConnectionStatus.vue

@@ -0,0 +1,29 @@
+<template>
+  <UiInfo :accent="currentStatus.accent">
+    {{ currentStatus.text }}
+  </UiInfo>
+</template>
+
+<script setup lang="ts">
+import UiInfo, { type InfoAccent } from '@core/components/ui/info/UiInfo.vue'
+import { computed, type ComputedRef } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+type ConnectionStatus = 'connected' | 'disconnected' | 'partially-connected' | 'disconnected-from-physical-device'
+type ConnectionStatusesMap = Record<ConnectionStatus, { text: string; accent: InfoAccent }>
+
+const { status } = defineProps<{
+  status: ConnectionStatus
+}>()
+
+const { t } = useI18n()
+
+const statuses: ComputedRef<ConnectionStatusesMap> = computed(() => ({
+  connected: { text: t('connected'), accent: 'success' },
+  disconnected: { text: t('disconnected'), accent: 'danger' },
+  'partially-connected': { text: t('partially-connected'), accent: 'warning' },
+  'disconnected-from-physical-device': { text: t('disconnected-from-physical-device'), accent: 'warning' },
+}))
+
+const currentStatus = computed(() => statuses.value[status])
+</script>

@xen-orchestra/web-core/lib/components/network/VtsNetworkStatus.vue

@@ -0,0 +1,54 @@
+<template>
+  <UiInfo class="status-indicator text-ellipsis" :accent="computedStatusProps.accent">
+    <p v-tooltip class="text-ellipsis" :class="{ card }">{{ computedStatusProps.text }}</p>
+  </UiInfo>
+</template>
+
+<script setup lang="ts">
+import UiInfo from '@core/components/ui/info/UiInfo.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
+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 props = defineProps<{
+  items?: any | any[]
+  card?: boolean
+}>()
+
+const { t } = useI18n()
+
+type Status = 'connected' | 'disconnected' | 'partially_connected'
+type StatusAccent = 'success' | 'warning' | 'danger'
+
+const states: Record<Status, { text: string; icon?: IconDefinition; accent: StatusAccent }> = {
+  connected: { text: t('connected'), icon: faCheck, accent: 'success' },
+  disconnected: { text: t('disconnected'), icon: faCheck, accent: 'danger' },
+  partially_connected: { text: t('partially-connected'), icon: faExclamation, accent: 'warning' },
+}
+
+const items = computed(() => (Array.isArray(props.items) ? props.items : props.items ? [props.items] : []))
+
+const status = computed<Status>(() => {
+  if (
+    items.value.every(item => ('currentlyAttached' in item ? item.currentlyAttached : item.carrier && item.attached))
+  ) {
+    return 'connected'
+  }
+  if (
+    items.value.some(item => ('currentlyAttached' in item ? item.currentlyAttached : item.carrier || item.attached))
+  ) {
+    return 'partially_connected'
+  }
+  return 'disconnected'
+})
+
+const computedStatusProps = computed(() => states[status.value as Status])
+</script>
+
+<style scoped lang="postcss">
+p:not(.card) {
+  font-size: 1.4rem !important;
+}
+</style>

@xen-orchestra/web-core/lib/components/ui/info/UiInfo.vue

@@ -20,8 +20,10 @@ import {
 } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
 
+export type InfoAccent = 'info' | 'success' | 'warning' | 'danger'
+
 type Props = {
-  accent: 'info' | 'success' | 'warning' | 'danger'
+  accent: InfoAccent
 }
 
 const props = defineProps<Props>()

@xen-orchestra/web-core/lib/locales/en.json

@@ -43,7 +43,10 @@
   "dark-mode.auto": "Auto dark mode",
 
   "access-forum": "Access forum",
+  "connected": "Connected",
   "dashboard": "Dashboard",
+  "disconnected": "Disconnected",
+  "disconnected-from-physical-device": "Disconnected from physical device",
   "documentation-name": "{name} documentation",
   "error-no-data": "Error, can't collect data.",
   "exit-fullscreen": "Exit fullscreen",
@@ -61,6 +64,7 @@
   "open-console-in-new-tab": "Open console in new tab",
   "other": "Other",
   "page-not-found": "This page is not to be found…",
+  "partially-connected": "Partially connected",
   "patches": "Patches",
   "power-on-vm-for-console": "Power on your VM to access its console",
   "power-on-host-for-console": "Power on your host to access its console",

@xen-orchestra/web-core/lib/locales/fr.json

@@ -43,7 +43,10 @@
   "dark-mode.auto": "Mode sombre automatique",
 
   "access-forum": "Accès au forum",
+  "connected": "Connecté",
   "dashboard": "Tableau de bord",
+  "disconnected": "Déconnecté",
+  "disconnected-from-physical-device": "Déconnécté de l'appareil physique",
   "documentation-name": "Documentation {name}",
   "error-no-data": "Erreur, impossible de collecter les données.",
   "exit-fullscreen": "Quitter le plein écran",
@@ -61,6 +64,7 @@
   "open-console-in-new-tab": "Ouvrir la console dans un nouvel onglet",
   "other": "Autre",
   "page-not-found": "Cette page est introuvable…",
+  "partially-connected": "Partiellement connecté",
   "patches": "Patches",
   "power-on-vm-for-console": "Allumez votre VM pour accéder à sa console",
   "power-on-host-for-console": "Allumez votre hôte pour accéder à sa console",