@xen-orchestra/web-core 0.35.1 → 0.37.0

package/lib/tables/column-definitions/button-icon-column.ts

@@ -0,0 +1,30 @@
+import UiButtonIcon, {
+  type ButtonIconAccent,
+  type ButtonIconSize,
+} from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import UiTableCell from '@core/components/ui/table-cell/UiTableCell.vue'
+import type { IconName } from '@core/icons'
+import { defineColumn } from '@core/packages/table/define-column'
+import { renderHeadCell } from '@core/tables/helpers/render-head-cell'
+import type { HeaderConfig } from '@core/tables/types.ts'
+import { h, toValue, type MaybeRefOrGetter } from 'vue'
+
+type ButtonIconConfig = {
+  buttonIcon: MaybeRefOrGetter<IconName>
+  buttonSize?: MaybeRefOrGetter<ButtonIconSize>
+  buttonAccent?: MaybeRefOrGetter<ButtonIconAccent>
+}
+
+export const useButtonIconColumn = defineColumn((config: HeaderConfig & ButtonIconConfig) => ({
+  renderHead: () => renderHeadCell(config.headerIcon, config.headerLabel),
+  renderBody: (onClick: () => void) =>
+    h(UiTableCell, { align: 'center', style: 'width: 6rem' }, () =>
+      h(UiButtonIcon, {
+        icon: toValue(config.buttonIcon),
+        accent: toValue(config.buttonAccent) ?? 'brand',
+        size: toValue(config.buttonSize) ?? 'small',
+        targetScale: 1.5,
+        onClick,
+      })
+    ),
+}))

package/lib/tables/column-definitions/collapsed-list-column.ts

@@ -0,0 +1,12 @@
+import VtsCollapsedListCell from '@core/components/table/cells/VtsCollapsedListCell.vue'
+import { defineColumn } from '@core/packages/table/define-column.ts'
+import { renderHeadCell } from '@core/tables/helpers/render-head-cell.ts'
+import type { HeaderConfig } from '@core/tables/types.ts'
+import type { MaybeArray } from '@core/types/utility.type.ts'
+import { toArray } from '@core/utils/to-array.utils.ts'
+import { h } from 'vue'
+
+export const useCollapsedListColumn = defineColumn((config?: HeaderConfig) => ({
+  renderHead: () => renderHeadCell(config?.headerIcon ?? 'fa:square-caret-down', config?.headerLabel),
+  renderBody: (items: MaybeArray<string>) => h(VtsCollapsedListCell, { items: toArray(items) }),
+}))

package/lib/tables/column-definitions/date-column.ts

@@ -0,0 +1,34 @@
+import VtsRelativeTime from '@core/components/relative-time/VtsRelativeTime.vue'
+import { defineColumn } from '@core/packages/table/define-column'
+import { renderBodyCell } from '@core/tables/helpers/render-body-cell'
+import { renderHeadCell } from '@core/tables/helpers/render-head-cell'
+import type { HeaderConfig } from '@core/tables/types.ts'
+import type { DateLike } from '@vueuse/shared'
+import { h } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+type DateConfig = Pick<Intl.DateTimeFormatOptions, 'dateStyle' | 'timeStyle'>
+
+export const useDateColumn = defineColumn((config?: HeaderConfig & DateConfig) => {
+  const { d } = useI18n()
+
+  return {
+    renderHead: () => renderHeadCell(config?.headerIcon ?? 'fa:calendar', config?.headerLabel),
+    renderBody: (date?: DateLike, options?: { relative?: boolean }) => {
+      return renderBodyCell(() => {
+        if (date === undefined) {
+          return undefined
+        }
+
+        if (options?.relative) {
+          return h(VtsRelativeTime, { date })
+        }
+
+        return d(date, {
+          dateStyle: config?.dateStyle,
+          timeStyle: config?.timeStyle,
+        })
+      })
+    },
+  }
+})

package/lib/tables/column-definitions/info-column.ts

