@xen-orchestra/web-core 0.9.0 → 0.11.0

package/lib/composables/chart-theme.composable.ts

@@ -0,0 +1,382 @@
+import { useUiStore } from '@core/stores/ui.store'
+import { storeToRefs } from 'pinia'
+import { computed, provide, ref, watch } from 'vue'
+import { THEME_KEY } from 'vue-echarts'
+
+export const useChartTheme = () => {
+  const { colorMode } = storeToRefs(useUiStore())
+
+  const style = window.getComputedStyle(window.document.documentElement)
+
+  const getColors = () => ({
+    background: style.getPropertyValue('--color-neutral-background-primary'),
+    text: style.getPropertyValue('--color-neutral-txt-secondary'),
+    splitLine: style.getPropertyValue('--color-neutral-border'),
+    primary: style.getPropertyValue('--color-normal-txt-base'),
+    secondary: style.getPropertyValue('--color-warning-txt-base'),
+  })
+
+  const colors = ref(getColors())
+
+  watch(colorMode, () => (colors.value = getColors()), { flush: 'post' })
+
+  provide(
+    THEME_KEY,
+    computed(() => ({
+      color: [colors.value.primary, colors.value.secondary],
+      backgroundColor: colors.value.background,
+      textStyle: {},
+      grid: {
+        top: 40,
+        left: 80,
+        right: 20,
+      },
+      line: {
+        itemStyle: {
+          borderWidth: 2,
+        },
+        lineStyle: {
+          width: 2,
+        },
+        showSymbol: false,
+        symbolSize: 10,
+        symbol: 'circle',
+        smooth: false,
+      },
+      radar: {
+        itemStyle: {
+          borderWidth: 2,
+        },
+        lineStyle: {
+          width: 2,
+        },
+        symbolSize: 10,
+        symbol: 'circle',
+        smooth: false,
+      },
+      bar: {
+        itemStyle: {
+          barBorderWidth: 0,
+          barBorderColor: '#cccccc',
+        },
+      },
+      pie: {
+        itemStyle: {
+          borderWidth: 0,
+          borderColor: '#cccccc',
+        },
+      },
+      scatter: {
+        itemStyle: {
+          borderWidth: 0,
+          borderColor: '#cccccc',
+        },
+      },
+      boxplot: {
+        itemStyle: {
+          borderWidth: 0,
+          borderColor: '#cccccc',
+        },
+      },
+      parallel: {
+        itemStyle: {
+          borderWidth: 0,
+          borderColor: '#cccccc',
+        },
+      },
+      sankey: {
+        itemStyle: {
+          borderWidth: 0,
+          borderColor: '#cccccc',
+        },
+      },
+      funnel: {
+        itemStyle: {
+          borderWidth: 0,
+          borderColor: '#cccccc',
+        },
+      },
+      gauge: {
+        itemStyle: {
+          borderWidth: 0,
+          borderColor: '#cccccc',
+        },
+      },
+      candlestick: {
+        itemStyle: {
+          color: '#eb8146',
+          color0: 'transparent',
+          borderColor: '#d95850',
+          borderColor0: '#58c470',
+          borderWidth: '2',
+        },
+      },
+      graph: {
+        itemStyle: {
+          borderWidth: 0,
+          borderColor: '#cccccc',
+        },
+        lineStyle: {
+          width: 1,
+          color: '#aaaaaa',
+        },
+        symbolSize: '10',
+        symbol: 'emptyArrow',
+        smooth: true,
+        color: ['#893448', '#d95850', '#eb8146', '#ffb248', '#f2d643', '#ebdba4'],
+        label: {
+          color: '#ffffff',
+        },
+      },
+      map: {
+        itemStyle: {
+          areaColor: '#f3f3f3',
+          borderColor: '#999999',
+          borderWidth: 0.5,
+        },
+        label: {
+          color: '#893448',
+        },
+        emphasis: {
+          itemStyle: {
+            areaColor: '#ffb248',
+            borderColor: '#eb8146',
+            borderWidth: 1,
+          },
+          label: {
+            color: '#893448',
+          },
+        },
+      },
+      geo: {
+        itemStyle: {
+          areaColor: '#f3f3f3',
+          borderColor: '#999999',
+          borderWidth: 0.5,
+        },
+        label: {
+          color: '#893448',
+        },
+        emphasis: {
+          itemStyle: {
+            areaColor: '#ffb248',
+            borderColor: '#eb8146',
+            borderWidth: 1,
+          },
+          label: {
+            color: '#893448',
+          },
+        },
+      },
+      categoryAxis: {
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#aaaaaa',
+          },
+        },
+        axisTick: {
+          show: false,
+          lineStyle: {
+            color: '#333',
+          },
+        },
+        axisLabel: {
+          show: true,
+          color: '#999999',
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: [colors.value.splitLine],
+          },
+        },
+        splitArea: {
+          show: false,
+          areaStyle: {
+            color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+          },
+        },
+      },
+      valueAxis: {
+        axisLine: {
+          show: false,
+          // lineStyle: {
+          //   color: "#aaaaaa",
+          // },
+        },
+        axisTick: {
+          show: false,
+          // lineStyle: {
+          //   color: "#333",
+          // },
+        },
+        axisLabel: {
+          show: true,
+          color: colors.value.text,
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: [colors.value.splitLine],
+          },
+        },
+        splitArea: {
+          show: false,
+          areaStyle: {
+            color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+          },
+        },
+      },
+      logAxis: {
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#aaaaaa',
+          },
+        },
+        axisTick: {
+          show: false,
+          lineStyle: {
+            color: '#333',
+          },
+        },
+        axisLabel: {
+          show: true,
+          color: '#999999',
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: [colors.value.splitLine],
+          },
+        },
+        splitArea: {
+          show: false,
+          areaStyle: {
+            color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+          },
+        },
+      },
+      timeAxis: {
+        axisLine: {
+          show: false,
+          // lineStyle: {
+          //   color: "#aaaaaa",
+          // },
+        },
+        axisTick: {
+          show: false,
+          // lineStyle: {
+          //   color: "#333",
+          // },
+        },
+        axisLabel: {
+          show: true,
+          color: colors.value.text,
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            type: 'dashed',
+            color: [colors.value.splitLine],
+          },
+        },
+        splitArea: {
+          show: false,
+          areaStyle: {
+            color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+          },
+        },
+      },
+      toolbox: {
+        iconStyle: {
+          borderColor: '#999999',
+        },
+        emphasis: {
+          iconStyle: {
+            borderColor: '#666666',
+          },
+        },
+      },
+      legend: {
+        left: 'right',
+        top: 'bottom',
+        textStyle: {
+          color: colors.value.text,
+        },
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          lineStyle: {
+            color: '#8F84FF',
+            width: 1,
+          },
+          crossStyle: {
+            color: '#8F84FF',
+            width: 1,
+          },
+        },
+      },
+      timeline: {
+        lineStyle: {
+          color: '#893448',
+          width: 1,
+        },
+        itemStyle: {
+          color: '#893448',
+          borderWidth: 1,
+        },
+        controlStyle: {
+          color: '#893448',
+          borderColor: '#893448',
+          borderWidth: 0.5,
+        },
+        checkpointStyle: {
+          color: '#eb8146',
+          borderColor: '#ffb248',
+        },
+        label: {
+          color: '#893448',
+        },
+        emphasis: {
+          itemStyle: {
+            color: '#ffb248',
+          },
+          controlStyle: {
+            color: '#893448',
+            borderColor: '#893448',
+            borderWidth: 0.5,
+          },
+          label: {
+            color: '#893448',
+          },
+        },
+      },
+      visualMap: {
+        color: ['#893448', '#d95850', '#eb8146', '#ffb248', '#f2d643', 'rgb(247,238,173)'],
+      },
+      dataZoom: {
+        backgroundColor: 'rgba(255,255,255,0)',
+        dataBackgroundColor: 'rgba(255,178,72,0.5)',
+        fillerColor: 'rgba(255,178,72,0.15)',
+        handleColor: '#ffb248',
+        handleSize: '100%',
+        textStyle: {
+          color: '#333',
+        },
+      },
+      markPoint: {
+        label: {
+          color: '#ffffff',
+        },
+        emphasis: {
+          label: {
+            color: '#ffffff',
+          },
+        },
+      },
+    }))
+  )
+}

