Skip to content

Commit

Permalink
improvement
Browse files Browse the repository at this point in the history
  • Loading branch information
@J0ris-K
J0ris-K committed Dec 12, 2024
1 parent 293396c commit f57975b
Show file tree
Hide file tree
Showing 4 changed files with 89 additions and 41 deletions.
25 changes: 17 additions & 8 deletions @xen-orchestra/lite/src/components/pool/network/PoolHostInternalNetworkTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
:total-items="networkUuids.length"
@toggle-select-all="toggleSelect"
/>
<div class="table">
<div v-if="filteredNetworks.length > 0" class="table">
<VtsTable vertical-border>
<thead>
<tr>
Expand All @@ -65,7 +65,7 @@
v-for="row of rows"
:key="row.id"
:class="{ 'row-selected': selectedRowId === (row.value as XenApiNetwork).uuid }"
@click="selectRow(row.value)"
@click="selectRow(row.value, 'host-internal-network')"
>
<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" />
Expand All @@ -78,21 +78,27 @@
</tbody>
</VtsTable>
</div>

<VtsStateHero v-if="searchQuery && filteredNetworks.length === 0" type="table" image="no-result">
<div>{{ $t('no-result') }}</div>
</VtsStateHero>

<UiCardSpinner v-if="!isReady" />
<UiTopBottomTable
:selected-items="selected.length"
:total-items="networkUuids.length"
@toggle-select-all="toggleSelect"
/>
</div>
</div>
<UiCardSpinner v-if="!isReady" />
</template>