@@ -0,0 +1,12 @@
+import type { InfoAccent } from '@core/components/ui/info/UiInfo.vue'
+import UiInfo from '@core/components/ui/info/UiInfo.vue'
+import { defineColumn } from '@core/packages/table/define-column'
+import { renderBodyCell } from '@core/tables/helpers/render-body-cell'
+import { renderHeadCell } from '@core/tables/helpers/render-head-cell'
+import type { HeaderConfig } from '@core/tables/types.ts'
+import { h } from 'vue'
+
+export const useInfoColumn = defineColumn((config?: HeaderConfig) => ({
+  renderHead: () => renderHeadCell(config?.headerIcon ?? 'fa:square-caret-down', config?.headerLabel),
+  renderBody: (label: string, accent: InfoAccent) => renderBodyCell(() => h(UiInfo, { accent }, () => label)),
+}))

package/lib/tables/column-definitions/input-column.ts

@@ -0,0 +1,32 @@
+import UiInput, { type InputType } from '@core/components/ui/input/UiInput.vue'
+import { defineColumn } from '@core/packages/table/define-column'
+import { renderBodyCell } from '@core/tables/helpers/render-body-cell'
+import { renderHeadCell } from '@core/tables/helpers/render-head-cell'
+import type { HeaderConfig } from '@core/tables/types.ts'
+import { h, toValue, type MaybeRefOrGetter, type Ref } from 'vue'
+
+type InputConfig = {
+  placeholder?: MaybeRefOrGetter<string | undefined>
+  type?: MaybeRefOrGetter<InputType | undefined>
+}
+
+export const useInputColumn = defineColumn((config?: HeaderConfig & InputConfig) => ({
+  renderHead: () =>
+    renderHeadCell(
+      config?.headerIcon ?? (config?.type === 'number' ? 'fa:hashtag' : 'fa:align-left'),
+      config?.headerLabel
+    ),
+  renderBody: (model: Ref<string | number>, inputProps?: { disabled?: boolean }) =>
+    renderBodyCell(() =>
+      h(UiInput, {
+        accent: 'brand',
+        placeholder: toValue(config?.placeholder),
+        type: toValue(config?.type),
+        ...inputProps,
+        modelValue: toValue(model),
+        'onUpdate:modelValue': (value: string | number) => {
+          model.value = value
+        },
+      })
+    ),
+}))

package/lib/tables/column-definitions/link-column.ts

@@ -0,0 +1,14 @@
+import VtsLinkCell, { type VtsLinkCellProps } from '@core/components/table/cells/VtsLinkCell.vue'
+import { defineColumn } from '@core/packages/table/define-column'
+import { renderHeadCell } from '@core/tables/helpers/render-head-cell'
+import type { HeaderConfig } from '@core/tables/types.ts'
+import { h } from 'vue'
+
+export const useLinkColumn = defineColumn((config?: HeaderConfig) => ({
+  renderHead: () => renderHeadCell(config?.headerIcon ?? 'fa:a', config?.headerLabel),
+  renderBody: (link: { label: string } & VtsLinkCellProps) => {
+    const { label, ...linkCellProps } = link
+
+    return h(VtsLinkCell, linkCellProps, () => label)
+  },
+}))

package/lib/tables/column-definitions/literal-column.ts

@@ -0,0 +1,9 @@
+import { defineColumn } from '@core/packages/table/define-column'
+import { renderBodyCell } from '@core/tables/helpers/render-body-cell'
+import { renderHeadCell } from '@core/tables/helpers/render-head-cell'
+import type { HeaderConfig } from '@core/tables/types.ts'
+
+export const useLiteralColumn = defineColumn((config?: HeaderConfig) => ({
+  renderHead: () => renderHeadCell(config?.headerIcon ?? 'fa:square-caret-down', config?.headerLabel),
+  renderBody: (value: any) => renderBodyCell(() => value),
+}))

package/lib/tables/column-definitions/number-column.ts

@@ -0,0 +1,10 @@
+import VtsNumberCell from '@core/components/table/cells/VtsNumberCell.vue'
+import { defineColumn } from '@core/packages/table/define-column'
+import { renderHeadCell } from '@core/tables/helpers/render-head-cell'
+import type { HeaderConfig } from '@core/tables/types.ts'
+import { h } from 'vue'
+
+export const useNumberColumn = defineColumn((headerConfig?: HeaderConfig) => ({
+  renderHead: () => renderHeadCell(headerConfig?.headerIcon ?? 'fa:hashtag', headerConfig?.headerLabel),
+  renderBody: (number?: number | string, unit?: string) => h(VtsNumberCell, { unit }, () => number),
+}))