package/lib/composables/disabled.composable.ts

@@ -0,0 +1,15 @@
+import { IK_DISABLED } from '@core/utils/injection-keys.util'
+import { computed, inject, type MaybeRefOrGetter, provide, toValue } from 'vue'
+
+export function useDisabled(condition?: MaybeRefOrGetter<boolean>) {
+  const previousValue = inject(
+    IK_DISABLED,
+    computed(() => false)
+  )
+
+  const currentValue = computed(() => previousValue.value || toValue(condition ?? false))
+
+  provide(IK_DISABLED, currentValue)
+
+  return currentValue
+}

package/lib/composables/route-query/types.ts

@@ -28,8 +28,9 @@ export type BooleanActions = { toggle: (value?: boolean) => void }
 
 export type Actions = SetActions<any> & MapActions<any, any> & ArrayActions<any> & BooleanActions
 
-export type GuessActions<TData> =
-  TData extends Set<infer TValue>
+export type GuessActions<TData> = TData extends string | number
+  ? EmptyObject
+  : TData extends Set<infer TValue>
     ? SetActions<TValue>
     : TData extends (infer TValue)[]
       ? ArrayActions<TValue>

package/lib/i18n.ts

@@ -13,6 +13,10 @@ export const locales: Locales = {
     code: 'en',
     name: 'English',
   },
