Skip to content

Commit

Permalink
improvement and refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
@J0ris-K
J0ris-K committed Jan 23, 2025
1 parent 66dcb47 commit 0df6f72
Show file tree
Hide file tree
Showing 2 changed files with 75 additions and 67 deletions.
139 changes: 74 additions & 65 deletions @xen-orchestra/lite/src/components/host/network/HostPifSidePanel.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<template>
<UiPanel class="pif-panel">
<VtsNoSelectionHero v-if="!pif" type="panel" />
<template #header>
<UiButton size="medium" variant="tertiary" accent="info" :left-icon="faEdit">
{{ $t('edit') }}
Expand All @@ -8,9 +9,11 @@
{{ $t('delete') }}
</UiButton>
</template>
<UiCard class="card">
<!-- PIF -->
<UiCard v-if="pif" class="card">
<UiCardTitle>{{ $t('pif') }}</UiCardTitle>
<div class="content">
<!-- UUID -->
<VtsCardRowKeyValue>
<template #key>
{{ $t('uuid') }}
Expand All @@ -19,10 +22,17 @@
{{ pif.uuid }}
</template>
<template #addons>
<VtsIcon accent="warning" :icon="faCircle" :overlay-icon="faStar" />
<VtsIcon
v-if="pif.management"
v-tooltip="t('management')"
accent="warning"
:icon="faCircle"
:overlay-icon="faStar"
/>
<UiButtonIcon :icon="faCopy" size="medium" accent="info" />
</template>
</VtsCardRowKeyValue>
<!-- NETWORK -->
<VtsCardRowKeyValue>
<template #key>
{{ $t('network') }}
Expand All @@ -33,13 +43,14 @@
<VtsIcon :icon="faNetworkWired" accent="current" />
<VtsIcon accent="success" :icon="faCircle" :overlay-icon="faCheck" />
</UiComplexIcon>
<a href=""> {{ getNetworkData('name_label') }}</a>
<a href="">{{ networkNameLabel }}</a>
</div>
</template>
<template #addons>
<UiButtonIcon :icon="faCopy" size="medium" accent="info" />
</template>
</VtsCardRowKeyValue>
<!-- DEVICE -->
<VtsCardRowKeyValue>
<template #key>
{{ $t('device') }}
Expand All @@ -51,65 +62,70 @@
<UiButtonIcon :icon="faCopy" size="medium" accent="info" />
</template>
</VtsCardRowKeyValue>
<!-- PIF STATUS -->
<VtsCardRowKeyValue>
<template #key>
{{ $t('pif-status') }}
</template>
<template #value>
<VtsConnectionStatus :status="getPifStatus(pif)" />
<VtsConnectionStatus :status="pifStatus" />
</template>
</VtsCardRowKeyValue>
<!-- PHYSICAL INTERFACE STATUS -->
<VtsCardRowKeyValue>
<template #key>
{{ $t('physical-interface-status') }}
</template>
<template #value>
<VtsConnectionStatus :status="getPhysicalInterfaceStatus(pif)" />
<VtsConnectionStatus :status="physicalInterfaceStatus" />
</template>
</VtsCardRowKeyValue>
<!-- VLAN -->
<VtsCardRowKeyValue>
<template #key>
{{ $t('vlan') }}
</template>
<template #value>
{{ getPifData('VLAN') }}
{{ getVlan }}
</template>
<template #addons>
<UiButtonIcon :icon="faCopy" size="medium" accent="info" />
</template>
</VtsCardRowKeyValue>
<!-- TAGS -->
<VtsCardRowKeyValue>
<template #key>
{{ $t('tags') }}
</template>
<template #value>
<div v-if="!Array.isArray(getNetworkData('tags'))">{{ getNetworkData('tags') }}</div>
<div v-if="networkTags">{{ networkTags }}</div>
<div v-else class="tags">
<UiTag v-for="tag in getNetworkData('tags')" :key="tag" accent="info" variant="secondary">
<UiTag v-for="tag in networkTags" :key="tag" accent="info" variant="secondary">
{{ tag }}
</UiTag>
</div>
</template>
</VtsCardRowKeyValue>
</div>
</UiCard>
<UiCard class="card">
<!-- NETWORK INFORMATION -->
<UiCard v-if="pif" class="card">
<UiCardTitle>{{ $t('network-information') }}</UiCardTitle>