package/lib/tables/column-definitions/percent-column.ts

@@ -0,0 +1,15 @@
+import VtsNumberCell from '@core/components/table/cells/VtsNumberCell.vue'
+import { defineColumn } from '@core/packages/table/define-column'
+import { renderHeadCell } from '@core/tables/helpers/render-head-cell'
+import type { HeaderConfig } from '@core/tables/types.ts'
+import { h } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+export const usePercentColumn = defineColumn((headerConfig?: HeaderConfig) => {
+  const { n } = useI18n()
+
+  return {
+    renderHead: () => renderHeadCell(headerConfig?.headerIcon ?? 'fa:hashtag', headerConfig?.headerLabel),
+    renderBody: (number: number) => h(VtsNumberCell, () => n(number, 'percent')),
+  }
+})

package/lib/tables/column-definitions/progress-bar-column.ts

@@ -0,0 +1,10 @@
+import VtsProgressBarCell from '@core/components/table/cells/VtsProgressBarCell.vue'
+import { defineColumn } from '@core/packages/table/define-column'
+import { renderHeadCell } from '@core/tables/helpers/render-head-cell'
+import type { HeaderConfig } from '@core/tables/types.ts'
+import { h } from 'vue'
+
+export const useProgressBarColumn = defineColumn((config?: HeaderConfig) => ({
+  renderHead: () => renderHeadCell(config?.headerIcon ?? 'fa:hashtag', config?.headerLabel),
+  renderBody: (current: number, total: number) => h(VtsProgressBarCell, { current, total }),
+}))

package/lib/tables/column-definitions/select-column.ts

@@ -0,0 +1,12 @@
+import VtsSelect from '@core/components/select/VtsSelect.vue'
+import type { FormSelectId } from '@core/packages/form-select/types.ts'
+import { defineColumn } from '@core/packages/table/define-column.ts'
+import { renderBodyCell } from '@core/tables/helpers/render-body-cell'
+import { renderHeadCell } from '@core/tables/helpers/render-head-cell'
+import type { HeaderConfig } from '@core/tables/types.ts'
+import { h } from 'vue'
+
+export const useSelectColumn = defineColumn((config?: HeaderConfig) => ({
+  renderHead: () => renderHeadCell(config?.headerIcon, config?.headerLabel),
+  renderBody: (id: FormSelectId) => renderBodyCell(() => h(VtsSelect, { accent: 'brand', id })),
+}))

package/lib/tables/column-definitions/select-item-column.ts

@@ -0,0 +1,8 @@
+import { useButtonIconColumn } from '@core/tables/column-definitions/button-icon-column.ts'
+import type { HeaderConfig } from '@core/tables/types.ts'
+
+export const useSelectItemColumn = (config?: HeaderConfig) =>
+  useButtonIconColumn({
+    buttonIcon: 'fa:eye',
+    ...config,
+  })

package/lib/tables/column-definitions/status-column.ts

@@ -0,0 +1,16 @@
+import VtsStatusCell, { type StatusCellProps } from '@core/components/table/cells/VtsStatusCell.vue'
+import { defineColumn } from '@core/packages/table/define-column'
+import { renderHeadCell } from '@core/tables/helpers/render-head-cell'
+import type { HeaderConfig } from '@core/tables/types.ts'
+import { h } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+export const useStatusColumn = defineColumn((config?: HeaderConfig & Omit<StatusCellProps, 'status'>) => {
+  const { t } = useI18n()
+  const { headerIcon, headerLabel, ...statusCellProps } = config ?? {}
+
+  return {
+    renderHead: () => renderHeadCell(headerIcon ?? 'fa:square-caret-down', headerLabel ?? t('status')),
+    renderBody: (status: StatusCellProps['status']) => h(VtsStatusCell, { status, ...statusCellProps }),
+  }
+})

package/lib/tables/column-definitions/tag-column.ts

