@xen-orchestra/web-core 0.15.0 → 0.16.0

package/lib/components/connection-status/VtsConnectionStatus.vue

@@ -14,6 +14,7 @@ export type ConnectionStatus =
   | 'disconnected'
   | 'partially-connected'
   | 'disconnected-from-physical-device'
+  | 'physically-disconnected'
 type ConnectionStatusesMap = Record<ConnectionStatus, { text: string; accent: InfoAccent }>
 
 const { status } = defineProps<{
@@ -27,6 +28,8 @@ const statuses: ComputedRef<ConnectionStatusesMap> = computed(() => ({
   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' },
+  // This status is used in host pif side panel
+  'physically-disconnected': { text: t('disconnected-from-physical-device'), accent: 'danger' },
 }))
 
 const currentStatus = computed(() => statuses.value[status])

package/lib/components/console/VtsClipboardConsole.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="vts-clipboard-console">
     <UiCardTitle>{{ $t('console-clipboard') }}</UiCardTitle>
-    <UiTextarea v-tooltip="$t('coming-soon')" accent="info" disabled :model-value="modelValue" />
+    <UiTextarea v-tooltip="$t('coming-soon')" accent="brand" disabled :model-value="modelValue" />
     <div class="buttons-container">
       <UiButton v-tooltip="$t('coming-soon')" accent="brand" variant="primary" size="medium" disabled>
         {{ $t('send') }}
@@ -16,7 +16,7 @@
 <script setup lang="ts">
 import UiButton from '@core/components/ui/button/UiButton.vue'
 import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
-import UiTextarea from '@core/components/ui/input/UiTextarea.vue'
+import UiTextarea from '@core/components/ui/text-area/UiTextarea.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { ref } from 'vue'
 

package/lib/components/ui/character-limit/UiCharacterLimit.vue

@@ -0,0 +1,35 @@
+<!-- v1 -->
+<template>
+  <span class="ui-character-limit" :class="classes">
+    {{ $t('core.character-limit', { count, max }) }}
+  </span>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+const { count, max } = defineProps<{
+  count: number
+  max: number
+}>()
+
+const isTooLong = computed(() => count > max)
+
+const classes = computed(() => {
+  if (isTooLong.value) {
+    return ['has-error', 'typo-body-bold-small']
+  }
+
+  return 'typo-body-regular-small'
+})
+</script>
+
+<style lang="postcss" scoped>
+.ui-character-limit {
+  color: var(--color-neutral-txt-secondary);
+
+  &.has-error {
+    color: var(--color-danger-txt-base);
+  }
+}
+</style>

package/lib/components/ui/input/UiInput.vue

@@ -22,7 +22,7 @@
         @click="modelValue = ''"
       />
     </div>
-    <UiInfo v-if="slots.info || info" :accent>
+    <UiInfo v-if="slots.info || info" :accent="accent === 'brand' ? 'info' : accent">
       <slot name="info">{{ info }}</slot>
     </UiInfo>
   </div>
@@ -37,7 +37,7 @@ import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faXmark } from '@fortawesome/free-solid-svg-icons'
 import { computed, useAttrs, useId } from 'vue'
 
