@xen-orchestra/web-core 0.50.0 → 0.52.0

package/lib/assets/css/_reset.pcss

@@ -25,7 +25,10 @@ h5,
 h6,
 p,
 ol,
-ul {
+ul,
+dl,
+dt,
+dd {
   margin: 0;
   padding: 0;
   font-weight: inherit;
@@ -36,6 +39,10 @@ ul {
   list-style: none;
 }
 
+dd {
+  margin-inline-start: 0;
+}
+
 img {
   max-width: 100%;
   height: auto;

package/lib/components/column/VtsColumn.vue

@@ -13,9 +13,13 @@ defineSlots<{
 <style lang="postcss" scoped>
 .vts-column {
   flex: 1;
-  flex-basis: 0;
   display: flex;
   flex-direction: column;
   gap: 0.8rem;
+  min-width: 0;
+
+  @container vts-columns (max-width: 90rem) {
+    flex-basis: 100%;
+  }
 }
 </style>

package/lib/components/columns/VtsColumns.vue

@@ -1,16 +1,16 @@
 <template>
-  <div class="vts-columns" :class="{ mobile: uiStore.isSmall }">
+  <div class="vts-columns" :class="{ 'extra-space-around': extraSpaceAround }">
     <component :is="nodes[index - 1] ?? VtsColumn" v-for="index of columns" :key="index" />
   </div>
 </template>
 
 <script lang="ts" setup>
 import VtsColumn from '@core/components/column/VtsColumn.vue'
-import { useUiStore } from '@core/stores/ui.store.ts'
 import { computed } from 'vue'
 
 const { columns: _columns = 2 } = defineProps<{
   columns?: number
+  extraSpaceAround?: boolean
 }>()
 
 const slots = defineSlots<{
@@ -20,19 +20,28 @@ const slots = defineSlots<{
 const nodes = computed(() => slots.default())
 
 const columns = computed(() => Math.max(_columns, nodes.value.length))
-
-const uiStore = useUiStore()
 </script>
 
 <style lang="postcss" scoped>
 .vts-columns {
+  container-type: inline-size;
+  container-name: vts-columns;
   display: flex;
+  flex-wrap: wrap;
   gap: 0.8rem;
-  padding: 0.8rem;
-  flex-direction: row;
 
-  &.mobile {
-    flex-direction: column;
+  &.extra-space-around {
+    margin: 0.8rem;
+  }
+
+  & > * {
+    flex: 1 0 0;
+  }
+
+  @container vts-columns (max-width: 60rem) {
+    & > * {
+      flex-basis: 100%;
+    }
   }
 }
 </style>

package/lib/components/console/VtsRemoteConsole.vue

@@ -12,10 +12,10 @@ import VncClient from '@novnc/novnc/lib/rfb'
 import { whenever } from '@vueuse/core'
 import { promiseTimeout } from '@vueuse/shared'
 import { fibonacci } from 'iterable-backoff'
-import { onBeforeUnmount, ref, useTemplateRef, watchEffect } from 'vue'
+import { onBeforeUnmount, ref, useTemplateRef, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-const props = defineProps<{
+const { url, isConsoleAvailable } = defineProps<{
   url: URL
   isConsoleAvailable: boolean
 }>()
@@ -35,18 +35,16 @@ let nConnectionAttempts = 0
 
 function handleDisconnectionEvent() {
   clearVncClient()
-  if (props.isConsoleAvailable) {
+  if (isConsoleAvailable) {
     nConnectionAttempts++
 
     if (nConnectionAttempts > N_TOTAL_TRIES) {
-      console.error('The number of reconnection attempts has been exceeded for:', props.url)
+      console.error('The number of reconnection attempts has been exceeded for:', url)
       return
     }
 
     console.error(
-      `Connection lost for the remote console: ${props.url}. New attempt in ${
-        FIBONACCI_MS_ARRAY[nConnectionAttempts - 1]
-      }ms`
+      `Connection lost for the remote console: ${url}. New attempt in ${FIBONACCI_MS_ARRAY[nConnectionAttempts - 1]}ms`
     )
     createVncConnection()
   }
@@ -80,7 +78,7 @@ async function createVncConnection() {
     }
   }
 
-  vncClient = new VncClient(consoleContainer.value!, props.url.toString(), {
+  vncClient = new VncClient(consoleContainer.value!, url.toString(), {
     wsProtocols: ['binary'],
   })
   vncClient.scaleViewport = true
@@ -114,16 +112,20 @@ whenever(
   }
 )
 
-watchEffect(() => {
-  if (consoleContainer.value === null || !props.isConsoleAvailable) {
-    return
-  }
+watch(
+  [consoleContainer, () => isConsoleAvailable, () => url.toString()],
+  ([container, isAvailable]) => {
+    if (container === null || !isAvailable) {
+      return
+    }
 
-  nConnectionAttempts = 0
+    nConnectionAttempts = 0
 
-  clearVncClient()
-  createVncConnection()
-})
+    clearVncClient()
+    createVncConnection()
+  },
+  { immediate: true }
+)
 
 onBeforeUnmount(() => {
   clearVncClient()

package/lib/components/{quick-info-column/VtsQuickInfoColumn.vue → key-value-list/VtsKeyValueList.vue}

@@ -1,11 +1,11 @@
 <template>
-  <div class="vts-quick-info-column">
+  <dl class="vts-key-value-list">
     <slot />
-  </div>
+  </dl>
 </template>
 
 <style lang="postcss" scoped>
-.vts-quick-info-column {
+.vts-key-value-list {
   display: flex;
   flex-direction: column;
   gap: 1.6rem;

package/lib/components/key-value-pair/VtsKeyValuePair.vue

@@ -0,0 +1,48 @@
+<template>
+  <dt class="typo-body-regular label">
+    <slot name="label">
+      {{ label }}
+    </slot>
+  </dt>
+  <dd class="typo-body-regular value">
+    <span v-tooltip class="text-ellipsis">
+      <slot name="value">
+        {{ value }}
+      </slot>
+    </span>
+  </dd>
+</template>
+
+<script lang="ts" setup>
+import { vTooltip } from '@core/directives/tooltip.directive'
+
+defineProps<{
+  label?: string
+  value?: string
+}>()
+
+defineSlots<{
+  label?(): any
+  value?(): any
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.label {
+  color: var(--color-neutral-txt-secondary);
+}
+
+.value {
+  color: var(--color-neutral-txt-primary);
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  min-width: 0;
+
+  .text-ellipsis {
+    &:empty::before {
+      content: '-';
+    }
+  }
+}
+</style>

package/lib/components/key-value-row/VtsKeyValueRow.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="vts-key-value-row" :class="{ mobile: uiStore.isSmallOrMedium }">
+    <VtsKeyValuePair :label :value>
+      <template v-if="slots.label" #label>
+        <slot name="label" />
+      </template>
+      <template v-if="slots.value" #value>
+        <slot name="value" />
+      </template>
+    </VtsKeyValuePair>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import VtsKeyValuePair from '@core/components/key-value-pair/VtsKeyValuePair.vue'
+import { useUiStore } from '@core/stores/ui.store.ts'
+
+defineProps<{
+  label?: string
+  value?: string
+}>()
+
+const slots = defineSlots<{
+  label?(): any
+  value?(): any
+}>()
+
+const uiStore = useUiStore()
+</script>
+
+<style lang="postcss" scoped>
+.vts-key-value-row {
+  display: flex;
+  gap: 2.4rem;
+
+  &.mobile {
+    flex-direction: column;
+    gap: 0.8rem;
+  }
+
+  :deep(dt) {
+    flex-shrink: 0;
+  }
+}
+</style>

package/lib/components/menu/MenuTrigger.vue

@@ -28,6 +28,7 @@ defineProps<{
 
   &.disabled {
     color: var(--color-neutral-txt-secondary);
+    background-color: var(--color-neutral-background-disabled);
   }
 
   &:not(.disabled) {

package/lib/components/modal/VtsErrorModal.vue

@@ -0,0 +1,36 @@
+<template>
+  <VtsModal accent="danger" icon="status:danger-picto" dismissible>
+    <template #title>
+      {{ title }}
+    </template>
+
+    <template #content>
+      <slot name="content">
+        {{ error }}
+      </slot>
+    </template>
+
+    <template #buttons>
+      <VtsModalConfirmButton>
+        {{ t('action:close') }}
+      </VtsModalConfirmButton>
+    </template>
+  </VtsModal>
+</template>
+
+<script lang="ts" setup>
+import VtsModal from '@core/components/modal/VtsModal.vue'
+import VtsModalConfirmButton from '@core/components/modal/VtsModalConfirmButton.vue'
+import { useI18n } from 'vue-i18n'
+
+defineProps<{
+  title: string
+  error?: string
+}>()
+
+defineSlots<{
+  content?(): any
+}>()
+
+const { t } = useI18n()
+</script>

package/lib/components/status/VtsStatus.vue

@@ -25,6 +25,8 @@ export type Status =
   | 'pending'
   | 'enabled'
   | 'disabled'
+  | 'allow'
+  | 'drop'
   | true
   | false
 
@@ -52,6 +54,8 @@ const currentStatus = useMapper<Status, { text: string; accent: InfoAccent }>(
     ['pending', { text: t('in-progress'), accent: 'info' }],
     ['enabled', { text: t('enabled'), accent: 'success' }],
     ['disabled', { text: t('disabled'), accent: 'muted' }],
+    ['allow', { text: t('allow'), accent: 'success' }],
+    ['drop', { text: t('drop'), accent: 'danger' }],
     [true, { text: t('enabled'), accent: 'success' }],
     [false, { text: t('disabled'), accent: 'muted' }],
   ],

package/lib/components/table/cells/VtsDoubleLinkCell.vue

@@ -0,0 +1,53 @@
+<template>
+  <UiTableCell>
+    <div class="vts-double-link-cell">
+      <UiLink size="medium" :icon :to :href :target class="link">
+        <slot />
+      </UiLink>
+      <UiLink
+        v-if="suffix"
+        size="medium"
+        :icon="suffix.icon"
+        :to="suffix.to"
+        :href="suffix.href"
+        :target="suffix.target"
+        class="link"
+      >
+        {{ suffix.label }}
+      </UiLink>
+    </div>
+  </UiTableCell>
+</template>
+
+<script setup lang="ts">
+import UiLink from '@core/components/ui/link/UiLink.vue'
+import UiTableCell from '@core/components/ui/table-cell/UiTableCell.vue'
+import type { LinkOptions } from '@core/composables/link-component.composable.ts'
+import type { IconName } from '@core/icons'
+
+export type VtsDoubleLinkCellProps = LinkOptions & {
+  icon?: IconName
+  suffix?: LinkOptions & {
+    label: string
+    icon?: IconName
+  }
+}
+
+defineProps<VtsDoubleLinkCellProps>()
+
+defineSlots<{
+  default(): any
+}>()
+</script>
+
+<style scoped lang="postcss">
+.vts-double-link-cell {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+}
+
+.link {
+  line-height: 1.5;
+}
+</style>

package/lib/components/tabular-key-value-list/VtsTabularKeyValueList.vue

@@ -0,0 +1,29 @@
+<template>
+  <dl class="vts-tabular-key-value-list" :class="{ 'full-height': fullHeight }">
+    <slot />
+  </dl>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  fullHeight?: boolean
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.vts-tabular-key-value-list {
+  container-type: inline-size;
+  container-name: vts-tabular-key-value-list;
+  display: grid;
+  grid-template-columns: minmax(min-content, 20rem) 1fr;
+  row-gap: 1.6rem;
+  column-gap: 2.4rem;
+  align-items: start;
+  align-self: flex-start;
+  width: 100%;
+
+  &.full-height {
+    height: 100%;
+  }
+}
+</style>

package/lib/components/tabular-key-value-row/VtsTabularKeyValueRow.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="vts-tabular-key-value-row">
+    <VtsKeyValuePair :label :value>
+      <template v-if="slots.label" #label>
+        <slot name="label" />
+      </template>
+      <template v-if="slots.value" #value>
+        <slot name="value" />
+      </template>
+    </VtsKeyValuePair>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import VtsKeyValuePair from '@core/components/key-value-pair/VtsKeyValuePair.vue'
+
+defineProps<{
+  label?: string
+  value?: string
+}>()
+
+const slots = defineSlots<{
+  label?(): any
+  value?(): any
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.vts-tabular-key-value-row {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: span 2;
+  align-items: start;
+
+  @container vts-tabular-key-value-list (max-width: 40rem) {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.8rem;
+  }
+}
+</style>

package/lib/icons/fa-icons.ts

@@ -99,6 +99,7 @@ import {
   faRoute,
   faSatellite,
   faServer,
+  faShieldHalved,
   faSliders,
   faSpinner,
   faSquare,
@@ -226,6 +227,7 @@ export const faIcons = defineIconPack({
   time: { icon: faClock },
   'thumb-tack': { icon: faThumbTack },
   'thumb-tack-slash': { icon: faThumbTackSlash },
+  'traffic-rule': { icon: faShieldHalved },
   trash: { icon: faTrash },
   'triangle-exclamation': { icon: faTriangleExclamation },
   'up-right-and-down-left-from-center': { icon: faUpRightAndDownLeftFromCenter },

package/lib/icons/object-icons.ts

@@ -12,6 +12,7 @@ import {
   faClock,
   faDatabase,
   faDesktop,
+  faEthernet,
   faHdd,
   faNetworkWired,
   faPlay,
@@ -209,6 +210,7 @@ export const objectIcons = defineIconPack({
   'vdi:disabled': [constructIcon(faHdd), ...constructCircleStatus('disabled')],
   'vdi:warning': [constructIcon(faHdd), ...constructCircleStatus('warning-circle')],
   'vdi:detached': [constructIcon(faHdd), ...constructCircleStatus('danger-circle')],
+  vif: constructIcon(faEthernet),
   network: constructIcon(faNetworkWired),
   'network:unknown': [
     {