@@ -0,0 +1,11 @@
+import VtsTagCell from '@core/components/table/cells/VtsTagCell.vue'
+import { defineColumn } from '@core/packages/table/define-column'
+import { renderHeadCell } from '@core/tables/helpers/render-head-cell'
+import type { HeaderConfig } from '@core/tables/types.ts'
+import type { MaybeArray } from '@core/types/utility.type'
+import { h } from 'vue'
+
+export const useTagColumn = defineColumn((config?: HeaderConfig) => ({
+  renderHead: () => renderHeadCell(config?.headerIcon ?? 'fa:square-caret-down', config?.headerLabel),
+  renderBody: (tag: MaybeArray<string>) => h(VtsTagCell, { tag }),
+}))

package/lib/tables/column-definitions/text-column.ts

@@ -0,0 +1,11 @@
+import type { TextCellProps } from '@core/components/table/cells/VtsTextCell.vue'
+import VtsTextCell from '@core/components/table/cells/VtsTextCell.vue'
+import { defineColumn } from '@core/packages/table/define-column.ts'
+import { renderHeadCell } from '@core/tables/helpers/render-head-cell.ts'
+import type { HeaderConfig } from '@core/tables/types.ts'
+import { h } from 'vue'
+
+export const useTextColumn = defineColumn((config?: HeaderConfig) => ({
+  renderHead: () => renderHeadCell(config?.headerIcon, config?.headerLabel),
+  renderBody: (content: string, props?: TextCellProps) => h(VtsTextCell, props, () => content),
+}))

package/lib/tables/column-definitions/truncated-text-column.ts

@@ -0,0 +1,10 @@
+import VtsTruncatedTextCell from '@core/components/table/cells/VtsTruncatedTextCell.vue'
+import { defineColumn } from '@core/packages/table/define-column.ts'
+import { renderHeadCell } from '@core/tables/helpers/render-head-cell.ts'
+import type { HeaderConfig } from '@core/tables/types.ts'
+import { h } from 'vue'
+
+export const useTruncatedTextColumn = defineColumn((config?: HeaderConfig & { limit?: number }) => ({
+  renderHead: () => renderHeadCell(config?.headerIcon ?? 'fa:align-left', config?.headerLabel),
+  renderBody: (content: string) => h(VtsTruncatedTextCell, { content, limit: config?.limit }),
+}))

package/lib/tables/column-sets/backup-issue-columns.ts

@@ -0,0 +1,15 @@
+import { defineColumns } from '@core/packages/table/define-columns.ts'
+import { useLinkColumn } from '@core/tables/column-definitions/link-column'
+import { useStatusColumn } from '@core/tables/column-definitions/status-column.ts'
+import { useI18n } from 'vue-i18n'
+
+export const useBackupIssueColumns = defineColumns(() => {
+  const { t } = useI18n()
+
+  return {
+    job: useLinkColumn({ headerIcon: 'fa:floppy-disk', headerLabel: () => t('job-name') }),
+    lastRun: useStatusColumn({ headerIcon: 'fa:square-caret-down', headerLabel: () => t('last') }),
+    secondLastRun: useStatusColumn({ headerIcon: 'fa:square-caret-down', headerLabel: () => t('2nd-last') }),
+    thirdLastRun: useStatusColumn({ headerIcon: 'fa:square-caret-down', headerLabel: () => t('3rd-last') }),
+  }
+})

package/lib/tables/column-sets/backup-job-columns.ts

@@ -0,0 +1,23 @@
+import { defineColumns } from '@core/packages/table/define-columns.ts'
+import { useCollapsedListColumn } from '@core/tables/column-definitions/collapsed-list-column.ts'
+import { useLinkColumn } from '@core/tables/column-definitions/link-column'
+import { useNumberColumn } from '@core/tables/column-definitions/number-column.ts'
+import { useSelectItemColumn } from '@core/tables/column-definitions/select-item-column.ts'
+import { useStatusColumn } from '@core/tables/column-definitions/status-column.ts'
+import { useI18n } from 'vue-i18n'
+
+export const useBackupJobColumns = defineColumns(() => {
+  const { t } = useI18n()
+
+  return {
+    job: useLinkColumn({ headerLabel: t('job-name') }),
+    mode: useCollapsedListColumn({ headerLabel: t('mode') }),
+    lastRuns: useStatusColumn({
+      headerLabel: t('last-n-runs', { n: 3 }),
+      iconOnly: true,
+      progressiveSize: true,
+    }),
+    schedules: useNumberColumn({ headerLabel: t('total-schedules') }),
+    selectItem: useSelectItemColumn(),
+  }
+})

