@xen-orchestra/web-core 0.49.0 → 0.51.0

package/lib/components/delete-button/VtsDeleteButton.vue

@@ -0,0 +1,27 @@
+<template>
+  <UiButton
+    v-tooltip="tooltip"
+    size="medium"
+    variant="tertiary"
+    accent="danger"
+    left-icon="action:delete"
+    :disabled
+    :busy
+  >
+    {{ t('action:delete') }}
+  </UiButton>
+</template>
+
+<script setup lang="ts">
+import UiButton from '@core/components/ui/button/UiButton.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import { useI18n } from 'vue-i18n'
+
+defineProps<{
+  busy?: boolean
+  disabled?: boolean
+  tooltip?: string | false
+}>()
+
+const { t } = useI18n()
+</script>

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/menu/VtsActionsMenu.vue

@@ -0,0 +1,53 @@
+<template>
+  <MenuList placement="bottom-end">
+    <template #trigger="{ open }">
+      <UiButtonIcon
+        v-tooltip="{
+          placement: 'top',
+          content: t('quick-actions'),
+        }"
+        icon="action:more-actions"
+        accent="brand"
+        :size
+        @click="open($event)"
+      />
+    </template>
+    <MenuItem
+      v-for="(action, index) of actions"
+      :key="index"
+      :icon="action.icon"
+      :disabled="action.disabled"
+      :busy="action.busy"
+      :on-click="action.onClick"
+    >
+      {{ action.label }}
+      <i v-if="action.hint">{{ action.hint }}</i>
+    </MenuItem>
+  </MenuList>
+</template>
+
+<script setup lang="ts">
+import MenuItem from '@core/components/menu/MenuItem.vue'
+import MenuList from '@core/components/menu/MenuList.vue'
+import type { ButtonIconSize } from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import { vTooltip } from '@core/directives/tooltip.directive.ts'
+import type { IconName } from '@core/icons'
+import { useI18n } from 'vue-i18n'
+
+const { size = 'small', actions = [] } = defineProps<{
+  size?: ButtonIconSize
+  actions?: ActionItem[]
+}>()
+
+const { t } = useI18n()
+
+export type ActionItem = {
+  label: string
+  hint?: string
+  icon?: IconName
+  onClick: () => any
+  disabled?: boolean
+  busy?: boolean
+}
+</script>

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/modal/VtsModalList.vue

@@ -25,7 +25,7 @@ const modalStore = useModalStore()
   position: fixed;
   inset: 0;
   background-color: var(--color-opacity-primary);
