@xen-orchestra/web-core 0.42.0 → 0.43.0

package/lib/components/banner/VtsBanner.vue

@@ -0,0 +1,50 @@
+<template>
+  <div :class="className" class="vts-banner">
+    <slot />
+    <div v-if="slots.addons">
+      <slot name="addons" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { toVariants } from '@core/utils/to-variants.util.ts'
+import { computed } from 'vue'
+
+export type BannerAccent = 'brand' | 'warning' | 'danger'
+
+const { accent } = defineProps<{
+  accent: BannerAccent
+}>()
+
+const slots = defineSlots<{
+  default(): any
+  addons?(): any
+}>()
+
+const className = computed(() => toVariants({ accent }))
+</script>
+
+<style scoped lang="postcss">
+.vts-banner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1.6rem;
+  padding: 0.8rem 1.6rem;
+  border-block-end: 0.1rem solid var(--color-neutral-border);
+
+  /* ACCENT */
+  &.accent--brand {
+    background-color: var(--color-brand-background-selected);
+  }
+
+  &.accent--warning {
+    background-color: var(--color-warning-background-selected);
+  }
+
+  &.accent--danger {
+    background-color: var(--color-danger-background-selected);
+  }
+}
+</style>

package/lib/components/input-wrapper/VtsInputWrapper.vue

@@ -78,6 +78,7 @@ provide(IK_INPUT_WRAPPER_CONTROLLER, wrapperController)
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
+  min-width: 0;
 
   .label {
     min-height: 2.4rem;

package/lib/components/ui/checkbox/UiCheckbox.vue

@@ -78,10 +78,10 @@ const attrs = useAttrs()
       border-color 0.125s ease-in-out;
     border: 0.2rem solid transparent;
     border-radius: 0.2rem;
+    flex-shrink: 0;
 
     .icon {
       font-size: 0.75rem;
-      position: absolute;
       color: var(--color-info-txt-item);
       transition: opacity 0.125s ease-in-out;
     }

package/lib/components/ui/head-bar/UiHeadBar.vue

@@ -68,6 +68,7 @@ const slots = defineSlots<{
     display: flex;
     align-items: center;
     gap: 0.8rem;
+    min-width: 0;
   }
 }
 </style>

package/lib/components/ui/radio-button/UiRadioButton.vue