package/lib/tables/column-sets/backup-job-schedule-columns.ts

@@ -0,0 +1,21 @@
+import { defineColumns } from '@core/packages/table/define-columns.ts'
+import { useLinkColumn } from '@core/tables/column-definitions/link-column'
+import { useStatusColumn } from '@core/tables/column-definitions/status-column.ts'
+import { useTextColumn } from '@core/tables/column-definitions/text-column.ts'
+import { useI18n } from 'vue-i18n'
+
+export const useBackupJobScheduleColumns = defineColumns(() => {
+  const { t } = useI18n()
+
+  return {
+    schedule: useLinkColumn({ headerLabel: () => t('schedule') }),
+    id: useTextColumn({ headerLabel: () => t('id'), headerIcon: 'fa:hashtag' }),
+    status: useStatusColumn(),
+    cronPattern: useTextColumn({ headerLabel: () => t('cron-pattern'), headerIcon: 'fa:clock' }),
+    lastThreeRuns: useStatusColumn({
+      headerLabel: () => t('last-n-runs', { n: 3 }),
+      iconOnly: true,
+      progressiveSize: true,
+    }),
+  }
+})

package/lib/tables/column-sets/backup-log-columns.ts

@@ -0,0 +1,19 @@
+import { defineColumns } from '@core/packages/table/define-columns.ts'
+import { useDateColumn } from '@core/tables/column-definitions/date-column.ts'
+import { useNumberColumn } from '@core/tables/column-definitions/number-column.ts'
+import { useSelectItemColumn } from '@core/tables/column-definitions/select-item-column'
+import { useStatusColumn } from '@core/tables/column-definitions/status-column.ts'
+import { useI18n } from 'vue-i18n'
+
+export const useBackupLogsColumns = defineColumns(() => {
+  const { t } = useI18n()
+
+  return {
+    startDate: useDateColumn({ headerLabel: () => t('start-date'), dateStyle: 'short', timeStyle: 'medium' }),
+    endDate: useDateColumn({ headerLabel: () => t('end-date'), dateStyle: 'short', timeStyle: 'medium' }),
+    duration: useNumberColumn({ headerIcon: 'fa:time', headerLabel: () => t('duration') }),
+    status: useStatusColumn(),
+    transferSize: useNumberColumn({ headerLabel: () => t('transfer-size') }),
+    selectItem: useSelectItemColumn(),
+  }
+})

package/lib/tables/column-sets/host-columns.ts

@@ -0,0 +1,19 @@
+import { defineColumns } from '@core/packages/table/define-columns.ts'
+import { useAddressColumn } from '@core/tables/column-definitions/address-column.ts'
+import { useLinkColumn } from '@core/tables/column-definitions/link-column'
+import { useSelectItemColumn } from '@core/tables/column-definitions/select-item-column'
+import { useTagColumn } from '@core/tables/column-definitions/tag-column.ts'
+import { useTruncatedTextColumn } from '@core/tables/column-definitions/truncated-text-column'
+import { useI18n } from 'vue-i18n'
+
+export const useHostColumns = defineColumns(() => {
+  const { t } = useI18n()
+
+  return {
+    host: useLinkColumn({ headerLabel: () => t('host') }),
+    description: useTruncatedTextColumn({ headerLabel: () => t('description') }),
+    ipAddresses: useAddressColumn({ headerLabel: () => t('ip-addresses') }),
+    tags: useTagColumn({ headerLabel: () => t('tags') }),
+    selectItem: useSelectItemColumn(),
+  }
+})

package/lib/tables/column-sets/network-columns.ts