-type InputAccent = 'info' | 'warning' | 'danger'
+type InputAccent = 'brand' | 'warning' | 'danger'
 type InputType = 'text' | 'number' | 'password' | 'search'
 
 defineOptions({
@@ -67,7 +67,7 @@ const slots = defineSlots<{
 
 const attrs = useAttrs()
 
-const labelAccent = computed(() => (accent === 'info' ? 'neutral' : accent))
+const labelAccent = computed(() => (accent === 'brand' ? 'neutral' : accent))
 </script>
 
 <style lang="postcss" scoped>
@@ -76,7 +76,6 @@ const labelAccent = computed(() => (accent === 'info' ? 'neutral' : accent))
   position: relative;
   display: flex;
   flex-direction: column;
-  flex: 1;
   gap: 0.4rem;
   flex: 1;
 
@@ -107,20 +106,20 @@ const labelAccent = computed(() => (accent === 'info' ? 'neutral' : accent))
 
   /* VARIANT */
 
-  &.accent--info {
+  &.accent--brand {
     .input {
       border-color: var(--color-neutral-border);
 
       &:hover {
-        border-color: var(--color-info-item-hover);
+        border-color: var(--color-brand-item-hover);
       }
 
       &:focus {
-        border-color: var(--color-info-item-base);
+        border-color: var(--color-brand-item-base);
       }
 
       &:active {
-        border-color: var(--color-info-item-active);
+        border-color: var(--color-brand-item-active);
       }
 
       &:disabled {

package/lib/components/ui/query-search-bar/UiQuerySearchBar.vue

@@ -8,7 +8,7 @@
       :id
       v-model="value"
       type="text"
-      accent="info"
+      accent="brand"
       :aria-label="uiStore.isMobile ? $t('core.query-search-bar.label') : undefined"
       :icon="uiStore.isDesktop ? faMagnifyingGlass : undefined"
       :placeholder="$t('core.query-search-bar.placeholder')"

package/lib/components/ui/{input → text-area}/UiTextarea.vue

@@ -1,25 +1,41 @@
 <!-- v2 -->
 <template>
-  <div class="ui-textarea" :class="toVariants({ accent })">
-    <UiLabel v-if="slots.default" :accent="labelAccent" :required :icon :href><slot /></UiLabel>
-    <textarea v-model="model" :disabled class="textarea" v-bind="attrs" />
-    <UiInfo v-if="slots.info" :accent><slot name="info" /></UiInfo>
+  <div class="ui-textarea" :class="toVariants({ accent: hasMaxCharactersError ? 'danger' : accent })">
+    <UiLabel v-if="slots.default" :accent="labelAccent" :required :icon :href :for="id">
+      <slot />
+    </UiLabel>
+    <textarea v-bind="attrs" :id ref="textarea" v-model="model" :disabled class="textarea" />
+    <UiCharacterLimit v-if="maxCharacters" :count="model.trim().length" :max="maxCharacters" />
+    <UiInfo v-if="isExceedingMaxCharacters" accent="danger">
+      {{ $t('core.textarea.exceeds-max-characters', { max: maxCharacters }) }}
+    </UiInfo>
+    <UiInfo v-if="slots.info" :accent="accent === 'brand' ? 'info' : accent">
+      <slot name="info" />
+    </UiInfo>
   </div>
 </template>
 
 <script lang="ts" setup>
+import UiCharacterLimit from '@core/components/ui/character-limit/UiCharacterLimit.vue'
 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'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-import { computed, useAttrs } from 'vue'
+import { useFocus } from '@vueuse/core'
+import { computed, useAttrs, useId, useTemplateRef } from 'vue'
 
 defineOptions({
   inheritAttrs: false,
 })
 
-const props = defineProps<{
-  accent: 'info' | 'warning' | 'danger'
+const {
+  accent,
+  maxCharacters,
+  id = useId(),
+} = defineProps<{
+  accent: 'brand' | 'warning' | 'danger'
+  id?: string
+  maxCharacters?: number
   disabled?: boolean
   href?: string
   icon?: IconDefinition
@@ -35,7 +51,24 @@ const slots = defineSlots<{
 
 const attrs = useAttrs()
 
-const labelAccent = computed(() => (props.accent === 'info' ? 'neutral' : props.accent))
+const textAreaElement = useTemplateRef('textarea')
+
+const { focused } = useFocus(textAreaElement)
+
+// WIP: To update when using VeeValidate and custom validation rules
+const isExceedingMaxCharacters = computed(() =>
+  maxCharacters !== undefined ? model.value.trim().length > maxCharacters : false
+)
+
+const hasMaxCharactersError = computed(() => !focused.value && isExceedingMaxCharacters.value)
+
+const labelAccent = computed(() => {
+  if (hasMaxCharactersError.value) {
+    return 'danger'
+  }
+
+  return accent === 'brand' ? 'neutral' : accent
+})
 </script>
 
 <style lang="postcss" scoped>
@@ -54,20 +87,23 @@ const labelAccent = computed(() => (props.accent === 'info' ? 'neutral' : props.
     width: 100%;
   }
 
-  &.accent--info {
+  &.accent--brand {
     .textarea {
       border-color: var(--color-neutral-border);
 
       &:hover {
-        border-color: var(--color-info-item-hover);
+        border-color: var(--color-brand-item-hover);
       }
+
       &:active {
-        border-color: var(--color-info-item-active);
+        border-color: var(--color-brand-item-active);
       }
+
       &:focus:not(:active) {
         border-width: 0.2rem;
-        border-color: var(--color-info-item-base);
+        border-color: var(--color-brand-item-base);
       }
+
       &:disabled {
         background-color: var(--color-neutral-background-disabled);
         border-color: var(--color-neutral-border);
@@ -82,13 +118,16 @@ const labelAccent = computed(() => (props.accent === 'info' ? 'neutral' : props.
       &:hover {
         border-color: var(--color-warning-item-hover);
       }
+
       &:active {
         border-color: var(--color-warning-item-active);
       }
+
       &:focus:not(:active) {
         border-width: 0.2rem;
         border-color: var(--color-warning-item-base);
       }
+
       &:disabled {
         background-color: var(--color-neutral-background-disabled);
         border-color: var(--color-neutral-border);
@@ -103,13 +142,16 @@ const labelAccent = computed(() => (props.accent === 'info' ? 'neutral' : props.
       &:hover {
         border-color: var(--color-danger-item-hover);
       }
+
       &:active {
         border-color: var(--color-danger-item-active);
       }
+
       &:focus:not(:active) {
         border-width: 0.2rem;
         border-color: var(--color-danger-item-base);
       }
+
       &:disabled {
         background-color: var(--color-neutral-background-disabled);
         border-color: var(--color-neutral-border);

package/lib/locales/en.json

@@ -44,6 +44,9 @@
   "backups.vms-protection.protected": "In at least 1 job & protected",
   "backups.vms-protection.tooltip": "A VM is protected if it's in a backup job, with an enabled schedule, and the last run succeeded",
   "backups.vms-protection.unprotected": "In at least 1 job but unprotected",
+  "bond": "Bond",
+  "bond-devices": "Bond devices",
+  "bond-status": "Bond status",
   "bytes.gi": "GiB",
   "bytes.ki": "KiB",
   "bytes.mi": "MiB",
@@ -66,6 +69,7 @@
   "console-unavailable": "Console unavailable",
   "copy": "Copy",
   "copy-info-json": "Copy information into JSON",
+  "core.character-limit": "{count}/{max} character | {count}/{max} characters",
   "core.close": "Close",
   "core.copied": "Copied",
   "core.copy-id": "Copy ID",
@@ -91,6 +95,7 @@
   "core.sidebar.unlock": "Unlock sidebar",
   "core.sort.ascending": "Sort ascending",
   "core.sort.descending": "Sort descending",
+  "core.textarea.exceeds-max-characters": "Field value must be {max} characters or less.",
   "cpu-provisioning": "CPU provisioning",
   "cpu-provisioning-warning": "The number of vCPUs allocated exceeds the number of physical CPUs available. System performance could be affected",
   "cpu-usage": "CPU usage",
@@ -238,6 +243,7 @@
   "log-out": "Log out",
   "login": "Login",
   "login-only-on-master": "Login is only possible on the master host",
+  "mac-address": "MAC address",
   "mac-addresses": "MAC addresses",
   "management": "Management",
   "master": "Primary host",
@@ -257,6 +263,7 @@
   "network": "Network",
   "network-block-device": "Network block device",
   "network-download": "Download",
+  "network-information": "Network information",
   "network-throughput": "Network throughput",
   "network-upload": "Upload",
   "networks": "Networks",
@@ -290,6 +297,9 @@
   "password-invalid": "Password invalid",
   "patches": "Patches",
   "pause": "Pause",
+  "physical-interface-status": "Physical interface status",
+  "pif": "PIF",
+  "pif-status": "PIF status",
   "pifs": "PIFs",
   "pifs-status": "PIFs status",
   "please-confirm": "Please confirm",
@@ -306,6 +316,7 @@
   "power-on-vm-for-console": "Power on your VM to access its console",
   "power-state": "Power state",
   "professional-support": "Professional support",
+  "properties": "Properties",
   "property": "Property",
   "ram-usage": "RAM usage",
   "reboot": "Reboot",
@@ -363,6 +374,7 @@
   "switch-theme": "Switch theme",
   "system": "System",
   "table-actions": "Table actions",
+  "tags": "Tags",
   "task.estimated-end": "Estimated end",
   "task.progress": "Progress",
   "task.started": "Started",

package/lib/locales/fr.json

@@ -44,6 +44,9 @@
   "backups.vms-protection.protected": "Dans au moins 1 job et protégé",
   "backups.vms-protection.tooltip": "Une VM est protégée si elle se trouve dans un job, avec une planification activée, et si la dernière exécution a réussi",
   "backups.vms-protection.unprotected": "Dans au moins 1 job mais sans protection",
+  "bond": "Bond",
+  "bond-devices": "Devices du bond",
+  "bond-status": "Statut du bond",
   "bytes.gi": "Gio",
   "bytes.ki": "Kio",
   "bytes.mi": "Mio",
@@ -66,6 +69,7 @@
   "console-unavailable": "Console indisponible",
   "copy": "Copier",
   "copy-info-json": "Copier les informations en JSON",
+  "core.character-limit": "{count}/{max} caractère | {count}/{max} caractères",
   "core.close": "Fermer",
   "core.copied": "Copié",
   "core.copy-id": "Copier l'ID",
@@ -91,6 +95,7 @@
   "core.sidebar.unlock": "Déverrouiller la barre latérale",
   "core.sort.ascending": "Trier par ordre croissant",
   "core.sort.descending": "Trier par ordre décroissant",
+  "core.textarea.exceeds-max-characters": "Le champ doit contenir {max} caractères ou moins.",
   "cpu-provisioning": "Provisionnement CPU",
   "cpu-provisioning-warning": "Le nombre de vCPU alloués dépasse le nombre de CPU physique disponible. Les performances du système pourraient être affectées",
   "cpu-usage": "Utilisation CPU",
@@ -238,6 +243,7 @@
   "log-out": "Se déconnecter",
   "login": "Connexion",
   "login-only-on-master": "La connexion n'est possible que sur l'hôte primaire",
+  "mac-address": "Adresse MAC",
   "mac-addresses": "Adresses MAC",
   "management": "Gestion",
   "master": "Hôte primaire",
@@ -257,6 +263,7 @@
   "network": "Réseau",
   "network-block-device": "Protocole NBD (Network Block Device)",
   "network-download": "Descendant",
+  "network-information": "Informations du réseau",
   "network-throughput": "Débit du réseau",
   "network-upload": "Montant",
   "networks": "Réseaux",
@@ -290,6 +297,9 @@
   "password-invalid": "Mot de passe incorrect",
   "patches": "Patches",
   "pause": "Pause",
+  "physical-interface-status": "Statut de l'interface physique",
+  "pif": "PIF",
+  "pif-status": "Statut du PIF",
   "pifs": "PIFs",
   "pifs-status": "Statut des PIFs",
   "please-confirm": "Veuillez confirmer",
@@ -306,6 +316,7 @@
   "power-on-vm-for-console": "Allumez votre VM pour accéder à sa console",
   "power-state": "État d'alimentation",
   "professional-support": "Support professionnel",
+  "properties": "Propriétés",
   "property": "Propriété",
   "ram-usage": "Utilisation de la RAM",
   "reboot": "Redémarrer",
@@ -363,6 +374,7 @@
   "switch-theme": "Changer de thème",
   "system": "Système",
   "table-actions": "Actions du tableau",
+  "tags": "Tags",
   "task.estimated-end": "Fin estimée",
   "task.progress": "Progression",
   "task.started": "Démarré",

package/package.json

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