@xen-orchestra/web-core 0.35.1 → 0.36.0

package/lib/{composables → packages}/tree/tree-node-base.ts

@@ -1,5 +1,5 @@
-import type { Branch } from '@core/composables/tree/branch'
-import type { Identifiable, Labeled, TreeContext, TreeNodeId, TreeNodeOptions } from '@core/composables/tree/types'
+import type { Branch } from '@core/packages/tree/branch'
+import type { Identifiable, Labeled, TreeContext, TreeNodeId, TreeNodeOptions } from '@core/packages/tree/types'
 
 export abstract class TreeNodeBase<TData extends object = any, TDiscriminator = any> {
   abstract readonly isBranch: boolean
@@ -7,6 +7,7 @@ export abstract class TreeNodeBase<TData extends object = any, TDiscriminator =
   abstract isExcluded: boolean
   abstract statuses: Record<string, boolean>
 
+  readonly treeId: string
   readonly data: TData
   readonly depth: number
   readonly parent: Branch | undefined
@@ -14,12 +15,14 @@ export abstract class TreeNodeBase<TData extends object = any, TDiscriminator =
   readonly options: TreeNodeOptions<TData, TDiscriminator>
 
   constructor(
+    treeId: string,
     data: TData,
     parent: Branch | undefined,
     context: TreeContext,
     depth: number,
     options?: TreeNodeOptions<TData, TDiscriminator>
   ) {
+    this.treeId = treeId
     this.data = data
     this.parent = parent
     this.context = context
@@ -27,7 +30,7 @@ export abstract class TreeNodeBase<TData extends object = any, TDiscriminator =
     this.options = options ?? ({} as TreeNodeOptions<TData, TDiscriminator>)
   }
 
-  get id(): TreeNodeId {
+  get dataId(): TreeNodeId {
     if (this.options.getId === undefined) {
       return (this.data as Identifiable).id
     }
@@ -39,6 +42,18 @@ export abstract class TreeNodeBase<TData extends object = any, TDiscriminator =
     return this.data[this.options.getId as keyof TData] as TreeNodeId
   }
 
+  get id(): TreeNodeId {
+    const parts = [this.dataId, this.treeId]
+    let currentParent = this.parent
+
+    while (currentParent) {
+      parts.push(currentParent.treeId)
+      currentParent = currentParent.parent
+    }
+
+    return parts.reverse().join('.')
+  }
+
   get label() {
     if (this.options.getLabel === undefined) {
       return (this.data as Labeled).label

package/lib/{composables → packages}/tree/tree-node-definition-base.ts

@@ -1,11 +1,13 @@
-import type { TreeNodeOptions } from '@core/composables/tree/types'
+import type { TreeNodeOptions } from '@core/packages/tree/types'
 
 export abstract class TreeNodeDefinitionBase<TData extends object, TDiscriminator> {
   abstract readonly isBranch: boolean
+  readonly treeId: string
   data: TData
   options: TreeNodeOptions<TData, TDiscriminator>
 
-  constructor(data: TData, options: TreeNodeOptions<TData, TDiscriminator>) {
+  constructor(treeId: string, data: TData, options: TreeNodeOptions<TData, TDiscriminator>) {
+    this.treeId = treeId
     this.data = data
     this.options = options
   }

package/lib/{composables → packages}/tree/types.ts

@@ -1,9 +1,10 @@
-import type { Branch } from '@core/composables/tree/branch'
-import type { BranchDefinition } from '@core/composables/tree/branch-definition'
-import type { Leaf } from '@core/composables/tree/leaf'
-import type { LeafDefinition } from '@core/composables/tree/leaf-definition'
-import type { TreeNodeBase } from '@core/composables/tree/tree-node-base'
-import { useTree } from '@core/composables/tree.composable'
+import type { Branch } from '@core/packages/tree/branch'
+import type { BranchDefinition } from '@core/packages/tree/branch-definition'
+import type { Leaf } from '@core/packages/tree/leaf'
+import type { LeafDefinition } from '@core/packages/tree/leaf-definition'
+import type { TreeNodeBase } from '@core/packages/tree/tree-node-base'
+import { useTree } from '@core/packages/tree/use-tree'
+import type { Ref } from 'vue'
 
 export type TreeNodeId = string | number
 
@@ -62,13 +63,14 @@ export type ChildTreeDefinitionGetter<TData extends object, TChildDefinition ext
 export type TreeContext = {
   allowMultiSelect: boolean
   selectedIds: Set<TreeNodeId>
-  expandedIds: Set<TreeNodeId>
+  collapsedIds: Set<TreeNodeId>
   activeId: TreeNodeId | undefined
 }
 
 export type UseTreeOptions = {
   allowMultiSelect?: boolean
-  expand?: boolean
+  collapse?: boolean
+  collapsedIds?: Ref<Set<TreeNodeId>>
   selectedLabel?:
     | ((nodes: TreeNode[]) => string)
     | {
@@ -88,5 +90,5 @@ export type LeafStatuses = {
 export type BranchStatuses = LeafStatuses & {
   'selected-partial': boolean
   'selected-full': boolean
-  expanded: boolean
+  collapsed: boolean
 }

package/lib/{composables/tree.composable.ts → packages/tree/use-tree.ts}

@@ -1,4 +1,4 @@
-import { buildNodes } from '@core/composables/tree/build-nodes'
+import { buildNodes } from '@core/packages/tree/build-nodes'
 import type {
   DefinitionToTreeNode,
   TreeContext,
@@ -6,7 +6,7 @@ import type {
   TreeNodeDefinition,
   TreeNodeId,
   UseTreeOptions,
-} from '@core/composables/tree/types'
+} from '@core/packages/tree/types'
 import { computed, type MaybeRefOrGetter, reactive, ref, toValue } from 'vue'
 
 export function useTree<
@@ -14,21 +14,21 @@ export function useTree<
   TTreeNode extends DefinitionToTreeNode<TDefinition> = DefinitionToTreeNode<TDefinition>,
 >(definitions: MaybeRefOrGetter<TDefinition[]>, options: UseTreeOptions = {}) {
   const selectedIds = ref(new Set<TreeNodeId>())
-  const expandedIds = ref(new Set<TreeNodeId>())
+  const collapsedIds = options.collapsedIds ?? ref(new Set<TreeNodeId>())
   const activeId = ref<TreeNodeId>()
 
   const context = reactive({
     allowMultiSelect: options.allowMultiSelect ?? false,
     selectedIds,
-    expandedIds,
+    collapsedIds,
     activeId,
-  }) as TreeContext
+  }) satisfies TreeContext
 
   const nodes = computed(() => {
     const nodes = buildNodes<TDefinition, TTreeNode>(toValue(definitions), context)
 
-    if (options.expand !== false) {
-      nodes.forEach(node => node.isBranch && node.toggleExpand(true, true))
+    if (options.collapse) {
+      nodes.forEach(node => node.isBranch && node.toggleCollapse(true, true))
     }
 
     return nodes
@@ -52,11 +52,24 @@ export function useTree<
 
   const visibleNodes = computed(() => nodes.value.filter(node => !node.isExcluded))
 
-  const getNode = (id: TreeNodeId | undefined) => (id !== undefined ? nodesMap.value.get(id) : undefined)
-  const getNodes = (ids: TreeNodeId[]) => ids.map(getNode).filter(node => node !== undefined) as TreeNode[]
+  function getNode(id: TreeNodeId | undefined): TreeNode | undefined {
+    if (id === undefined) {
+      return undefined
+    }
+
+    return nodesMap.value.get(id)
+  }
+
+  const selectedNodes = computed(() =>
+    Array.from(selectedIds.value.values())
+      .map(id => getNode(id))
+      .filter(node => node !== undefined)
+  )
+
+  const expandedIds = computed(() => Array.from(nodesMap.value.keys()).filter(id => !collapsedIds.value.has(id)))
+
+  const expandedNodes = computed(() => expandedIds.value.map(id => getNode(id)).filter(node => node !== undefined))
 
-  const selectedNodes = computed(() => getNodes(Array.from(selectedIds.value.values())))
-  const expandedNodes = computed(() => getNodes(Array.from(expandedIds.value.values())))
   const activeNode = computed(() => getNode(activeId.value))
 
   const selectedLabel = computed(() => {

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

@@ -0,0 +1,4 @@
+import { useCollapsedListColumn } from '@core/tables/column-definitions/collapsed-list-column.ts'
+import type { HeaderConfig } from '@core/tables/types.ts'
+
+export const useAddressColumn = (config?: HeaderConfig) => useCollapsedListColumn({ headerIcon: 'fa:at', ...config })

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

@@ -0,0 +1,35 @@
+import UiButton, {
+  type ButtonAccent,
+  type ButtonProps,
+  type ButtonVariant,
+  type ButtonSize,
+} from '@core/components/ui/button/UiButton.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 } from 'vue'
+
+type ButtonConfig = {
+  buttonAccent?: MaybeRefOrGetter<ButtonAccent>
+  buttonVariant?: MaybeRefOrGetter<ButtonVariant>
+  buttonSize?: MaybeRefOrGetter<ButtonSize>
+}
+
+export const useButtonColumn = defineColumn((config?: HeaderConfig & ButtonConfig) => ({
+  renderHead: () => renderHeadCell(config?.headerIcon, config?.headerLabel),
+  renderBody: (label: string, onClick: () => void, props?: Partial<ButtonProps>) =>
+    renderBodyCell(() =>
+      h(
+        UiButton,
+        {
+          accent: toValue(config?.buttonAccent) ?? 'brand',
+          variant: toValue(config?.buttonVariant) ?? 'primary',
+          size: toValue(config?.buttonSize) ?? 'medium',
+          ...props,
+          onClick,
+        },
+        () => label
+      )
+    ),
+}))

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(),
+  }
+})