@@ -0,0 +1,22 @@
+import { defineColumns } from '@core/packages/table/define-columns.ts'
+import { useLinkColumn } from '@core/tables/column-definitions/link-column'
+import { useNumberColumn } from '@core/tables/column-definitions/number-column.ts'
+import { useSelectItemColumn } from '@core/tables/column-definitions/select-item-column'
+import { useStatusColumn } from '@core/tables/column-definitions/status-column.ts'
+import { useTextColumn } from '@core/tables/column-definitions/text-column.ts'
+import { useTruncatedTextColumn } from '@core/tables/column-definitions/truncated-text-column'
+import { useI18n } from 'vue-i18n'
+
+export const useNetworkColumns = defineColumns(() => {
+  const { t } = useI18n()
+
+  return {
+    network: useLinkColumn({ headerLabel: () => t('name') }),
+    description: useTruncatedTextColumn({ headerLabel: () => t('description') }),
+    status: useStatusColumn({ headerLabel: () => t('status') }),
+    vlan: useNumberColumn({ headerLabel: () => t('vlan') }),
+    mtu: useNumberColumn({ headerLabel: () => t('mtu') }),
+    defaultLockingMode: useTextColumn({ headerLabel: () => t('default-locking-mode') }),
+    selectItem: useSelectItemColumn(),
+  }
+})

package/lib/tables/column-sets/new-vm-network-columns.ts

@@ -0,0 +1,24 @@
+import { defineColumns } from '@core/packages/table/define-columns.ts'
+import { useButtonIconColumn } from '@core/tables/column-definitions/button-icon-column.ts'
+import { useInputColumn } from '@core/tables/column-definitions/input-column.ts'
+import { useSelectColumn } from '@core/tables/column-definitions/select-column.ts'
+import { useI18n } from 'vue-i18n'
+
+export const useNewVmNetworkColumns = defineColumns(() => {
+  const { t } = useI18n()
+
+  return {
+    interface: useSelectColumn({
+      headerLabel: () => t('interfaces'),
+      headerIcon: 'fa:network-wired',
+    }),
+
+    mac: useInputColumn({
+      headerLabel: () => t('mac-addresses'),
+      headerIcon: 'fa:at',
+      placeholder: () => t('auto-generated'),
+    }),
+
+    remove: useButtonIconColumn({ buttonIcon: 'fa:trash' }),
+  }
+})

package/lib/tables/column-sets/new-vm-sr-columns.ts

@@ -0,0 +1,33 @@
+import { defineColumns } from '@core/packages/table/define-columns.ts'
+import { useButtonIconColumn } from '@core/tables/column-definitions/button-icon-column.ts'
+import { useInputColumn } from '@core/tables/column-definitions/input-column.ts'
+import { useSelectColumn } from '@core/tables/column-definitions/select-column.ts'
+import { useI18n } from 'vue-i18n'
+
+export const useNewVmSrColumns = defineColumns(() => {
+  const { t } = useI18n()
+
+  return {
+    sr: useSelectColumn({
+      headerLabel: () => t('storage-repositories'),
+      headerIcon: 'fa:database',
+    }),
+
+    diskName: useInputColumn({
+      headerLabel: () => t('disk-name'),
+      placeholder: () => t('disk-name'),
+    }),
+
+    size: useInputColumn({
+      type: 'number',
+      headerLabel: () => `${t('size')} (GB)`,
+    }),
+
+    description: useInputColumn({
+      headerLabel: () => t('description'),
+      placeholder: () => t('description'),
+    }),
+
+    remove: useButtonIconColumn({ buttonIcon: 'fa:trash' }),
+  }
+})

package/lib/tables/column-sets/patch-columns.ts

@@ -0,0 +1,13 @@
+import { defineColumns } from '@core/packages/table/define-columns.ts'
+import { useNumberColumn } from '@core/tables/column-definitions/number-column.ts'
+import { useTextColumn } from '@core/tables/column-definitions/text-column.ts'
+import { useI18n } from 'vue-i18n'
+
+export const usePatchColumns = defineColumns(() => {
+  const { t } = useI18n()
+
+  return {
+    name: useTextColumn({ headerLabel: () => t('patch-name') }),
+    version: useNumberColumn({ headerLabel: () => t('version') }),
+  }
+})

package/lib/tables/column-sets/pif-columns.ts

