From 073f3086008539847fc7cf0a02881227bf0e27e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastian=20Czech?= Date: Fri, 15 Nov 2024 15:03:14 +0100 Subject: [PATCH 01/18] feat(xo-6): implement network view --- @xen-orchestra/web-core/lib/locales/en.json | 11 + @xen-orchestra/web-core/lib/locales/fr.json | 11 + .../web/src/components/host/HostHeader.vue | 6 +- .../web/src/pages/host/[id]/network.vue | 294 ++++++++++++++++++ @xen-orchestra/web/typed-router.d.ts | 1 + 5 files changed, 322 insertions(+), 1 deletion(-) create mode 100644 @xen-orchestra/web/src/pages/host/[id]/network.vue diff --git a/@xen-orchestra/web-core/lib/locales/en.json b/@xen-orchestra/web-core/lib/locales/en.json index 0fcf39c7b56..c89061d8069 100644 --- a/@xen-orchestra/web-core/lib/locales/en.json +++ b/@xen-orchestra/web-core/lib/locales/en.json @@ -44,13 +44,19 @@ "access-forum": "Access forum", "dashboard": "Dashboard", + "device": "Device", + "edit": "Edit", + "delete": "Delete", "documentation-name": "{name} documentation", "exit-fullscreen": "Exit fullscreen", "fullscreen": "Fullscreen", "hosts": "Hosts", + "ip-addresses": "IP Adresses", + "ip-mode": "IP mode", "learn-more": "Learn more", "loading-in-progress": "Loading in progress…", "log-out": "Log out", + "mac-address": "MAC address", "master": "Primary host", "n-vms": "1 VM | {n} VMs", "network": "Network", @@ -60,15 +66,18 @@ "other": "Other", "page-not-found": "This page is not to be found…", "patches": "Patches", + "pifs": "PIFs", "power-on-vm-for-console": "Power on your VM to access its console", "power-on-host-for-console": "Power on your host to access its console", "professional-support": "Professional support", "receive": "Receive", "running-vm": "Running VM | Running VMs", + "scan-pifs": "Scan PIFs", "see-all": "See all", "send": "Send", "send-ctrl-alt-del": "Send Ctrl+Alt+Del", "stats": "Stats", + "status": "Status", "storage": "Storage", "system": "System", @@ -81,7 +90,9 @@ "tasks.quick-view.failed": "Failed", "tasks.quick-view.in-progress": "In progress", + "table-actions": "Table actions", "total": "Total", "total-cpus": "Total CPUs", + "vlan": "VLAN", "vms": "VMs" } diff --git a/@xen-orchestra/web-core/lib/locales/fr.json b/@xen-orchestra/web-core/lib/locales/fr.json index 6a5b5f621f3..63ccd819bf5 100644 --- a/@xen-orchestra/web-core/lib/locales/fr.json +++ b/@xen-orchestra/web-core/lib/locales/fr.json @@ -44,13 +44,19 @@ "access-forum": "Accès au forum", "dashboard": "Tableau de bord", + "device": "Appareil", + "edit": "Éditer", + "delete": "Supprimer", "documentation-name": "Documentation {name}", "exit-fullscreen": "Quitter le plein écran", "fullscreen": "Plein écran", "hosts": "Hôtes", + "ip-addresses": "Adresses IP", + "ip-mode": "Mode IP", "learn-more": "En savoir plus", "loading-in-progress": "Chargement en cours…", "log-out": "Se déconnecter", + "mac-address": "Adresse MAC", "master": "Hôte primaire", "n-vms": "1 VM | {n} VMs", "network": "Réseau", @@ -60,18 +66,22 @@ "other": "Autre", "page-not-found": "Cette page est introuvable…", "patches": "Patches", + "pifs": "PIFs", "power-on-vm-for-console": "Allumez votre VM pour accéder à sa console", "power-on-host-for-console": "Allumez votre hôte pour accéder à sa console", "professional-support": "Support professionel", "receive": "Recevoir", "running-vm": "VM en cours d'exécution | VMs en cours d'exécution", + "scan-pifs": "Scanner les PIFs", "see-all": "Voir tout", "send": "Envoyer", "send-ctrl-alt-del": "Envoyer Ctrl+Alt+Suppr", "stats": "Stats", + "status": "Statut", "storage": "Stockage", "system": "Système", + "table-actions": "Actions du tableau", "tasks": "Tâches", "tasks.n-subtasks": "{n} sous-tâche | {n} sous-tâches", "tasks.no-tasks": "Aucune tâche", @@ -83,5 +93,6 @@ "total": "Total", "total-cpus": "Total CPUs", + "vlan": "VLAN", "vms": "VMs" } diff --git a/@xen-orchestra/web/src/components/host/HostHeader.vue b/@xen-orchestra/web/src/components/host/HostHeader.vue index dc5bb9e4dc3..f4bc3254f3f 100644 --- a/@xen-orchestra/web/src/components/host/HostHeader.vue +++ b/@xen-orchestra/web/src/components/host/HostHeader.vue @@ -15,7 +15,11 @@ {{ $t('alarms') }} {{ $t('stats') }} {{ $t('system') }} - {{ $t('network') }} + + + {{ $t('network') }} + + {{ $t('storage') }} {{ $t('tasks') }} diff --git a/@xen-orchestra/web/src/pages/host/[id]/network.vue b/@xen-orchestra/web/src/pages/host/[id]/network.vue new file mode 100644 index 00000000000..c335a2e6730 --- /dev/null +++ b/@xen-orchestra/web/src/pages/host/[id]/network.vue @@ -0,0 +1,294 @@ + + + + + +ø] diff --git a/@xen-orchestra/web/typed-router.d.ts b/@xen-orchestra/web/typed-router.d.ts index e3a1a98ebf1..0abcb49c534 100644 --- a/@xen-orchestra/web/typed-router.d.ts +++ b/@xen-orchestra/web/typed-router.d.ts @@ -26,6 +26,7 @@ declare module 'vue-router/auto-routes' { '/host/[id]': RouteRecordInfo<'/host/[id]', '/host/:id', { id: ParamValue }, { id: ParamValue }>, '/host/:id': RouteRecordInfo<'/host/:id', '/host/:id', { id: ParamValue }, { id: ParamValue }>, '/host/[id]/console': RouteRecordInfo<'/host/[id]/console', '/host/:id/console', { id: ParamValue }, { id: ParamValue }>, + '/host/[id]/network': RouteRecordInfo<'/host/[id]/network', '/host/:id/network', { id: ParamValue }, { id: ParamValue }>, '/host/[id]/vms': RouteRecordInfo<'/host/[id]/vms', '/host/:id/vms', { id: ParamValue }, { id: ParamValue }>, '/pool/[id]': RouteRecordInfo<'/pool/[id]', '/pool/:id', { id: ParamValue }, { id: ParamValue }>, '/pool/:id': RouteRecordInfo<'/pool/:id', '/pool/:id', { id: ParamValue }, { id: ParamValue }>, From 675f759f9c8caff7561b74c5c84ee7097046182b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastian=20Czech?= Date: Mon, 18 Nov 2024 10:38:17 +0100 Subject: [PATCH 02/18] feat(xo-6): Add css --- .../lite/src/components/ui/UiStatusPanel.vue | 2 +- .../lib/components/ui/button/UiButton.vue | 1 + .../lib/components/ui/input/UiInput.vue | 1 + .../ui/query-search-bar/UiQuerySearchBar.vue | 1 + .../web/src/pages/host/[id]/network.vue | 145 ++++++++++++++++-- 5 files changed, 135 insertions(+), 15 deletions(-) diff --git a/@xen-orchestra/lite/src/components/ui/UiStatusPanel.vue b/@xen-orchestra/lite/src/components/ui/UiStatusPanel.vue index 6803a570216..3c4162bb1af 100644 --- a/@xen-orchestra/lite/src/components/ui/UiStatusPanel.vue +++ b/@xen-orchestra/lite/src/components/ui/UiStatusPanel.vue @@ -28,7 +28,7 @@ defineProps<{ } .title { - text-align: center; + //text-align: center; } .subtitle { diff --git a/@xen-orchestra/web-core/lib/components/ui/button/UiButton.vue b/@xen-orchestra/web-core/lib/components/ui/button/UiButton.vue index 4035fb6f573..fc5a43dbc7a 100644 --- a/@xen-orchestra/web-core/lib/components/ui/button/UiButton.vue +++ b/@xen-orchestra/web-core/lib/components/ui/button/UiButton.vue @@ -72,6 +72,7 @@ const classNames = computed(() => [ border-width: 0.1rem; outline: none; border-style: solid; + white-space: nowrap; &.lock { cursor: default; diff --git a/@xen-orchestra/web-core/lib/components/ui/input/UiInput.vue b/@xen-orchestra/web-core/lib/components/ui/input/UiInput.vue index 03b1c8cb5d5..e2addf75657 100644 --- a/@xen-orchestra/web-core/lib/components/ui/input/UiInput.vue +++ b/@xen-orchestra/web-core/lib/components/ui/input/UiInput.vue @@ -88,6 +88,7 @@ const id = computed(() => uniqueId('input-')) /* IMPLEMENTATION */ .ui-input { position: relative; + width: 100%; .before + .input { padding-inline-start: 4.8rem; diff --git a/@xen-orchestra/web-core/lib/components/ui/query-search-bar/UiQuerySearchBar.vue b/@xen-orchestra/web-core/lib/components/ui/query-search-bar/UiQuerySearchBar.vue index 3dfe9b4bd86..701a64fdc4e 100644 --- a/@xen-orchestra/web-core/lib/components/ui/query-search-bar/UiQuerySearchBar.vue +++ b/@xen-orchestra/web-core/lib/components/ui/query-search-bar/UiQuerySearchBar.vue @@ -61,6 +61,7 @@ const value = ref('') align-items: center; .label { + white-space: nowrap; color: var(--color-neutral-txt-secondary); } } diff --git a/@xen-orchestra/web/src/pages/host/[id]/network.vue b/@xen-orchestra/web/src/pages/host/[id]/network.vue index c335a2e6730..f53be0c0202 100644 --- a/@xen-orchestra/web/src/pages/host/[id]/network.vue +++ b/@xen-orchestra/web/src/pages/host/[id]/network.vue @@ -35,7 +35,9 @@ {{ $t('ip-addresses') }} {{ $t('mac-address') }} {{ $t('ip-mode') }} - + + + @@ -67,8 +69,8 @@ {{ pif.data.ip }} {{ pif.data.mac }} {{ pif.data.ip_mode }} - - + + @@ -84,7 +86,41 @@ {{ $t('delete') }} - + + {{ card.name }} +
+

{{ key }}

+
+ + + + +
+
+ +
+
+
+

{{ ip }}

+
+ + +
+
+
+
+ {{ tag }} +
+
+

{{ value }}

+ +
+
+ @@ -97,13 +133,16 @@ import ColumnTitle from '@core/components/table/ColumnTitle.vue' import VtsTable from '@core/components/table/VtsTable.vue' import UiActionsTitle from '@core/components/ui/actions-title/UiActionsTitle.vue' import UiButton from '@core/components/ui/button/UiButton.vue' +import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue' import UiCard from '@core/components/ui/card/UiCard.vue' +import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue' import UiCheckbox from '@core/components/ui/checkbox/UiCheckbox.vue' import UiComplexIcon from '@core/components/ui/complex-icon/UiComplexIcon.vue' import UiObjectLink from '@core/components/ui/object-link/UiObjectLink.vue' import UiPanel from '@core/components/ui/panel/UiPanel.vue' import UiQuerySearchBar from '@core/components/ui/query-search-bar/UiQuerySearchBar.vue' import UiTableActions from '@core/components/ui/table-actions/UiTableActions.vue' +import UiTag from '@core/components/ui/tag/UiTag.vue' import UiTitle from '@core/components/ui/title/UiTitle.vue' import { defineTree } from '@core/composables/tree/define-tree' import { useTreeFilter } from '@core/composables/tree-filter.composable' @@ -116,6 +155,7 @@ import { faCaretDown, faCheck, faCircle, + faCopy, faEdit, faEllipsis, faExclamation, @@ -226,6 +266,40 @@ const data = [ ip_mode: 'Static', }, ] +const cardsContent = [ + { + name: 'PIF', + content: { + uuid: '71df26a2-678a-49c7-8232-8ebcac4987ab', + network: data[0].name_label, + device: data[0].device, + status: data[0].status, + physicalStatus: data[0].status, + vlan: data[0].vlan, + tags: ['prod', 'QA'], + }, + }, + { + name: 'Network Info', + content: { + ip_addresses: ['fe80::1a2b:3c4d:5f', '255.255.255.0', '255.255.255.0', '255.255.255.0', '255.255.255.0'], + mac_addresses: '00:1A:2B:3C:4D:5E', + netmask: '255.255.255.0', + dns: '8.8.8.8', + gateway: '192.168.1.1', + ip_mode: data[0].ip_mode, + }, + }, + { + name: 'Properties', + content: { + mtu: '1500', + speed: '1000 Mb/s', + network_block_device: 'Off', + default_locking_mode: 'True', + }, + }, +] const { filter, predicate } = useTreeFilter() @@ -249,15 +323,6 @@ const getStatusProps = (status: NetworkStatus) => states[status as NetworkStatus -ø] From d8de59c0fb7f6305399c8ab6cde63172a2597305 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastian=20Czech?= Date: Mon, 18 Nov 2024 16:00:33 +0100 Subject: [PATCH 03/18] feat(xo-6): add behavior --- .../web/src/pages/host/[id]/network.vue | 82 +++++++++++++------ 1 file changed, 59 insertions(+), 23 deletions(-) diff --git a/@xen-orchestra/web/src/pages/host/[id]/network.vue b/@xen-orchestra/web/src/pages/host/[id]/network.vue index f53be0c0202..186c53c56a7 100644 --- a/@xen-orchestra/web/src/pages/host/[id]/network.vue +++ b/@xen-orchestra/web/src/pages/host/[id]/network.vue @@ -22,11 +22,17 @@ {{ $t('table-actions') }} + - + {{ $t('network') }} {{ $t('device') }} @@ -41,40 +47,46 @@ - + - + - + - {{ pif.data.name_label }} + {{ pif.name_label }} - {{ pif.data.device }} + {{ pif.device }} -
{{ pif.data.status }}
+
{{ pif.status }}
 - {{ pif.data.vlan }} - {{ pif.data.ip }} - {{ pif.data.mac }} - {{ pif.data.ip_mode }} + {{ pif.vlan }} + {{ pif.ip }} + {{ pif.mac }} + {{ pif.ip_mode }} + @@ -144,9 +156,10 @@ import UiQuerySearchBar from '@core/components/ui/query-search-bar/UiQuerySearch import UiTableActions from '@core/components/ui/table-actions/UiTableActions.vue' import UiTag from '@core/components/ui/tag/UiTag.vue' import UiTitle from '@core/components/ui/title/UiTitle.vue' -import { defineTree } from '@core/composables/tree/define-tree' +import UiTopBottomTable from '@core/components/ui/top-bottom-table/UiTopBottomTable.vue' +// import { defineTree } from '@core/composables/tree/define-tree' import { useTreeFilter } from '@core/composables/tree-filter.composable' -import { useTree } from '@core/composables/tree.composable' +// import { useTree } from '@core/composables/tree.composable' import type { IconDefinition } from '@fortawesome/fontawesome-common-types' import { faAlignLeft, @@ -163,6 +176,7 @@ import { faPowerOff, faTrash, } from '@fortawesome/free-solid-svg-icons' +import { computed, ref } from 'vue' const data = [ { @@ -174,6 +188,7 @@ const data = [ ip: '127.0.0.1', mac: '00:1A:2B:3C:4D:5E', ip_mode: 'DHCP', + selected: false, }, { id: 'e40c1da3-918b-c173-506c-e8c2c069181f', @@ -184,6 +199,7 @@ const data = [ ip: '127.0.0.1', mac: '00:1A:2B:3C:4D:5E', ip_mode: 'DHCP', + selected: false, }, { id: '989cd0ad-17f8-c198-15c6-8549da1f3b9f', @@ -194,6 +210,7 @@ const data = [ ip: '127.0.0.1', mac: '00:1A:2B:3C:4D:5E', ip_mode: 'DHCP', + selected: false, }, { id: 'bfbacbd4-8a09-c769-4e7e-59c2a0f77095', @@ -204,6 +221,7 @@ const data = [ ip: '127.0.0.1', mac: '00:1A:2B:3C:4D:5E', ip_mode: 'DHCP', + selected: false, }, { id: '03a631e2-a39e-7c63-7bb3-ac7a5ef6c47e', @@ -214,6 +232,7 @@ const data = [ ip: '127.0.0.1', mac: '00:1A:2B:3C:4D:5E', ip_mode: 'Static', + selected: false, }, { id: 'ea57eb75-c55b-d9c9-6cb4-e0ea235eb16f', @@ -224,6 +243,7 @@ const data = [ ip: '127.0.0.1', mac: '00:1A:2B:3C:4D:5E', ip_mode: 'DHCP', + selected: false, }, { id: '559b0b63-2173-b6a1-ef65-7155d56401b6', @@ -234,6 +254,7 @@ const data = [ ip: '127.0.0.1', mac: '00:1A:2B:3C:4D:5E', ip_mode: 'DHCP', + selected: false, }, { id: '99e196e1-33f9-461b-93e3-d70a0eb29b3e', @@ -244,6 +265,7 @@ const data = [ ip: '127.0.0.1', mac: '00:1A:2B:3C:4D:5E', ip_mode: 'Static', + selected: false, }, { id: 'cd418934-1f70-22bc-688e-eb6da266aa57', @@ -254,6 +276,7 @@ const data = [ ip: '127.0.0.1', mac: '00:1A:2B:3C:4D:5E', ip_mode: 'DHCP', + selected: false, }, { id: '6d9c33fc-ebec-240d-e31b-18152911795d', @@ -264,6 +287,7 @@ const data = [ ip: '127.0.0.1', mac: '00:1A:2B:3C:4D:5E', ip_mode: 'Static', + selected: false, }, ] const cardsContent = [ @@ -301,14 +325,16 @@ const cardsContent = [ }, ] -const { filter, predicate } = useTreeFilter() +const { filter } = useTreeFilter() -const definitions = defineTree(data, { - getLabel: 'name_label', - predicate, -}) +// const definitions = defineTree(data, { +// getLabel: 'name_label', +// predicate, +// }) -const { nodes: pifs } = useTree(definitions, { expand: false }) +const totalItems = ref(data) + +// const { nodes: pifs } = useTree(definitions, { expand: false }) type NetworkStatus = 'connected' | 'disconnected' | 'other' type NetworkAccent = 'success' | 'warning' | 'danger' @@ -320,6 +346,16 @@ const states: Record states[status as NetworkStatus] +const selectedItems = computed(() => totalItems.value.filter(item => item.selected).length) + +const toggleSelect = (isSelected: boolean) => { + totalItems.value.forEach(item => { + item.selected = isSelected + }) +} +const test = () => { + return false +} diff --git a/@xen-orchestra/web/src/pages/host/[id]/network.vue b/@xen-orchestra/web/src/pages/host/[id]/network.vue index d480f2cddf2..6bd83abdc1a 100644 --- a/@xen-orchestra/web/src/pages/host/[id]/network.vue +++ b/@xen-orchestra/web/src/pages/host/[id]/network.vue @@ -1,94 +1,6 @@ From c9ecd9bb567b22e7a3f7bea0b13655a13500cb46 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastian=20Czech?= Date: Thu, 28 Nov 2024 10:13:51 +0100 Subject: [PATCH 11/18] feat(xo-6):update info --- .../lib/components/ui/info/UiInfo.vue | 1 - .../web/src/components/pif/PifStatus.vue | 19 +++---------------- 2 files changed, 3 insertions(+), 17 deletions(-) diff --git a/@xen-orchestra/web-core/lib/components/ui/info/UiInfo.vue b/@xen-orchestra/web-core/lib/components/ui/info/UiInfo.vue index 1a42b2e673f..4ac9cf557f7 100644 --- a/@xen-orchestra/web-core/lib/components/ui/info/UiInfo.vue +++ b/@xen-orchestra/web-core/lib/components/ui/info/UiInfo.vue @@ -42,7 +42,6 @@ const icon = computed(() => iconByAccent[props.accent]) From f4f1d6215f38c790fc26de739767f6bff3a170c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastian=20Czech?= Date: Thu, 28 Nov 2024 15:32:48 +0100 Subject: [PATCH 12/18] feat(xo-6):update with new card key component --- @xen-orchestra/lite/src/locales/cs.json | 1 - @xen-orchestra/lite/src/locales/de.json | 2 - @xen-orchestra/lite/src/locales/en.json | 4 - @xen-orchestra/lite/src/locales/fa.json | 1 - @xen-orchestra/lite/src/locales/fr.json | 4 - .../components/card/VtsCardRowKeyValue.vue | 1 + @xen-orchestra/web-core/lib/locales/de.json | 2 + @xen-orchestra/web-core/lib/locales/en.json | 19 +- @xen-orchestra/web-core/lib/locales/fa.json | 1 + @xen-orchestra/web-core/lib/locales/fr.json | 19 +- .../web/src/components/pif/PifPanel.vue | 242 ++++++++++++++++++ .../web/src/components/pif/PifTable.vue | 14 +- @xen-orchestra/web/src/fakeGetNetwork.ts | 3 +- @xen-orchestra/web/src/fakePifStore.ts | 22 +- .../web/src/pages/host/[id]/network.vue | 38 ++- 15 files changed, 315 insertions(+), 58 deletions(-) create mode 100644 @xen-orchestra/web/src/components/pif/PifPanel.vue diff --git a/@xen-orchestra/lite/src/locales/cs.json b/@xen-orchestra/lite/src/locales/cs.json index 09884d7f1ea..63da1681446 100644 --- a/@xen-orchestra/lite/src/locales/cs.json +++ b/@xen-orchestra/lite/src/locales/cs.json @@ -59,7 +59,6 @@ "descending": "sestupně", "description": "Popis", - "dhcp": "DHCP", "disabled": "Zakázáno", "display": "Zobrazení", "dns": "DNS", diff --git a/@xen-orchestra/lite/src/locales/de.json b/@xen-orchestra/lite/src/locales/de.json index 2a1d941bbc4..c080172e969 100644 --- a/@xen-orchestra/lite/src/locales/de.json +++ b/@xen-orchestra/lite/src/locales/de.json @@ -57,7 +57,6 @@ "descending": "absteigend", "description": "Beschreibung", - "dhcp": "DHCP", "disabled": "deaktiviert", "display": "Display", "dns": "DNS", @@ -120,7 +119,6 @@ "n-hosts-awaiting-patch": "Der Host {n} benötigt dieses Patch | Die Hosts {n} benötigen dieses Patch", "n-missing": "{n} verbleibend", "name": "Name", - "netmask": "Netzmaske", "network-download": "Download", "network-throughput": "Netzwerkdurchsatz", "network-upload": "Upload", diff --git a/@xen-orchestra/lite/src/locales/en.json b/@xen-orchestra/lite/src/locales/en.json index 9aab4f38773..4aa531d34c4 100644 --- a/@xen-orchestra/lite/src/locales/en.json +++ b/@xen-orchestra/lite/src/locales/en.json @@ -58,10 +58,8 @@ "descending": "descending", "description": "Description", - "dhcp": "DHCP", "disabled": "Disabled", "display": "Display", - "dns": "DNS", "do-you-have-needs": "You have needs and/or expectations? Let us know", "documentation": "Documentation", "edit-config": "Edit config", @@ -96,7 +94,6 @@ "force-reboot": "Force reboot", "force-shutdown": "Force shutdown", "fullscreen-leave": "Leave fullscreen", - "gateway": "Gateway", "n-gb-left": "{n} GB left", "n-gb-required": "{n} GB required", "go-back": "Go back", @@ -121,7 +118,6 @@ "n-hosts-awaiting-patch": "{n} host is awaiting this patch | {n} hosts are awaiting this patch", "n-missing": "{n} missing", "name": "Name", - "netmask": "Netmask", "network-download": "Download", "network-throughput": "Network throughput", "network-upload": "Upload", diff --git a/@xen-orchestra/lite/src/locales/fa.json b/@xen-orchestra/lite/src/locales/fa.json index e9189bff927..124bd4f2c48 100644 --- a/@xen-orchestra/lite/src/locales/fa.json +++ b/@xen-orchestra/lite/src/locales/fa.json @@ -58,7 +58,6 @@ "descending": "نزولی", "description": "توصیف", - "dhcp": "DHCP", "disabled": "غیر فعال", "display": "نمایش", "dns": "DNS", diff --git a/@xen-orchestra/lite/src/locales/fr.json b/@xen-orchestra/lite/src/locales/fr.json index be7f01973e5..026f181d81a 100644 --- a/@xen-orchestra/lite/src/locales/fr.json +++ b/@xen-orchestra/lite/src/locales/fr.json @@ -58,8 +58,6 @@ "descending": "descendant", "description": "Description", - "dhcp": "DHCP", - "dns": "DNS", "disabled": "Désactivé", "display": "Affichage", "do-you-have-needs": "Vous avez des besoins et/ou des attentes ? Faites le nous savoir", @@ -96,7 +94,6 @@ "force-reboot": "Forcer le redémarrage", "force-shutdown": "Forcer l'arrêt", "fullscreen-leave": "Quitter plein écran", - "gateway": "Passerelle", "n-gb-left": "{n} Go libres", "n-gb-required": "{n} Go requis", "go-back": "Revenir en arrière", @@ -121,7 +118,6 @@ "n-hosts-awaiting-patch": "{n} hôte attend ce patch | {n} hôtes attendent ce patch", "n-missing": "{n} manquant | {n} manquants", "name": "Nom", - "netmask": "Masque réseau", "network-download": "Descendant", "network-throughput": "Débit du réseau", "network-upload": "Montant", diff --git a/@xen-orchestra/web-core/lib/components/card/VtsCardRowKeyValue.vue b/@xen-orchestra/web-core/lib/components/card/VtsCardRowKeyValue.vue index 513e358fd97..04d4f722847 100644 --- a/@xen-orchestra/web-core/lib/components/card/VtsCardRowKeyValue.vue +++ b/@xen-orchestra/web-core/lib/components/card/VtsCardRowKeyValue.vue @@ -30,6 +30,7 @@ const slots = defineSlots<{ .key { min-width: 12rem; + max-width: 12rem; overflow-wrap: break-word; color: var(--color-neutral-txt-secondary); } diff --git a/@xen-orchestra/web-core/lib/locales/de.json b/@xen-orchestra/web-core/lib/locales/de.json index 00cb5a9286f..17b9a1a8395 100644 --- a/@xen-orchestra/web-core/lib/locales/de.json +++ b/@xen-orchestra/web-core/lib/locales/de.json @@ -18,6 +18,7 @@ "dark-mode.auto": "Automatischer Dunkelmodus", "dashboard": "Dashboard", + "dhcp": "DHCP", "documentation-name": "{name} Dokumentation", "fullscreen": "Vollbild", "hosts": "Hosts", @@ -26,6 +27,7 @@ "log-out": "Abmelden", "master": "Primärer Host", "n-vms": "1 VM | {n} VMs", + "netmask": "Netzmaske", "network": "Netzwerk", "object-not-found": "Objekt {id} wurde nicht gefunden…", "open-console-in-new-tab": "Konsole in neuem Reiter öffnen", diff --git a/@xen-orchestra/web-core/lib/locales/en.json b/@xen-orchestra/web-core/lib/locales/en.json index 478cd65c786..025342b2ac9 100644 --- a/@xen-orchestra/web-core/lib/locales/en.json +++ b/@xen-orchestra/web-core/lib/locales/en.json @@ -49,18 +49,28 @@ "disconnected-from-physical-device": "Disconnected form physical device", "device": "Device", "edit": "Edit", + "default-locking-mode": "Default locking mode", "delete": "Delete", + "dhcp": "DHCP", + "dns": "DNS", "documentation-name": "{name} documentation", "exit-fullscreen": "Exit fullscreen", "fullscreen": "Fullscreen", + "gateway": "Gateway", "hosts": "Hosts", - "ip-addresses": "IP Adresses", + "ip-addresses": "IP Addresses", "ip-mode": "IP mode", "learn-more": "Learn more", "loading-in-progress": "Loading in progress…", "log-out": "Log out", "mac-address": "MAC address", + "mac-addresses": "MAC addresses", "master": "Primary host", + "mbs": "Mb/s", + "mtu": "MTU", + "netmask": "Netmask", + "network-block-device": "Network block device", + "network-information": "Network information", "n-vms": "1 VM | {n} VMs", "network": "Network", "no-data": "No data", @@ -69,16 +79,21 @@ "other": "Other", "page-not-found": "This page is not to be found…", "patches": "Patches", + "physical-interface-status": "Physical interface status", + "pif": "PIF", "pifs": "PIFs", + "pif-status": "Pif status", "power-on-vm-for-console": "Power on your VM to access its console", "power-on-host-for-console": "Power on your host to access its console", "professional-support": "Professional support", + "properties": "Properties", "receive": "Receive", "running-vm": "Running VM | Running VMs", "scan-pifs": "Scan PIFs", "see-all": "See all", "send": "Send", "send-ctrl-alt-del": "Send Ctrl+Alt+Del", + "speed": "Speed", "stats": "Stats", "status": "Status", "storage": "Storage", @@ -94,8 +109,10 @@ "tasks.quick-view.in-progress": "In progress", "table-actions": "Table actions", + "tags": "Tags", "total": "Total", "total-cpus": "Total CPUs", + "uuid": "Uuid", "vlan": "VLAN", "vms": "VMs" } diff --git a/@xen-orchestra/web-core/lib/locales/fa.json b/@xen-orchestra/web-core/lib/locales/fa.json index b944bad9476..141ebe91924 100644 --- a/@xen-orchestra/web-core/lib/locales/fa.json +++ b/@xen-orchestra/web-core/lib/locales/fa.json @@ -32,6 +32,7 @@ "dark-mode.auto": "حالت خودکار تاریک", "dashboard": "داشبورد", + "dhcp": "DHCP", "documentation-name": "اسناد {name}", "fullscreen": "تمام صفحه", "learn-more": "بیشتر بدانید", diff --git a/@xen-orchestra/web-core/lib/locales/fr.json b/@xen-orchestra/web-core/lib/locales/fr.json index 9791b467d7d..85d591b0b2a 100644 --- a/@xen-orchestra/web-core/lib/locales/fr.json +++ b/@xen-orchestra/web-core/lib/locales/fr.json @@ -49,10 +49,14 @@ "disconnected-from-physical-device": "Déconnécté de l'appareil physique", "device": "Appareil", "edit": "Éditer", + "default-locking-mode": "Mode de verrouillage par défaut", "delete": "Supprimer", + "dhcp": "DHCP", + "dns": "DNS", "documentation-name": "Documentation {name}", "exit-fullscreen": "Quitter le plein écran", "fullscreen": "Plein écran", + "gateway": "Passerelle", "hosts": "Hôtes", "ip-addresses": "Adresses IP", "ip-mode": "Mode IP", @@ -60,7 +64,13 @@ "loading-in-progress": "Chargement en cours…", "log-out": "Se déconnecter", "mac-address": "Adresse MAC", + "mac-addresses": "Adresses MAC", "master": "Hôte primaire", + "mbs": "Mb/s", + "mtu": "MTU", + "netmask": "Masque réseau", + "network-block-device": "Dispositif de blocage réseau", + "network-information": "Information du réseau", "n-vms": "1 VM | {n} VMs", "network": "Réseau", "no-data": "Aucune donnée", @@ -69,22 +79,26 @@ "other": "Autre", "page-not-found": "Cette page est introuvable…", "patches": "Patches", + "physical-interface-status": "Status de l'interface physique", + "pif": "PIF", "pifs": "PIFs", + "pif-status": "Status du Pif", "power-on-vm-for-console": "Allumez votre VM pour accéder à sa console", "power-on-host-for-console": "Allumez votre hôte pour accéder à sa console", "professional-support": "Support professionel", + "properties": "Propriétés", "receive": "Recevoir", "running-vm": "VM en cours d'exécution | VMs en cours d'exécution", "scan-pifs": "Scanner les PIFs", "see-all": "Voir tout", "send": "Envoyer", "send-ctrl-alt-del": "Envoyer Ctrl+Alt+Suppr", + "speed": "Vitesse", "stats": "Stats", "status": "Statut", "storage": "Stockage", "system": "Système", - "table-actions": "Actions du tableau", "tasks": "Tâches", "tasks.n-subtasks": "{n} sous-tâche | {n} sous-tâches", "tasks.no-tasks": "Aucune tâche", @@ -94,8 +108,11 @@ "tasks.quick-view.failed": "Échouées", "tasks.quick-view.in-progress": "En cours", + "table-actions": "Actions du tableau", + "tags": "Etiquettes", "total": "Total", "total-cpus": "Total CPUs", + "uuid": "Uuid", "vlan": "VLAN", "vms": "VMs" } diff --git a/@xen-orchestra/web/src/components/pif/PifPanel.vue b/@xen-orchestra/web/src/components/pif/PifPanel.vue new file mode 100644 index 00000000000..39b9e78f27e --- /dev/null +++ b/@xen-orchestra/web/src/components/pif/PifPanel.vue @@ -0,0 +1,242 @@ + + + + + diff --git a/@xen-orchestra/web/src/components/pif/PifTable.vue b/@xen-orchestra/web/src/components/pif/PifTable.vue index f7131660bfc..40dabd7ba68 100644 --- a/@xen-orchestra/web/src/components/pif/PifTable.vue +++ b/@xen-orchestra/web/src/components/pif/PifTable.vue @@ -80,7 +80,6 @@ From 4be2bfbc444204fefecf2785049015770478e19d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastian=20Czech?= Date: Thu, 28 Nov 2024 17:16:04 +0100 Subject: [PATCH 13/18] feat(web-core): update css alignment, tooltip and ellipsis on text --- .../components/card/VtsCardRowKeyValue.vue | 1 - .../lib/components/ui/info/UiInfo.vue | 3 +- @xen-orchestra/web-core/lib/locales/en.json | 6 +- @xen-orchestra/web-core/lib/locales/fr.json | 6 +- .../web/src/components/pif/PifPanel.vue | 373 +++++++++--------- .../web/src/components/pif/PifTable.vue | 19 +- @xen-orchestra/web/src/fakePifStore.ts | 9 +- .../web/src/pages/host/[id]/network.vue | 4 +- 8 files changed, 224 insertions(+), 197 deletions(-) diff --git a/@xen-orchestra/web-core/lib/components/card/VtsCardRowKeyValue.vue b/@xen-orchestra/web-core/lib/components/card/VtsCardRowKeyValue.vue index 04d4f722847..f9dd28f7281 100644 --- a/@xen-orchestra/web-core/lib/components/card/VtsCardRowKeyValue.vue +++ b/@xen-orchestra/web-core/lib/components/card/VtsCardRowKeyValue.vue @@ -25,7 +25,6 @@ const slots = defineSlots<{ diff --git a/@xen-orchestra/web/src/components/pif/PifTable.vue b/@xen-orchestra/web/src/components/pif/PifTable.vue index 16eea8dae27..de00e45bbc5 100644 --- a/@xen-orchestra/web/src/components/pif/PifTable.vue +++ b/@xen-orchestra/web/src/components/pif/PifTable.vue @@ -202,6 +202,10 @@ const selectRow = (rowId: string) => { padding: 1.1rem; } + .row { + cursor: default; + } + .row:hover { background-color: var(--color-brand-background-hover); } diff --git a/@xen-orchestra/web/src/pages/host/[id]/network.vue b/@xen-orchestra/web/src/pages/host/[id]/network.vue index 6bf5c50eaa8..0d4af0765f3 100644 --- a/@xen-orchestra/web/src/pages/host/[id]/network.vue +++ b/@xen-orchestra/web/src/pages/host/[id]/network.vue @@ -1,7 +1,10 @@ @@ -10,6 +13,8 @@ import PifPanel from '@/components/pif/PifPanel.vue' import PifTable from '@/components/pif/PifTable.vue' import { getNetwork } from '@/fakeGetNetwork' import { pifsByHost } from '@/fakePifStore' +import VtsNoDataHero from '@core/components/state-hero/VtsNoDataHero.vue' +import UiPanel from '@core/components/ui/panel/UiPanel.vue' import { computed, ref } from 'vue' const pifs = computed(() => pifsByHost.get('438aca0f-429c-4ae6-accc-93c306e636a0') ?? []) @@ -37,5 +42,10 @@ const selectPif = (id: string) => { .host-network-view { display: flex; height: 100%; + + .panel { + width: 40rem; + border-top: none; + } } From cad86d560745e1de1fceb850925d25abdbf15f67 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastian=20Czech?= Date: Mon, 2 Dec 2024 08:40:58 +0100 Subject: [PATCH 16/18] feat(web-core): wip --- @xen-orchestra/web/src/components/pif/PifTable.vue | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/@xen-orchestra/web/src/components/pif/PifTable.vue b/@xen-orchestra/web/src/components/pif/PifTable.vue index de00e45bbc5..a885ae54ae8 100644 --- a/@xen-orchestra/web/src/components/pif/PifTable.vue +++ b/@xen-orchestra/web/src/components/pif/PifTable.vue @@ -186,9 +186,16 @@ const selectRow = (rowId: string) => { border: solid 0.1rem var(--color-neutral-border); border-radius: 0.8rem; background-color: var(--color-neutral-background-primary); + overflow-x: hidden; + width: 100%; .table-container { margin-top: 2.4rem; + overflow-x: auto; + + .table { + width: 1600px; + } tr:last-child { border-bottom: 1px solid var(--color-neutral-border); From c3f1b0ce8e0e5b30b283a957aeb4533dedc1611f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastian=20Czech?= Date: Mon, 2 Dec 2024 09:32:14 +0100 Subject: [PATCH 17/18] feat(xo-6): add table scrolling bar --- .../web/src/components/pif/PifTable.vue | 47 +++++++++---------- 1 file changed, 22 insertions(+), 25 deletions(-) diff --git a/@xen-orchestra/web/src/components/pif/PifTable.vue b/@xen-orchestra/web/src/components/pif/PifTable.vue index a885ae54ae8..b4725b2e8c5 100644 --- a/@xen-orchestra/web/src/components/pif/PifTable.vue +++ b/@xen-orchestra/web/src/components/pif/PifTable.vue @@ -8,8 +8,8 @@ -
- +
+ {{ $t('edit') }} @@ -27,6 +27,8 @@ :total-items="usableRefs.length" @toggle-select-all="toggleSelect" /> +
+
@@ -60,7 +62,7 @@

{{ row.value.name_label }}

{{ row.value.device }}
-
+
{{ row.value.vlan }}
@@ -74,13 +76,13 @@ -
+
@@ -187,14 +189,22 @@ const selectRow = (rowId: string) => { border-radius: 0.8rem; background-color: var(--color-neutral-background-primary); overflow-x: hidden; - width: 100%; - .table-container { + .table-actions { margin-top: 2.4rem; + display: flex; + flex-direction: column; + } + + .selection { + margin: 0.8rem 0; + } + + .table-container { overflow-x: auto; .table { - width: 1600px; + width: 160rem; } tr:last-child { @@ -225,19 +235,6 @@ const selectRow = (rowId: string) => { display: flex; gap: 1.6rem; } - - .status { - display: flex; - gap: 0.8rem; - - .icon { - font-size: 1.6rem; - } - } - - .selection { - margin: 0.8rem 0; - } } } From 867187a52173520bf09150c8018c5856c266adcd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastian=20Czech?= Date: Mon, 2 Dec 2024 14:12:34 +0100 Subject: [PATCH 18/18] feat(xo-6): add responsiveness for table --- .../web/src/components/pif/PifTable.vue | 35 +++++++++++++++---- 1 file changed, 28 insertions(+), 7 deletions(-) diff --git a/@xen-orchestra/web/src/components/pif/PifTable.vue b/@xen-orchestra/web/src/components/pif/PifTable.vue index b4725b2e8c5..f3e090c14e0 100644 --- a/@xen-orchestra/web/src/components/pif/PifTable.vue +++ b/@xen-orchestra/web/src/components/pif/PifTable.vue @@ -32,7 +32,7 @@ - +
@@ -204,27 +204,40 @@ const selectRow = (rowId: string) => { overflow-x: auto; .table { - width: 160rem; + .col-checkbox, + .col-more, + .col-vlan { + width: 4.5rem; + } + + .col-network, + .col-status, + .col-ip, + .col-mac { + width: 17rem; + } + + .col-device, + .col-mode { + width: 9.5rem; + } } tr:last-child { border-bottom: 1px solid var(--color-neutral-border); } - th { - width: 48px; - } - td { padding: 1.1rem; } .row { - cursor: default; + cursor: pointer; } .row:hover { background-color: var(--color-brand-background-hover); + transition: all 0.3s ease; } .row.selected { @@ -236,5 +249,13 @@ const selectRow = (rowId: string) => { gap: 1.6rem; } } + + @media (max-width: 1500px) { + .table-container { + .table { + width: 160rem; + } + } + } }