+  es: {
+    code: 'es',
+    name: 'Español',
+  },
   fr: {
     code: 'fr',
     name: 'Français',
@@ -87,6 +91,48 @@ export default createI18n({
         minute: '2-digit',
       },
     },
+    es: {
+      date_short: {
+        year: 'numeric',
+        month: 'numeric',
+        day: 'numeric',
+      },
+      date_medium: {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+      },
+      date_long: {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+      },
+      datetime_short: {
+        year: 'numeric',
+        month: 'numeric',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+      },
+      datetime_medium: {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+      },
+      datetime_long: {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+      },
+      time: {
+        hour: '2-digit',
+        minute: '2-digit',
+      },
+    },
     fr: {
       date_short: {
         year: 'numeric',
@@ -222,6 +268,13 @@ export default createI18n({
         maximumFractionDigits: 2,
       },
     },
+    es: {
+      percent: {
+        style: 'percent',
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 2,
+      },
+    },
     fr: {
       percent: {
         style: 'percent',

package/lib/layouts/CoreLayout.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="core-layout">
-    <header class="header">
+    <header v-if="uiStore.hasUi" class="header">
       <slot name="app-logo" />
       <UiButtonIcon
         v-tooltip="{
@@ -16,18 +16,23 @@
       <slot name="app-header" />
     </header>
     <div class="container">
-      <VtsBackdrop v-if="sidebarStore.isExpanded && !sidebarStore.isLocked" @click="sidebarStore.toggleExpand(false)" />
-      <VtsLayoutSidebar class="sidebar">
-        <template #header>
-          <slot name="sidebar-header" />
-        </template>
-        <template #default>
-          <slot name="sidebar-content" />
-        </template>
-        <template #footer>
-          <slot name="sidebar-footer" />
-        </template>
-      </VtsLayoutSidebar>
+      <template v-if="uiStore.hasUi">
+        <VtsBackdrop
+          v-if="sidebarStore.isExpanded && !sidebarStore.isLocked"
+          @click="sidebarStore.toggleExpand(false)"
+        />
+        <VtsLayoutSidebar class="sidebar">
+          <template #header>
+            <slot name="sidebar-header" />
+          </template>
+          <template #default>
+            <slot name="sidebar-content" />
+          </template>
+          <template #footer>
+            <slot name="sidebar-footer" />
+          </template>
+        </VtsLayoutSidebar>
+      </template>
       <main class="main-container">
         <slot name="content" />
       </main>
@@ -41,8 +46,10 @@ import VtsLayoutSidebar from '@core/components/layout/VtsLayoutSidebar.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { useSidebarStore } from '@core/stores/sidebar.store'
+import { useUiStore } from '@core/stores/ui.store'
 import { faAngleDoubleLeft, faBars } from '@fortawesome/free-solid-svg-icons'
 
+const uiStore = useUiStore()
 const sidebarStore = useSidebarStore()
 </script>
 

package/lib/locales/en.json

@@ -21,6 +21,7 @@
   "core.quick-actions": "Quick actions",
 
   "core.search": "Search",
+  "core.show-by": "Show by",
 
   "core.query-search-bar.label": "Search Engine",
   "core.query-search-bar.placeholder": "Write your query…",
@@ -29,6 +30,7 @@
   "core.select.all": "Select all",
   "core.select.none": "Select none",
   "core.select.unselect": "Unselect all",
+  "core.select.n-object-of": "{from} - {to} of {total} objects",
   "core.select.n-selected-of": "{count} selected of {total} objects",
   "core.sidebar.close": "Close sidebar",
   "core.sidebar.lock": "Lock sidebar open",
@@ -43,7 +45,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 +66,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",

package/lib/locales/es.json

@@ -0,0 +1,97 @@
+{
+  "alarms": "Alarmas",
+
+  "bytes.ki": "Kio",
+  "bytes.mi": "Mio",
+  "bytes.gi": "Gio",
+
+  "coming-soon": "¡Vendrá pronto!",
+  "console": "Consola",
+  "console-actions": "Acciones de la cónsola",
+  "console-clipboard": "Portapales de la cónsola",
+
+  "core.copied": "Copiar",
+  "core.copy-id": "Copiar la ID",
+  "core.close": "Cerrar",
+  "core.current": "Actual",
+  "core.filter": "Filtrar",
+  "core.group": "Grupar",
+  "core.hide": "Ocultar",
+  "core.open": "Abrir",
+  "core.quick-actions": "Acciones rápidas",
+
+  "core.search": "Buscar",
+  "core.show-by": "Mostrar por...",
+
+  "core.query-search-bar.label": "Buscador",
+  "core.query-search-bar.placeholder": "Entre su búsqueda",
+  "core.query-search-bar.use-query-builder": "Utilizar la constructora de búsquedas",
+
+  "core.select.all": "Selectionar todos",
+  "core.select.none": "Selectionar ninguno",
+  "core.select.unselect": "Deseleccionar todos",
+  "core.select.n-object-of": "{from} - {to} de {total} objectos",
+  "core.select.n-selected-of": "{count} objectos selectionados de un total de {total}",
+  "core.sidebar.close": "Cerrar la barra lateral",
+  "core.sidebar.lock": "Bloquear abierta la barra lateral",
+  "core.sidebar.open": "Abrir la barra lateral",
+  "core.sidebar.unlock": "Desbloquear la barra lateral",
+
+  "core.sort.ascending": "Ordenar",
+  "core.sort.descending": "Ordenar descendentemente",
+
+  "dark-mode.enable": "Activar modo oscuro",
+  "dark-mode.disable": "Desactivar modo oscuro",
+  "dark-mode.auto": "Modo oscuro automática",
+
+  "access-forum": "Acceso al foro",
+  "connected": "Conectado",
+  "dashboard": "Panel",
+  "disconnected": "Disconectado",
+  "disconnected-from-physical-device": "Disconectado del aparato físico",
+  "documentation-name": "Documentación {name}",
+  "error-no-data": "Error, imposible recoger datos.",
+  "exit-fullscreen": "Salir de pantala completa",
+  "fullscreen": "Pantalla completa",
+  "gateway": "Puerta de enlace",
+  "hosts": "Servidores",
+  "learn-more": "Saber más",
+  "loading-in-progress": "Cargando…",
+  "log-out": "Desconectarse",
+  "master": "Servidor principal",
+  "n-vms": "1 VM | {n} VMs",
+  "network": "Red",
+  "no-data": "No hay datos",
+  "object-not-found": "No se encuentra el objecto {id}…",
+  "open-console-in-new-tab": "Abrir la cónsola en una nueva pestaña",
+  "other": "Otro",
+  "page-not-found": "No se encuentra esta página",
+  "partially-connected": "Parcialmente connectado",
+  "patches": "Parches",
+  "power-on-vm-for-console": "Poner la MV en marcha para acceder a su cónsola",
+  "power-on-host-for-console": "Poner en marcha el servidor para acceder a su cónsola",
+  "professional-support": "Soporte profesional",
+  "receive": "Recibir",
+  "running-vm": "MV en marcha | MVs en marcha",
+  "see-all": "Ver todos",
+  "select-to-see-details": "Elegir un elemento para ver las detalles",
+  "send": "Enviar",
+  "send-ctrl-alt-del": "Enviar Ctrl+Alt+Supr",
+  "speed": "Velocidad",
+  "stats": "Stats",
+  "storage": "Amacenamiento",
+  "system": "Sistema",
+
+  "tasks": "Tareas",
+  "tasks.n-subtasks": "{n} subtarea | {n} subtareas",
+  "tasks.no-tasks": "Ninguna tarea",
+  "tasks.quick-view": "Vista rápida de tareas",
+  "tasks.quick-view.all": "Todas",
+  "tasks.quick-view.done": "Terminadas",
+  "tasks.quick-view.failed": "Falladas",
+  "tasks.quick-view.in-progress": "En progreso",
+
+  "total": "Total",
+  "total-cpus": "Total CPUs",
+  "vms": "VMs"
+}