@@ -0,0 +1,23 @@
+import { defineColumns } from '@core/packages/table/define-columns.ts'
+import { useAddressColumn } from '@core/tables/column-definitions/address-column.ts'
+import { useLinkColumn } from '@core/tables/column-definitions/link-column'
+import { useNumberColumn } from '@core/tables/column-definitions/number-column.ts'
+import { useSelectItemColumn } from '@core/tables/column-definitions/select-item-column'
+import { useStatusColumn } from '@core/tables/column-definitions/status-column.ts'
+import { useTextColumn } from '@core/tables/column-definitions/text-column.ts'
+import { useI18n } from 'vue-i18n'
+
+export const usePifColumns = defineColumns(() => {
+  const { t } = useI18n()
+
+  return {
+    network: useLinkColumn({ headerLabel: () => t('network') }),
+    device: useTextColumn({ headerLabel: () => t('device') }),
+    status: useStatusColumn({ headerLabel: () => t('status') }),
+    vlan: useNumberColumn({ headerLabel: () => t('vlan') }),
+    ip: useAddressColumn({ headerLabel: () => t('ip-address') }),
+    mac: useAddressColumn({ headerLabel: () => t('mac-address') }),
+    mode: useTextColumn({ headerLabel: () => t('mode') }),
+    selectItem: useSelectItemColumn(),
+  }
+})

package/lib/tables/column-sets/server-columns.ts

@@ -0,0 +1,18 @@
+import { defineColumns } from '@core/packages/table/define-columns.ts'
+import { useAddressColumn } from '@core/tables/column-definitions/address-column.ts'
+import { useLinkColumn } from '@core/tables/column-definitions/link-column'
+import { useSelectItemColumn } from '@core/tables/column-definitions/select-item-column'
+import { useStatusColumn } from '@core/tables/column-definitions/status-column.ts'
+import { useI18n } from 'vue-i18n'
+
+export const useServerColumns = defineColumns(() => {
+  const { t } = useI18n()
+
+  return {
+    pool: useLinkColumn({ headerLabel: () => t('pool') }),
+    hostIp: useAddressColumn({ headerLabel: () => t('ip-address') }),
+    status: useStatusColumn({ headerLabel: () => t('status') }),
+    primaryHost: useLinkColumn({ headerLabel: () => t('master'), headerIcon: 'fa:server' }),
+    selectItem: useSelectItemColumn(),
+  }
+})

package/lib/tables/column-sets/sr-columns.ts

@@ -0,0 +1,20 @@
+import { defineColumns } from '@core/packages/table/define-columns.ts'
+import { useLinkColumn } from '@core/tables/column-definitions/link-column'
+import { useLiteralColumn } from '@core/tables/column-definitions/literal-column.ts'
+import { useProgressBarColumn } from '@core/tables/column-definitions/progress-bar-column.ts'
+import { useSelectItemColumn } from '@core/tables/column-definitions/select-item-column'
+import { useTruncatedTextColumn } from '@core/tables/column-definitions/truncated-text-column'
+import { useI18n } from 'vue-i18n'
+
+export const useSrColumns = defineColumns(() => {
+  const { t } = useI18n()
+
+  return {
+    storageRepository: useLinkColumn({ headerLabel: () => t('storage-repository') }),
+    description: useTruncatedTextColumn({ headerLabel: () => t('description') }),
+    storageFormat: useLiteralColumn({ headerLabel: () => t('storage-format') }),
+    accessMode: useLiteralColumn({ headerLabel: () => t('access-mode') }),
+    usedSpace: useProgressBarColumn({ headerLabel: () => t('used-space') }),
+    selectItem: useSelectItemColumn(),
+  }
+})

package/lib/tables/column-sets/vdi-columns.ts

@@ -0,0 +1,21 @@
+import { defineColumns } from '@core/packages/table/define-columns.ts'
+import { useLinkColumn } from '@core/tables/column-definitions/link-column.ts'
+import { useLiteralColumn } from '@core/tables/column-definitions/literal-column.ts'
+import { useNumberColumn } from '@core/tables/column-definitions/number-column.ts'
+import { useProgressBarColumn } from '@core/tables/column-definitions/progress-bar-column.ts'
+import { useSelectItemColumn } from '@core/tables/column-definitions/select-item-column.ts'
+import { useTruncatedTextColumn } from '@core/tables/column-definitions/truncated-text-column.ts'
+import { useI18n } from 'vue-i18n'
+
+export const useVdiColumns = defineColumns(() => {
+  const { t } = useI18n()
+
+  return {
+    vdi: useLinkColumn({ headerLabel: () => t('vdis') }),
+    description: useTruncatedTextColumn({ headerLabel: () => t('description') }),
+    usedSpace: useProgressBarColumn({ headerLabel: () => t('used-space') }),
+    size: useNumberColumn({ headerLabel: () => t('size') }),
+    format: useLiteralColumn({ headerLabel: () => t('format') }),
+    selectItem: useSelectItemColumn(),
+  }
+})

