Administrator/Xen-Orchestra-xen-orchestra-MIRROR
1
0
Fork 1
mirror of https://github.com/vatesfr/xen-orchestra.git synced 2026-09-10 22:14:48 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix(web-core,web,lite): align side panel card spacing with the design system (#10279)

Browse Source
This commit is contained in:
Thierry Goettelmann
2026-08-20 12:03:44 +02:00
committed by GitHub
parent 96e7e23f40
commit 249137793f
60 changed files with 321 additions and 389 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
@xen-orchestra/lite/CHANGELOG.md
View File

@@ -4,6 +4,7 @@
- [Pool/networks] Add the possibility to create new network or bonded network (PR [#10145](https://github.com/vatesfr/xen-orchestra/pull/10145))
- [Host/Network] Add ability to rescan physical network interfaces (PIFs) (PR [#10147](https://github.com/vatesfr/xen-orchestra/pull/10147))
- Fix inconsistent spacing in side panel cards (PR [#10279](https://github.com/vatesfr/xen-orchestra/pull/10279))
## **0.24.0** (2026-07-30)

20
@xen-orchestra/lite/src/components/host/network/HostPifSidePanel.vue
View File

@@ -1,8 +1,8 @@
<template>
<VtsSidePanel :has-selection="!!pif" @close="emit('close')">
<VtsSidePanel :has-selection="!!pif" class="host-pif-side-panel" @close="emit('close')">
<template v-if="pif" #default>
<!-- PIF -->
<UiCard class="card">
<UiPanelCard>
<VtsCardObjectTitle :id="pif.uuid" :label="isBond ? t('bond') : t('pif')" />
<div class="content">
<!-- NETWORK -->
@@ -75,9 +75,9 @@
</template>
</VtsCardRowKeyValue>
</div>
</UiCard>
</UiPanelCard>
<!-- NETWORK INFORMATION -->
<UiCard class="card">
<UiPanelCard>
<UiCardTitle>{{ t('network-information') }}</UiCardTitle>
<div class="content">
<!-- IP ADDRESSES -->
@@ -180,9 +180,9 @@
</VtsCardRowKeyValue>
</div>
</div>
</UiCard>
</UiPanelCard>
<!-- PROPERTIES -->
<UiCard class="card">
<UiPanelCard>
<UiCardTitle>{{ t('properties') }}</UiCardTitle>
<div class="content">
<!-- MTU -->
@@ -219,7 +219,7 @@
</template>
</VtsCardRowKeyValue>
</div>
</UiCard>
</UiPanelCard>
</template>
</VtsSidePanel>
</template>
@@ -237,8 +237,8 @@ import VtsIcon from '@core/components/icon/VtsIcon.vue'
import VtsSidePanel from '@core/components/panel/VtsSidePanel.vue'
import VtsStatus from '@core/components/status/VtsStatus.vue'
import VtsTag from '@core/components/tag/VtsTag.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import UiTagsList from '@core/components/ui/tag/UiTagsList.vue'
import { vTooltip } from '@core/directives/tooltip.directive'
import humanFormat from 'human-format'
@@ -317,9 +317,7 @@ const speed = computed(() => {
</script>
<style scoped lang="postcss">
.card {
gap: 1.6rem;
.host-pif-side-panel {
.content {
display: flex;
flex-direction: column;

18
@xen-orchestra/lite/src/components/pool/network/PoolNetworkSidePanel.vue
View File

@@ -1,5 +1,5 @@
<template>
<VtsSidePanel :has-selection="!!network" @close="emit('close')">
<VtsSidePanel :has-selection="!!network" class="pool-network-side-panel" @close="emit('close')">
<template v-if="network" #actions>
<MenuList placement="bottom-end">
<template #trigger="{ open, isOpen }">
@@ -18,7 +18,7 @@
</MenuList>
</template>
<template v-if="network" #default>
<UiCard class="card-container">
<UiPanelCard>
<VtsCardObjectTitle :id="network.uuid" :label="network.name_label" />
<div class="content">
<!-- DESCRIPTION -->
@@ -63,8 +63,8 @@
<template #value>{{ networkDefaultLockingMode }}</template>
</VtsCardRowKeyValue>
</div>
</UiCard>
<UiCard v-if="pifsCount && pifsCount > 0" class="card-container">
</UiPanelCard>
<UiPanelCard v-if="pifsCount && pifsCount > 0">
<div class="typo-body-bold">
{{ t('pifs') }}
<UiCounter :value="pifsCount" variant="primary" size="small" accent="neutral" />
@@ -88,7 +88,7 @@
<PifRow v-for="pif in pifs" :key="pif.uuid" :pif />
</tbody>
</table>
</UiCard>
</UiPanelCard>
</template>
</VtsSidePanel>
</template>
@@ -104,8 +104,8 @@ import MenuItem from '@core/components/menu/MenuItem.vue'
import MenuList from '@core/components/menu/MenuList.vue'
import VtsSidePanel from '@core/components/panel/VtsSidePanel.vue'
import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCounter from '@core/components/ui/counter/UiCounter.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import { vTooltip } from '@core/directives/tooltip.directive.ts'
import { useClipboard } from '@vueuse/core'
import { computed } from 'vue'
@@ -147,11 +147,7 @@ const { copy, copied, isSupported: isClipboardSupported } = useClipboard({ sourc
</script>
<style scoped lang="postcss">
.card-container {
display: flex;
flex-direction: column;
gap: 1.6rem;
.pool-network-side-panel {
.content {
display: flex;
flex-direction: column;

16
@xen-orchestra/lite/src/components/vm/network/VmVifsSidePanel.vue
View File

@@ -1,11 +1,11 @@
<template>
<VtsSidePanel :has-selection="!!vif" @close="emit('close')">
<VtsSidePanel :has-selection="!!vif" class="vm-vifs-side-panel" @close="emit('close')">
<template v-if="vif" #actions>
<VifConnectionToggleButton v-if="vm" :vif :vm />
</template>
<template v-if="vif" #default>
<!-- VIF -->
<UiCard class="card">
<UiPanelCard>
<VtsCardObjectTitle :id="vif.uuid" :label="t('vif')" />
<div class="content">
<!-- NETWORK -->
@@ -62,9 +62,9 @@
</VtsCardRowKeyValue>
<!-- TODO Need to add TX Checksumming -->
</div>
</UiCard>
</UiPanelCard>
<!-- VIF NETWORK INFORMATION -->
<UiCard class="card">
<UiPanelCard>
<UiCardTitle>{{ t('network-information') }}</UiCardTitle>
<div class="content">
<!-- IP ADDRESSES -->
@@ -101,7 +101,7 @@
</template>
</VtsCardRowKeyValue>
</div>
</UiCard>
</UiPanelCard>
</template>
</VtsSidePanel>
</template>
@@ -118,8 +118,8 @@ import VtsCopyAllMenuItem from '@core/components/copy-all-menu-item/VtsCopyAllMe
import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
import VtsSidePanel from '@core/components/panel/VtsSidePanel.vue'
import VtsStatus from '@core/components/status/VtsStatus.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import { getUniqueIpAddressesForDevice } from '@core/utils/ip-address.utils.ts'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
@@ -159,9 +159,7 @@ const status = computed(() => (vif?.currently_attached ? 'connected' : 'disconne
</script>
<style scoped lang="postcss">
.card {
gap: 1.6rem;
.vm-vifs-side-panel {
.content {
display: flex;
flex-direction: column;

10
@xen-orchestra/lite/src/modules/storage-repository/components/list/panel/cards/StorageRepositoryCustomFieldsCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard class="card-container">
<UiPanelCard class="storage-repository-custom-fields-card">
<UiCardTitle>
{{ t('custom-fields') }}
</UiCardTitle>
@@ -15,14 +15,14 @@
</VtsStateHero>
<VtsLabelValueList v-else :fields="customFields" />
</div>
</UiCard>
</UiPanelCard>
</template>
<script lang="ts" setup>
import VtsLabelValueList from '@core/components/label-value-list/VtsLabelValueList.vue'
import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import { useI18n } from 'vue-i18n'
defineProps<{
@@ -33,9 +33,7 @@ const { t } = useI18n()
</script>
<style scoped lang="postcss">
.card-container {
gap: 1.6rem;
.storage-repository-custom-fields-card {
.content {
display: flex;
flex-direction: column;

12
@xen-orchestra/lite/src/modules/storage-repository/components/list/panel/cards/StorageRepositoryHostsCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard class="card-container">
<UiPanelCard>
<UiCardTitle>
{{ t('hosts') }}
<UiCounter :value="hosts.length" accent="neutral" size="small" variant="primary" />
@@ -18,18 +18,18 @@
<VtsStateHero v-else type="no-data" format="card" horizontal size="extra-small">
{{ t('no-host-attached') }}
</VtsStateHero>
</UiCard>
</UiPanelCard>
</template>
<script lang="ts" setup>
import type { XenApiHost } from '@/libs/xen-api/xen-api.types.ts'
import { useHostMetricsStore } from '@/stores/xen-api/host-metrics.store.ts'
import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
import UiCollapsibleList from '@core/components/ui/collapsible-list/UiCollapsibleList.vue'
import UiCounter from '@core/components/ui/counter/UiCounter.vue'
import UiLink from '@core/components/ui/link/UiLink.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import { vTooltip } from '@core/directives/tooltip.directive.ts'
import { useI18n } from 'vue-i18n'
@@ -45,9 +45,3 @@ function getHostPowerState(host: XenApiHost) {
return isHostRunning(host) ? 'running' : 'halted'
}
</script>
<style scoped lang="postcss">
.card-container {
gap: 1.6rem;
}
</style>

10
@xen-orchestra/lite/src/modules/storage-repository/components/list/panel/cards/StorageRepositoryInfosCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard class="card-container">
<UiPanelCard class="storage-repository-infos-card">
<UiCardTitle>
<div v-if="sr.name_label" class="title">
<VtsIcon :name="srStatusIcon" size="medium" />
@@ -58,7 +58,7 @@
<template #value><VtsStatus :status="isHaSr" /></template>
</VtsCardRowKeyValue>
</div>
</UiCard>
</UiPanelCard>
</template>
<script lang="ts" setup>
@@ -72,8 +72,8 @@ import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
import VtsIcon from '@core/components/icon/VtsIcon.vue'
import VtsStatus from '@core/components/status/VtsStatus.vue'
import VtsTag from '@core/components/tag/VtsTag.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import UiTagsList from '@core/components/ui/tag/UiTagsList.vue'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
@@ -101,9 +101,7 @@ const isHaSr = computed(() => isHaSrForPool(sr, pool))
</script>
<style scoped lang="postcss">
.card-container {
gap: 1.6rem;
.storage-repository-infos-card {
.title {
display: flex;
align-items: center;

10
@xen-orchestra/lite/src/modules/storage-repository/components/list/panel/cards/StorageRepositoryPbdsCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard class="card-container">
<UiPanelCard class="storage-repository-pbds-card">
<UiCardTitle>
{{ t('pbd-details') }}
</UiCardTitle>
@@ -35,7 +35,7 @@
</template>
</div>
</template>
</UiCard>
</UiPanelCard>
</template>
<script lang="ts" setup>
@@ -48,9 +48,9 @@ import VtsCardRowKeyValue from '@core/components/card/VtsCardRowKeyValue.vue'
import VtsDivider from '@core/components/divider/VtsDivider.vue'
import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
import VtsStatus from '@core/components/status/VtsStatus.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
import UiLogEntryViewer from '@core/components/ui/log-entry-viewer/UiLogEntryViewer.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import { CONNECTION_STATUS } from '@core/types/connection.ts'
import { useI18n } from 'vue-i18n'
@@ -70,9 +70,7 @@ const { areSomePbdsDisconnected, disconnectedPbds } = usePbdUtils(pbdsInScope)
</script>
<style scoped lang="postcss">
.card-container {
gap: 1.6rem;
.storage-repository-pbds-card {
.content {
display: flex;
flex-direction: column;

10
@xen-orchestra/lite/src/modules/storage-repository/components/list/panel/cards/StorageRepositoryVdisCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard class="card-container">
<UiPanelCard class="storage-repository-vdis-card">
<UiCardTitle>
<div class="title">
{{ t('vdis') }}
@@ -44,7 +44,7 @@
<VtsStateHero v-else type="no-data" format="card" horizontal size="extra-small">
{{ t('no-vdi-attached') }}
</VtsStateHero>
</UiCard>
</UiPanelCard>
</template>
<script lang="ts" setup>
@@ -53,11 +53,11 @@ import type { XenApiVdi } from '@/libs/xen-api/xen-api.types.ts'
import { useVbdStore } from '@/stores/xen-api/vbd.store.ts'
import VtsDivider from '@core/components/divider/VtsDivider.vue'
import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
import UiCollapsibleList from '@core/components/ui/collapsible-list/UiCollapsibleList.vue'
import UiCounter from '@core/components/ui/counter/UiCounter.vue'
import UiLink from '@core/components/ui/link/UiLink.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import { vTooltip } from '@core/directives/tooltip.directive.ts'
import { useI18n } from 'vue-i18n'
@@ -72,9 +72,7 @@ const { getByOpaqueRef: getVbdByOpaqueRef } = useVbdStore().subscribe()
</script>
<style scoped lang="postcss">
.card-container {
gap: 1.6rem;
.storage-repository-vdis-card {
.title {
display: flex;
align-items: center;

13
@xen-orchestra/lite/src/route-map.d.ts vendored
View File

@@ -779,6 +779,13 @@ declare module 'vue-router/auto-routes' {
Record<never, never>,
| never
>,
'/story/web-core/ui/panel-card/ui-panel-card': RouteRecordInfo<
'/story/web-core/ui/panel-card/ui-panel-card',
'/story/web-core/ui/panel-card/ui-panel-card',
Record<never, never>,
Record<never, never>,
| never
>,
'/story/web-core/ui/progress-bar/ui-progress-bar': RouteRecordInfo<
'/story/web-core/ui/progress-bar/ui-progress-bar',
'/story/web-core/ui/progress-bar/ui-progress-bar',
@@ -1668,6 +1675,12 @@ declare module 'vue-router/auto-routes' {
views:
| never
}
'src/stories/web-core/ui/panel-card/ui-panel-card.story.vue': {
routes:
| '/story/web-core/ui/panel-card/ui-panel-card'
views:
| never
}
'src/stories/web-core/ui/progress-bar/ui-progress-bar.story.vue': {
routes:
| '/story/web-core/ui/progress-bar/ui-progress-bar'

6
@xen-orchestra/lite/src/stories/web-core/panel/vts-panel.story.vue
View File

@@ -41,9 +41,9 @@
</template>
<template #default>
<VtsStateHero v-if="settings.showHero" format="card" :type="settings.heroType" size="medium" />
<UiCard v-else>
<UiPanelCard v-else>
<div>Card Content</div>
</UiCard>
</UiPanelCard>
</template>
</VtsPanel>
</ComponentStory>
@@ -56,8 +56,8 @@ import { boolean, choice, text } from '@/libs/story/story-widget'
import VtsPanel from '@core/components/panel/VtsPanel.vue'
import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
import UiButton from '@core/components/ui/button/UiButton.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCounter from '@core/components/ui/counter/UiCounter.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import { STATE_HERO_TYPES } from '@core/types/state-hero.type.ts'
</script>

22
@xen-orchestra/lite/src/stories/web-core/ui/panel-card/ui-panel-card.story.vue Normal file
View File

@@ -0,0 +1,22 @@
<template>
<ComponentStory :params="[slot()]">
<UiPanelCard>
<div class="content">Content 1</div>
<div class="content">Content 2</div>
<div class="content">Content 3</div>
</UiPanelCard>
</ComponentStory>
</template>
<script lang="ts" setup>
import ComponentStory from '@/components/component-story/ComponentStory.vue'
import { slot } from '@/libs/story/story-param'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
</script>
<style lang="postcss" scoped>
.content {
padding: 1rem;
background-color: var(--color-neutral-background-secondary);
}
</style>

6
@xen-orchestra/lite/src/stories/web-core/ui/panel/ui-panel.story.vue
View File

@@ -11,9 +11,9 @@
>
<UiPanel v-bind="properties">
<template v-if="settings.showHeader" #header>{{ settings.headerContent }}</template>
<UiCard>
<UiPanelCard>
<div>Card content</div>
</UiCard>
</UiPanelCard>
</UiPanel>
</ComponentStory>
</template>
@@ -22,6 +22,6 @@
import ComponentStory from '@/components/component-story/ComponentStory.vue'
import { prop, setting, slot } from '@/libs/story/story-param'
import { boolean, text } from '@/libs/story/story-widget'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiPanel from '@core/components/ui/panel/UiPanel.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
</script>

10
@xen-orchestra/web-core/lib/components/space-card/VtsSpaceCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard class="card-container">
<UiPanelCard class="vts-space-card">
<UiCardTitle>
{{ t('space') }}
</UiCardTitle>
@@ -35,15 +35,15 @@
</template>
</VtsCardRowKeyValue>
</div>
</UiCard>
</UiPanelCard>
</template>
<script setup lang="ts">
import VtsCardRowKeyValue from '@core/components/card/VtsCardRowKeyValue.vue'
import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
import VtsProgressBar from '@core/components/progress-bar/VtsProgressBar.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import { formatSize } from '@core/utils/size.util'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
@@ -78,9 +78,7 @@ const freeSpace = computed(() => {
</script>
<style scoped lang="postcss">
.card-container {
gap: 1.6rem;
.vts-space-card {
.content {
display: flex;
flex-direction: column;

20
@xen-orchestra/web-core/lib/components/ui/panel-card/UiPanelCard.vue Normal file
View File

@@ -0,0 +1,20 @@
<template>
<UiCard class="ui-panel-card">
<slot />
</UiCard>
</template>
<script lang="ts" setup>
import UiCard from '@core/components/ui/card/UiCard.vue'
defineSlots<{
default(): any
}>()
</script>
<style lang="postcss" scoped>
.ui-panel-card {
gap: 1.6rem;
padding: 1.6rem;
}
</style>

12
@xen-orchestra/web/src/modules/backup/components/jobs/panel/cards/BackupJobInfosCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard class="card-container">
<UiPanelCard class="backup-job-infos-card">
<VtsCardObjectTitle
:id="backupJob.id"
:to="{ name: `/backup/[id]/runs`, params: { id: backupJob.id } }"
@@ -25,7 +25,7 @@
</template>
</VtsCardRowKeyValue>
</div>
</UiCard>
</UiPanelCard>
</template>
<script lang="ts" setup>
@@ -35,7 +35,7 @@ import VtsCardRowKeyValue from '@core/components/card/VtsCardRowKeyValue.vue'
import VtsCardObjectTitle from '@core/components/card-object-title/VtsCardObjectTitle.vue'
import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import { vTooltip } from '@core/directives/tooltip.directive'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
@@ -52,11 +52,7 @@ const backupJobModes = computed(() => getModeLabels(backupJob).filter(mode => mo
</script>
<style scoped lang="postcss">
.card-container {
display: flex;
flex-direction: column;
gap: 1.6rem;
.backup-job-infos-card {
.content {
display: flex;
flex-direction: column;

16
@xen-orchestra/web/src/modules/backup/components/jobs/panel/cards/BackupJobSettingsCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard class="card-container">
<UiPanelCard class="backup-job-settings-card">
<UiCardTitle>
{{ t('settings') }}
</UiCardTitle>
@@ -102,7 +102,7 @@
accent="info"
/>
</div>
</UiCard>
</UiPanelCard>
</template>
<script lang="ts" setup>
@@ -110,9 +110,9 @@ import { useXoBackupJobSettingsUtils } from '@/modules/backup/composables/backup
import type { FrontAnyXoBackupJob } from '@/modules/backup/remote-resources/use-xo-backup-job-collection.ts'
import VtsCardRowKeyValue from '@core/components/card/VtsCardRowKeyValue.vue'
import VtsStatus from '@core/components/status/VtsStatus.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
import UiLogEntryViewer from '@core/components/ui/log-entry-viewer/UiLogEntryViewer.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import { useI18n } from 'vue-i18n'
const { backupJob } = defineProps<{
@@ -134,9 +134,11 @@ const {
</script>
<style scoped lang="postcss">
.content {
display: flex;
flex-direction: column;
gap: 1.6rem;
.backup-job-settings-card {
.content {
display: flex;
flex-direction: column;
gap: 1.6rem;
}
}
</style>

12
@xen-orchestra/web/src/modules/backup/components/logs/panel/cards/BackupLogInfosCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard class="card-container">
<UiPanelCard class="backup-log-infos-card">
<VtsCardObjectTitle :id="backupLog.id" :label="backupLog.id" icon="object:backup-run" />
<div class="content">
<VtsCardRowKeyValue>
@@ -42,7 +42,7 @@
</template>
</VtsCardRowKeyValue>
</div>
</UiCard>
</UiPanelCard>
</template>
<script lang="ts" setup>
@@ -52,8 +52,8 @@ import VtsCardRowKeyValue from '@core/components/card/VtsCardRowKeyValue.vue'
import VtsCardObjectTitle from '@core/components/card-object-title/VtsCardObjectTitle.vue'
import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
import VtsStatus from '@core/components/status/VtsStatus.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiLink from '@core/components/ui/link/UiLink.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
@@ -74,11 +74,7 @@ const transferSize = computed(() => getTransferSize(backupLog))
</script>
<style scoped lang="postcss">
.card-container {
display: flex;
flex-direction: column;
gap: 1.6rem;
.backup-log-infos-card {
.content {
display: flex;
flex-direction: column;

12
@xen-orchestra/web/src/modules/backup/components/logs/panel/cards/BackupLogResultsCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard class="card-container">
<UiPanelCard class="backup-log-results-card">
<UiCardTitle>
{{ cardMetadata.title }}
<UiCounter :value="results.length" size="small" :accent="cardMetadata.accent" variant="primary" />
@@ -24,7 +24,7 @@
<VtsDivider v-if="results.length > 1 && index < results.length - 1" class="divider" type="stretch" />
</template>
</div>
</UiCard>
</UiPanelCard>
</template>
<script lang="ts" setup>
@@ -32,10 +32,10 @@ import type { BackupLogResult } from '@/modules/task/utils/xo-task.util.ts'
import VtsCardRowKeyValue from '@core/components/card/VtsCardRowKeyValue.vue'
import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
import VtsDivider from '@core/components/divider/VtsDivider.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
import UiCounter from '@core/components/ui/counter/UiCounter.vue'
import UiLogEntryViewer from '@core/components/ui/log-entry-viewer/UiLogEntryViewer.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import { useMapper } from '@core/packages/mapper'
import { useI18n } from 'vue-i18n'
@@ -72,11 +72,7 @@ const cardMetadata = useMapper(
</script>
<style scoped lang="postcss">
.card-container {
display: flex;
flex-direction: column;
gap: 1.6rem;
.backup-log-results-card {
.content {
display: flex;
flex-direction: column;

12
@xen-orchestra/web/src/modules/backup/components/panel/cards/BackupJobBackedUpPoolsCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard class="card-container">
<UiPanelCard>
<UiCardTitle>
{{ t('backed-up-pools') }}
<UiCounter :value="backedUpPools.length" accent="neutral" size="small" variant="primary" />
@@ -13,16 +13,16 @@
</li>
</UiCollapsibleList>
</div>
</UiCard>
</UiPanelCard>
</template>
<script lang="ts" setup>
import type { FrontXoPool } from '@/modules/pool/remote-resources/use-xo-pool-collection.ts'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
import UiCollapsibleList from '@core/components/ui/collapsible-list/UiCollapsibleList.vue'
import UiCounter from '@core/components/ui/counter/UiCounter.vue'
import UiLink from '@core/components/ui/link/UiLink.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import { useI18n } from 'vue-i18n'
const { backedUpPools } = defineProps<{
@@ -31,9 +31,3 @@ const { backedUpPools } = defineProps<{
const { t } = useI18n()
</script>
<style scoped lang="postcss">
.card-container {
gap: 1.6rem;
}
</style>

8
@xen-orchestra/web/src/modules/backup/components/panel/cards/BackupJobBackedUpVmsCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard class="card-container">
<UiPanelCard class="backup-job-backed-up-vms-card">
<UiCardTitle>
{{ t('backed-up-vms') }}
<UiCounter :value="backedUpVmsCount" accent="neutral" size="small" variant="primary" />
@@ -67,7 +67,7 @@
</UiCollapsibleList>
</template>
</div>
</UiCard>
</UiPanelCard>
</template>
<script lang="ts" setup>
@@ -79,11 +79,11 @@ import VtsCardRowKeyValue from '@core/components/card/VtsCardRowKeyValue.vue'
import VtsDivider from '@core/components/divider/VtsDivider.vue'
import VtsIcon from '@core/components/icon/VtsIcon.vue'
import VtsStatus from '@core/components/status/VtsStatus.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
import UiCollapsibleList from '@core/components/ui/collapsible-list/UiCollapsibleList.vue'
import UiCounter from '@core/components/ui/counter/UiCounter.vue'
import UiLink from '@core/components/ui/link/UiLink.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import { toLower } from 'lodash-es'
import { useI18n } from 'vue-i18n'
@@ -98,7 +98,7 @@ const { backedUpVms, backedUpVmsCount, smartModePools, smartModePowerState, smar
</script>
<style scoped lang="postcss">
.card-container {
.backup-job-backed-up-vms-card {
.divider {
margin-block: 1.6rem;
}

20
@xen-orchestra/web/src/modules/backup/components/panel/cards/BackupJobLogsCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard>
<UiPanelCard class="backup-job-logs-card">
<UiCardTitle>
{{ t('last-n-runs', { n: backupLogs.length }) }}
</UiCardTitle>
@@ -10,15 +10,15 @@
<BackupRunItem :backup-run />
</template>
</div>
</UiCard>
</UiPanelCard>
</template>
<script lang="ts" setup>
import BackupRunItem from '@/modules/backup/components/panel/card-items/BackupRunItem.vue'
import type { FrontXoBackupLog } from '@/modules/backup/remote-resources/use-xo-backup-log-collection.ts'
import VtsDivider from '@core/components/divider/VtsDivider.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import { useI18n } from 'vue-i18n'
const { backupLogs } = defineProps<{
@@ -29,13 +29,15 @@ const { t } = useI18n()
</script>
<style scoped lang="postcss">
.content {
display: flex;
flex-direction: column;
gap: 0.6rem;
.backup-job-logs-card {
.content {
display: flex;
flex-direction: column;
gap: 0.6rem;
.divider {
margin-block: 1.6rem;
.divider {
margin-block: 1.6rem;
}
}
}
</style>

20
@xen-orchestra/web/src/modules/backup/components/panel/cards/BackupJobSchedulesCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard>
<UiPanelCard class="backup-job-schedules-card">
<UiCardTitle>
{{ t('schedules') }}
<UiCounter :value="backupJobSchedules.length" accent="neutral" size="small" variant="primary" />
@@ -57,7 +57,7 @@
</VtsCardRowKeyValue>
</template>
</div>
</UiCard>
</UiPanelCard>
</template>
<script lang="ts" setup>
@@ -67,10 +67,10 @@ import VtsCardRowKeyValue from '@core/components/card/VtsCardRowKeyValue.vue'
import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
import VtsDivider from '@core/components/divider/VtsDivider.vue'
import VtsStatus from '@core/components/status/VtsStatus.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
import UiCounter from '@core/components/ui/counter/UiCounter.vue'
import UiLink from '@core/components/ui/link/UiLink.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import { useI18n } from 'vue-i18n'
const { backupJobSchedules } = defineProps<{
@@ -83,13 +83,15 @@ const { buildXo5Route } = useXoRoutes()
</script>
<style scoped lang="postcss">
.content {
display: flex;
flex-direction: column;
gap: 0.6rem;
.backup-job-schedules-card {
.content {
display: flex;
flex-direction: column;
gap: 0.6rem;
.divider {
margin-block: 1.6rem;
.divider {
margin-block: 1.6rem;
}
}
}
</style>

14
@xen-orchestra/web/src/modules/backup/components/panel/cards/BackupJobSourceRepositoryCard.vue
View File

@@ -1,21 +1,21 @@
<template>
<UiCard v-if="sourceBackupRepository !== undefined" class="card-container">
<UiPanelCard v-if="sourceBackupRepository !== undefined">
<UiCardTitle>
{{ t('source-backup-repository') }}
</UiCardTitle>
<UiLink size="small" :icon="sourceBackupRepositoryIcon" :href>
{{ sourceBackupRepository.name }}
</UiLink>
</UiCard>
</UiPanelCard>
</template>
<script lang="ts" setup>
import type { FrontXoMirrorBackupJob } from '@/modules/backup/remote-resources/use-xo-backup-job-collection.ts'
import { useXoBackupRepositoryCollection } from '@/modules/backup/remote-resources/use-xo-br-collection.ts'
import { useXoRoutes } from '@/shared/remote-resources/use-xo-routes.ts'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
import UiLink from '@core/components/ui/link/UiLink.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
@@ -36,11 +36,3 @@ const sourceBackupRepositoryIcon = computed(() =>
sourceBackupRepository.value?.enabled ? 'object:br:connected' : 'object:br:disconnected'
)
</script>
<style scoped lang="postcss">
.card-container {
display: flex;
flex-direction: column;
gap: 1.6rem;
}
</style>

14
@xen-orchestra/web/src/modules/backup/components/panel/cards/BackupJobTargetsCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard class="card-container">
<UiPanelCard>
<UiCardTitle>
{{ t('backup-targets') }}
<UiCounter :value="backupTargetsCount" accent="neutral" size="small" variant="primary" />
@@ -15,7 +15,7 @@
:targets="storageRepositoryTargets"
:label="t('storage-repositories')"
/>
</UiCard>
</UiPanelCard>
</template>
<script lang="ts" setup>
@@ -23,9 +23,9 @@ import BackupJobTargetsSection from '@/modules/backup/components/panel/card-item
import type { FrontXoBackupRepository } from '@/modules/backup/remote-resources/use-xo-br-collection.ts'
import type { FrontXoSr } from '@/modules/storage-repository/remote-resources/use-xo-sr-collection.ts'
import VtsDivider from '@core/components/divider/VtsDivider.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
import UiCounter from '@core/components/ui/counter/UiCounter.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
@@ -38,11 +38,3 @@ const { t } = useI18n()
const backupTargetsCount = computed(() => backupRepositoryTargets.length + storageRepositoryTargets.length)
</script>
<style scoped lang="postcss">
.card-container {
display: flex;
flex-direction: column;
gap: 1.6rem;
}
</style>

10
@xen-orchestra/web/src/modules/host/components/list/panel/card/HostHardwareSpecificationsCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard class="card-container">
<UiPanelCard class="host-hardware-specifications-card">
<UiCardTitle>
{{ t('hardware-specifications') }}
</UiCardTitle>
@@ -19,15 +19,15 @@
</template>
</VtsCardRowKeyValue>
</div>
</UiCard>
</UiPanelCard>
</template>
<script lang="ts" setup>
import type { FrontXoHost } from '@/modules/host/remote-resources/use-xo-host-collection.ts'
import VtsCardRowKeyValue from '@core/components/card/VtsCardRowKeyValue.vue'
import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
@@ -52,9 +52,7 @@ const coreSocketInfo = computed(() => {
</script>
<style scoped lang="postcss">
.card-container {
gap: 1.6rem;
.host-hardware-specifications-card {
.content {
display: flex;
flex-direction: column;

10
@xen-orchestra/web/src/modules/host/components/list/panel/card/HostInfoCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard class="card-container">
<UiPanelCard class="host-info-card">
<VtsCardObjectTitle
:id="host.id"
:label="host.name_label"
@@ -96,7 +96,7 @@
</template>
</VtsCardRowKeyValue>
</div>
</UiCard>
</UiPanelCard>
</template>
<script lang="ts" setup>
@@ -110,9 +110,9 @@ import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
import VtsEnabledState from '@core/components/enabled-state/VtsEnabledState.vue'
import VtsIcon from '@core/components/icon/VtsIcon.vue'
import VtsTag from '@core/components/tag/VtsTag.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiInfo from '@core/components/ui/info/UiInfo.vue'
import UiLink from '@core/components/ui/link/UiLink.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import UiTagsList from '@core/components/ui/tag/UiTagsList.vue'
import { vTooltip } from '@core/directives/tooltip.directive.ts'
import { toLower } from 'lodash-es'
@@ -149,9 +149,7 @@ const relativeStartTime = computed(() => (host.startTime ? getRelativeStartTime(
</script>
<style scoped lang="postcss">
.card-container {
gap: 1.6rem;
.host-info-card {
.content {
display: flex;
flex-direction: column;

10
@xen-orchestra/web/src/modules/host/components/list/panel/card/HostNetworkCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard class="card-container">
<UiPanelCard class="host-network-card">
<UiCardTitle>
{{ t('network') }}
</UiCardTitle>
@@ -42,7 +42,7 @@
<template #key>{{ t('ipv6-addresses') }}</template>
</VtsCardRowKeyValue>
</div>
</UiCard>
</UiPanelCard>
</template>
<script lang="ts" setup>
@@ -51,8 +51,8 @@ import { useXoPifCollection } from '@/modules/pif/remote-resources/use-xo-pif-co
import VtsCardRowKeyValue from '@core/components/card/VtsCardRowKeyValue.vue'
import VtsCopyAllMenuItem from '@core/components/copy-all-menu-item/VtsCopyAllMenuItem.vue'
import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
@@ -78,9 +78,7 @@ const ipV6Addresses = computed(
</script>
<style scoped lang="postcss">
.card-container {
gap: 1.6rem;
.host-network-card {
.content {
display: flex;
flex-direction: column;

10
@xen-orchestra/web/src/modules/host/components/list/panel/card/HostSoftwareCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard class="card-container">
<UiPanelCard class="host-software-card">
<UiCardTitle>
{{ t('software') }}
</UiCardTitle>
@@ -12,15 +12,15 @@
</template>
</VtsCardRowKeyValue>
</div>
</UiCard>
</UiPanelCard>
</template>
<script lang="ts" setup>
import type { FrontXoHost } from '@/modules/host/remote-resources/use-xo-host-collection.ts'
import VtsCardRowKeyValue from '@core/components/card/VtsCardRowKeyValue.vue'
import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import { useI18n } from 'vue-i18n'
defineProps<{
@@ -31,9 +31,7 @@ const { t } = useI18n()
</script>
<style scoped lang="postcss">
.card-container {
gap: 1.6rem;
.host-software-card {
.content {
display: flex;
flex-direction: column;

14
@xen-orchestra/web/src/modules/network/components/panel/NetworkSidePanel.vue
View File

@@ -1,10 +1,10 @@
<template>
<VtsSidePanel :has-selection="!!network" @close="emit('close')">
<VtsSidePanel :has-selection="!!network" class="network-side-panel" @close="emit('close')">
<template v-if="network" #actions>
<VtsDeleteButton :busy="isDeletingNetworks" @click="deleteNetworks()" />
</template>
<template v-if="network" #default>
<UiCard class="card-container">
<UiPanelCard>
<VtsCardObjectTitle :id="network.id" :label="network.name_label" icon="object:network" :href="networkHref" />
<div class="content">
<!-- DESCRIPTION -->
@@ -51,7 +51,7 @@
<template #value>{{ networkDefaultLockingMode }}</template>
</VtsCardRowKeyValue>
</div>
</UiCard>
</UiPanelCard>
<NetworkPifsInfoCard :network />
</template>
</VtsSidePanel>
@@ -68,7 +68,7 @@ import VtsCardObjectTitle from '@core/components/card-object-title/VtsCardObject
import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
import VtsDeleteButton from '@core/components/delete-button/VtsDeleteButton.vue'
import VtsSidePanel from '@core/components/panel/VtsSidePanel.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
@@ -108,11 +108,7 @@ const networkDefaultLockingMode = computed(() => (network?.defaultIsLocked ? t('
</script>
<style scoped lang="postcss">
.card-container {
display: flex;
flex-direction: column;
gap: 1.6rem;
.network-side-panel {
.content {
display: flex;
flex-direction: column;

12
@xen-orchestra/web/src/modules/network/components/panel/cards/NetworkPifsInfoCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard v-if="pifsCount && pifsCount > 0" class="card-container">
<UiPanelCard v-if="pifsCount && pifsCount > 0" class="network-pifs-info-card">
<div class="typo-body-bold">
{{ t('pifs') }}
<UiCounter :value="pifsCount" variant="primary" size="small" accent="neutral" />
@@ -23,15 +23,15 @@
<PifRow v-for="pif in pifs" :key="pif.id" :pif />
</tbody>
</table>
</UiCard>
</UiPanelCard>
</template>
<script setup lang="ts">
import type { FrontXoNetwork } from '@/modules/network/remote-resources/use-xo-network-collection.ts'
import PifRow from '@/modules/pif/components/PifRow.vue'
import { useXoPifCollection } from '@/modules/pif/remote-resources/use-xo-pif-collection.ts'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCounter from '@core/components/ui/counter/UiCounter.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
@@ -49,11 +49,7 @@ const pifsCount = computed(() => pifs.value.length)
</script>
<style scoped lang="postcss">
.card-container {
display: flex;
flex-direction: column;
gap: 1.6rem;
.network-pifs-info-card {
.content {
display: flex;
flex-direction: column;

20
@xen-orchestra/web/src/modules/pif/components/list/panel/PifSidePanel.vue
View File

@@ -1,8 +1,8 @@
<template>
<VtsSidePanel :has-selection="!!pif" @close="emit('close')">
<VtsSidePanel :has-selection="!!pif" class="pif-side-panel" @close="emit('close')">
<template v-if="pif">
<!-- PIF -->
<UiCard class="card">
<UiPanelCard>
<VtsCardObjectTitle :id="pif.id" :label="pif.isBondMaster ? t('bond') : t('pif')" />
<div class="content">
<!-- NETWORK -->
@@ -75,9 +75,9 @@
</template>
</VtsCardRowKeyValue>
</div>
</UiCard>
</UiPanelCard>
<!-- NETWORK INFORMATION -->
<UiCard class="card">
<UiPanelCard>
<UiCardTitle>{{ t('network-information') }}</UiCardTitle>
<div class="content">
<!-- IP ADDRESSES -->
@@ -178,9 +178,9 @@
</VtsCardRowKeyValue>
</div>
</div>
</UiCard>
</UiPanelCard>
<!-- PROPERTIES -->
<UiCard class="card">
<UiPanelCard>
<UiCardTitle>{{ t('properties') }}</UiCardTitle>
<div class="content">
<!-- MTU -->
@@ -217,7 +217,7 @@
</template>
</VtsCardRowKeyValue>
</div>
</UiCard>
</UiPanelCard>
</template>
</VtsSidePanel>
</template>
@@ -234,9 +234,9 @@ import VtsIcon from '@core/components/icon/VtsIcon.vue'
import VtsSidePanel from '@core/components/panel/VtsSidePanel.vue'
import VtsStatus from '@core/components/status/VtsStatus.vue'
import VtsTag from '@core/components/tag/VtsTag.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
import UiLink from '@core/components/ui/link/UiLink.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import UiTagsList from '@core/components/ui/tag/UiTagsList.vue'
import { vTooltip } from '@core/directives/tooltip.directive.ts'
import { CONNECTION_STATUS } from '@core/types/connection.ts'
@@ -313,9 +313,7 @@ const speed = computed(() => {
</script>
<style scoped lang="postcss">
.card {
gap: 1.6rem;
.pif-side-panel {
.content {
display: flex;
flex-direction: column;

26
@xen-orchestra/web/src/modules/pool/components/list/panel/PoolSidePanel.vue
View File

@@ -1,5 +1,5 @@
<template>
<VtsSidePanel :has-selection="!!server" @close="emit('close')">
<VtsSidePanel :has-selection="!!server" class="pool-side-panel" @close="emit('close')">
<template v-if="server" #actions>
<PoolConnectionToggleButton :server-id="server.id" />
<MenuList placement="bottom-end">
@@ -19,7 +19,7 @@
<template v-if="server">
<VtsStateHero v-if="!arePoolsReady" format="panel" type="busy" size="medium" />
<template v-else>
<UiCard v-if="server.error === undefined" class="card-container">
<UiPanelCard v-if="server.error === undefined">
<VtsCardObjectTitle :id="server.id" :label="server.label" icon="object:pool" />
<div class="content">
<!-- Pool -->
@@ -60,14 +60,14 @@
</template>
</VtsCardRowKeyValue>
</div>
</UiCard>
</UiPanelCard>
<UiAlert v-else accent="danger">
{{ t('connection-failed') }}
<template #description>
{{ t('unable-to-connect-to-the-pool') }}
</template>
</UiAlert>
<UiCard class="card-container">
<UiPanelCard>
<UiCardTitle>
{{ t('connection') }}
</UiCardTitle>
@@ -138,8 +138,8 @@
<VtsStatus :status="server.allowUnauthorized" />
</template>
</VtsCardRowKeyValue>
</UiCard>
<UiCard v-if="hosts !== undefined">
</UiPanelCard>
<UiPanelCard v-if="hosts !== undefined">
<UiCardTitle>
<span>
{{ t('hosts') }}
@@ -161,14 +161,14 @@
<VtsIcon v-if="primaryHost?.id === host.id" accent="info" name="status:primary-circle" size="medium" />
</UiLink>
</template>
</UiCard>
<UiCard v-if="server.error">
</UiPanelCard>
<UiPanelCard v-if="server.error">
<UiCardTitle>
{{ t('error') }}
<UiCounter :value="1" accent="danger" size="small" variant="primary" />
</UiCardTitle>
<UiLogEntryViewer accent="danger" :label="t('api-error-details')" size="small" :content="server.error" />
</UiCard>
</UiPanelCard>
</template>
</template>
</VtsSidePanel>
@@ -192,12 +192,12 @@ import VtsStatus from '@core/components/status/VtsStatus.vue'
import VtsTag from '@core/components/tag/VtsTag.vue'
import UiAlert from '@core/components/ui/alert/UiAlert.vue'
import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
import UiCounter from '@core/components/ui/counter/UiCounter.vue'
import UiInfo from '@core/components/ui/info/UiInfo.vue'
import UiLink from '@core/components/ui/link/UiLink.vue'
import UiLogEntryViewer from '@core/components/ui/log-entry-viewer/UiLogEntryViewer.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import UiTagsList from '@core/components/ui/tag/UiTagsList.vue'
import { vTooltip } from '@core/directives/tooltip.directive.ts'
import { useMapper } from '@core/packages/mapper'
@@ -234,11 +234,7 @@ const connectionStatus = useMapper(
</script>
<style scoped lang="postcss">
.card-container {
display: flex;
flex-direction: column;
gap: 1.6rem;
.pool-side-panel {
.content {
display: flex;
flex-direction: column;

10
@xen-orchestra/web/src/modules/snapshot/components/list/panel/cards/SnapshotInfoCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard class="card-container">
<UiPanelCard class="snapshot-info-card">
<VtsCardObjectTitle
:id="snapshot.id"
:label="snapshot.name_label"
@@ -58,7 +58,7 @@
</template>
</VtsCardRowKeyValue>
</div>
</UiCard>
</UiPanelCard>
</template>
<script setup lang="ts">
@@ -68,9 +68,9 @@ import { useXo5VmSnapshotRoute } from '@/modules/snapshot/composables/xo-vm-snap
import VtsCardRowKeyValue from '@core/components/card/VtsCardRowKeyValue.vue'
import VtsCardObjectTitle from '@core/components/card-object-title/VtsCardObjectTitle.vue'
import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiInfo from '@core/components/ui/info/UiInfo.vue'
import UiLink from '@core/components/ui/link/UiLink.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import { VM_POWER_STATE } from '@vates/types'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
@@ -93,9 +93,7 @@ const trigger = computed(() => getSnapshotTrigger(snapshot))
</script>
<style scoped lang="postcss">
.card-container {
gap: 1.6rem;
.snapshot-info-card {
.content {
display: flex;
flex-direction: column;

10
@xen-orchestra/web/src/modules/snapshot/components/list/panel/cards/SnapshotVdiCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard v-if="vmSnapshotVdis.length > 0" class="card-container">
<UiPanelCard v-if="vmSnapshotVdis.length > 0" class="snapshot-vdi-card">
<UiCardTitle>
{{ t('vdis') }}
<UiCounter :value="vmSnapshotVdis.length" accent="neutral" size="small" variant="primary" />
@@ -24,7 +24,7 @@
<VtsDivider v-if="index < vmSnapshotVdis.length - 1" class="divider" type="stretch" />
</div>
</div>
</UiCard>
</UiPanelCard>
</template>
<script setup lang="ts">
@@ -36,9 +36,9 @@ import VdiFormatCardItem from '@/modules/vdi/components/list/panel/card-items/Vd
import VtsCardRowKeyValue from '@core/components/card/VtsCardRowKeyValue.vue'
import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
import VtsDivider from '@core/components/divider/VtsDivider.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
import UiCounter from '@core/components/ui/counter/UiCounter.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import { useI18n } from 'vue-i18n'
const { snapshot } = defineProps<{ snapshot: FrontXoVmSnapshot }>()
@@ -49,9 +49,7 @@ const { vmSnapshotVdis } = useXoVmSnapshotVdiCollection({}, () => snapshot.id)
</script>
<style scoped lang="postcss">
.card-container {
gap: 1.6rem;
.snapshot-vdi-card {
.content {
display: flex;
flex-direction: column;

10
@xen-orchestra/web/src/modules/storage-repository/components/list/panel/cards/StorageRepositoryCustomFieldsCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard class="card-container">
<UiPanelCard class="storage-repository-custom-fields-card">
<UiCardTitle>
{{ t('custom-fields') }}
</UiCardTitle>
@@ -15,14 +15,14 @@
</VtsStateHero>
<VtsLabelValueList v-else :fields="customFields" />
</div>
</UiCard>
</UiPanelCard>
</template>
<script lang="ts" setup>
import VtsLabelValueList from '@core/components/label-value-list/VtsLabelValueList.vue'
import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import { useI18n } from 'vue-i18n'
defineProps<{
@@ -33,9 +33,7 @@ const { t } = useI18n()
</script>
<style scoped lang="postcss">
.card-container {
gap: 1.6rem;
.storage-repository-custom-fields-card {
.content {
display: flex;
flex-direction: column;

10
@xen-orchestra/web/src/modules/storage-repository/components/list/panel/cards/StorageRepositoryHostsCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard class="card-container">
<UiPanelCard class="storage-repository-hosts-card">
<UiCardTitle>
<div class="title">
{{ t('hosts') }}
@@ -20,17 +20,17 @@
<VtsStateHero v-else type="no-data" format="card" horizontal size="extra-small">
{{ t('no-host-attached') }}
</VtsStateHero>
</UiCard>
</UiPanelCard>
</template>
<script lang="ts" setup>
import type { FrontXoHost } from '@/modules/host/remote-resources/use-xo-host-collection.ts'
import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
import UiCollapsibleList from '@core/components/ui/collapsible-list/UiCollapsibleList.vue'
import UiCounter from '@core/components/ui/counter/UiCounter.vue'
import UiLink from '@core/components/ui/link/UiLink.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import { vTooltip } from '@core/directives/tooltip.directive.ts'
import { toLower } from 'lodash-es'
import { useI18n } from 'vue-i18n'
@@ -43,9 +43,7 @@ const { t } = useI18n()
</script>
<style scoped lang="postcss">
.card-container {
gap: 1.6rem;
.storage-repository-hosts-card {
.title {
display: flex;
align-items: center;

10
@xen-orchestra/web/src/modules/storage-repository/components/list/panel/cards/StorageRepositoryInfosCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard class="card-container">
<UiPanelCard class="storage-repository-infos-card">
<VtsCardObjectTitle :id="sr.id" :label="sr.name_label" :href :icon="srStatusIcon" />
<div class="content">
<VtsCardRowKeyValue>
@@ -52,7 +52,7 @@
<template #value><VtsStatus :status="isHaSr" /></template>
</VtsCardRowKeyValue>
</div>
</UiCard>
</UiPanelCard>
</template>
<script lang="ts" setup>
@@ -68,7 +68,7 @@ import VtsCardObjectTitle from '@core/components/card-object-title/VtsCardObject
import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
import VtsStatus from '@core/components/status/VtsStatus.vue'
import VtsTag from '@core/components/tag/VtsTag.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import UiTagsList from '@core/components/ui/tag/UiTagsList.vue'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
@@ -100,9 +100,7 @@ const isHaSr = isHighAvailabilitySr(() => sr)
</script>
<style scoped lang="postcss">
.card-container {
gap: 1.6rem;
.storage-repository-infos-card {
.content {
display: flex;
flex-direction: column;

10
@xen-orchestra/web/src/modules/storage-repository/components/list/panel/cards/StorageRepositoryPbdsCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard class="card-container">
<UiPanelCard class="storage-repository-pbds-card">
<UiCardTitle>
{{ t('pbd-details') }}
</UiCardTitle>
@@ -33,7 +33,7 @@
</template>
</div>
</template>
</UiCard>
</UiPanelCard>
</template>
<script lang="ts" setup>
@@ -46,9 +46,9 @@ import VtsCardRowKeyValue from '@core/components/card/VtsCardRowKeyValue.vue'
import VtsDivider from '@core/components/divider/VtsDivider.vue'
import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
import VtsStatus from '@core/components/status/VtsStatus.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
import UiLogEntryViewer from '@core/components/ui/log-entry-viewer/UiLogEntryViewer.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import { CONNECTION_STATUS } from '@core/types/connection.ts'
import { useI18n } from 'vue-i18n'
@@ -68,9 +68,7 @@ const { areSomePbdsDisconnected, disconnectedPbds } = useXoPbdUtils(pbdsInScope)
</script>
<style scoped lang="postcss">
.card-container {
gap: 1.6rem;
.storage-repository-pbds-card {
.content {
display: flex;
flex-direction: column;

10
@xen-orchestra/web/src/modules/storage-repository/components/list/panel/cards/StorageRepositoryVdisCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard class="card-container">
<UiPanelCard class="storage-repository-vdis-card">
<UiCardTitle>
<div class="title">
{{ t('vdis') }}
@@ -56,7 +56,7 @@
<VtsStateHero v-else type="no-data" format="card" horizontal size="extra-small">
{{ t('no-vdi-attached') }}
</VtsStateHero>
</UiCard>
</UiPanelCard>
</template>
<script lang="ts" setup>
@@ -67,11 +67,11 @@ import { getVdiIcon } from '@/modules/vdi/utils/xo-vdi.util.ts'
import { VDI_PAGE_CONTEXT } from '@/shared/constants.ts'
import VtsDivider from '@core/components/divider/VtsDivider.vue'
import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
import UiCollapsibleList from '@core/components/ui/collapsible-list/UiCollapsibleList.vue'
import UiCounter from '@core/components/ui/counter/UiCounter.vue'
import UiLink from '@core/components/ui/link/UiLink.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import { vTooltip } from '@core/directives/tooltip.directive.ts'
import { useI18n } from 'vue-i18n'
@@ -86,9 +86,7 @@ const { getVbdsByIds } = useXoVbdCollection()
</script>
<style scoped lang="postcss">
.card-container {
gap: 1.6rem;
.storage-repository-vdis-card {
.title {
display: flex;
align-items: center;

10
@xen-orchestra/web/src/modules/task/components/list/panel/cards/TaskErrorsCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard class="card-container">
<UiPanelCard class="task-errors-card">
<UiCardTitle>
{{ t('errors') }}
<UiCounter :value="1" accent="danger" size="small" variant="primary" />
@@ -20,17 +20,17 @@
size="small"
accent="danger"
/>
</UiCard>
</UiPanelCard>
</template>
<script lang="ts" setup>
import type { FrontXoTask } from '@/modules/task/remote-resources/use-xo-task-collection.ts'
import VtsCardRowKeyValue from '@core/components/card/VtsCardRowKeyValue.vue'
import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
import UiCounter from '@core/components/ui/counter/UiCounter.vue'
import UiLogEntryViewer from '@core/components/ui/log-entry-viewer/UiLogEntryViewer.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import { useI18n } from 'vue-i18n'
defineProps<{
@@ -41,9 +41,7 @@ const { t } = useI18n()
</script>
<style scoped lang="postcss">
.card-container {
gap: 1.6rem;
.task-errors-card {
.content {
display: flex;
flex-direction: column;

10
@xen-orchestra/web/src/modules/task/components/list/panel/cards/TaskInfosCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard class="card-container">
<UiPanelCard class="task-infos-card">
<UiCardTitle>
{{ t('info') }}
<UiCounter :value="Object.keys(task.infos!).length" accent="info" size="small" variant="primary" />
@@ -16,7 +16,7 @@
</VtsCardRowKeyValue>
</template>
</div>
</UiCard>
</UiPanelCard>
</template>
<script lang="ts" setup>
@@ -24,9 +24,9 @@ import type { FrontXoTask } from '@/modules/task/remote-resources/use-xo-task-co
import VtsCardRowKeyValue from '@core/components/card/VtsCardRowKeyValue.vue'
import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
import VtsDivider from '@core/components/divider/VtsDivider.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
import UiCounter from '@core/components/ui/counter/UiCounter.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import { useI18n } from 'vue-i18n'
defineProps<{
@@ -37,9 +37,7 @@ const { t } = useI18n()
</script>
<style scoped lang="postcss">
.card-container {
gap: 1.6rem;
.task-infos-card {
.content {
display: flex;
flex-direction: column;

10
@xen-orchestra/web/src/modules/task/components/list/panel/cards/TaskObjectsCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard class="card-container">
<UiPanelCard class="task-objects-card">
<UiCardTitle>
{{ t('object') }}
</UiCardTitle>
@@ -12,15 +12,15 @@
</template>
</VtsCardRowKeyValue>
</div>
</UiCard>
</UiPanelCard>
</template>
<script lang="ts" setup>
import type { FrontXoTask } from '@/modules/task/remote-resources/use-xo-task-collection.ts'
import VtsCardRowKeyValue from '@core/components/card/VtsCardRowKeyValue.vue'
import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import { useI18n } from 'vue-i18n'
defineProps<{
@@ -31,9 +31,7 @@ const { t } = useI18n()
</script>
<style scoped lang="postcss">
.card-container {
gap: 1.6rem;
.task-objects-card {
.content {
display: flex;
flex-direction: column;

10
@xen-orchestra/web/src/modules/task/components/list/panel/cards/TaskPropertiesCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard class="card-container">
<UiPanelCard class="task-properties-card">
<UiCardTitle>
{{ t('properties') }}
</UiCardTitle>
@@ -14,16 +14,16 @@
accent="info"
/>
<UiLogEntryViewer :content="properties.other" :label="t('other-properties')" size="small" accent="info" />
</UiCard>
</UiPanelCard>
</template>
<script lang="ts" setup>
import { useXoTaskPropertiesUtils } from '@/modules/task/composables/xo-task-properties-utils.composable.ts'
import type { FrontXoTask } from '@/modules/task/remote-resources/use-xo-task-collection.ts'
import VtsRecursiveFields from '@core/components/recursive-fields/VtsRecursiveFields.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
import UiLogEntryViewer from '@core/components/ui/log-entry-viewer/UiLogEntryViewer.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import { omit } from 'lodash-es'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
@@ -47,9 +47,7 @@ const propertiesOtherWithoutCloudConfig = computed(() =>
</script>
<style scoped lang="postcss">
.card-container {
gap: 1.6rem;
.task-properties-card {
.content {
display: flex;
flex-direction: column;

9
@xen-orchestra/web/src/modules/task/components/list/panel/cards/TaskQuickInfosCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard class="card-container">
<UiPanelCard class="task-quick-infos-card">
<UiCardTitle v-if="nameParts !== undefined || task.properties.name !== undefined" class="text-ellipsis">
<div v-if="nameParts" class="title">
<VtsIcon name="fa:bars-progress" size="medium" />
@@ -61,7 +61,7 @@
</template>
</VtsCardRowKeyValue>
</div>
</UiCard>
</UiPanelCard>
</template>
<script lang="ts" setup>
@@ -74,10 +74,10 @@ import VtsCardObjectTitle from '@core/components/card-object-title/VtsCardObject
import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
import VtsIcon from '@core/components/icon/VtsIcon.vue'
import VtsTag from '@core/components/tag/VtsTag.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
import UiCircleProgressBar from '@core/components/ui/circle-progress-bar/UiCircleProgressBar.vue'
import UiLink from '@core/components/ui/link/UiLink.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import UiTag from '@core/components/ui/tag/UiTag.vue'
import UiTagsList from '@core/components/ui/tag/UiTagsList.vue'
import UiUserLogo from '@core/components/ui/user-logo/UiUserLogo.vue'
@@ -131,8 +131,7 @@ const formattedEndDate = computed(() => {
</script>
<style scoped lang="postcss">
.card-container {
gap: 1.6rem;
.task-quick-infos-card {
.title {
display: flex;
flex-wrap: wrap;

10
@xen-orchestra/web/src/modules/task/components/list/panel/cards/TaskWarningsCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard class="card-container">
<UiPanelCard class="task-warnings-card">
<UiCardTitle>
{{ t('warnings') }}
<UiCounter :value="Object.keys(task.warnings!).length" accent="warning" size="small" variant="primary" />
@@ -16,7 +16,7 @@
</VtsCardRowKeyValue>
</template>
</div>
</UiCard>
</UiPanelCard>
</template>
<script lang="ts" setup>
@@ -24,9 +24,9 @@ import type { FrontXoTask } from '@/modules/task/remote-resources/use-xo-task-co
import VtsCardRowKeyValue from '@core/components/card/VtsCardRowKeyValue.vue'
import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
import VtsDivider from '@core/components/divider/VtsDivider.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
import UiCounter from '@core/components/ui/counter/UiCounter.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import { useI18n } from 'vue-i18n'
defineProps<{
@@ -37,9 +37,7 @@ const { t } = useI18n()
</script>
<style scoped lang="postcss">
.card-container {
gap: 1.6rem;
.task-warnings-card {
.content {
display: flex;
flex-direction: column;

10
@xen-orchestra/web/src/modules/traffic-rules/components/list/panel/cards/TrafficRuleNetworkInfosCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard class="card-container">
<UiPanelCard class="traffic-rule-network-infos-card">
<UiCardTitle>{{ t('network') }}</UiCardTitle>
<div class="content">
<VtsCardRowKeyValue>
@@ -83,7 +83,7 @@
</template>
</VtsCardRowKeyValue>
</div>
</UiCard>
</UiPanelCard>
</template>
<script setup lang="ts">
@@ -92,9 +92,9 @@ import { getPoolNetworkRoute } from '@/modules/network/utils/xo-network.util.ts'
import { useXoPifCollection } from '@/modules/pif/remote-resources/use-xo-pif-collection.ts'
import VtsCardRowKeyValue from '@core/components/card/VtsCardRowKeyValue.vue'
import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
import UiLink from '@core/components/ui/link/UiLink.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import type { TrafficRule } from '@vates/types'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
@@ -126,9 +126,7 @@ const networkDefaultLockingMode = computed(() => (network.defaultIsLocked ? t('d
</script>
<style scoped lang="postcss">
.card-container {
gap: 1.6rem;
.traffic-rule-network-infos-card {
.content {
display: flex;
flex-direction: column;

10
@xen-orchestra/web/src/modules/traffic-rules/components/list/panel/cards/TrafficRuleSummaryCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard class="card-container">
<UiPanelCard class="traffic-rule-summary-card">
<UiCardTitle>
<VtsIcon name="fa:traffic-rule" size="medium" />
<UiLink size="medium" disabled>
@@ -50,7 +50,7 @@
</template>
</VtsCardRowKeyValue>
</div>
</UiCard>
</UiPanelCard>
</template>
<script setup lang="ts">
@@ -65,9 +65,9 @@ import VtsCardRowKeyValue from '@core/components/card/VtsCardRowKeyValue.vue'
import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
import VtsIcon from '@core/components/icon/VtsIcon.vue'
import VtsStatus from '@core/components/status/VtsStatus.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
import UiLink from '@core/components/ui/link/UiLink.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import { objectIcon } from '@core/icons'
import type { TrafficRule } from '@vates/types'
import { toLower } from 'lodash-es'
@@ -132,9 +132,7 @@ const vifDevice = computed(() => `${t('vif')}${vif.value?.device}`)
</script>
<style scoped lang="postcss">
.card-container {
gap: 1.6rem;
.traffic-rule-summary-card {
.content {
display: flex;
flex-direction: column;

10
@xen-orchestra/web/src/modules/traffic-rules/components/list/panel/cards/TrafficRuleVifInfosCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard class="card-container">
<UiPanelCard class="traffic-rule-vif-infos-card">
<UiCardTitle>{{ t('vif') }}</UiCardTitle>
<div class="content">
<VtsCardRowKeyValue>
@@ -116,7 +116,7 @@
</template>
</VtsCardRowKeyValue>
</div>
</UiCard>
</UiPanelCard>
</template>
<script setup lang="ts">
@@ -130,9 +130,9 @@ import VtsCardRowKeyValue from '@core/components/card/VtsCardRowKeyValue.vue'
import VtsCodeSnippet from '@core/components/code-snippet/VtsCodeSnippet.vue'
import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
import VtsStatus from '@core/components/status/VtsStatus.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
import UiLink from '@core/components/ui/link/UiLink.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import { objectIcon } from '@core/icons'
import { CONNECTION_STATUS } from '@core/types/connection.ts'
import type { TrafficRule } from '@vates/types'
@@ -178,9 +178,7 @@ const vifDevice = computed(() => `${t('vif')}${vif.device}`)
</script>
<style scoped lang="postcss">
.card-container {
gap: 1.6rem;
.traffic-rule-vif-infos-card {
.content {
display: flex;
flex-direction: column;

18
@xen-orchestra/web/src/modules/traffic-rules/components/list/panel/cards/TrafficRuleVifNetworkInfoCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard class="card-container">
<UiPanelCard class="traffic-rule-vif-network-info-card">
<UiCardTitle>{{ t('vif-network-info') }}</UiCardTitle>
<div class="content">
<template v-if="ipAddresses.length">
@@ -34,7 +34,7 @@
</template>
</VtsCardRowKeyValue>
</div>
</UiCard>
</UiPanelCard>
</template>
<script setup lang="ts">
@@ -43,8 +43,8 @@ import { useXoVmCollection } from '@/modules/vm/remote-resources/use-xo-vm-colle
import VtsCardRowKeyValue from '@core/components/card/VtsCardRowKeyValue.vue'
import VtsCopyAllMenuItem from '@core/components/copy-all-menu-item/VtsCopyAllMenuItem.vue'
import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import { getUniqueIpAddressesForDevice } from '@core/utils/ip-address.utils.ts'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
@@ -63,17 +63,15 @@ const ipAddresses = computed(() => {
</script>
<style scoped lang="postcss">
.card-container {
gap: 1.6rem;
.traffic-rule-vif-network-info-card {
.content {
display: flex;
flex-direction: column;
gap: 0.4rem;
.value:empty::before {
content: '-';
}
}
}
.value:empty::before {
content: '-';
}
</style>

10
@xen-orchestra/web/src/modules/user/components/list/panel/cards/UserGroupsCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard class="card-container">
<UiPanelCard class="user-groups-card">
<UiCardTitle>
<div class="title">
{{ t('groups') }}
@@ -21,7 +21,7 @@
<VtsStateHero v-else type="no-data" format="card" horizontal size="extra-small">
{{ t('no-group-attached') }}
</VtsStateHero>
</UiCard>
</UiPanelCard>
</template>
<script lang="ts" setup>
@@ -30,10 +30,10 @@ import type { FrontXoUser } from '@/modules/user/remote-resources/use-xo-user-co
import { useXoRoutes } from '@/shared/remote-resources/use-xo-routes.ts'
import VtsIcon from '@core/components/icon/VtsIcon.vue'
import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
import UiCounter from '@core/components/ui/counter/UiCounter.vue'
import UiLink from '@core/components/ui/link/UiLink.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
@@ -53,9 +53,7 @@ const { t } = useI18n()
</script>
<style scoped lang="postcss">
.card-container {
gap: 1.6rem;
.user-groups-card {
.title {
display: flex;
align-items: center;

10
@xen-orchestra/web/src/modules/user/components/list/panel/cards/UserInfosCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard class="card-container">
<UiPanelCard class="user-infos-card">
<UiCardTitle>
<div class="title">
<UiUserLogo size="small" />
@@ -36,7 +36,7 @@
<template #value>{{ providers }}</template>
</VtsCardRowKeyValue>
</div>
</UiCard>
</UiPanelCard>
</template>
<script lang="ts" setup>
@@ -46,9 +46,9 @@ import { useXoRoutes } from '@/shared/remote-resources/use-xo-routes.ts'
import VtsCardRowKeyValue from '@core/components/card/VtsCardRowKeyValue.vue'
import VtsCodeSnippet from '@core/components/code-snippet/VtsCodeSnippet.vue'
import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
import UiLink from '@core/components/ui/link/UiLink.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import UiUserLogo from '@core/components/ui/user-logo/UiUserLogo.vue'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
@@ -97,9 +97,7 @@ const userPermission = computed(() => {
</script>
<style scoped lang="postcss">
.card-container {
gap: 1.6rem;
.user-infos-card {
.title {
display: flex;
align-items: center;

10
@xen-orchestra/web/src/modules/user/components/list/panel/cards/UserRolesCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard class="card-container">
<UiPanelCard class="user-roles-card">
<UiCardTitle>
<div class="title">
{{ t('roles-applied') }}
@@ -10,23 +10,21 @@
<VtsStateHero type="no-data" format="card" horizontal size="extra-small">
{{ t('no-role-applied') }}
</VtsStateHero>
</UiCard>
</UiPanelCard>
</template>
<script lang="ts" setup>
import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
import UiCounter from '@core/components/ui/counter/UiCounter.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
</script>
<style scoped lang="postcss">
.card-container {
gap: 1.6rem;
.user-roles-card {
.title {
display: flex;
align-items: center;

10
@xen-orchestra/web/src/modules/vdi/components/list/panel/cards/VdiConfigurationCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard class="card-container">
<UiPanelCard class="vdi-configuration-card">
<UiCardTitle>
{{ t('configuration') }}
</UiCardTitle>
@@ -45,7 +45,7 @@
</template>
</VtsCardRowKeyValue>
</div>
</UiCard>
</UiPanelCard>
</template>
<script setup lang="ts">
@@ -58,9 +58,9 @@ import { useXoRoutes } from '@/shared/remote-resources/use-xo-routes.ts'
import VtsCardRowKeyValue from '@core/components/card/VtsCardRowKeyValue.vue'
import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
import VtsStatus from '@core/components/status/VtsStatus.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
import UiLink from '@core/components/ui/link/UiLink.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
@@ -90,9 +90,7 @@ const isBootable = computed(() => vbd.value?.bootable ?? false)
</script>
<style scoped lang="postcss">
.card-container {
gap: 1.6rem;
.vdi-configuration-card {
.content {
display: flex;
flex-direction: column;

10
@xen-orchestra/web/src/modules/vdi/components/list/panel/cards/VdiInfosCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard class="card-container">
<UiPanelCard class="vdi-infos-card">
<VtsCardObjectTitle
:id="vdi.id"
:label="vdi.name_label"
@@ -42,7 +42,7 @@
</template>
</VtsCardRowKeyValue>
</div>
</UiCard>
</UiPanelCard>
</template>
<script lang="ts" setup>
@@ -57,7 +57,7 @@ import VtsCardObjectTitle from '@core/components/card-object-title/VtsCardObject
import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
import VtsStatus from '@core/components/status/VtsStatus.vue'
import VtsTag from '@core/components/tag/VtsTag.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import UiTagsList from '@core/components/ui/tag/UiTagsList.vue'
import { useMapper } from '@core/packages/mapper'
import { CONNECTION_STATUS } from '@core/types/connection.ts'
@@ -99,9 +99,7 @@ const vdiDevice = computed(() => notCdDriveVbds.value.find(vbd => vbd.VDI === vd
</script>
<style scoped lang="postcss">
.card-container {
gap: 1.6rem;
.vdi-infos-card {
.content {
display: flex;
flex-direction: column;

16
@xen-orchestra/web/src/modules/vif/components/panel/VifSidePanel.vue
View File

@@ -1,5 +1,5 @@
<template>
<VtsSidePanel :has-selection="!!vif" @close="emit('close')">
<VtsSidePanel :has-selection="!!vif" class="vif-side-panel" @close="emit('close')">
<template v-if="vif" #actions>
<VifConnectionToggleButton :vif :vm />
</template>
@@ -8,7 +8,7 @@
</template>
<template v-if="vif" #default>
<!-- VIF -->
<UiCard class="card">
<UiPanelCard>
<VtsCardObjectTitle :id="vif.id" :to="vifTo" :label="t('vif')" icon="object:vif" />
<div class="content">
<!-- NETWORK -->
@@ -86,9 +86,9 @@
</template>
</VtsCardRowKeyValue>
</div>
</UiCard>
</UiPanelCard>
<!-- NETWORK INFORMATION -->
<UiCard class="card">
<UiPanelCard>
<UiCardTitle>{{ t('network-information') }}</UiCardTitle>
<div class="content">
<!-- IP ADDRESSES -->
@@ -125,7 +125,7 @@
</template>
</VtsCardRowKeyValue>
</div>
</UiCard>
</UiPanelCard>
</template>
</VtsSidePanel>
</template>
@@ -144,9 +144,9 @@ import VtsCopyAllMenuItem from '@core/components/copy-all-menu-item/VtsCopyAllMe
import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
import VtsSidePanel from '@core/components/panel/VtsSidePanel.vue'
import VtsStatus from '@core/components/status/VtsStatus.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
import UiLink from '@core/components/ui/link/UiLink.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import { CONNECTION_STATUS } from '@core/types/connection.ts'
import { getUniqueIpAddressesForDevice } from '@core/utils/ip-address.utils.ts'
import { computed } from 'vue'
@@ -188,9 +188,7 @@ const status = computed(() => (vif?.attached ? CONNECTION_STATUS.CONNECTED : CON
</script>
<style scoped lang="postcss">
.card {
gap: 1.6rem;
.vif-side-panel {
.content {
display: flex;
flex-direction: column;

10
@xen-orchestra/web/src/modules/vm/components/list/panel/cards/VmInfoCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard class="card-container">
<UiPanelCard class="vm-info-card">
<VtsCardObjectTitle
:id="vm.id"
:label="vm.name_label"
@@ -137,7 +137,7 @@
</template>
</VtsCardRowKeyValue>
</div>
</UiCard>
</UiPanelCard>
</template>
<script lang="ts" setup>
@@ -154,8 +154,8 @@ import VtsCardObjectTitle from '@core/components/card-object-title/VtsCardObject
import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
import VtsIcon from '@core/components/icon/VtsIcon.vue'
import VtsTag from '@core/components/tag/VtsTag.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiLink from '@core/components/ui/link/UiLink.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import UiTagsList from '@core/components/ui/tag/UiTagsList.vue'
import UiUserLogo from '@core/components/ui/user-logo/UiUserLogo.vue'
import { vTooltip } from '@core/directives/tooltip.directive.ts'
@@ -206,9 +206,7 @@ const { powerState, installDateFormatted, relativeStartTime, guestToolsDisplay }
</script>
<style scoped lang="postcss">
.card-container {
gap: 1.6rem;
.vm-info-card {
.content {
display: flex;
flex-direction: column;

10
@xen-orchestra/web/src/modules/vm/components/list/panel/cards/VmNetworkCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard class="card-container">
<UiPanelCard class="vm-network-card">
<UiCardTitle>
{{ t('networks') }}
<UiLink v-if="ipAddresses.length > 0" size="medium" :to="{ name: '/vm/[id]/networks', params: { id: vm.id } }">
@@ -23,7 +23,7 @@
<template #key>{{ t('ip-addresses') }}</template>
</VtsCardRowKeyValue>
</div>
</UiCard>
</UiPanelCard>
</template>
<script lang="ts" setup>
@@ -32,9 +32,9 @@ import { getVmIpAddresses } from '@/modules/vm/utils/xo-vm.util.ts'
import VtsCardRowKeyValue from '@core/components/card/VtsCardRowKeyValue.vue'
import VtsCopyAllMenuItem from '@core/components/copy-all-menu-item/VtsCopyAllMenuItem.vue'
import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
import UiLink from '@core/components/ui/link/UiLink.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
@@ -48,9 +48,7 @@ const ipAddresses = computed(() => getVmIpAddresses(vm))
</script>
<style scoped lang="postcss">
.card-container {
gap: 1.6rem;
.vm-network-card {
.content {
display: flex;
flex-direction: column;

10
@xen-orchestra/web/src/modules/vm/components/list/panel/cards/VmResourcesCard.vue
View File

@@ -1,5 +1,5 @@
<template>
<UiCard class="card-container">
<UiPanelCard class="vm-resources-card">
<UiCardTitle>
{{ t('resources') }}
</UiCardTitle>
@@ -40,7 +40,7 @@
</template>
</VtsCardRowKeyValue>
</div>
</UiCard>
</UiPanelCard>
</template>
<script lang="ts" setup>
@@ -49,8 +49,8 @@ import { useXoVdiCollection } from '@/modules/vdi/remote-resources/use-xo-vdi-co
import type { FrontXoVm } from '@/modules/vm/remote-resources/use-xo-vm-collection.ts'
import VtsCardRowKeyValue from '@core/components/card/VtsCardRowKeyValue.vue'
import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
import UiCard from '@core/components/ui/card/UiCard.vue'
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
import UiPanelCard from '@core/components/ui/panel-card/UiPanelCard.vue'
import { formatSize } from '@core/utils/size.util.ts'
import type { XoVdi } from '@vates/types'
import { computed } from 'vue'
@@ -79,9 +79,7 @@ const formattedDiskSpace = computed(() => {
</script>
<style scoped lang="postcss">
.card-container {
gap: 1.6rem;
.vm-resources-card {
.content {
display: flex;
flex-direction: column;

1
CHANGELOG.unreleased.md
View File

@@ -36,6 +36,7 @@
- [REST API] Fix `/users/:id/authentication_tokens` sometimes did not return the token used to make the request (PR [#10233](https://github.com/vatesfr/xen-orchestra/pull/10233))
- [XO server] Fix a random behavior regarding `coresPerSocket` update (PR [#10201](https://github.com/vatesfr/xen-orchestra/pull/10201))
- [Warm migration] Fix `Vm target of warm migration not found` error at the end of a migration (PR [#10210](https://github.com/vatesfr/xen-orchestra/pull/10210))
- [XO6] Fix inconsistent spacing in side panel cards (PR [#10279](https://github.com/vatesfr/xen-orchestra/pull/10279))
- **XO 5**:
- [VM/Console] Fix the page header and tab navigation disappearing permanently in the console tab (PR [#10007](https://github.com/vatesfr/xen-orchestra/pull/10007))