Skip to content

Commit

Permalink
improvements and add translation
Browse files Browse the repository at this point in the history
  • Loading branch information
@J0ris-K
J0ris-K committed Jan 20, 2025
1 parent ca5626b commit dde53c7
Show file tree
Hide file tree
Showing 5 changed files with 89 additions and 65 deletions.
135 changes: 73 additions & 62 deletions @xen-orchestra/lite/src/components/host/network/HostPifTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
</UiTitle>
<div class="container">
<UiQuerySearchBar class="table-query" @search="(value: string) => (searchQuery = value)" />
<UiTableActions title="Table actions">
<UiTableActions :title="t('table-actions')">
<UiButton
v-tooltip="$t('coming-soon')"
disabled
Expand All @@ -44,63 +44,73 @@
:total-items="pifsUuids.length"
@toggle-select-all="toggleSelect"
/>
<div class="table">
<VtsTable vertical-border>
<thead>
<tr>
<template v-for="column of visibleColumns" :key="column.id">
<th v-if="column.id === 'checkbox'" class="checkbox">
<UiCheckbox :v-model="areAllSelected" accent="info" @update:model-value="toggleSelect" />
</th>
<th v-else-if="column.id === 'more'" class="more">
<UiButtonIcon size="small" accent="info" :icon="getHeaderIcon(column.id)" />
{{ column.label }}
</th>
<ColumnTitle v-else id="networks" :icon="getHeaderIcon(column.id)"> {{ column.label }}</ColumnTitle>
</template>
</tr>
</thead>
<tbody>
<tr v-for="row of rows" :key="row.id">
<td v-for="column of row.visibleColumns" :key="column.id" class="typo p2-regular">
<UiCheckbox v-if="column.id === 'checkbox'" v-model="selected" accent="info" :value="row.id" />
<VtsIcon v-else-if="column.id === 'more'" accent="info" :icon="faEllipsis" />
<div v-else-if="column.id === 'status'" v-tooltip>
<VtsConnectionStatus :status="column.value" />
</div>
<div v-else-if="column.id === 'network'" class="network">
<UiComplexIcon size="medium" class="icon">
<VtsIcon :icon="faNetworkWired" accent="current" />
<VtsIcon accent="success" :icon="faCircle" :overlay-icon="faCheck" />
</UiComplexIcon>
<a v-tooltip href="" class="text-ellipsis name">{{ column.value }}</a>
</div>
<div v-else v-tooltip="{ placement: 'bottom-end' }" class="text-ellipsis">
{{ column.value }}
</div>
</td>
</tr>
</tbody>
</VtsTable>
</div>
<VtsLoadingHero :disabled="isReady" type="table">
<div class="table">
<VtsTable vertical-border>
<thead>
<tr>
<template v-for="column of visibleColumns" :key="column.id">
<th v-if="column.id === 'checkbox'" class="checkbox">
<UiCheckbox :v-model="areAllSelected" accent="info" @update:model-value="toggleSelect" />
</th>
<th v-else-if="column.id === 'more'" class="more">
<UiButtonIcon size="small" accent="info" :icon="getHeaderIcon(column.id)" />
{{ column.label }}
</th>
<ColumnTitle v-else id="networks" :icon="getHeaderIcon(column.id)"> {{ column.label }}</ColumnTitle>
</template>
</tr>
</thead>
<tbody>
<tr v-for="row of rows" :key="row.id">
<td v-for="column of row.visibleColumns" :key="column.id" class="typo p2-regular">
<UiCheckbox v-if="column.id === 'checkbox'" v-model="selected" accent="info" :value="row.id" />
<VtsIcon v-else-if="column.id === 'more'" accent="info" :icon="faEllipsis" />
<div v-else-if="column.id === 'status'" v-tooltip>
<VtsConnectionStatus :status="column.value" />
</div>
<div v-else-if="column.id === 'network'" class="network">
<UiComplexIcon size="medium" class="icon">
<VtsIcon :icon="faNetworkWired" accent="current" />
<VtsIcon accent="success" :icon="faCircle" :overlay-icon="faCheck" />
</UiComplexIcon>
<a v-tooltip href="" class="text-ellipsis name">{{ column.value }}</a>
</div>
<div v-else v-tooltip="{ placement: 'bottom-end' }" class="text-ellipsis">
{{ column.value }}
</div>
</td>
</tr>
</tbody>
</VtsTable>
</div>
</VtsLoadingHero>
<VtsErrorNoDataHero v-if="hasError" type="table" />
<VtsStateHero v-if="searchQuery && filteredPifs.length === 0" type="table" image="no-result">
<div>{{ $t('no-result') }}</div>
</VtsStateHero>
<VtsStateHero v-if="pifs.length === 0" type="table" image="no-data">
<div>{{ $t('no-pif-detected') }}</div>
</VtsStateHero>
<UiTopBottomTable
:selected-items="selected.length"
:total-items="pifsUuids.length"
@toggle-select-all="toggleSelect"
/>
</div>
</div>
<UiCardSpinner v-if="!isReady" />
</template>