@@ -41,6 +41,7 @@ const isDisabled = useDisabled(() => disabled)
   .radio-container {
     display: inline-flex;
     align-items: center;
+    flex-shrink: 0;
     justify-content: center;
     border: 0.2rem solid var(--accent-color);
     background-color: transparent;
@@ -80,7 +81,6 @@ const isDisabled = useDisabled(() => disabled)
 
     .radio-icon {
       font-size: 0.8rem;
-      position: absolute;
       transition: font-size 0.125s ease-in-out;
       color: var(--radio-icon-color);
       --radio-icon-color: var(--color-neutral-background-primary);

package/lib/components/ui/radio-button-group/UiRadioButtonGroup.vue

@@ -6,7 +6,7 @@
         {{ label }}
       </UiLabel>
     </slot>
-    <div class="group" :class="{ vertical }">
+    <div class="group" :class="[className, { vertical }]">
       <slot />
     </div>
     <slot v-if="slots.info || info !== undefined" name="info">
@@ -20,10 +20,12 @@
 <script setup lang="ts">
 import UiInfo from '@core/components/ui/info/UiInfo.vue'
 import UiLabel from '@core/components/ui/label/UiLabel.vue'
+import { toVariants } from '@core/utils/to-variants.util.ts'
 import { computed } from 'vue'
 
-const { accent } = defineProps<{
+const { accent, gap } = defineProps<{
   accent: 'brand' | 'warning' | 'danger'
+  gap: 'narrow' | 'wide'
   label?: string
   info?: string
   vertical?: boolean
@@ -35,6 +37,7 @@ const slots = defineSlots<{
   info?(): any
 }>()
 const labelAccent = computed(() => (accent === 'brand' ? 'neutral' : accent))
+const className = computed(() => toVariants({ gap }))
 </script>
 
 <style scoped lang="postcss">
@@ -45,12 +48,22 @@ const labelAccent = computed(() => (accent === 'brand' ? 'neutral' : accent))
 
   .group {
     display: flex;
-    gap: 6.4rem;
 
     &.vertical {
       flex-direction: column;
       gap: 0.8rem;
     }
+
+    /* GAP */
+
+    &.gap--narrow {
+      flex-wrap: wrap;
+      gap: 0.4rem;
+    }
+
+    &.gap--wide {
+      gap: 6.4rem;
+    }
   }
 }
 </style>

package/lib/components/ui/rich-radio-button/UiRichRadioButton.vue

@@ -0,0 +1,247 @@
+<!-- v1 -->
+<template>
+  <label :class="variants" class="ui-rich-radio-button typo-body-regular">
+    <span class="rich-image">
+      <img :src :alt />
+    </span>
+    <span class="radio-wrapper typo-body-regular">
+      <span class="radio-container">
+        <input v-model="model" :disabled="isDisabled" :value class="input" type="radio" />
+        <VtsIcon name="fa:circle" size="small" class="radio-icon" />
+      </span>
+      <slot />
+    </span>
+  </label>
+</template>
+
+<script lang="ts" setup>
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import { useDisabled } from '@core/composables/disabled.composable.ts'
+import { toVariants } from '@core/utils/to-variants.util.ts'
+import { computed } from 'vue'
+
+const { accent, value, disabled, size } = defineProps<{
+  accent: 'brand' | 'warning' | 'danger'
+  size: 'small' | 'medium'
+  value: unknown
+  src: string
+  alt: string
+  disabled?: boolean
+}>()
+
+const model = defineModel<string>()
+
+defineSlots<{
+  default(): any
+}>()
+
+const variants = computed(() => toVariants({ accent, size }))
+const isDisabled = useDisabled(() => disabled)
+</script>
+
+<style lang="postcss" scoped>
+.ui-rich-radio-button {
+  cursor: pointer;
+  border: 0.1rem solid var(--color-neutral-border);
+  border-radius: 0.4rem;
+  overflow: hidden;
+
+  .rich-image {
+    border-bottom: 0.1rem solid;
+    border-color: inherit;
+    overflow: hidden;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  .radio-container {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 0.2rem solid var(--accent-color);
+    background-color: transparent;
+    border-radius: 0.8rem;
+    width: 1.6rem;
+    height: 1.6rem;
+    position: relative;
+    transition:
+      border-color 0.125s ease-in-out,
+      background-color 0.125s ease-in-out;
+
+    &:has(input:focus-visible) {
+      outline: none;
+
+      &::after {
+        position: absolute;
+        content: '';
+        inset: -0.5rem;
+        border: 0.2rem solid var(--color-brand-txt-base);
+        border-radius: 0.4rem;
+      }
+    }
+
+    &:has(.input:checked) {
+      border-color: var(--accent-checked-color);
+      background-color: var(--accent-checked-color);
+    }
+
+    &:has(.input:checked:disabled) {
+      border-color: var(--color-neutral-txt-secondary);
+      background-color: var(--color-neutral-txt-secondary);
+    }
+
+    .input {
+      opacity: 0;
+      position: absolute;
+      pointer-events: none;
+    }
+
+    .radio-icon {
+      font-size: 0.8rem;
+      position: absolute;
+      transition: font-size 0.125s ease-in-out;
+      color: var(--radio-icon-color);
+      --radio-icon-color: var(--color-neutral-background-primary);
+    }
+
+    .input:not(:checked) + .radio-icon {
+      font-size: 1.2rem;
+    }
+
+    .input:disabled + .radio-icon {
+      --radio-icon-color: var(--color-neutral-background-disabled);
+    }
+  }
+
+  /* ACCENT */
+
+  &.accent--brand {
+    --accent-color: var(--color-brand-txt-base);
+    --accent-hover-color: var(--color-brand-txt-hover);
+    --accent-checked-color: var(--color-brand-item-base);
+    --accent-active-color: var(--color-brand-txt-active);
+  }
+
+  &.accent--warning {
+    --accent-color: var(--color-warning-txt-base);
+    --accent-hover-color: var(--color-warning-txt-hover);
+    --accent-checked-color: var(--color-warning-item-base);
+    --accent-active-color: var(--color-warning-txt-active);
+  }
+
+  &.accent--danger {
+    --accent-color: var(--color-danger-txt-base);
+    --accent-hover-color: var(--color-danger-txt-hover);
+    --accent-checked-color: var(--color-danger-item-base);
+    --accent-active-color: var(--color-danger-txt-active);
+  }
+
+  /* DISABLED */
+
+  &:has(.input:disabled) {
+    cursor: not-allowed;
+    --accent-color: var(--color-neutral-txt-secondary);
+  }
+  .radio-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+    padding: 1.6rem;
+    background-color: var(--color-neutral-background-primary);
+    cursor: pointer;
+  }
+
+  /* INITIAL BORDER EXCEPT BRAND */
+
+  &.accent--warning,
+  &.accent--danger {
+    border-color: var(--accent-color);
+  }
+
+  /* CHECKED STATE */
+
+  &:has(input:checked:not(:disabled)) {
+    border-color: var(--accent-checked-color);
+
+    .radio-container {
+      border-color: var(--accent-checked-color);
+      background-color: var(--accent-checked-color);
+    }
+  }
+
+  /* HOVER STATE */
+
+  &:hover:not(:has(input:disabled)) {
+    border-color: var(--accent-hover-color);
+
+    .radio-container {
+      border-color: var(--accent-hover-color);
+    }
+    .radio-container:has(.input:checked) {
+      background-color: var(--accent-hover-color);
+    }
+  }
+
+  /* ACTIVE STATE */
+
+  &:active:not(:has(input:disabled)) {
+    .radio-container {
+      border-color: var(--accent-active-color);
+    }
+    .radio-container:has(.input:checked) {
+      background-color: var(--accent-active-color);
+    }
+  }
+
+  /* DISABLED STATE */
+
+  &:has(input:disabled) {
+    border-color: var(--color-neutral-border);
+
+    .rich-image {
+      opacity: 0.5;
+    }
+
+    .radio-wrapper {
+      background-color: var(--color-neutral-background-disabled);
+      cursor: not-allowed;
+    }
+  }
+
+  /* SIZES */
+
+  &.size--small {
+    height: 16.4rem;
+    width: 12.8rem;
+
+    .rich-image {
+      height: 10.8rem;
+    }
+
+    .radio-wrapper {
+      height: 5.6rem;
+    }
+  }
+
+  &.size--medium {
+    height: 25.6rem;
+    width: 20rem;
+
+    .rich-image {
+      height: 20rem;
+    }
+
+    .radio-wrapper {
+      height: 5.6rem;
+    }
+  }
+}
+</style>

package/lib/layouts/CoreLayout.vue

@@ -16,6 +16,16 @@
       />
       <slot name="app-header" />
     </header>
+    <VtsBanner v-if="showBanner" accent="danger">
+      <UiInfo accent="danger">
+        {{ t('unable-to-connect-to-xo-server') }}
+      </UiInfo>
+      <template #addons>
+        <UiButton variant="primary" accent="brand" size="small" @click="handleRetry()">
+          {{ t('retry') }}
+        </UiButton>
+      </template>
+    </VtsBanner>
     <div class="container">
       <template v-if="uiStore.hasUi">
         <VtsBackdrop
@@ -43,17 +53,33 @@
 
 <script lang="ts" setup>
 import VtsBackdrop from '@core/components/backdrop/VtsBackdrop.vue'
+import VtsBanner from '@core/components/banner/VtsBanner.vue'
 import VtsLayoutSidebar from '@core/components/layout/VtsLayoutSidebar.vue'
+import UiButton from '@core/components/ui/button/UiButton.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import UiInfo from '@core/components/ui/info/UiInfo.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
+import { useSseStore } from '@core/packages/remote-resource/sse.store.ts'
 import { useSidebarStore } from '@core/stores/sidebar.store'
 import { useUiStore } from '@core/stores/ui.store'
+import { storeToRefs } from 'pinia'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
 
 const uiStore = useUiStore()
 const sidebarStore = useSidebarStore()
+
+const sseStore = useSseStore()
+
+const { hasErrorSse } = storeToRefs(sseStore)
+
+const showBanner = computed(() => hasErrorSse.value)
+
+function handleRetry() {
+  sseStore.retry()
+}
 </script>
 
 <style lang="postcss" scoped>

package/lib/locales/en.json

@@ -661,6 +661,7 @@
   "resources": "Resources",
   "resources-overview": "Resources overview",
   "rest-api": "REST API",
+  "retry": "Retry",
   "root-by-default": "\"root\" by default.",
   "run": "Run",
   "running-vm": "Running VM | Running VMs",
@@ -791,6 +792,7 @@
   "translation-tool": "Translation tool",
   "unable-to-connect-to": "Unable to connect to {ip}",
   "unable-to-connect-to-the-pool": "Unable to connect to the pool",
+  "unable-to-connect-to-xo-server": "Unable to connect to XO server.",
   "unknown": "Unknown",
   "unlocked": "Unlocked",
   "unreachable-hosts": "Unreachable hosts",

package/lib/locales/fr.json

@@ -661,6 +661,7 @@
   "resources": "Ressources",
   "resources-overview": "Vue d'ensemble des ressources",
   "rest-api": "API REST",
+  "retry": "Réessayer",
   "root-by-default": "\"root\" par défaut.",
   "run": "Run",
   "running-vm": "VM en cours d'exécution | VMs en cours d'exécution",
@@ -791,6 +792,7 @@
   "translation-tool": "Outil de traduction",
   "unable-to-connect-to": "Impossible de se connecter à {ip}",
   "unable-to-connect-to-the-pool": "Impossible de se connecter au Pool",
+  "unable-to-connect-to-xo-server": "Impossible de se connecter au serveur XO.",
   "unknown": "Inconnu",
   "unlocked": "Débloqué",
   "unreachable-hosts": "Hôtes inaccessibles",

package/lib/packages/remote-resource/define-remote-resource.ts

@@ -1,8 +1,8 @@
 import {
-  useSseStore,
   type THandleDelete,
   type THandlePost,
   type THandleWatching,
+  useSseStore,
 } from '@core/packages/remote-resource/sse.store'
 import type { ResourceContext, UseRemoteResource } from '@core/packages/remote-resource/types.ts'
 import type { VoidFunction } from '@core/types/utility.type.ts'
@@ -63,7 +63,7 @@ export function defineRemoteResource<
   onDataReceived?: (data: Ref<NoInfer<TData>>, receivedData: any) => void
   onDataRemoved?: (data: Ref<NoInfer<TData>>, receivedData: any) => void
   stream?: boolean
-  watchCollection: {
+  initWatchCollection: () => {
     collectionId: string
     resource: string // reactivity only on XAPI XO record for now
     getIdentifier: (obj: unknown) => string
@@ -87,7 +87,7 @@ export function defineRemoteResource<
   cacheExpirationMs?: number | false
   pollingIntervalMs?: number | false
   stream?: boolean
-  watchCollection?: {
+  initWatchCollection?: () => {
     collectionId: string
     resource: string // reactivity only on XAPI XO record for now
     getIdentifier: (obj: unknown) => string
@@ -121,8 +121,10 @@ export function defineRemoteResource<
 
   const pollingInterval = config.pollingIntervalMs ?? DEFAULT_POLLING_INTERVAL_MS
 
+  const watchCollection = config.initWatchCollection?.()
+
   const removeData = (data: TData[], dataToRemove: any) => {
-    const getIdentifier = config.watchCollection?.getIdentifier ?? JSON.stringify
+    const getIdentifier = watchCollection?.getIdentifier ?? JSON.stringify
 
     remove(data, item => {
       if (typeof item === 'object') {
@@ -156,14 +158,14 @@ export function defineRemoteResource<
     config.onDataReceived ??
     ((data: Ref<TData>, receivedData: any, context?: ResourceContext<TArgs>) => {
       // allow to ignore some update (like for sub collection. E.g. vms/:id/vdis)
-      if (config.watchCollection?.predicate?.(receivedData, context) === false) {
+      if (watchCollection?.predicate?.(receivedData, context) === false) {
         return
       }
 
       if (data.value === undefined || (Array.isArray(data.value) && Array.isArray(receivedData))) {
         data.value = receivedData
 
-        if (config.watchCollection !== undefined && Array.isArray(data.value)) {
+        if (watchCollection !== undefined && Array.isArray(data.value)) {
           handleBuffer(data as Ref<TData[]>)
           isBufferEventsProcessed = true
         }
@@ -187,7 +189,7 @@ export function defineRemoteResource<
     config.onDataRemoved ??
     ((data: Ref<TData>, receivedData: any, context?: ResourceContext<TArgs>) => {
       // allow to ignore some update (like for sub collection. E.g. vms/:id/vdis)
-      if (config.watchCollection?.predicate?.(receivedData, context) === false) {
+      if (watchCollection?.predicate?.(receivedData, context) === false) {
         return
       }
 
@@ -289,8 +291,8 @@ export function defineRemoteResource<
     let pause: VoidFunction = noop
     let resume: VoidFunction = execute
 
-    if (config.watchCollection !== undefined) {
-      const { collectionId, resource, handleDelete, handlePost, handleWatching } = config.watchCollection
+    if (watchCollection !== undefined) {
+      const { collectionId, resource, handleDelete, handlePost, handleWatching } = watchCollection
       const { watch, unwatch } = useSseStore()
 
       pause = () => unwatch({ collectionId, resource, handleDelete })

package/lib/packages/remote-resource/sse.store.ts

@@ -1,5 +1,6 @@
+import { useNow } from '@vueuse/core'
 import { defineStore } from 'pinia'
-import { ref, watch as watchVue } from 'vue'
+import { computed, ref, watch as watchVue } from 'vue'
 
 type EventFn = (object: unknown) => void
 export type THandlePost = (sseId: string) => Promise<string>
@@ -22,7 +23,10 @@ export type THandleWatching = (
 ) => void
 
 export const useSseStore = defineStore('sse', () => {
-  const sse = ref<{ id?: string; isWatching: boolean }>({ isWatching: false })
+  const sse = ref<{ id?: string; isWatching: boolean; lastPing?: number; errorSse?: unknown | null }>({
+    isWatching: false,
+    errorSse: null,
+  })
   const configsByResource: Map<
     string,
     {
@@ -38,10 +42,30 @@ export const useSseStore = defineStore('sse', () => {
     }
   > = new Map()
 
+  const now = useNow({ interval: 1000 })
+
+  const isError = computed(() => {
+    if (!sse.value.lastPing) {
+      return false
+    }
+
+    return now.value.getTime() - sse.value.lastPing > 32_000
+  })
+
+  const hasErrorSse = computed(() => isError.value || sse.value.errorSse !== null)
+
+  function setErrorSse(error: unknown | null) {
+    sse.value.errorSse = error
+  }
+
   function updateSseId(id: string) {
     sse.value.id = id
   }
 
+  function setPing(timestamp: number) {
+    sse.value.lastPing = timestamp
+  }
+
   function getConfigsByResource(resource: string) {
     return configsByResource.get(resource)
   }
@@ -135,6 +159,10 @@ export const useSseStore = defineStore('sse', () => {
       })
     }
   }
+  // TODO need to be improve
+  function retry() {
+    window.location.reload()
+  }
 
-  return { watch, unwatch }
+  return { watch, unwatch, retry, hasErrorSse, setErrorSse, setPing }
 })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xen-orchestra/web-core",
   "type": "module",
-  "version": "0.42.0",
+  "version": "0.43.0",
   "private": false,
   "exports": {
     "./*": {