Skip to content

Commit

Permalink
improve
Browse files Browse the repository at this point in the history
  • Loading branch information
@J0ris-K
J0ris-K committed Jan 2, 2025
1 parent 3430d8e commit a05a2dd
Show file tree
Hide file tree
Showing 10 changed files with 197 additions and 98 deletions.
8 changes: 5 additions & 3 deletions @xen-orchestra/lite/src/components/pool/network/PoolHostInternalNetworkTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,9 @@
<UiButtonIcon size="small" accent="info" :icon="getHeaderIcon(column.id)" />
{{ column.label }}
</th>
<ColumnTitle v-else :icon="getHeaderIcon(column.id)"> {{ column.label }}</ColumnTitle>
<ColumnTitle v-else :icon="getHeaderIcon(column.id)">
<span class="text-ellipsis">{{ column.label }}</span>
</ColumnTitle>
</template>
</tr>
</thead>
Expand Down Expand Up @@ -129,13 +131,13 @@ const { networks, isReady } = defineProps<{
}>()
const emit = defineEmits<{
rowSelectHostInternalNetwork: [value: any]
rowSelectNetwork: [value: any]
}>()
const searchQuery = ref('')
const selectRow = (item: any, table: string) => {
emit('rowSelectHostInternalNetwork', { item, table })
emit('rowSelectNetwork', { item, table })
}
const filteredNetworks = computed(() => {
Expand Down
126 changes: 84 additions & 42 deletions @xen-orchestra/lite/src/components/pool/network/PoolNetworksSidePanel.vue
View file
Original file line number Diff line number Diff line change
@@ -1,83 +1,103 @@
<template>
<UiPanel v-if="selectedNetwork">
<template #header>
<UiButton variant="tertiary" size="medium" accent="info" :left-icon="faEdit">{{ $t('edit') }}</UiButton>
<UiButton variant="tertiary" size="medium" accent="danger" :left-icon="faTrash">{{ $t('delete') }}</UiButton>
<UiButton
v-tooltip="$t('coming-soon')"
disabled
variant="tertiary"
size="medium"
accent="info"
:left-icon="faEdit"
>
{{ $t('edit') }}
</UiButton>
<UiButton
v-tooltip="$t('coming-soon')"
disabled
variant="tertiary"
size="medium"
accent="danger"
:left-icon="faTrash"
>
{{ $t('delete') }}
</UiButton>
<UiButtonIcon accent="info" size="medium" :icon="faEllipsis" />
</template>
<UiCard v-if="selectedNetwork" class="card-container">
<UiCardTitle v-tooltip="{ placement: 'bottom-end' }" class="typo p1-medium text-ellipsis">
{{ (selectedNetwork as any)?.network.name_label }}
{{ selectedNetwork.network.name_label }}
</UiCardTitle>
<div>
<div class="typo p3-regular content">
<div class="title">{{ $t('uuid') }}</div>
<div class="value text-ellipsis">{{ (selectedNetwork as any)?.network.uuid }}</div>
<div class="value text-ellipsis">{{ getDisplayValue(selectedNetwork.network.uuid) }}</div>
<UiButtonIcon
v-if="selectedNetwork.network.uuid"
accent="info"
size="medium"
:icon="faCopy"
@click="copyToClipboard((selectedNetwork as any)?.network.uuid)"
@click="copyToClipboard(selectedNetwork.network.uuid)"
/>
</div>
<div class="typo p3-regular content">
<div class="title">{{ $t('description') }}</div>
<div class="value text-ellipsis">{{ (selectedNetwork as any)?.network.name_description }}</div>
<div class="value text-ellipsis">{{ getDisplayValue(selectedNetwork.network.name_description) }}</div>
<UiButtonIcon
v-if="selectedNetwork.network.name_description"
accent="info"
size="medium"
:icon="faCopy"
@click="copyToClipboard((selectedNetwork as any)?.network.name_description)"
@click="copyToClipboard(selectedNetwork.network.name_description)"
/>
</div>
<div v-if="(selectedNetwork as any)?.vlan" class="typo p3-regular content">
<div class="typo p3-regular content">
<div class="title">{{ $t('vlan') }}</div>
<div class="value">{{ (selectedNetwork as any)?.vlan }}</div>
<UiButtonIcon accent="info" size="medium" :icon="faCopy" />
<div class="value">{{ getDisplayValue(selectedNetwork.vlan) }}</div>
<UiButtonIcon
v-if="selectedNetwork.vlan"
accent="info"
size="medium"
:icon="faCopy"
@click="copyToClipboard(selectedNetwork.vlan)"
/>
</div>
<div class="typo p3-regular content">
<div class="title">{{ $t('mtu') }}</div>
<div class="value">{{ (selectedNetwork as any)?.network.MTU }}</div>
<div class="value">{{ getDisplayValue(selectedNetwork.network.MTU) }}</div>
<UiButtonIcon
v-if="selectedNetwork.network.MTU"
accent="info"
size="medium"
:icon="faCopy"
@click="copyToClipboard((selectedNetwork as any)?.network.MTU)"
@click="copyToClipboard(selectedNetwork.network.MTU)"
/>
</div>
<div v-if="(selectedNetwork as any)?.network.purpose[0]" class="typo p3-regular content">
<div class="typo p3-regular content">
<div class="title">{{ $t('network-block-device') }}</div>
<div class="value">{{ (selectedNetwork as any)?.network.purpose[0] }}</div>
<div class="value">{{ getDisplayValue(selectedNetwork.network.purpose[0]) }}</div>
<UiButtonIcon
v-if="(selectedNetwork as any)?.network.purpose[0]"
v-if="selectedNetwork.network.purpose[0]"
accent="info"
size="medium"
:icon="faCopy"
@click="copyToClipboard((selectedNetwork as any)?.network.purpose[0])"
@click="copyToClipboard(selectedNetwork.network.purpose[0])"
/>
</div>
<div class="typo p3-regular content">
<div class="title">{{ $t('locking-mode-default') }}</div>
<div class="value default-locking">{{ (selectedNetwork as any)?.network.default_locking_mode }}</div>
<div class="value">{{ getDisplayValue(selectedNetwork.network.default_locking_mode) }}</div>
</div>
</div>
</UiCard>
<UiCard
v-if="
selectedNetwork.network &&
(selectedNetwork as any)?.network.PIFs &&
(selectedNetwork as any)?.network.PIFs.length > 0
"
class="card-container"
>
<UiCard v-if="selectedNetwork?.network?.PIFs?.length > 0" class="card-container">
<div class="typo p1-medium">
{{ $t('pifs') }}
<UiCounter :value="selectedPIFsLength" variant="primary" size="small" accent="neutral" />
<UiCounter :value="selectedPifsLength" variant="primary" size="small" accent="neutral" />
</div>
<table class="simple-table">
<thead>
<tr>
<th class="text-left typo p3-regular">
<th class="text-left typo p3-regular host">
{{ $t('host') }}
</th>
<th class="text-left typo p3-regular">
Expand All @@ -91,21 +111,19 @@
</thead>
<tbody>
<tr v-for="selected in selectedPifs" :key="selected.PIF.uuid">
<td class="typo p3-regular">
<td class="typo p3-regular host">
<UiObjectIcon :state="selected?.host?.hostStatus ? 'running' : 'disabled'" type="host" size="small" />
<a>
{{ selected?.host?.name_label }}
</a>
</td>
<td class="typo p3-regular">
<td class="typo p3-regular device">
{{ selected.PIF.device }}
</td>
<td class="typo p3-regular">
<UiInfo v-if="selected.PIF.currently_attached" accent="success"> {{ $t('connected') }}</UiInfo>
<UiInfo v-else-if="!selected.PIF.currently_attached" accent="danger"> {{ $t('disconnected') }}</UiInfo>
<UiInfo v-else accent="warning"> {{ $t('partially-connected') }}</UiInfo>
<td class="typo p3-regular status">
<VtsConnectionStatus :status="selected.status" />
</td>
<td>
<td class="text-right">
<UiButtonIcon size="small" accent="info" :icon="faAngleRight" />
</td>
</tr>
Expand All @@ -117,12 +135,13 @@

<script setup lang="ts">
import type { XenApiNetwork, XenApiPif } from '@/libs/xen-api/xen-api.types'
import type { Status } from '@/types/status'
import VtsConnectionStatus from '@core/components/connection-status/VtsConnectionStatus.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 UiCounter from '@core/components/ui/counter/UiCounter.vue'
import UiInfo from '@core/components/ui/info/UiInfo.vue'
import UiObjectIcon from '@core/components/ui/object-icon/UiObjectIcon.vue'
import UiPanel from '@core/components/ui/panel/UiPanel.vue'
import { vTooltip } from '@core/directives/tooltip.directive'
Expand All @@ -132,19 +151,24 @@ import { computed } from 'vue'
const { selectedPifs, selectedNetwork } = defineProps<{
selectedNetwork?: {
network: XenApiNetwork
status?: string
status?: Status
vlan?: string
}
selectedPifs?: {
PIF: XenApiPif
status: Status
host?: {
name_label?: string
hostStatus?: boolean
}
}[]
}>()
const selectedPIFsLength = computed(() => selectedPifs?.length.toString())
const selectedPifsLength = computed(() => selectedPifs?.length.toString())
const getDisplayValue = (value?: string | number): string => {
return value ? String(value) : '-'
}
const copyToClipboard = (text: string | number) => {
const stringText = String(text)
Expand All @@ -165,24 +189,42 @@ const copyToClipboard = (text: string | number) => {
.title {
color: var(--color-neutral-txt-secondary);
min-width: 12rem;
min-width: 14rem;
}
.value {
color: var(--color-neutral-txt-primary);
width: 20rem;
}
.default-locking {
width: 23rem;
}
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.simple-table {
border-spacing: 0;
padding: 0.4rem;
td.host {
width: 13rem;
max-width: 13rem;
}
td.device {
width: 6rem;
max-width: 6rem;
}
td.status {
width: 14rem;
max-width: 14rem;
}
tbody tr {
cursor: pointer;
Expand Down
6 changes: 5 additions & 1 deletion @xen-orchestra/lite/src/components/pool/network/PoolNetworksTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@
{{ column.label }}
</th>
<ColumnTitle v-else :icon="getHeaderIcon(column.id)">
{{ column.label }}
<span class="text-ellipsis">{{ column.label }}</span>
</ColumnTitle>
</template>
</tr>
Expand Down Expand Up @@ -251,6 +251,10 @@ const getHeaderIcon = (status: NetworkHeader) => headerIcon[status]
.more {
width: 4.8rem;
}
::deep(.col-status) {
width: 2rem;
}
}
}
</style>
42 changes: 1 addition & 41 deletions @xen-orchestra/lite/src/stores/xen-api/network.store.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import type { XenApiNetwork, XenApiPif } from '@/libs/xen-api/xen-api.types'
import type { XenApiPif } from '@/libs/xen-api/xen-api.types'
import { createXapiStoreConfig } from '@/stores/xen-api/create-xapi-store-config'
import { useHostMetricsStore } from '@/stores/xen-api/host-metrics.store'
import { useHostStore } from '@/stores/xen-api/host.store'
import { usePifStore } from '@/stores/xen-api/pif.store'
import { usePoolStore } from '@/stores/xen-api/pool.store'
Expand All @@ -17,7 +16,6 @@ export const useNetworkStore = defineStore('xen-api-network', () => {
poolStore: usePoolStore(),
hostStore: useHostStore(),
pifStore: usePifStore(),
metricsStore: useHostMetricsStore(),
}

const { context: baseContext, ...configRest } = createXapiStoreConfig('network', {
Expand All @@ -27,7 +25,6 @@ export const useNetworkStore = defineStore('xen-api-network', () => {
const poolContext = deps.poolStore.getContext()
const hostContext = deps.hostStore.getContext()
const pifContext = deps.pifStore.getContext()
const metricsContext = deps.metricsStore.getContext()

const pifsByNetwork = computed(() => {
const pifsByNetworkMap = new Map<string, XenApiPif[]>()
Expand Down Expand Up @@ -63,46 +60,9 @@ export const useNetworkStore = defineStore('xen-api-network', () => {
const hostInternalNetworks = computed(() => {
return baseContext.records.value.filter(network => network.PIFs.length === 0) // Only networks without PIFs
})
const PIFsInfoByNetwork = computed(() => {
const PIFsInfoMap = new Map<
string,
{
PIF: XenApiPif
host?: {
name_label?: string
status?: boolean
}
}[]
>()

pifContext.records.value.forEach(PIF => {
const hostInfo = hostContext.getByOpaqueRef(PIF.host)
const hostStatus = hostInfo?.metrics ? metricsContext.getByOpaqueRef(hostInfo.metrics)?.live || false : false

const enrichedPIF = {
PIF,
host: {
name_label: hostInfo?.name_label,
hostStatus,
},
}

if (!PIFsInfoMap.has(PIF.network)) {
PIFsInfoMap.set(PIF.network, [])
}
PIFsInfoMap.get(PIF.network)?.push(enrichedPIF)
})

return PIFsInfoMap
})

const getPIFsInformationByNetwork = (network: XenApiNetwork) => {
return PIFsInfoByNetwork.value.get(network?.$ref) || []
}

const context = {
...baseContext,
getPIFsInformationByNetwork,
networksWithVLANs,
hostInternalNetworks,
}
Expand Down
20 changes: 20 additions & 0 deletions @xen-orchestra/lite/src/stores/xen-api/pif-metrics.store.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import type { XenApiPif } from '@/libs/xen-api/xen-api.types'
import { createXapiStoreConfig } from '@/stores/xen-api/create-xapi-store-config'
import { createSubscribableStoreContext } from '@core/utils/create-subscribable-store-context.util'
import { defineStore } from 'pinia'

export const usePifMetricsStore = defineStore('xen-api-pif-metrics', () => {
const { context: baseContext, ...configRest } = createXapiStoreConfig('pif_metrics')

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

const context = {
...baseContext,
getPifCarrier,
}

return createSubscribableStoreContext({ context, ...configRest }, {})
})
Loading

0 comments on commit a05a2dd

Please sign in to comment.