<script lang="ts" setup>
import UiCardSpinner from '@/components/ui/UiCardSpinner.vue'
import useMultiSelect from '@/composables/multi-select.composable'
import type { XenApiNetwork, XenApiPif } from '@/libs/xen-api/xen-api.types'
import { useNetworkStore } from '@/stores/xen-api/network.store'
import { usePifMetricsStore } from '@/stores/xen-api/pif-metrics.store'
import VtsConnectionStatus from '@core/components/connection-status/VtsConnectionStatus.vue'
import VtsIcon from '@core/components/icon/VtsIcon.vue'
import VtsErrorNoDataHero from '@core/components/state-hero/VtsErrorNoDataHero.vue'
import VtsLoadingHero from '@core/components/state-hero/VtsLoadingHero.vue'
import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
import ColumnTitle from '@core/components/table/ColumnTitle.vue'
import VtsTable from '@core/components/table/VtsTable.vue'
import UiButton from '@core/components/ui/button/UiButton.vue'
Expand Down Expand Up @@ -130,9 +140,10 @@ import {
import { computed, ref } from 'vue'
import { useI18n } from 'vue-i18n'
const { pifs } = defineProps<{
const { pifs, hasError } = defineProps<{
pifs: XenApiPif[]
isReady: boolean
hasError: boolean
}>()
const { t } = useI18n()
Expand Down Expand Up @@ -164,7 +175,7 @@ const getPifStatus = (pif: XenApiPif) => {
const searchQuery = ref('')
const filteredNetworks = computed(() => {
const filteredPifs = computed(() => {
const searchTerm = searchQuery.value.trim().toLocaleLowerCase()
if (!searchTerm) {
return pifs
Expand All @@ -180,32 +191,32 @@ const toggleSelect = () => {
selected.value = selected.value.length === 0 ? pifsUuids.value : []
}
const { visibleColumns, rows } = useTable('pifs', filteredNetworks, {
const { visibleColumns, rows } = useTable('pifs', filteredPifs, {
rowId: record => record.uuid,
columns: define => [
define('checkbox', () => '', { label: '', isHideable: false }),
define('network', record => getNetworkName(record.network), { label: 'Network', isHideable: true }),
define('device', { label: 'Device', isHideable: true }),
define('status', record => getPifStatus(record), { label: 'Status', isHideable: true }),
define('VLAN', record => getVlanData(record.VLAN), { label: 'Vlan', isHideable: true }),
define('IP', { label: 'IP', isHideable: true }),
define('MAC', { label: 'MAC', isHideable: true }),
define('ip_configuration_mode', { label: 'Mode', isHideable: true }),
define('network', record => getNetworkName(record.network), { label: t('network'), isHideable: true }),
define('device', { label: t('device'), isHideable: true }),
define('status', record => getPifStatus(record), { label: t('status'), isHideable: true }),
define('VLAN', record => getVlanData(record.VLAN), { label: t('vlan'), isHideable: true }),
define('IP', { label: t('ip'), isHideable: true }),
define('MAC', { label: t('mac'), isHideable: true }),
define('ip_configuration_mode', { label: t('ip-configuration-mode'), isHideable: true }),
define('more', () => '', { label: '', isHideable: false }),
],
})
type PifHeader = 'network' | 'device' | 'status' | 'VLAN' | 'IP' | 'MAC' | 'ip_configuration_mode' | 'more'
const headerIcon: Record<PifHeader, { icon: IconDefinition }> = {
network: { icon: faAlignLeft },
device: { icon: faAlignLeft },
status: { icon: faPowerOff },
VLAN: { icon: faAlignLeft },
IP: { icon: faAt },
MAC: { icon: faAt },
ip_configuration_mode: { icon: faCaretDown },
more: { icon: faEllipsis },
const headerIcon: Record<PifHeader, IconDefinition> = {
network: faAlignLeft,
device: faAlignLeft,
status: faPowerOff,
VLAN: faAlignLeft,
IP: faAt,
MAC: faAt,
ip_configuration_mode: faCaretDown,
more: faEllipsis,
}
const getHeaderIcon = (status: PifHeader) => headerIcon[status].icon
const getHeaderIcon = (status: PifHeader) => headerIcon[status]
</script>

<style scoped lang="postcss">
Expand Down
7 changes: 7 additions & 0 deletions @xen-orchestra/lite/src/locales/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@

"descending": "descending",
"description": "Description",
"device": "Device",
"dhcp": "DHCP",
"disabled": "Disabled",
"display": "Display",
Expand Down Expand Up @@ -107,6 +108,8 @@
"host.inactive": "Inactive",

"invalid-field": "Invalid field",
"ip": "Ip",
"ip-configuration-mode": "Ip mode",

"job.vm-copy.bad-power-state": "VM must be halted",
"job.vm-copy.in-progress": "Copy in progress…",
Expand Down Expand Up @@ -174,6 +177,7 @@
"loading-hosts": "Loading hosts…",
"login": "Login",
"login-only-on-master": "Login is only possible on the master host",
"mac": "Mac",

Check failure on line 180 in @xen-orchestra/lite/src/locales/en.json

View workflow job for this annotation

GitHub Actions / CI 

'mac' does not exist in 'fr' locale(s)
"more-actions": "More actions",
"migrate": "Migrate",
"migrate-n-vms": "Migrate 1 VM | Migrate {n} VMs",
Expand All @@ -189,6 +193,7 @@
"news-name": "{name} news",
"none": "None",
"no-alarm-triggered": "No alarm triggered",
"no-pif-detected": "No pif detected",
"no-result": "No result",
"no-selected-vm-can-be-exported": "No selected VM can be exported",
"no-selected-vm-can-be-migrated": "No selected VM can be migrated",
Expand Down Expand Up @@ -250,6 +255,7 @@
"support": "Support",
"suspend": "Suspend",
"switch-theme": "Switch theme",
"table-actions": "Table actions",

"task.estimated-end": "Estimated end",
"task.progress": "Progress",
Expand All @@ -271,6 +277,7 @@
"vm.active": "Active",
"vm.inactive": "Inactive",

"vlan": "Vlan",
"vm-is-running": "The VM is running",
"xo-lite-under-construction": "XOLite is under construction",
"xoa-admin-account": "XOA admin account",
Expand Down
6 changes: 6 additions & 0 deletions @xen-orchestra/lite/src/locales/fr.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@

"descending": "descendant",
"description": "Description",
"device": "Appareil",
"dhcp": "DHCP",
"dns": "DNS",
"disabled": "Désactivé",
Expand Down Expand Up @@ -107,6 +108,8 @@
"host.inactive": "Inactif | Inactif | Inactifs",

"invalid-field": "Champ invalide",
"ip": "Ip",
"ip-configuration-mode": "Mode ip",

"job.vm-copy.bad-power-state": "La VM doit être arrêtée",
"job.vm-copy.in-progress": "Copie en cours…",
Expand Down Expand Up @@ -189,6 +192,7 @@
"news-name": "Actualités {name}",
"none": "Aucun",
"no-alarm-triggered": "Aucune alarme déclenchée",
"no-pif-detected": "Aucun pif détecté",
"no-result": "Aucun résultat",
"no-selected-vm-can-be-exported": "Aucune VM sélectionnée ne peut être exportée",
"no-selected-vm-can-be-migrated": "Aucune VM sélectionnée ne peut être migrée",
Expand Down Expand Up @@ -250,6 +254,7 @@
"support": "Support",
"suspend": "Suspendre",
"switch-theme": "Changer de thème",
"table-actions": "Actions du tableau",

"task.estimated-end": "Fin estimée",
"task.progress": "Progression",
Expand All @@ -271,6 +276,7 @@
"vm.active": "Active | Active | Actives",
"vm.inactive": "Inactive | Inactive | Inactives",

"vlan": "Vlan",
"vm-is-running": "La VM est en cours d'exécution",
"xo-lite-under-construction": "XOLite est en construction",
"xoa-admin-account": "Compte administrateur de la XOA",
Expand Down
2 changes: 1 addition & 1 deletion @xen-orchestra/lite/src/stores/xen-api/pif-metrics.store.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export const usePifMetricsStore = defineStore('xen-api-pif-metrics', () => {

const getPifCarrier = (pif: XenApiPif) => {
const pifMetrics = baseContext.getByOpaqueRef(pif.metrics)
return pifMetrics.carrier
return pifMetrics?.carrier
}

const context = {
Expand Down
4 changes: 2 additions & 2 deletions @xen-orchestra/lite/src/views/host/HostNetworkView.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<UiCard class="host-network-view">
<HostPifTable :pifs="pifs" :is-ready />
<HostPifTable :pifs :is-ready :has-error />
</UiCard>
</template>

Expand All @@ -13,7 +13,7 @@ import { useI18n } from 'vue-i18n'
usePageTitleStore().setTitle(useI18n().t('network'))
const { currentHostPifs: pifs, isReady } = usePifStore().subscribe()
const { currentHostPifs: pifs, isReady, hasError } = usePifStore().subscribe()
</script>

<style lang="postcss" scoped>
Expand Down

0 comments on commit dde53c7

Please sign in to comment.