package/lib/tables/column-sets/vif-columns.ts

@@ -0,0 +1,23 @@
+import { defineColumns } from '@core/packages/table/define-columns.ts'
+import { useAddressColumn } from '@core/tables/column-definitions/address-column.ts'
+import { useLinkColumn } from '@core/tables/column-definitions/link-column'
+import { useNumberColumn } from '@core/tables/column-definitions/number-column.ts'
+import { useSelectItemColumn } from '@core/tables/column-definitions/select-item-column'
+import { useStatusColumn } from '@core/tables/column-definitions/status-column.ts'
+import { useTextColumn } from '@core/tables/column-definitions/text-column.ts'
+import { useI18n } from 'vue-i18n'
+
+export const useVifColumns = defineColumns(() => {
+  const { t } = useI18n()
+
+  return {
+    network: useLinkColumn({ headerLabel: () => t('network') }),
+    device: useTextColumn({ headerLabel: () => t('device') }),
+    status: useStatusColumn({ headerLabel: () => t('status') }),
+    ipsAddresses: useAddressColumn({ headerLabel: () => t('ip-addresses') }),
+    macAddresses: useAddressColumn({ headerLabel: () => t('mac-addresses') }),
+    mtu: useNumberColumn({ headerLabel: () => t('mtu') }),
+    lockingMode: useTextColumn({ headerLabel: () => t('locking-mode') }),
+    selectItem: useSelectItemColumn(),
+  }
+})

package/lib/tables/column-sets/vm-columns.ts

@@ -0,0 +1,21 @@
+import { defineColumns } from '@core/packages/table/define-columns.ts'
+import { useAddressColumn } from '@core/tables/column-definitions/address-column.ts'
+import { useLinkColumn } from '@core/tables/column-definitions/link-column'
+import { useNumberColumn } from '@core/tables/column-definitions/number-column.ts'
+import { useSelectItemColumn } from '@core/tables/column-definitions/select-item-column'
+import { useTagColumn } from '@core/tables/column-definitions/tag-column.ts'
+import { useI18n } from 'vue-i18n'
+
+export const useVmColumns = defineColumns(() => {
+  const { t } = useI18n()
+
+  return {
+    vm: useLinkColumn({ headerLabel: () => t('vm') }),
+    ipAddresses: useAddressColumn({ headerLabel: () => t('ip-addresses') }),
+    vcpus: useNumberColumn({ headerLabel: () => t('vcpus') }),
+    ram: useNumberColumn({ headerLabel: () => t('ram') }),
+    diskSpace: useNumberColumn({ headerLabel: () => t('disk-space') }),
+    tags: useTagColumn({ headerLabel: () => t('tags') }),
+    selectItem: useSelectItemColumn(),
+  }
+})

package/lib/tables/helpers/render-body-cell.ts

@@ -0,0 +1,4 @@
+import UiTableCell, { type TableCellAlign } from '@core/components/ui/table-cell/UiTableCell.vue'
+import { h } from 'vue'
+
+export const renderBodyCell = (content?: () => any, align?: TableCellAlign) => h(UiTableCell, { align }, content)

package/lib/tables/helpers/render-head-cell.ts

@@ -0,0 +1,6 @@
+import VtsHeaderCell from '@core/components/table/cells/VtsHeaderCell.vue'
+import type { IconName } from '@core/icons/index.ts'
+import { h, toValue, type MaybeRefOrGetter } from 'vue'
+
+export const renderHeadCell = (icon?: MaybeRefOrGetter<IconName>, label?: MaybeRefOrGetter<string | undefined>) =>
+  h(VtsHeaderCell, { icon: toValue(icon) }, () => toValue(label))

package/lib/tables/helpers/render-loading-cell.ts

@@ -0,0 +1,5 @@
+import UiLoader from '@core/components/ui/loader/UiLoader.vue'
+import UiTableCell from '@core/components/ui/table-cell/UiTableCell.vue'
+import { h } from 'vue'
+
+export const renderLoadingCell = () => h(UiTableCell, { align: 'center' }, () => h(UiLoader))