-  z-index: 1011;
+  z-index: 1012;
 
   .modal-component:not(:last-child) {
     filter: brightness(0.8);

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/VtsActionCell.vue

@@ -0,0 +1,44 @@
+<template>
+  <UiTableCell align="center">
+    <div class="vts-action-cell">
+      <UiButtonIcon
+        :icon="buttonIcon"
+        :accent="buttonAccent"
+        :size="buttonSize"
+        :target-scale="1.5"
+        @click="emit('click')"
+      />
+      <VtsActionsMenu v-if="actions.length" :actions />
+    </div>
+  </UiTableCell>
+</template>
+
+<script setup lang="ts">
+import VtsActionsMenu, { type ActionItem } from '@core/components/menu/VtsActionsMenu.vue'
+import type { ButtonIconAccent, ButtonIconSize } from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import UiTableCell from '@core/components/ui/table-cell/UiTableCell.vue'
+import type { IconName } from '@core/icons'
+
+const {
+  buttonAccent = 'brand',
+  buttonSize = 'small',
+  actions = [],
+} = defineProps<{
+  buttonIcon: IconName
+  buttonAccent?: ButtonIconAccent
+  buttonSize?: ButtonIconSize
+  actions?: ActionItem[]
+}>()
+
+const emit = defineEmits<{
+  click: []
+}>()
+</script>
+
+<style scoped lang="postcss">
+.vts-action-cell {
+  display: flex;
+  gap: 0.8rem;
+}
+</style>

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/composables/default-tab.composable.md

@@ -7,7 +7,8 @@ This composable manages automatic navigation to default tabs and remembers the l
 The composable watches route changes and:
 
 - Automatically redirects to the remembered or default tab when navigating to the base dispatcher route
-- Stores the current tab in localStorage for future visits
+- Stores the last visited tab when switching between objects of the same type (e.g., VM → VM)
+- Resets to default tab when navigating to a different object type or any other page
 - Uses the naming convention `{dispatcherRouteName}/{tabName}` for tab route names
 
 ## Parameters
@@ -21,22 +22,27 @@ The composable watches route changes and:
 
 ```typescript
 // In the dispatcher page component (e.g., `pages/pool/[id].vue`)
-useDefaultTab('pool/[id]', 'dashboard')
+useDefaultTab('/pool/[id]', 'dashboard')
 
-// User first navigates to /pool/123
+// User navigates to /pool/123
 // → Automatic redirect to /pool/123/dashboard (default tab)
 
-// User then navigates to /pool/123/stats
-// → 'stats' is stored as the last visited tab for this route
+// User navigates to /pool/123/system
+// → 'system' is stored as the last visited tab
 
-// Finally, user navigates to /pool/456
-// → Automatic redirect to /pool/456/stats
+// User navigates to /pool/456 (same object type)
+// → Automatic redirect to /pool/456/system (tab remembered)
+
+// User navigates to /vm/789 (different object type)
+// → Automatic redirect to /vm/789/dashboard (Tab memory is reset)
+
+// User navigates back to /pool/456
+// → Automatic redirect to /pool/456/dashboard (default tab)
 ```
 
 ## Storage
 
-Tab preferences are stored in localStorage under the key `default-tabs` with the structure:
+Tab memory is stored in localStorage using two different keys:
 
-```typescript
-Map<string, string> // dispatcherRouteName -> lastVisitedTab
-```
+- `tab-memory.dispatcher` — the dispatcher route name of the last visited object type
+- `tab-memory.last` — the last visited tab name

package/lib/composables/default-tab.composable.ts

@@ -1,17 +1,22 @@
-import { useLocalStorage } from '@vueuse/core'
 import { watch } from 'vue'
 import { type RouteLocationRaw, type RouteRecordName, useRoute, useRouter } from 'vue-router'
 
+const TAB_MEMORY_DISPATCHER = 'tab-memory.dispatcher'
+const TAB_MEMORY_LAST = 'tab-memory.last'
+
 export function useDefaultTab(dispatcherRouteName: RouteRecordName & string, defaultTab: string) {
-  const storage = useLocalStorage('default-tabs', new Map<string, string>())
   const router = useRouter()
   const route = useRoute()
 
+  // TODO: Delete after 2 to 3 months (once all users have cleared their local storage)
+  localStorage.removeItem('default-tabs')
+
   watch(
     () => route.name as string,
     name => {
       if (name === dispatcherRouteName) {
-        const tabName = storage.value.get(dispatcherRouteName) ?? defaultTab
+        const isSameDispatcher = localStorage.getItem(TAB_MEMORY_DISPATCHER) === dispatcherRouteName
+        const tabName = (isSameDispatcher ? localStorage.getItem(TAB_MEMORY_LAST) : null) ?? defaultTab
         void router.replace({ name: `${dispatcherRouteName}/${tabName}` } as RouteLocationRaw)
       } else if (!name.startsWith(dispatcherRouteName)) {
         return
@@ -19,7 +24,8 @@ export function useDefaultTab(dispatcherRouteName: RouteRecordName & string, def
 
       const tab = name.slice(dispatcherRouteName.length).split('/')[1] ?? defaultTab
 
-      storage.value.set(dispatcherRouteName, tab)
+      localStorage.setItem(TAB_MEMORY_DISPATCHER, dispatcherRouteName)
+      localStorage.setItem(TAB_MEMORY_LAST, tab)
     },
     { immediate: true }
   )

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': [
     {