Skip to content

Commit

Permalink
feat(xo-6): handle None values
Browse files Browse the repository at this point in the history
  • Loading branch information
CzechSebastian committed Dec 11, 2024
1 parent 7110b41 commit d71c025
Show file tree
Hide file tree
Showing 5 changed files with 52 additions and 27 deletions.
2 changes: 2 additions & 0 deletions @xen-orchestra/web-core/lib/locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@
"n-vms": "1 VM | {n} VMs",
"network": "Network",
"no-data": "No data",
"none": "None",
"object-not-found": "Object {id} can't be found…",
"off": "Off",
"on": "On",
Expand Down Expand Up @@ -116,6 +117,7 @@
"tags": "Tags",
"total": "Total",
"total-cpus": "Total CPUs",
"unknown": "Unknown",
"uuid": "Uuid",
"vlan": "VLAN",
"vms": "VMs"
Expand Down
2 changes: 2 additions & 0 deletions @xen-orchestra/web-core/lib/locales/fr.json
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@
"n-vms": "1 VM | {n} VMs",
"network": "Réseau",
"no-data": "Aucune donnée",
"none": "Aucun",
"object-not-found": "L'objet {id} est introuvable…",
"off": "Éteint",
"on": "Allumé",
Expand Down Expand Up @@ -116,6 +117,7 @@
"tags": "Etiquettes",
"total": "Total",
"total-cpus": "Total CPUs",
"unknown": "Inconnu",
"uuid": "Uuid",
"vlan": "VLAN",
"vms": "VMs"
Expand Down
52 changes: 31 additions & 21 deletions @xen-orchestra/web/src/components/pif/PifPanel.vue
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
{{ $t('network') }}
</template>
<template #value>
{{ getNetworkData(pif, 'name_label') }}
{{ getNetworkData('name_label') }}
</template>
<template #addons>
<UiButtonIcon :icon="faCopy" size="medium" accent="info" />
Expand All @@ -50,23 +50,23 @@
{{ $t('pif-status') }}
</template>
<template #value>
<PifStatus :icon="faCircle" :pif="props.pif" card />
<PifStatus :pif="props.pif" card />
</template>
</VtsCardRowKeyValue>
<VtsCardRowKeyValue>
<template #key>
{{ $t('physical-interface-status') }}
</template>
<template #value>
<PifStatus :icon="faCircle" :pif="props.pif" card />
<PifStatus :pif="props.pif" card />
</template>
</VtsCardRowKeyValue>
<VtsCardRowKeyValue>
<template #key>
{{ $t('vlan') }}
</template>
<template #value>
{{ props.pif.vlan }}
{{ getPifData('vlan') }}
</template>
<template #addons>
<UiButtonIcon :icon="faCopy" size="medium" accent="info" />
Expand All @@ -77,8 +77,9 @@
{{ $t('tags') }}
</template>
<template #value>
<div class="tags">
<UiTag v-for="tag in getTags(pif)" :key="tag" accent="info" variant="secondary">
<div v-if="!Array.isArray(getNetworkData('tags'))">{{ getNetworkData('tags') }}</div>
<div v-else class="tags">
<UiTag v-for="tag in getNetworkData('tags')" :key="tag" accent="info" variant="secondary">
{{ tag }}
</UiTag>
</div>
Expand All @@ -95,7 +96,8 @@
{{ $t('ip-addresses') }}
</template>
<template #value>
<p v-for="ip in allIps" :key="ip" v-tooltip class="ip-address text-ellipsis">{{ ip }}</p>
<p v-for="ip in allIps" :key="ip" v-tooltip class="ip-address text-ellipsis">{{ getPifData('ip') }}</p>
<p v-if="!allIps.length">{{ getPifData('ip') }}</p>
</template>
<template #addons>
<UiButtonIcon v-if="allIps.length > 1" :icon="faEllipsis" size="medium" accent="info" />
Expand All @@ -118,7 +120,7 @@
{{ $t('netmask') }}
</template>
<template #value>
{{ props.pif.netmask }}
{{ getPifData('netmask') }}
</template>
<template #addons>
<UiButtonIcon :icon="faCopy" size="medium" accent="info" />
Expand All @@ -129,7 +131,7 @@
{{ $t('dns') }}
</template>
<template #value>
{{ props.pif.dns }}
{{ getPifData('dns') }}
</template>
<template #addons>
<UiButtonIcon :icon="faCopy" size="medium" accent="info" />
Expand All @@ -140,7 +142,7 @@
{{ $t('gateway') }}
</template>
<template #value>
{{ props.pif.gateway }}
{{ getPifData('gateway') }}
</template>
<template #addons>
<UiButtonIcon :icon="faCopy" size="medium" accent="info" />
Expand Down Expand Up @@ -183,7 +185,7 @@
{{ $t('network-block-device') }}
</template>
<template #value>
{{ $t(`${getNetworkData(pif, 'nbd')}`) }}
{{ $t(`${getNetworkData('nbd')}`) }}
</template>
<template #addons>
<UiButtonIcon :icon="faCopy" size="medium" accent="info" />
Expand All @@ -194,7 +196,7 @@
{{ $t('default-locking-mode') }}
</template>
<template #value>
{{ $t(`${getNetworkData(pif, 'defaultIsLocked')}`) }}
{{ $t(`${getNetworkData('defaultIsLocked')}`) }}
</template>
<template #addons>
<UiButtonIcon :icon="faCopy" size="medium" accent="info" />
Expand Down Expand Up @@ -232,17 +234,25 @@ const allIps = computed(() => {
return [props.pif.ip, ...props.pif.ipv6].filter(ip => ip)
})
const getNetworkData = (pif: XoPif, type: keyof XoNetwork) => {
const network: XoNetwork = get(pif.$network)!
if (type === 'name_label') {
return network.name_label ? network.name_label : 'Unknown'
} else if (type === 'nbd' || type === 'defaultIsLocked') {
return network[type] ? 'on' : 'off'
const getNetworkData = (type: keyof XoNetwork) => {
const network: XoNetwork = get(props.pif.$network)!
switch (type) {
case 'name_label':
return network.name_label || '-'
case 'nbd':
case 'defaultIsLocked':
return network[type] ? 'on' : 'off'
case 'tags':
return network.tags.length ? network.tags : '-'
default:
return undefined
}
}
const getTags = (pif: XoPif) => {
const network: XoNetwork = get(pif.$network)!
return network.tags.length > 0 ? network.tags : []
const getPifData = (type: keyof XoPif) => {
const value = type === 'vlan' ? props.pif.vlan : props.pif[type]
return value === -1 || value === '' ? '-' : value
}
</script>

Expand Down
4 changes: 2 additions & 2 deletions @xen-orchestra/web/src/components/pif/PifStatus.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<UiInfo class="pif-status text-ellipsis" :accent="getStatusProps(status).accent">
<p class="text-ellipsis">{{ getStatusProps(status).text }}</p>
<p class="text-ellipsis" :class="{ card }">{{ getStatusProps(status).text }}</p>
</UiInfo>
</template>

Expand Down Expand Up @@ -41,7 +41,7 @@ const getStatusProps = (status: NetworkStatus) => states.value[status as Network
</script>

<style scoped lang="postcss">
.pif-status p {
p:not(.card) {
font-size: 1.4rem !important;
}
</style>
19 changes: 15 additions & 4 deletions @xen-orchestra/web/src/components/pif/PifTable.vue
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@
>
<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" />
<div v-if="column.id === 'network'" class="network">
<div v-if="column.id === 'network' && getNetworkName(row.value)" class="network">
<UiComplexIcon size="medium">
<VtsIcon :icon="faNetworkWired" accent="current" />
<VtsIcon accent="success" :icon="faCircle" :overlay-icon="faCheck" />
Expand All @@ -65,9 +65,11 @@
</div>
<div v-if="column.id === 'device'" v-tooltip class="text-ellipsis">{{ row.value.device }}</div>
<div v-if="column.id === 'status'" v-tooltip>
<PifStatus :pif="row.value" />
<PifStatus class="status" :pif="row.value" />
</div>
<div v-if="column.id === 'vlan'" v-tooltip class="text-ellipsis">
{{ getPifData(row.value, 'vlan') }}
</div>
<div v-if="column.id === 'vlan'" v-tooltip class="text-ellipsis">{{ row.value.vlan }}</div>
<div v-if="column.id === 'ip'" v-tooltip class="text-ellipsis">{{ row.value.ip }}</div>
<div v-if="column.id === 'mac'" v-tooltip class="text-ellipsis">{{ row.value.mac }}</div>
<div v-if="column.id === 'mode'" v-tooltip class="text-ellipsis">{{ row.value.mode }}</div>
Expand Down Expand Up @@ -136,7 +138,12 @@ const { get, isReady } = useNetworkStore().subscribe()
const getNetworkName = (pif: XoPif) => {
const network: XoNetwork = get(pif.$network)!
return network.name_label ? network.name_label : 'Unknown'
return network.name_label ? network.name_label : ''
}
const getPifData = (pif: XoPif, type: keyof XoPif) => {
const value = type === 'vlan' ? pif.vlan : pif[type]
return value === -1 || value === '' ? '' : value
}
const searchQuery = ref('')
Expand Down Expand Up @@ -263,6 +270,10 @@ const selectRow = (rowId: XoPif['id']) => {
display: flex;
gap: 1.6rem;
}
.status {
font-size: 8.4rem !important;
}
}
@media (max-width: 1500px) {
Expand Down

0 comments on commit d71c025

Please sign in to comment.