diff --git a/@xen-orchestra/backups-cli/package.json b/@xen-orchestra/backups-cli/package.json index 7610e16a83a..f968afbf124 100644 --- a/@xen-orchestra/backups-cli/package.json +++ b/@xen-orchestra/backups-cli/package.json @@ -7,7 +7,7 @@ "bugs": "https://github.com/vatesfr/xen-orchestra/issues", "dependencies": { "@xen-orchestra/async-map": "^0.1.2", - "@xen-orchestra/backups": "^0.53.0", + "@xen-orchestra/backups": "^0.53.1", "@xen-orchestra/fs": "^4.1.7", "filenamify": "^6.0.0", "getopts": "^2.2.5", diff --git a/@xen-orchestra/backups/_runners/_vmRunners/_AbstractXapi.mjs b/@xen-orchestra/backups/_runners/_vmRunners/_AbstractXapi.mjs index 8151cd251ce..a7dcc6340a0 100644 --- a/@xen-orchestra/backups/_runners/_vmRunners/_AbstractXapi.mjs +++ b/@xen-orchestra/backups/_runners/_vmRunners/_AbstractXapi.mjs @@ -290,7 +290,7 @@ export const AbstractXapi = class AbstractXapiVmBackupRunner extends Abstract { for (const vdiRef of vdiRefs) { try { // data_destroy will fail with a VDI_NO_CBT_METADATA error if CBT is not enabled on this VDI - await this._xapi.call('VDI.data_destroy', vdiRef) + await this._xapi.VDI_dataDestroy(vdiRef) Task.info(`Snapshot data has been deleted`, { vdiRef }) } catch (error) { Task.warning(`Couldn't deleted snapshot data`, { error, vdiRef }) diff --git a/@xen-orchestra/backups/package.json b/@xen-orchestra/backups/package.json index 12794202d63..3dad129a9b6 100644 --- a/@xen-orchestra/backups/package.json +++ b/@xen-orchestra/backups/package.json @@ -8,7 +8,7 @@ "type": "git", "url": "https://github.com/vatesfr/xen-orchestra.git" }, - "version": "0.53.0", + "version": "0.53.1", "engines": { "node": ">=14.18" }, @@ -59,7 +59,7 @@ "tmp": "^0.2.1" }, "peerDependencies": { - "@xen-orchestra/xapi": "^7.3.0" + "@xen-orchestra/xapi": "^7.4.0" }, "license": "AGPL-3.0-or-later", "author": { diff --git a/@xen-orchestra/immutable-backups/package.json b/@xen-orchestra/immutable-backups/package.json index b41e05f2016..884643944c1 100644 --- a/@xen-orchestra/immutable-backups/package.json +++ b/@xen-orchestra/immutable-backups/package.json @@ -23,7 +23,7 @@ }, "dependencies": { "@vates/async-each": "^1.0.0", - "@xen-orchestra/backups": "^0.53.0", + "@xen-orchestra/backups": "^0.53.1", "@xen-orchestra/log": "^0.6.0", "app-conf": "^3.0.0", "chokidar": "^3.5.3", diff --git a/@xen-orchestra/lite/src/stories/web-core/state-hero/no-data-hero.story.vue b/@xen-orchestra/lite/src/stories/web-core/state-hero/no-data-hero.story.vue new file mode 100644 index 00000000000..fff487c0574 --- /dev/null +++ b/@xen-orchestra/lite/src/stories/web-core/state-hero/no-data-hero.story.vue @@ -0,0 +1,14 @@ + + + diff --git a/@xen-orchestra/proxy/package.json b/@xen-orchestra/proxy/package.json index 04ee06bd052..3d28923c1c3 100644 --- a/@xen-orchestra/proxy/package.json +++ b/@xen-orchestra/proxy/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "@xen-orchestra/proxy", - "version": "0.28.13", + "version": "0.28.14", "license": "AGPL-3.0-or-later", "description": "XO Proxy used to remotely execute backup jobs", "keywords": [ @@ -33,13 +33,13 @@ "@vates/disposable": "^0.1.5", "@vates/task": "^0.4.0", "@xen-orchestra/async-map": "^0.1.2", - "@xen-orchestra/backups": "^0.53.0", + "@xen-orchestra/backups": "^0.53.1", "@xen-orchestra/fs": "^4.1.7", "@xen-orchestra/log": "^0.6.0", "@xen-orchestra/mixin": "^0.1.0", "@xen-orchestra/mixins": "^0.16.0", "@xen-orchestra/self-signed": "^0.2.1", - "@xen-orchestra/xapi": "^7.3.0", + "@xen-orchestra/xapi": "^7.4.0", "ajv": "^8.0.3", "app-conf": "^3.0.0", "async-iterator-to-stream": "^1.1.0", diff --git a/@xen-orchestra/web-core/docs/composables/table.composable.md b/@xen-orchestra/web-core/docs/composables/table.composable.md new file mode 100644 index 00000000000..01ff3756697 --- /dev/null +++ b/@xen-orchestra/web-core/docs/composables/table.composable.md @@ -0,0 +1,159 @@ +# `useTable` composable + +## Usage + +```ts +const { columns, visibleColumns, rows, columnsById } = useTable('', records, { + rowId: record => record.id, + columns: define => [ + define('', { label: 'Column 1' }), + define('', { label: 'Column 2' }), + define('', { label: 'Column 3' }), + ], +}) +``` + +## `useTable` options + +| Name | Type | Required | Description | +| --------- | ---------------------------------------------- | :------: | ------------------------------------------------- | +| `rowId` | `(record: TRecord) => string` | ✓ | A function that define the id of a row. | +| `columns` | `(define: DefineColumn) => ColumnDefinition[]` | ✓ | A function that defines the columns of the table. | + +## Defining a column + +```ts +define('', options) // TValue will be TRecord[TColumnId] +define('', ``, options) // TValue will be TRecord[TProperty] +define('', (record: TRecord) => '', options) // TValue will be the result of the function +``` + +### Column options + +| Name | Type | Required | Default | Description | +| ------------ | ---------------------------------- | :------: | ------- | -------------------------------------- | +| `label` | `string` | ✓ | | The column label. | +| `isHideable` | `boolean` | | `true` | Indicates if the column can be hidden. | +| `compareFn` | `(a: TValue, b: TValue) => number` | | | A function used to compare the values. | + +## `columns` + +An array containing all columns defined in the table. + +### Properties of a column + +| Name | Type | Description | +| ------------ | ----------------------------- | ------------------------------------------------ | +| `id` | `string` | The column id. | +| `label` | `string` | The column label. | +| `isVisible` | `boolean` | Indicates if the column is visible. | +| `getter` | `(record: TRecord) => TValue` | A function that returns the value of the column. | +| `isSortable` | `boolean` | Indicates if the column is sortable. | +| `isHideable` | `boolean` | Indicates if the column is hideable. | + +#### If `isSortable` is `true` + +| Name | Type | Description | +| --------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------- | +| `compareFn` | `(a: TValue, b: TValue) => number` | The compare function defined in the column options. | +| `isSorted` | `boolean` | Indicates if the column is sorted. | +| `isSortedAsc` | `boolean` | Indicates if the column is sorted in ascending order. | +| `isSortedDesc` | `boolean` | Indicates if the column is sorted in descending order. | +| `sort` | `(direction, toggleOffIfSameDirection?) => void` | A function that sorts the rows based on the column values. | +|  ⤷ `direction` | `'asc' \| 'desc' \| false` | The sort direction. If `false`, the column is unsorted. | +|  ⤷ `toggleOffIfSameDirection` | `boolean` | Indicates if the column should be unsorted if it is already sorted in the same direction. | +| `sortAsc` | `(toggleOffIfSameDirection?) => void` | A function that sorts the rows based on the column values in ascending order. | +|  ⤷ `toggleOffIfSameDirection` | `boolean` | Indicates if the column should be unsorted if it is already sorted in ascending order. | +| `sortDesc` | `(toggleOffIfSameDirection?) => void` | A function that sorts the rows based on the column values in descending order. | +|  ⤷ `toggleOffIfSameDirection` | `boolean` | Indicates if the column should be unsorted if it is already sorted in descending order. | + +#### If `isHideable` is `true` + +| Name | Type | Description | +| -------------------- | --------------------------- | ------------------------------------------------------------------------------- | +| `hide` | `() => void` | A function that hides the column. | +| `show` | `() => void` | A function that shows the column. | +| `toggle` | `(value?: boolean) => void` | A function that toggles the visibility of the column. | +|  ⤷ `value` | `boolean \| undefined` | If undefined, the visibility will be toggled. Else it will be set to the value. | + +## `visibleColumns` + +Same as `columns` but only contains the visible columns. + +## `rows` + +An array containing all rows of the table. + +### Properties of a row + +| Name | Type | Description | +| ---------------- | ---------- | ------------------------------- | +| `id` | `string` | The row id. | +| `value` | `TRecord` | The record of the row. | +| `visibleColumns` | `Column[]` | The visible columns of the row. | + +#### `visibleColumns` + +An array containing the visible columns of the row. + +##### Properties of a row column + +| Name | Type | Description | +| ------- | -------- | ------------------------ | +| `id` | `string` | The column id. | +| `value` | `TValue` | The value of the column. | + +## `columnsById` + +An object containing all columns defined in the table indexed by their id. + +## Example + +```vue + + + +``` diff --git a/@xen-orchestra/web-core/lib/assets/css/_colors-legacy.pcss b/@xen-orchestra/web-core/lib/assets/css/_colors-legacy.pcss new file mode 100644 index 00000000000..61d6aedd6d5 --- /dev/null +++ b/@xen-orchestra/web-core/lib/assets/css/_colors-legacy.pcss @@ -0,0 +1,125 @@ +:root { + --color-logo: #282467; + + --color-grey-000: #000000; + --color-grey-100: #1a1b38; + --color-grey-200: #595a6f; + --color-grey-300: #9899a5; + --color-grey-400: #bfbfc6; + --color-grey-500: #e5e5e7; + --color-grey-600: #ffffff; + + --background-color-primary: #ffffff; + --background-color-secondary: #f6f6f7; + + --color-purple-base: #8f84ff; + --color-purple-d20: color(#8f84ff blend(black 20%)); + --color-purple-d40: color(#8f84ff blend(black 40%)); + --color-purple-d60: color(#8f84ff blend(black 60%)); + --color-purple-l20: color(#8f84ff blend(white 20%)); + --color-purple-l40: color(#8f84ff blend(white 40%)); + --color-purple-l60: color(#8f84ff blend(white 60%)); + --background-color-purple-10: color(white blend(#8f84ff 10%)); + --background-color-purple-20: color(white blend(#8f84ff 20%)); + --background-color-purple-30: color(white blend(#8f84ff 30%)); + --background-color-purple-60: color(white blend(#8f84ff 60%)); + + --color-green-base: #2ca878; + --color-green-d20: color(#2ca878 blend(black 20%)); + --color-green-d40: color(#2ca878 blend(black 40%)); + --color-green-d60: color(#2ca878 blend(black 60%)); + --color-green-l20: color(#2ca878 blend(white 20%)); + --color-green-l40: color(#2ca878 blend(white 40%)); + --color-green-l60: color(#2ca878 blend(white 60%)); + --background-color-green-10: color(white blend(#2ca878 10%)); + --background-color-green-20: color(white blend(#2ca878 20%)); + --background-color-green-30: color(white blend(#2ca878 30%)); + --background-color-green-60: color(white blend(#2ca878 60%)); + + --color-orange-base: #ef7f18; + --color-orange-d20: color(#ef7f18 blend(black 20%)); + --color-orange-d40: color(#ef7f18 blend(black 40%)); + --color-orange-d60: color(#ef7f18 blend(black 60%)); + --color-orange-l20: color(#ef7f18 blend(white 20%)); + --color-orange-l40: color(#ef7f18 blend(white 40%)); + --color-orange-l60: color(#ef7f18 blend(white 60%)); + --background-color-orange-10: color(white blend(#ef7f18 10%)); + --background-color-orange-20: color(white blend(#ef7f18 20%)); + --background-color-orange-30: color(white blend(#ef7f18 30%)); + --background-color-orange-60: color(white blend(#ef7f18 60%)); + + --color-red-base: #be1621; + --color-red-d20: color(#be1621 blend(black 20%)); + --color-red-d40: color(#be1621 blend(black 40%)); + --color-red-d60: color(#be1621 blend(black 60%)); + --color-red-l20: color(#be1621 blend(white 20%)); + --color-red-l40: color(#be1621 blend(white 40%)); + --color-red-l60: color(#be1621 blend(white 60%)); + --background-color-red-10: color(white blend(#be1621 10%)); + --background-color-red-20: color(white blend(#be1621 20%)); + --background-color-red-30: color(white blend(#be1621 30%)); + --background-color-red-60: color(white blend(#be1621 60%)); +} + +:root.dark { + --color-logo: #e5e5e7; + + --color-grey-000: #ffffff; + --color-grey-100: #e5e5e7; + --color-grey-200: #bfbfc6; + --color-grey-300: #9899a5; + --color-grey-400: #595a6f; + --color-grey-500: #3a3b54; + --color-grey-600: #000000; + + --background-color-primary: #14141e; + --background-color-secondary: #17182b; + + --color-purple-base: #8f84ff; + --color-purple-d20: color(#8f84ff blend(white 20%)); + --color-purple-d40: color(#8f84ff blend(white 40%)); + --color-purple-d60: color(#8f84ff blend(white 60%)); + --color-purple-l20: color(#8f84ff blend(black 20%)); + --color-purple-l40: color(#8f84ff blend(black 40%)); + --color-purple-l60: color(#8f84ff blend(black 60%)); + --background-color-purple-10: color(#17182b blend(#8f84ff 25%)); + --background-color-purple-20: color(#17182b blend(#8f84ff 35%)); + --background-color-purple-30: color(#17182b blend(#8f84ff 45%)); + --background-color-purple-60: color(#17182b blend(#8f84ff 85%)); + + --color-green-base: #2ca878; + --color-green-d20: color(#2ca878 blend(white 20%)); + --color-green-d40: color(#2ca878 blend(white 40%)); + --color-green-d60: color(#2ca878 blend(white 60%)); + --color-green-l20: color(#2ca878 blend(black 20%)); + --color-green-l40: color(#2ca878 blend(black 40%)); + --color-green-l60: color(#2ca878 blend(black 60%)); + --background-color-green-10: color(#17182b blend(#2ca878 25%)); + --background-color-green-20: color(#17182b blend(#2ca878 35%)); + --background-color-green-30: color(#17182b blend(#2ca878 45%)); + --background-color-green-60: color(#17182b blend(#2ca878 85%)); + + --color-orange-base: #ef7f18; + --color-orange-d20: color(#ef7f18 blend(white 20%)); + --color-orange-d40: color(#ef7f18 blend(white 40%)); + --color-orange-d60: color(#ef7f18 blend(white 60%)); + --color-orange-l20: color(#ef7f18 blend(black 20%)); + --color-orange-l40: color(#ef7f18 blend(black 40%)); + --color-orange-l60: color(#ef7f18 blend(black 60%)); + --background-color-orange-10: color(#17182b blend(#ef7f18 25%)); + --background-color-orange-20: color(#17182b blend(#ef7f18 35%)); + --background-color-orange-30: color(#17182b blend(#ef7f18 45%)); + --background-color-orange-60: color(#17182b blend(#ef7f18 85%)); + + --color-red-base: #be1621; + --color-red-d20: color(#be1621 blend(white 20%)); + --color-red-d40: color(#be1621 blend(white 40%)); + --color-red-d60: color(#be1621 blend(white 60%)); + --color-red-l20: color(#be1621 blend(black 20%)); + --color-red-l40: color(#be1621 blend(black 40%)); + --color-red-l60: color(#be1621 blend(black 60%)); + --background-color-red-10: color(#17182b blend(#be1621 25%)); + --background-color-red-20: color(#17182b blend(#be1621 35%)); + --background-color-red-30: color(#17182b blend(#be1621 45%)); + --background-color-red-60: color(#17182b blend(#be1621 85%)); +} diff --git a/@xen-orchestra/web-core/lib/assets/css/_colors.pcss b/@xen-orchestra/web-core/lib/assets/css/_colors.pcss index 61d6aedd6d5..af90c5233d2 100644 --- a/@xen-orchestra/web-core/lib/assets/css/_colors.pcss +++ b/@xen-orchestra/web-core/lib/assets/css/_colors.pcss @@ -1,125 +1,157 @@ :root { --color-logo: #282467; - --color-grey-000: #000000; - --color-grey-100: #1a1b38; - --color-grey-200: #595a6f; - --color-grey-300: #9899a5; - --color-grey-400: #bfbfc6; - --color-grey-500: #e5e5e7; - --color-grey-600: #ffffff; - - --background-color-primary: #ffffff; - --background-color-secondary: #f6f6f7; - - --color-purple-base: #8f84ff; - --color-purple-d20: color(#8f84ff blend(black 20%)); - --color-purple-d40: color(#8f84ff blend(black 40%)); - --color-purple-d60: color(#8f84ff blend(black 60%)); - --color-purple-l20: color(#8f84ff blend(white 20%)); - --color-purple-l40: color(#8f84ff blend(white 40%)); - --color-purple-l60: color(#8f84ff blend(white 60%)); - --background-color-purple-10: color(white blend(#8f84ff 10%)); - --background-color-purple-20: color(white blend(#8f84ff 20%)); - --background-color-purple-30: color(white blend(#8f84ff 30%)); - --background-color-purple-60: color(white blend(#8f84ff 60%)); - - --color-green-base: #2ca878; - --color-green-d20: color(#2ca878 blend(black 20%)); - --color-green-d40: color(#2ca878 blend(black 40%)); - --color-green-d60: color(#2ca878 blend(black 60%)); - --color-green-l20: color(#2ca878 blend(white 20%)); - --color-green-l40: color(#2ca878 blend(white 40%)); - --color-green-l60: color(#2ca878 blend(white 60%)); - --background-color-green-10: color(white blend(#2ca878 10%)); - --background-color-green-20: color(white blend(#2ca878 20%)); - --background-color-green-30: color(white blend(#2ca878 30%)); - --background-color-green-60: color(white blend(#2ca878 60%)); - - --color-orange-base: #ef7f18; - --color-orange-d20: color(#ef7f18 blend(black 20%)); - --color-orange-d40: color(#ef7f18 blend(black 40%)); - --color-orange-d60: color(#ef7f18 blend(black 60%)); - --color-orange-l20: color(#ef7f18 blend(white 20%)); - --color-orange-l40: color(#ef7f18 blend(white 40%)); - --color-orange-l60: color(#ef7f18 blend(white 60%)); - --background-color-orange-10: color(white blend(#ef7f18 10%)); - --background-color-orange-20: color(white blend(#ef7f18 20%)); - --background-color-orange-30: color(white blend(#ef7f18 30%)); - --background-color-orange-60: color(white blend(#ef7f18 60%)); - - --color-red-base: #be1621; - --color-red-d20: color(#be1621 blend(black 20%)); - --color-red-d40: color(#be1621 blend(black 40%)); - --color-red-d60: color(#be1621 blend(black 60%)); - --color-red-l20: color(#be1621 blend(white 20%)); - --color-red-l40: color(#be1621 blend(white 40%)); - --color-red-l60: color(#be1621 blend(white 60%)); - --background-color-red-10: color(white blend(#be1621 10%)); - --background-color-red-20: color(white blend(#be1621 20%)); - --background-color-red-30: color(white blend(#be1621 30%)); - --background-color-red-60: color(white blend(#be1621 60%)); + /* NEUTRALS */ + + --color-neutral-txt-primary: #1a1b38; + --color-neutral-txt-secondary: #5a5b6c; + + --color-neutral-background-primary: #ffffff; + --color-neutral-background-secondary: #f8f8f8; + --color-neutral-background-disabled: #e4e4e7; + + --color-neutral-border: #d0d0d5; + + /* NORMAL */ + + --color-normal-txt-base: #6b63bf; + --color-normal-txt-hover: color-mix(in srgb, #000000 20%, var(--color-normal-txt-base)); + --color-normal-txt-active: color-mix(in srgb, #000000 40%, var(--color-normal-txt-base)); + + --color-normal-background-selected: color-mix(in srgb, #ffffff 90%, var(--color-normal-item-base)); + --color-normal-background-hover: color-mix(in srgb, #ffffff 80%, var(--color-normal-item-base)); + --color-normal-background-active: color-mix(in srgb, #ffffff 70%, var(--color-normal-item-base)); + + --color-normal-txt-item: #030029; + --color-normal-item-base: #8f84ff; + --color-normal-item-hover: color-mix(in srgb, #ffffff 20%, var(--color-normal-item-base)); + --color-normal-item-active: color-mix(in srgb, #ffffff 40%, var(--color-normal-item-base)); + --color-normal-item-disabled: #d2ceff; + + /* SUCCESS */ + + --color-success-txt-base: #217e5a; + --color-success-txt-hover: color-mix(in srgb, #000000 20%, var(--color-success-txt-base)); + --color-success-txt-active: color-mix(in srgb, #000000 40%, var(--color-success-txt-base)); + + --color-success-background-selected: color-mix(in srgb, #ffffff 90%, var(--color-success-item-base)); + --color-success-background-hover: color-mix(in srgb, #ffffff 80%, var(--color-success-item-base)); + --color-success-background-active: color-mix(in srgb, #ffffff 70%, var(--color-success-item-base)); + + --color-success-txt-item: #092017; + --color-success-item-base: #2ca878; + --color-success-item-hover: color-mix(in srgb, #ffffff 20%, var(--color-success-item-base)); + --color-success-item-active: color-mix(in srgb, #ffffff 40%, var(--color-success-item-base)); + --color-success-item-disabled: #abdcc9; + + /* WARNING */ + + --color-warning-txt-base: #aa5b11; + --color-warning-txt-hover: color-mix(in srgb, #000000 20%, var(--color-warning-txt-base)); + --color-warning-txt-active: color-mix(in srgb, #000000 40%, var(--color-warning-txt-base)); + + --color-warning-background-selected: color-mix(in srgb, #ffffff 90%, var(--color-warning-item-base)); + --color-warning-background-hover: color-mix(in srgb, #ffffff 80%, var(--color-warning-item-base)); + --color-warning-background-active: color-mix(in srgb, #ffffff 70%, var(--color-warning-item-base)); + + --color-warning-txt-item: #261403; + --color-warning-item-base: #ef7f18; + --color-warning-item-hover: color-mix(in srgb, #ffffff 20%, var(--color-warning-item-base)); + --color-warning-item-active: color-mix(in srgb, #ffffff 40%, var(--color-warning-item-base)); + --color-warning-item-disabled: #f9cca3; + + /* DANGER */ + + --color-danger-txt-base: #a11d1d; + --color-danger-txt-hover: color-mix(in srgb, #000000 20%, var(--color-danger-txt-base)); + --color-danger-txt-active: color-mix(in srgb, #000000 40%, var(--color-danger-txt-base)); + + --color-danger-background-selected: color-mix(in srgb, #ffffff 90%, var(--color-danger-item-base)); + --color-danger-background-hover: color-mix(in srgb, #ffffff 80%, var(--color-danger-item-base)); + --color-danger-background-active: color-mix(in srgb, #ffffff 70%, var(--color-danger-item-base)); + + --color-danger-txt-item: #fff0f1; + --color-danger-item-base: #be1621; + --color-danger-item-hover: color-mix(in srgb, #000000 20%, var(--color-danger-item-base)); + --color-danger-item-active: color-mix(in srgb, #000000 40%, var(--color-danger-item-base)); + --color-danger-item-disabled: #e5a2a6; } :root.dark { --color-logo: #e5e5e7; - --color-grey-000: #ffffff; - --color-grey-100: #e5e5e7; - --color-grey-200: #bfbfc6; - --color-grey-300: #9899a5; - --color-grey-400: #595a6f; - --color-grey-500: #3a3b54; - --color-grey-600: #000000; - - --background-color-primary: #14141e; - --background-color-secondary: #17182b; - - --color-purple-base: #8f84ff; - --color-purple-d20: color(#8f84ff blend(white 20%)); - --color-purple-d40: color(#8f84ff blend(white 40%)); - --color-purple-d60: color(#8f84ff blend(white 60%)); - --color-purple-l20: color(#8f84ff blend(black 20%)); - --color-purple-l40: color(#8f84ff blend(black 40%)); - --color-purple-l60: color(#8f84ff blend(black 60%)); - --background-color-purple-10: color(#17182b blend(#8f84ff 25%)); - --background-color-purple-20: color(#17182b blend(#8f84ff 35%)); - --background-color-purple-30: color(#17182b blend(#8f84ff 45%)); - --background-color-purple-60: color(#17182b blend(#8f84ff 85%)); - - --color-green-base: #2ca878; - --color-green-d20: color(#2ca878 blend(white 20%)); - --color-green-d40: color(#2ca878 blend(white 40%)); - --color-green-d60: color(#2ca878 blend(white 60%)); - --color-green-l20: color(#2ca878 blend(black 20%)); - --color-green-l40: color(#2ca878 blend(black 40%)); - --color-green-l60: color(#2ca878 blend(black 60%)); - --background-color-green-10: color(#17182b blend(#2ca878 25%)); - --background-color-green-20: color(#17182b blend(#2ca878 35%)); - --background-color-green-30: color(#17182b blend(#2ca878 45%)); - --background-color-green-60: color(#17182b blend(#2ca878 85%)); - - --color-orange-base: #ef7f18; - --color-orange-d20: color(#ef7f18 blend(white 20%)); - --color-orange-d40: color(#ef7f18 blend(white 40%)); - --color-orange-d60: color(#ef7f18 blend(white 60%)); - --color-orange-l20: color(#ef7f18 blend(black 20%)); - --color-orange-l40: color(#ef7f18 blend(black 40%)); - --color-orange-l60: color(#ef7f18 blend(black 60%)); - --background-color-orange-10: color(#17182b blend(#ef7f18 25%)); - --background-color-orange-20: color(#17182b blend(#ef7f18 35%)); - --background-color-orange-30: color(#17182b blend(#ef7f18 45%)); - --background-color-orange-60: color(#17182b blend(#ef7f18 85%)); - - --color-red-base: #be1621; - --color-red-d20: color(#be1621 blend(white 20%)); - --color-red-d40: color(#be1621 blend(white 40%)); - --color-red-d60: color(#be1621 blend(white 60%)); - --color-red-l20: color(#be1621 blend(black 20%)); - --color-red-l40: color(#be1621 blend(black 40%)); - --color-red-l60: color(#be1621 blend(black 60%)); - --background-color-red-10: color(#17182b blend(#be1621 25%)); - --background-color-red-20: color(#17182b blend(#be1621 35%)); - --background-color-red-30: color(#17182b blend(#be1621 45%)); - --background-color-red-60: color(#17182b blend(#be1621 85%)); + /* NEUTRALS */ + + --color-neutral-txt-primary: #f8f8f8; + --color-neutral-txt-secondary: #bfbfc6; + + --color-neutral-background-primary: #111225; + --color-neutral-background-secondary: #000000; + --color-neutral-background-disabled: #4b4c5b; + + --color-neutral-border: #363647; + + /* NORMAL */ + + --color-normal-txt-base: #9b92ff; + --color-normal-txt-hover: color-mix(in srgb, #ffffff 20%, var(--color-normal-txt-base)); + --color-normal-txt-active: color-mix(in srgb, #ffffff 40%, var(--color-normal-txt-base)); + + --color-normal-background-selected: color-mix(in srgb, #000000 70%, var(--color-normal-txt-base)); + --color-normal-background-hover: color-mix(in srgb, #000000 60%, var(--color-normal-txt-base)); + --color-normal-background-active: color-mix(in srgb, #000000 50%, var(--color-normal-txt-base)); + + --color-normal-txt-item: #030029; + --color-normal-item-base: #8f84ff; + --color-normal-item-hover: color-mix(in srgb, #ffffff 20%, var(--color-normal-item-base)); + --color-normal-item-active: color-mix(in srgb, #ffffff 40%, var(--color-normal-item-base)); + --color-normal-item-disabled: #393566; + + /* SUCCESS */ + + --color-success-txt-base: #2ca878; + --color-success-txt-hover: color-mix(in srgb, #ffffff 20%, var(--color-success-txt-base)); + --color-success-txt-active: color-mix(in srgb, #ffffff 40%, var(--color-success-txt-base)); + + --color-success-background-selected: color-mix(in srgb, #000000 70%, var(--color-success-txt-base)); + --color-success-background-hover: color-mix(in srgb, #000000 60%, var(--color-success-txt-base)); + --color-success-background-active: color-mix(in srgb, #000000 50%, var(--color-success-txt-base)); + + --color-success-txt-item: #092017; + --color-success-item-base: #2ca878; + --color-success-item-hover: color-mix(in srgb, #ffffff 20%, var(--color-success-item-base)); + --color-success-item-active: color-mix(in srgb, #ffffff 40%, var(--color-success-item-base)); + --color-success-item-disabled: #124330; + + /* WARNING */ + + --color-warning-txt-base: #ef7f18; + --color-warning-txt-hover: color-mix(in srgb, #ffffff 20%, var(--color-warning-txt-base)); + --color-warning-txt-active: color-mix(in srgb, #ffffff 40%, var(--color-warning-txt-base)); + + --color-warning-background-selected: color-mix(in srgb, #000000 70%, var(--color-warning-txt-base)); + --color-warning-background-hover: color-mix(in srgb, #000000 60%, var(--color-warning-txt-base)); + --color-warning-background-active: color-mix(in srgb, #000000 50%, var(--color-warning-txt-base)); + + --color-warning-txt-item: #261403; + --color-warning-item-base: #ef7f18; + --color-warning-item-hover: color-mix(in srgb, #ffffff 20%, var(--color-warning-item-base)); + --color-warning-item-active: color-mix(in srgb, #ffffff 40%, var(--color-warning-item-base)); + --color-warning-item-disabled: #60330a; + + /* DANGER */ + + --color-danger-txt-base: #ec535d; + --color-danger-txt-hover: color-mix(in srgb, #ffffff 20%, var(--color-danger-txt-base)); + --color-danger-txt-active: color-mix(in srgb, #ffffff 40%, var(--color-danger-txt-base)); + + --color-danger-background-selected: color-mix(in srgb, #000000 70%, var(--color-danger-txt-base)); + --color-danger-background-hover: color-mix(in srgb, #000000 60%, var(--color-danger-txt-base)); + --color-danger-background-active: color-mix(in srgb, #000000 50%, var(--color-danger-txt-base)); + + --color-danger-txt-item: #fff0f1; + --color-danger-item-base: #be1621; + --color-danger-item-hover: color-mix(in srgb, #000000 20%, var(--color-danger-item-base)); + --color-danger-item-active: color-mix(in srgb, #000000 40%, var(--color-danger-item-base)); + --color-danger-item-disabled: #4c090d; } diff --git a/@xen-orchestra/web-core/lib/assets/css/_context.pcss b/@xen-orchestra/web-core/lib/assets/css/_context.pcss index c9787fbdb42..649c541a7f9 100644 --- a/@xen-orchestra/web-core/lib/assets/css/_context.pcss +++ b/@xen-orchestra/web-core/lib/assets/css/_context.pcss @@ -1,99 +1,99 @@ .context-color-success { - color: var(--color-green-base); + color: var(--color-success-txt-base); } .context-color-error { - color: var(--color-red-base); + color: var(--color-danger-txt-base); } .context-color-warning { - color: var(--color-orange-base); + color: var(--color-warning-txt-base); } .context-color-info { - color: var(--color-purple-base); + color: var(--color-normal-txt-base); } .context-background-color-success { - background-color: var(--background-color-green-10); + background-color: var(--color-success-background-selected); } .context-background-color-error { - background-color: var(--background-color-red-10); + background-color: var(--color-danger-background-selected); } .context-background-color-warning { - background-color: var(--background-color-orange-10); + background-color: var(--color-warning-background-selected); } .context-background-color-info { - background-color: var(--background-color-purple-10); + background-color: var(--color-normal-background-selected); } .context-border-color-success { - border-color: var(--color-green-base); + border-color: var(--color-success-txt-base); } .context-border-color-error { - border-color: var(--color-red-base); + border-color: var(--color-danger-txt-base); } .context-border-color-warning { - border-color: var(--color-orange-base); + border-color: var(--color-warning-txt-base); } .context-border-color-info { - border-color: var(--color-purple-base); + border-color: var(--color-normal-txt-base); } .color-context-info { - --color-context-primary: var(--color-purple-base); - --color-context-primary-hover: var(--color-purple-d20); - --color-context-primary-active: var(--color-purple-d40); - --color-context-primary-disabled: var(--color-grey-400); + --color-context-primary: var(--color-normal-txt-base); + --color-context-primary-hover: var(--color-normal-txt-hover); + --color-context-primary-active: var(--color-normal-txt-active); + --color-context-primary-disabled: var(--color-neutral-txt-secondary); - --color-context-secondary: var(--background-color-purple-10); - --color-context-secondary-hover: var(--background-color-purple-20); - --color-context-secondary-active: var(--background-color-purple-30); + --color-context-secondary: var(--color-normal-background-selected); + --color-context-secondary-hover: var(--color-normal-background-selected); + --color-context-secondary-active: var(--color-normal-background-active); - --color-context-tertiary: var(--background-color-primary); + --color-context-tertiary: var(--color-neutral-background-primary); } .color-context-success { - --color-context-primary: var(--color-green-base); - --color-context-primary-hover: var(--color-green-d20); - --color-context-primary-active: var(--color-green-d40); - --color-context-primary-disabled: var(--color-green-l60); + --color-context-primary: var(--color-success-txt-base); + --color-context-primary-hover: var(--color-success-txt-hover); + --color-context-primary-active: var(--color-success-txt-active); + --color-context-primary-disabled: var(--color-success-item-disabled); - --color-context-secondary: var(--background-color-green-10); - --color-context-secondary-hover: var(--background-color-green-20); - --color-context-secondary-active: var(--background-color-green-30); + --color-context-secondary: var(--color-success-background-selected); + --color-context-secondary-hover: var(--color-success-background-selected); + --color-context-secondary-active: var(--color-success-background-active); - --color-context-tertiary: var(--background-color-primary); + --color-context-tertiary: var(--color-neutral-background-primary); } .color-context-warning { - --color-context-primary: var(--color-orange-base); - --color-context-primary-hover: var(--color-orange-d20); - --color-context-primary-active: var(--color-orange-d40); - --color-context-primary-disabled: var(--color-orange-l60); + --color-context-primary: var(--color-warning-txt-base); + --color-context-primary-hover: var(--color-warning-txt-hover); + --color-context-primary-active: var(--color-warning-txt-active); + --color-context-primary-disabled: var(--color-warning-item-disabled); - --color-context-secondary: var(--background-color-orange-10); - --color-context-secondary-hover: var(--background-color-orange-20); - --color-context-secondary-active: var(--background-color-orange-30); + --color-context-secondary: var(--color-warning-background-selected); + --color-context-secondary-hover: var(--color-warning-background-selected); + --color-context-secondary-active: var(--color-warning-background-active); - --color-context-tertiary: var(--background-color-primary); + --color-context-tertiary: var(--color-neutral-background-primary); } .color-context-error { - --color-context-primary: var(--color-red-base); - --color-context-primary-hover: var(--color-red-d20); - --color-context-primary-active: var(--color-red-d40); - --color-context-primary-disabled: var(--color-red-l60); + --color-context-primary: var(--color-danger-txt-base); + --color-context-primary-hover: var(--color-danger-txt-hover); + --color-context-primary-active: var(--color-danger-txt-active); + --color-context-primary-disabled: var(--color-danger-item-disabled); - --color-context-secondary: var(--background-color-red-10); - --color-context-secondary-hover: var(--background-color-red-20); - --color-context-secondary-active: var(--background-color-red-30); + --color-context-secondary: var(--color-danger-background-selected); + --color-context-secondary-hover: var(--color-danger-background-selected); + --color-context-secondary-active: var(--color-danger-background-active); - --color-context-tertiary: var(--background-color-primary); + --color-context-tertiary: var(--color-neutral-background-primary); } diff --git a/@xen-orchestra/web-core/lib/assets/css/base.pcss b/@xen-orchestra/web-core/lib/assets/css/base.pcss index c8e437b64c5..0a1409b4da6 100644 --- a/@xen-orchestra/web-core/lib/assets/css/base.pcss +++ b/@xen-orchestra/web-core/lib/assets/css/base.pcss @@ -1,3 +1,4 @@ +@import '_colors-legacy.pcss'; @import '_colors.pcss'; @import '_reset.pcss'; @import '_fonts.pcss'; @@ -6,8 +7,8 @@ @import '_typography.pcss'; :root { - color: var(--color-grey-100); - background-color: var(--background-color-primary); + color: var(--color-neutral-txt-primary); + background-color: var(--color-neutral-background-primary); text-rendering: optimizeLegibility; font-weight: normal; -webkit-font-smoothing: antialiased; @@ -19,8 +20,8 @@ --scrollbar-width: 1.4rem; --scrollbar-border: 0.4rem; - --scrollbar-thumb-color: var(--color-purple-l40); - --scrollbar-track-color: var(--background-color-purple-10); + --scrollbar-thumb-color: var(--color-normal-item-active); + --scrollbar-track-color: var(--color-normal-background-selected); /* Firefox/Gecko and Chrome versions >= 121 */ scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color); @@ -44,7 +45,7 @@ } a { - color: var(--color-purple-base); + color: var(--color-normal-txt-base); } code, @@ -61,17 +62,17 @@ pre { .link { text-decoration: underline; - color: var(--color-purple-base); + color: var(--color-normal-txt-base); cursor: pointer; } .link:hover { - color: var(--color-purple-d20); + color: var(--color-normal-txt-hover); } .link:active, .link.router-link-active { - color: var(--color-purple-d40); + color: var(--color-normal-txt-active); } .link.router-link-active { diff --git a/@xen-orchestra/web-core/lib/assets/no-data.svg b/@xen-orchestra/web-core/lib/assets/no-data.svg new file mode 100644 index 00000000000..51810b35390 --- /dev/null +++ b/@xen-orchestra/web-core/lib/assets/no-data.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/@xen-orchestra/web-core/lib/components/backup-item/BackupItem.vue b/@xen-orchestra/web-core/lib/components/backup-item/BackupItem.vue index 88d093285e2..ceb40694912 100644 --- a/@xen-orchestra/web-core/lib/components/backup-item/BackupItem.vue +++ b/@xen-orchestra/web-core/lib/components/backup-item/BackupItem.vue @@ -1,9 +1,12 @@ @@ -34,22 +34,22 @@ const title = computed(() => ({ const segments = computed(() => [ { label: t('backups.jobs.running-good'), - value: record.value.backups?.jobs.successful ?? 0, + value: record.value?.backups?.jobs.successful ?? 0, color: 'success', }, { label: t('backups.jobs.at-least-one-skipped'), - value: record.value.backups?.jobs.skipped ?? 0, + value: record.value?.backups?.jobs.skipped ?? 0, color: 'primary', }, { label: t('backups.jobs.looks-like-issue'), - value: record.value.backups?.jobs.failed ?? 0, + value: record.value?.backups?.jobs.failed ?? 0, color: 'danger', }, { label: t('backups.jobs.disabled'), - value: record.value.backups?.jobs.disabled ?? 0, + value: record.value?.backups?.jobs.disabled ?? 0, color: 'disabled', }, ]) diff --git a/@xen-orchestra/web/src/components/site/dashboard/Patches.vue b/@xen-orchestra/web/src/components/site/dashboard/Patches.vue index 95e9e7cc53c..51d830d89ef 100644 --- a/@xen-orchestra/web/src/components/site/dashboard/Patches.vue +++ b/@xen-orchestra/web/src/components/site/dashboard/Patches.vue @@ -30,8 +30,8 @@ const poolsTitle: ComputedRef = computed(() })) const poolsSegments: ComputedRef = computed(() => { - const nPoolsWithMissingPatches = record.value.missingPatches?.nPoolsWithMissingPatches ?? 0 - const nPools = record.value.nPools + const nPoolsWithMissingPatches = record.value?.missingPatches?.nPoolsWithMissingPatches ?? 0 + const nPools = record.value?.nPools ?? 0 const nUpToDatePools = nPools - nPoolsWithMissingPatches @@ -46,11 +46,11 @@ const hostsTitle: ComputedRef = computed(() })) const hostsSegments = computed(() => { - const nHostsWithMissingPatches = record.value.missingPatches?.nHostsWithMissingPatches ?? 0 - const nHostsEol = record.value.nHostsEol - const nHosts = record.value.nHosts + const nHostsWithMissingPatches = record.value?.missingPatches?.nHostsWithMissingPatches ?? 0 + const nHostsEol = record.value?.nHostsEol + const nHosts = record.value?.nHosts - const nUpToDateHosts = nHosts - (nHostsWithMissingPatches + (nHostsEol ?? 0)) + const nUpToDateHosts = (nHosts ?? 0) - (nHostsWithMissingPatches + (nHostsEol ?? 0)) const segments: DonutChartWithLegendProps['segments'] = [ { value: nUpToDateHosts, color: 'success', label: t('up-to-date') }, diff --git a/@xen-orchestra/web/src/locales/en.json b/@xen-orchestra/web/src/locales/en.json index ce7304f2f9d..9b09ea81379 100644 --- a/@xen-orchestra/web/src/locales/en.json +++ b/@xen-orchestra/web/src/locales/en.json @@ -1,6 +1,7 @@ { "account-organization-more": "Account, organization & more…", "available": "Available", + "backup-issues": "Backup issues", "backups": "Backups", "backup-repository": "Backup repository (local, NFS)", @@ -24,6 +25,7 @@ "hosts-status.unknown": "Unknown", "hosts-status.unknown.tooltip": "Hosts metrics are unavailable", + "in-last-three-jobs": "In their last three jobs", "missing-patches": "Missing patches", "n-hosts": "1 host | {n} hosts", "no-results": "No results", diff --git a/@xen-orchestra/web/src/locales/fr.json b/@xen-orchestra/web/src/locales/fr.json index 9379735a792..28d8dbb26dd 100644 --- a/@xen-orchestra/web/src/locales/fr.json +++ b/@xen-orchestra/web/src/locales/fr.json @@ -1,6 +1,7 @@ { "account-organization-more": "Compte, organisation et plus…", "available": "Disponible", + "backup-issues": "Problèmes de sauvegarde", "backups": "Sauvegardes", "backup-repository": "Dépot de sauvegarde (local, NFS)", @@ -24,6 +25,7 @@ "hosts-status.unknown": "Inconnu", "hosts-status.unknown.tooltip": "Les métriques de l'hôte sont inaccessibles", + "in-last-three-jobs": "Dans leurs trois derniers jobs", "missing-patches": "Patches manquants", "n-hosts": "1 hôte | {n} hôtes", "no-results": "Aucun résultat", diff --git a/@xen-orchestra/web/src/pages/dev/colors.vue b/@xen-orchestra/web/src/pages/dev/colors.vue new file mode 100644 index 00000000000..3c9e1f6f843 --- /dev/null +++ b/@xen-orchestra/web/src/pages/dev/colors.vue @@ -0,0 +1,105 @@ + + + + + diff --git a/@xen-orchestra/web/src/pages/index.vue b/@xen-orchestra/web/src/pages/index.vue index e73a5c48cfb..7136c5392d3 100644 --- a/@xen-orchestra/web/src/pages/index.vue +++ b/@xen-orchestra/web/src/pages/index.vue @@ -3,12 +3,14 @@ +