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 Jan 22, 2025
1 parent 8449cff commit 15a88ea
Show file tree
Hide file tree
Showing 2 changed files with 109 additions and 90 deletions.
164 changes: 74 additions & 90 deletions @xen-orchestra/lite/src/components/host/network/HostPifTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
</UiButton>
</template>
</UiTitle>
<div class="container">
<div class="table-actions">
<UiQuerySearchBar class="table-query" @search="(value: string) => (searchQuery = value)" />
<UiTableActions :title="t('table-actions')">
<UiButton
Expand Down Expand Up @@ -44,67 +44,61 @@
:total-items="pifsUuids.length"
@toggle-select-all="toggleSelect"
/>
<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.name }}</a>
<VtsIcon
v-if="column.value.management"
v-tooltip="t('management')"
accent="warning"
:icon="faCircle"
:overlay-icon="faStar"
/>
</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 class="table-container">
<VtsDataTable :is-ready :has-error :no-data-message="pifs.length === 0 ? $t('no-pif-detected') : undefined">
<template #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>
</template>
<template #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.name }}</a>
<VtsIcon
v-if="column.value.management"
v-tooltip="t('management')"
accent="warning"
:icon="faCircle"
:overlay-icon="faStar"
/>
</div>
<div v-else v-tooltip="{ placement: 'bottom-end' }" class="text-ellipsis">
{{ column.value }}
</div>
</td>
</tr>
</template>
</VtsDataTable>
</div>
<VtsStateHero v-if="searchQuery && filteredPifs.length === 0" type="table" image="no-result">
<div>{{ $t('no-result') }}</div>
</VtsStateHero>
<UiTopBottomTable
:selected-items="selected.length"
:total-items="pifsUuids.length"
@toggle-select-all="toggleSelect"
/>
</div>
</template>

Expand All @@ -115,11 +109,9 @@ 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 VtsDataTable from '@core/components/table/VtsDataTable.vue'
import UiButton from '@core/components/ui/button/UiButton.vue'
import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
import UiCheckbox from '@core/components/ui/checkbox/UiCheckbox.vue'
Expand Down Expand Up @@ -148,7 +140,7 @@ import {
import { computed, ref } from 'vue'
import { useI18n } from 'vue-i18n'
const { pifs, hasError } = defineProps<{
const { pifs } = defineProps<{
pifs: XenApiPif[]
isReady: boolean
hasError: boolean
Expand Down Expand Up @@ -206,14 +198,14 @@ const { visibleColumns, rows } = useTable('pifs', filteredPifs, {
name: getNetworkName(record.network),
management: record.management,
}),
{ label: t('network'), isHideable: true }
{ label: t('network') }
),
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-addresses'), isHideable: true }),
define('MAC', { label: t('mac-addresses'), isHideable: true }),
define('ip_configuration_mode', { label: t('ip-mode'), isHideable: true }),
define('device', { label: t('device') }),
define('status', record => getPifStatus(record), { label: t('status') }),
define('VLAN', record => getVlanData(record.VLAN), { label: t('vlan') }),
define('IP', { label: t('ip-addresses') }),
define('MAC', { label: t('mac-addresses') }),
define('ip_configuration_mode', { label: t('ip-mode') }),
define('more', () => '', { label: '', isHideable: false }),
],
})
Expand All @@ -233,40 +225,32 @@ const getHeaderIcon = (status: PifHeader) => headerIcon[status]

<style scoped lang="postcss">
.host-pif-table,
.container {
.table-actions {
display: flex;
flex-direction: column;
}
.host-pif-table {
gap: 2.4rem;
.container {
.table-actions {
gap: 0.8rem;
}
.table {
overflow-x: auto;
.network {
display: flex;
align-items: center;
gap: 1.8rem;
}
tr:last-child {
border-bottom: 1px solid var(--color-neutral-border);
}
.table-container {
.network {
display: flex;
align-items: center;
gap: 1.8rem;
}
.checkbox,
.more {
width: 4.8rem;
}
}
@media (max-width: 1440px) {
.table table {
width: 160rem;
tr:last-child {
border-bottom: 1px solid var(--color-neutral-border);
}
}
}
Expand Down
35 changes: 35 additions & 0 deletions @xen-orchestra/web-core/lib/components/table/VtsDataTable.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<template>
<div class="vts-data-table">
<VtsLoadingHero :disabled="isReady" type="table">
<VtsTable vertical-border>
<thead>
<slot name="thead" />
</thead>
<tbody>
<slot name="tbody" />
</tbody>
</VtsTable>
</VtsLoadingHero>
<VtsErrorNoDataHero v-if="hasError" type="table" />
<VtsStateHero v-if="noDataMessage" type="table" image="no-data">
{{ noDataMessage }}
</VtsStateHero>
</div>
</template>

<script setup lang="ts">
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 VtsTable from '@core/components/table/VtsTable.vue'
defineProps<{
isReady?: boolean
hasError?: boolean
noDataMessage?: string
}>()
defineSlots<{
thead(): any
tbody(): any
}>()
</script>

0 comments on commit 15a88ea

Please sign in to comment.