<script setup lang="ts">
import UiCardSpinner from '@/components/ui/UiCardSpinner.vue'
import useMultiSelect from '@/composables/multi-select.composable'
import type { XenApiNetwork } from '@/libs/xen-api/xen-api.types'
import VtsIcon from '@core/components/icon/VtsIcon.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 All @@ -119,6 +125,7 @@ import { computed, ref } from 'vue'
const { networks, isReady } = defineProps<{
networks: XenApiNetwork[]
isReady: boolean
selectedRowId: string | null
}>()
const emit = defineEmits<{
Expand All @@ -127,11 +134,8 @@ const emit = defineEmits<{
const searchQuery = ref('')
const selectedRowId = ref('')
const selectRow = (item: any) => {
selectedRowId.value = item.uuid
emit('rowSelectHostInternalNetwork', item)
const selectRow = (item: any, table: string) => {
emit('rowSelectHostInternalNetwork', { item, table })
}
const filteredNetworks = computed(() => {
Expand Down Expand Up @@ -193,6 +197,11 @@ const getHeaderIcon = (status: NetworkHeader) => headerIcon[status].icon
.table {
overflow-x: auto;
tbody tr:hover {
cursor: pointer;
background-color: var(--color-info-background-hover);
}
tr:last-child {
border-bottom: 1px solid var(--color-neutral-border);
}
Expand Down
43 changes: 27 additions & 16 deletions @xen-orchestra/lite/src/components/pool/network/PoolNetworksSidePanel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@
<UiButtonIcon accent="info" size="medium" :icon="faEllipsis" />
</template>
<UiCard v-if="selectedNetwork" class="card-container">
<div v-tooltip="{ placement: 'bottom-end' }" class="typo p1-medium text-ellipsis">
<UiCardTitle v-tooltip="{ placement: 'bottom-end' }" class="typo p1-medium text-ellipsis">
{{ (selectedNetwork as any)?.network.name_label }}
</div>
</UiCardTitle>
<div>
<div class="typo p3-regular content-details">
<div class="typo p3-regular content">
<div class="title">{{ $t('uuid') }}</div>
<div class="value text-ellipsis">{{ (selectedNetwork as any)?.network.uuid }}</div>
<UiButtonIcon
Expand All @@ -20,22 +20,22 @@
@click="copyToClipboard((selectedNetwork as any)?.network.uuid)"
/>
</div>
<div class="typo p3-regular content-details">
<div class="typo p3-regular content">
<div class="title">{{ $t('description') }}</div>
<div class="value">{{ (selectedNetwork as any)?.network.name_description }}</div>
<div class="value text-ellipsis">{{ (selectedNetwork as any)?.network.name_description }}</div>
<UiButtonIcon
accent="info"
size="medium"
:icon="faCopy"
@click="copyToClipboard((selectedNetwork as any)?.network.name_description)"
/>
</div>
<div v-if="(selectedNetwork as any)?.vlan" class="typo p3-regular content-details">
<div v-if="(selectedNetwork as any)?.vlan" 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>
<div class="typo p3-regular content-details">
<div class="typo p3-regular content">
<div class="title">{{ $t('mtu') }}</div>
<div class="value">{{ (selectedNetwork as any)?.network.MTU }}</div>
<UiButtonIcon
Expand All @@ -45,7 +45,7 @@
@click="copyToClipboard((selectedNetwork as any)?.network.MTU)"
/>
</div>
<div v-if="(selectedNetwork as any)?.network.purpose[0]" class="typo p3-regular content-details">
<div v-if="(selectedNetwork as any)?.network.purpose[0]" class="typo p3-regular content">
<div class="title">{{ $t('network-block-device') }}</div>
<div class="value">{{ (selectedNetwork as any)?.network.purpose[0] }}</div>
<UiButtonIcon
Expand All @@ -56,9 +56,9 @@
@click="copyToClipboard((selectedNetwork as any)?.network.purpose[0])"
/>
</div>
<div class="typo p3-regular content-details">
<div class="typo p3-regular content">
<div class="title">{{ $t('locking-mode-default') }}</div>
<div class="value">{{ (selectedNetwork as any)?.network.default_locking_mode }}</div>
<div class="value default-locking">{{ (selectedNetwork as any)?.network.default_locking_mode }}</div>
</div>
</div>
</UiCard>
Expand Down Expand Up @@ -93,9 +93,13 @@
<tr v-for="selected in selectedPifs" :key="selected.PIF.uuid">
<td class="typo p3-regular">
<UiObjectIcon :state="selected?.host?.hostStatus ? 'running' : 'disabled'" type="host" size="small" />
{{ selected?.host?.name_label }}
<a>
{{ selected?.host?.name_label }}
</a>
</td>
<td class="typo p3-regular">
{{ selected.PIF.device }}
</td>
<td class="typo p3-regular">{{ 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>
Expand All @@ -116,6 +120,7 @@ import type { XenApiNetwork, XenApiPif } from '@/libs/xen-api/xen-api.types'
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'
Expand All @@ -128,7 +133,6 @@ const { selectedPifs, selectedNetwork } = defineProps<{
selectedNetwork?: {
network: XenApiNetwork
status?: string
selected?: boolean
vlan?: string
}
selectedPifs?: {
Expand All @@ -154,7 +158,7 @@ const copyToClipboard = (text: string | number) => {
flex-direction: column;
gap: 1.6rem;
.content-details {
.content {
display: flex;
align-items: center;
gap: 0.8rem;
Expand All @@ -168,6 +172,10 @@ const copyToClipboard = (text: string | number) => {
color: var(--color-neutral-txt-primary);
width: 20rem;
}
.default-locking {
width: 23rem;
}
}
.text-left {
Expand All @@ -182,16 +190,19 @@ const copyToClipboard = (text: string | number) => {
background-color: var(--color-info-background-hover);
}
}
}
.simple-table {
thead tr th {
color: var(--color-neutral-txt-secondary);
}
tbody tr td {
color: var(--color-neutral-txt-primary);
}
tbody tr td a {
margin-left: 0.8rem;
text-decoration: underline solid #6b63bf;
}
}
}
</style>
25 changes: 17 additions & 8 deletions @xen-orchestra/lite/src/components/pool/network/PoolNetworksTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
:total-items="networkUuids.length"
@toggle-select-all="toggleSelect"
/>
<div class="table">
<div v-if="filteredNetworks.length > 0" class="table">
<VtsTable vertical-border>
<thead>
<tr>
Expand All @@ -75,7 +75,7 @@
v-for="row of rows"
:key="row.id"
:class="{ 'row-selected': selectedRowId === (row.value as any).network.uuid }"
@click="selectRow(row.value)"
@click="selectRow(row.value, 'network')"
>
<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" />
Expand All @@ -91,14 +91,19 @@
</tbody>
</VtsTable>
</div>

<VtsStateHero v-if="searchQuery && filteredNetworks.length === 0" type="table" image="no-result">
<div>{{ $t('no-result') }}</div>
</VtsStateHero>

<UiCardSpinner v-if="!isReady" />
<UiTopBottomTable
:selected-items="selected.length"
:total-items="networkUuids.length"
@toggle-select-all="toggleSelect"
/>
</div>
</div>
<UiCardSpinner v-if="!isReady" />
</template>

<script setup lang="ts">
Expand All @@ -107,6 +112,7 @@ import UiCardSpinner from '@/components/ui/UiCardSpinner.vue'
import useMultiSelect from '@/composables/multi-select.composable'
import type { XenApiNetwork } from '@/libs/xen-api/xen-api.types'
import VtsIcon from '@core/components/icon/VtsIcon.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 @@ -140,18 +146,16 @@ const { networks, isReady } = defineProps<{
vlan?: string
}[]
isReady: boolean
selectedRowId: string | null
}>()
const emit = defineEmits<{
rowSelectNetwork: [value: any]
}>()
const selectedRowId = ref('')
const selectRow = (item: any) => {
selectedRowId.value = item.network.uuid
emit('rowSelectNetwork', item)
const selectRow = (item: any, table: string) => {
emit('rowSelectNetwork', { item, table })
}
const searchQuery = ref('')
Expand Down Expand Up @@ -229,6 +233,11 @@ const getHeaderIcon = (status: NetworkHeader) => headerIcon[status].icon
.table {
overflow-x: auto;
tbody tr:hover {
cursor: pointer;
background-color: var(--color-info-background-hover);
}
tr:last-child {
border-bottom: 1px solid var(--color-neutral-border);
}
Expand Down
37 changes: 28 additions & 9 deletions @xen-orchestra/lite/src/views/pool/PoolNetworkView.vue
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,18 @@
<template>
<div class="pool-network-view">
<UiCard class="card">
<PoolNetworksTable :networks="networksWithVLANs" :is-ready @row-select-network="selectNetwork" />
<PoolHostInternalNetworkTable :networks="hostInternalNetworks" :is-ready @row-select-host-internal-network="selectNetwork"
/>
<PoolNetworksTable
:networks="networksWithVLANs"
:is-ready
:selected-row-id="selectedNetworkRowId"
@row-select-network="selectNetwork"
/>
<PoolHostInternalNetworkTable
:networks="hostInternalNetworks"
:is-ready
:selected-row-id="selectedHostInternalRowId"
@row-select-host-internal-network="selectNetwork"
/>
</UiCard>
<PoolNetworksSidePanel v-if="selectedNetworks" :selected-network="selectedNetworks" :selected-pifs="selectedPIFs" />
<UiPanel v-else class="panel-container">
Expand Down Expand Up @@ -45,11 +54,17 @@ const selectedPIFs = ref<
}[]
>()
const selectedNetworkRowId = ref<string | null>(null)
const selectedHostInternalRowId = ref<string | null>(null)
const selectNetwork = (item: any) => {
if (item.network) {
const network = networksWithVLANs.value.find(pif => pif.network.uuid === item.network.uuid)
selectedPIFs.value = getPIFsInformationByNetwork(item.network)
const selectNetwork = (payload: { item: any; table: string }) => {
if (payload.table === 'network') {
selectedHostInternalRowId.value = null
selectedNetworkRowId.value = payload.item.network.uuid
const network = networksWithVLANs.value.find(pif => pif.network.uuid === payload.item.network.uuid)
selectedPIFs.value = getPIFsInformationByNetwork(payload.item.network)
if (network) {
selectedNetworks.value = {
network: network.network,
Expand All @@ -58,7 +73,12 @@ const selectNetwork = (item: any) => {
}
}
} else {
const hostInternalNetwork = hostInternalNetworks.value.find(pif => pif.uuid === item.uuid)
const hostInternalNetwork = hostInternalNetworks.value.find(pif => pif.uuid === payload.item.uuid)
selectedNetworkRowId.value = null
selectedHostInternalRowId.value = payload.item.uuid
if (hostInternalNetwork) {
selectedNetworks.value = {
network: hostInternalNetwork,
Expand All @@ -68,7 +88,6 @@ const selectNetwork = (item: any) => {
}
}
}
</script>

<style lang="postcss" scoped>
Expand Down

0 comments on commit f57975b

Please sign in to comment.