<div class="content">
<!-- IP ADDRESSES -->
<VtsCardRowKeyValue>
<template #key>
{{ $t('ip-addresses') }}
</template>
<template #value>
<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 v-if="allIps.length > 0" #value>
<span v-for="ip in allIps" :key="ip" v-tooltip class="ip-address text-ellipsis">{{ ip }}</span>
</template>
<template #addons>
<UiButtonIcon v-if="allIps.length > 1" :icon="faEllipsis" size="medium" accent="info" />
<UiButtonIcon :icon="faCopy" size="medium" accent="info" />
</template>
</VtsCardRowKeyValue>
<!-- MAC ADDRESSES -->
<VtsCardRowKeyValue>
<template #key>
{{ $t('mac-address') }}
Expand All @@ -121,52 +137,58 @@
<UiButtonIcon :icon="faCopy" size="medium" accent="info" />
</template>
</VtsCardRowKeyValue>
<!-- NETMASK -->
<VtsCardRowKeyValue>
<template #key>
{{ $t('netmask') }}
</template>
<template #value>
{{ getPifData('netmask') }}
{{ getNetmask }}
</template>
<template #addons>
<UiButtonIcon :icon="faCopy" size="medium" accent="info" />
</template>
</VtsCardRowKeyValue>
<!-- DNS -->
<VtsCardRowKeyValue>
<template #key>
{{ $t('dns') }}
</template>
<template #value>
{{ getPifData('DNS') }}
{{ getDNS }}
</template>
<template #addons>
<UiButtonIcon :icon="faCopy" size="medium" accent="info" />
</template>
</VtsCardRowKeyValue>
<!-- GATEWAY -->
<VtsCardRowKeyValue>
<template #key>
{{ $t('gateway') }}
</template>
<template #value>
{{ getPifData('gateway') }}
{{ getGateway }}
</template>
<template #addons>
<UiButtonIcon :icon="faCopy" size="medium" accent="info" />
</template>
</VtsCardRowKeyValue>
<!-- IP CONFIGURATION MODE -->
<VtsCardRowKeyValue>
<template #key>
{{ $t('ip-mode') }}
</template>
<template #value>
{{ getPifData('ip_configuration_mode') }}
{{ getIpConfigurationMode }}
</template>
</VtsCardRowKeyValue>
</div>
</UiCard>
<UiCard class="card">
<!-- PROPERTIES -->
<UiCard v-if="pif" class="card">
<UiCardTitle>{{ $t('properties') }}</UiCardTitle>
<div class="content">
<!-- MTU -->
<VtsCardRowKeyValue>
<template #key>
{{ $t('mtu') }}
Expand All @@ -178,20 +200,22 @@
<UiButtonIcon :icon="faCopy" size="medium" accent="info" />
</template>
</VtsCardRowKeyValue>
<!-- SPEED -->
<VtsCardRowKeyValue>
<template #key>
{{ $t('speed') }}
</template>
<template #value>
{{ byteFormatter(getSpeedData(pif.metrics)) }}
{{ byteFormatter(getSpeed) }}
</template>
</VtsCardRowKeyValue>
<!-- NETWORK BLOCK DEVICE -->
<VtsCardRowKeyValue>
<template #key>
{{ $t('network-block-device') }}
</template>
<template #value>
{{ $t(`${getNetworkData('purpose')}`) }}
{{ $t(`${networkPurpose}`) }}
</template>
<template #addons>
<UiButtonIcon :icon="faCopy" size="medium" accent="info" />
Expand All @@ -203,19 +227,21 @@
</template>

<script setup lang="ts">
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 { usePifStore } from '@/stores/xen-api/pif.store'
import VtsCardRowKeyValue from '@core/components/card/VtsCardRowKeyValue.vue'
import VtsConnectionStatus from '@core/components/connection-status/VtsConnectionStatus.vue'
import VtsIcon from '@core/components/icon/VtsIcon.vue'
import VtsNoSelectionHero from '@core/components/state-hero/VtsNoSelectionHero.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 UiComplexIcon from '@core/components/ui/complex-icon/UiComplexIcon.vue'
import UiPanel from '@core/components/ui/panel/UiPanel.vue'
import UiTag from '@core/components/ui/tag/UiTag.vue'
import { useRouteQuery } from '@core/composables/route-query.composable'
import { vTooltip } from '@core/directives/tooltip.directive'
import {
faCheck,
Expand All @@ -229,73 +255,56 @@ import {
} from '@fortawesome/free-solid-svg-icons'
import humanFormat from 'human-format'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
const { pif } = defineProps<{
pif: XenApiPif
}>()
const { currentHostPifs: pifs } = usePifStore().subscribe()
const { getByOpaqueRef: getOpaqueRefNetwork } = useNetworkStore().subscribe()
const { getByOpaqueRef: getOpaqueRefMetrics, getPifCarrier } = usePifMetricsStore().subscribe()
const { t } = useI18n()
const pifId = useRouteQuery('id')
const pif = computed(() => pifs.value.find(pif => pif.uuid === pifId.value))
const network = computed(() => getOpaqueRefNetwork(pif.value.network))
const allIps = computed(() => {
return [pif.IP, ...pif.IPv6].filter(ip => ip)
const ips = [pif.value.IP, ...pif.value.IPv6].filter(ip => ip)
return ips.length > 0 ? ips : ['-']
})
const networkNameLabel = computed(() => network.value?.name_label || '-')
const getNetworkData = (type: keyof XenApiNetwork) => {
const network: XenApiNetwork = getOpaqueRefNetwork(pif.network)!
const networkPurpose = computed(() => (network.value?.purpose?.[0] ? t('on') : t('off')))
switch (type) {
case 'name_label':
return network.name_label || '-'
case 'purpose':
return network.purpose[0] ? 'on' : 'off'
case 'tags':
return network.tags.length ? network.tags : '-'
}
}
const networkTags = computed(() => (network.value?.tags?.length ? network.value.tags : '-'))
const getPifStatus = (pif: XenApiPif) => {
const currentlyAttached = pif.currently_attached
const pifStatus = computed(() => (pif.value.currently_attached ? 'connected' : 'disconnected'))
return currentlyAttached ? 'connected' : 'disconnected'
}
const physicalInterfaceStatus = computed(() =>
getPifCarrier(pif.value) ? 'connected' : 'disconnected-from-physical-device'
)
const getPhysicalInterfaceStatus = (pif: XenApiPif) => {
const carrier = getPifCarrier(pif)
const getSpeed = computed(() => getOpaqueRefMetrics(pif.value.metrics)?.speed || 0)
return carrier ? 'connected' : 'disconnected-from-physical-device'
}
const getVlan = computed(() => (pif.value.VLAN === -1 ? '-' : pif.value.VLAN))
const getSpeedData = (speedRef: string) => {
const metrics = getOpaqueRefMetrics(speedRef)
return metrics?.speed ? metrics.speed : 0
}
const getNetmask = computed(() => (pif.value.netmask === '' ? '-' : pif.value.netmask))
const getPifData = (type: keyof XenApiPif) => {
const value = pif[type]
const getDNS = computed(() => (pif.value.DNS === '' ? '-' : pif.value.DNS))
switch (type) {
case 'VLAN':
return value === -1 ? '-' : value
case 'netmask':
case 'DNS':
case 'gateway':
case 'IP':
return value === '' ? '-' : pif.netmask
case 'ip_configuration_mode':
return value === 'None' ? '-' : value
}
}
const getGateway = computed(() => (pif.value.gateway === '' ? '-' : pif.value.gateway))
const byteFormatter = (value: number) => {
const getIpConfigurationMode = computed(() =>
pif.value.ip_configuration_mode === t('none') ? '-' : pif.value.ip_configuration_mode
)
const byteFormatter = computed(() => (value: number) => {
const speedInBytes = value * 1000000
return humanFormat(speedInBytes, {
scale: 'SI',
unit: 'b/s',
maxDecimals: 2,
})
}
})
</script>

<style scoped lang="postcss">
Expand Down
3 changes: 1 addition & 2 deletions @xen-orchestra/web-core/lib/components/card/VtsCardRowKeyValue.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,7 @@ const slots = defineSlots<{
gap: 0.8rem;
.key {
min-width: 12rem;
max-width: 12rem;
min-width: 14rem;
overflow-wrap: break-word;
color: var(--color-neutral-txt-secondary);
}
Expand Down

0 comments on commit 0df6f72

Please sign in to comment.