Skip to content

Commit 86140e3

Browse files
MathieuRAMathieuRA
committed
front
1 parent 7c732e0 commit 86140e3

15 files changed

+186
-111
lines changed

‎@xen-orchestra/web/src/components/site/dashboard/BackupIssues.vue

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
<UiCard>
33
<UiCardTitle>
44
{{ $t('backup-issues') }}
5-
<UiCounter :value="backupIssues.length" accent="danger" size="medium" variant="primary" />
5+
<UiCounter :value="record?.backups?.issues.length ?? 0" accent="danger" size="medium" variant="primary" />
66
<template #description>{{ $t('in-last-three-jobs') }}</template>
77
</UiCardTitle>
8-
<VtsLoadingHero v-if="!isReady" type="card" />
8+
<VtsLoadingHero v-if="!backupsIsReady" type="card" />
99
<VtsNoDataHero v-else-if="!hasBackupIssues" type="card" />
1010
<div v-else class="backup-items">
1111
<VtsBackupItem v-for="(coreBackupIssue, index) in coreBackupIssues" :key="index" :backup="coreBackupIssue" />
@@ -24,11 +24,13 @@ import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
2424
import UiCounter from '@core/components/ui/counter/UiCounter.vue'
2525
import { computed } from 'vue'
2626
27-
const { backupIssues, isReady } = useDashboardStore().subscribe()
27+
const { record } = useDashboardStore().subscribe()
2828
29-
const hasBackupIssues = computed(() => backupIssues.value.length !== 0)
29+
const backupsIsReady = computed(() => record.value?.backups?.issues !== undefined)
3030
31-
const coreBackupIssues = computed(() => backupIssues.value.map(convertBackupIssueToCore))
31+
const hasBackupIssues = computed(() => backupsIsReady.value && record.value!.backups!.issues.length > 0)
32+
33+
const coreBackupIssues = computed(() => record.value?.backups?.issues.map(convertBackupIssueToCore))
3234
</script>
3335

3436
<style lang="postcss" scoped>

‎@xen-orchestra/web/src/components/site/dashboard/BackupRepository.vue

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,25 @@
44
{{ $t('backup-repository') }}
55
<template #description>{{ $t('for-backup') }}</template>
66
</UiCardTitle>
7-
<VtsLoadingHero v-if="!isReady" type="card" />
7+
<VtsLoadingHero v-if="!backupRepositoriesIsReady" type="card" />
88
<template v-else>
99
<VtsStackedBarWithLegend :max-value="maxValue" :segments />
1010
<div class="numbers">
1111
<UiCardNumbers
12-
:value="backupRepositories.used?.value"
13-
:unit="backupRepositories.used?.prefix"
12+
:value="backupRepositories?.used?.value"
13+
:unit="backupRepositories?.used?.prefix"
1414
:label="$t('used')"
1515
size="medium"
1616
/>
1717
<UiCardNumbers
18-
:value="backupRepositories.available?.value"
19-
:unit="backupRepositories.available?.prefix"
18+
:value="backupRepositories?.available?.value"
19+
:unit="backupRepositories?.available?.prefix"
2020
:label="$t('available')"
2121
size="medium"
2222
/>
2323
<UiCardNumbers
24-
:value="backupRepositories.total?.value"
25-
:unit="backupRepositories.total?.prefix"
24+
:value="backupRepositories?.total?.value"
25+
:unit="backupRepositories?.total?.prefix"
2626
:label="$t('total')"
2727
size="medium"
2828
/>
@@ -44,26 +44,28 @@ import { useI18n } from 'vue-i18n'
4444
4545
const { t } = useI18n()
4646
47-
const { backupRepositories, isReady } = useDashboardStore().subscribe()
47+
const { backupRepositories } = useDashboardStore().subscribe()
48+
49+
const backupRepositoriesIsReady = computed(() => backupRepositories.value !== undefined)
4850
4951
const segments: ComputedRef<StackedBarWithLegendProps['segments']> = computed(() => [
5052
{
5153
label: t('xo-backups'),
52-
value: backupRepositories.value.backups?.value ?? 0,
54+
value: backupRepositories.value?.backups?.value ?? 0,
5355
accent: 'info',
54-
unit: backupRepositories.value.backups?.prefix,
56+
unit: backupRepositories.value?.backups?.prefix,
5557
},
5658
{
5759
label: t('other'),
58-
value: backupRepositories.value.other?.value ?? 0,
60+
value: backupRepositories.value?.other?.value ?? 0,
5961
accent: 'warning',
60-
unit: backupRepositories.value.other?.prefix,
62+
unit: backupRepositories.value?.other?.prefix,
6163
},
6264
])
6365
6466
const maxValue = computed(() => ({
65-
value: backupRepositories.value.total?.value,
66-
unit: backupRepositories.value.total?.prefix,
67+
value: backupRepositories.value?.total?.value,
68+
unit: backupRepositories.value?.total?.prefix,
6769
}))
6870
</script>
6971

‎@xen-orchestra/web/src/components/site/dashboard/Backups.vue

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<UiCard>
33
<UiCardTitle>{{ $t('backups') }}</UiCardTitle>
4-
<VtsLoadingHero v-if="!isReady" type="card" />
4+
<VtsLoadingHero v-if="!backupsIsReady" type="card" />
55
<VtsNoDataHero v-else-if="record?.backups === undefined" type="card" />
66
<template v-else>
77
<VtsDonutChartWithLegend :segments="jobsSegments" :title="jobsTitle" />
@@ -27,7 +27,11 @@ import { faCircleInfo } from '@fortawesome/free-solid-svg-icons'
2727
import { computed } from 'vue'
2828
import { useI18n } from 'vue-i18n'
2929
30-
const { record, isReady } = useDashboardStore().subscribe()
30+
const { record } = useDashboardStore().subscribe()
31+
32+
const backupsIsReady = computed(
33+
() => record.value?.backups?.jobs !== undefined && record.value?.backups?.vmsProtection !== undefined
34+
)
3135
3236
const { t } = useI18n()
3337

‎@xen-orchestra/web/src/components/site/dashboard/HostsStatus.vue

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,45 @@
11
<template>
22
<UiCard>
33
<UiCardTitle>{{ $t('hosts-status') }}</UiCardTitle>
4-
<VtsLoadingHero v-if="!isReady" type="card" />
4+
<VtsLoadingHero v-if="!hostsStatusIsReady" type="card" />
55
<template v-else>
66
<VtsDonutChartWithLegend :icon="faServer" :segments />
7-
<UiCardNumbers :label="t('total')" :value="hosts.length" class="total" size="small" />
7+
<UiCardNumbers :label="t('total')" :value="record?.hostsStatus.total" class="total" size="small" />
88
</template>
99
</UiCard>
1010
</template>
1111

1212
<script lang="ts" setup>
13-
import { useHostStore } from '@/stores/xo-rest-api/host.store'
14-
import { HOST_POWER_STATE } from '@/types/xo/host.type'
13+
import { useDashboardStore } from '@/stores/xo-rest-api/dashboard.store'
1514
import type { DonutChartWithLegendProps } from '@core/components/donut-chart-with-legend/VtsDonutChartWithLegend.vue'
1615
import VtsDonutChartWithLegend from '@core/components/donut-chart-with-legend/VtsDonutChartWithLegend.vue'
1716
import VtsLoadingHero from '@core/components/state-hero/VtsLoadingHero.vue'
1817
import UiCard from '@core/components/ui/card/UiCard.vue'
1918
import UiCardNumbers from '@core/components/ui/card-numbers/UiCardNumbers.vue'
2019
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
21-
import { useItemCounter } from '@core/composables/item-counter.composable'
2220
import { faServer } from '@fortawesome/free-solid-svg-icons'
2321
import { computed } from 'vue'
2422
import { useI18n } from 'vue-i18n'
2523
2624
const { t } = useI18n()
27-
const { records: hosts, isReady } = useHostStore().subscribe()
25+
const { record } = useDashboardStore().subscribe()
2826
29-
const hostsCount = useItemCounter(hosts, {
30-
running: host => host.power_state === HOST_POWER_STATE.RUNNING,
31-
halted: host => host.power_state === HOST_POWER_STATE.HALTED,
32-
})
27+
const hostsStatusIsReady = computed(() => record.value?.hostsStatus !== undefined)
3328
3429
const segments = computed<DonutChartWithLegendProps['segments']>(() => [
3530
{
3631
label: t('hosts-status.running'),
37-
value: hostsCount.value.running,
32+
value: record.value?.hostsStatus.running ?? 0,
3833
accent: 'success',
3934
},
4035
{
4136
label: t('hosts-status.halted'),
42-
value: hostsCount.value.halted,
37+
value: record.value?.hostsStatus.halted ?? 0,
4338
accent: 'warning',
4439
},
4540
{
4641
label: t('hosts-status.unknown'),
47-
value: hostsCount.value.$other,
42+
value: record.value?.hostsStatus.unknown ?? 0,
4843
accent: 'muted',
4944
tooltip: t('hosts-status.unknown.tooltip'),
5045
},

‎@xen-orchestra/web/src/components/site/dashboard/Patches.vue

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<UiCard>
33
<UiCardTitle>{{ $t('patches') }}</UiCardTitle>
4-
<VtsLoadingHero v-if="!isReady" type="card" />
4+
<VtsLoadingHero v-if="!patchesIsReady" type="card" />
55
<template v-else>
66
<VtsDonutChartWithLegend :segments="poolsSegments" :title="poolsTitle" />
77
<VtsDivider type="stretch" />
@@ -24,7 +24,9 @@ import { useI18n } from 'vue-i18n'
2424
2525
const { t } = useI18n()
2626
27-
const { record, isReady } = useDashboardStore().subscribe()
27+
const { record } = useDashboardStore().subscribe()
28+
29+
const patchesIsReady = computed(() => record.value?.missingPatches !== undefined)
2830
2931
const poolsTitle: ComputedRef<DonutChartWithLegendProps['title']> = computed(() => ({
3032
label: t('pools'),

‎@xen-orchestra/web/src/components/site/dashboard/PoolsStatus.vue

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<UiCard>
33
<UiCardTitle>{{ $t('pools-status') }}</UiCardTitle>
4-
<VtsLoadingHero v-if="!isReady" type="card" />
4+
<VtsLoadingHero v-if="!poolsStatusIsReady" type="card" />
55
<template v-else>
66
<VtsDonutChartWithLegend :icon="faCity" :segments />
77
<UiCardNumbers :value="total" class="total" label="Total" size="small" />
@@ -25,34 +25,29 @@ import { useI18n } from 'vue-i18n'
2525
2626
const { t } = useI18n()
2727
28-
const { record, isReady } = useDashboardStore().subscribe()
28+
const { record } = useDashboardStore().subscribe()
2929
30-
const poolStatus = computed(
31-
() =>
32-
record.value?.poolsStatus ?? {
33-
connected: 0,
34-
unreachable: 0,
35-
unknown: 0,
36-
}
37-
)
30+
const poolsStatusIsReady = computed(() => record.value?.poolsStatus !== undefined)
3831
39-
const total = useSum(() => Object.values(poolStatus.value))
32+
const poolStatus = computed(() => record.value?.poolsStatus)
33+
34+
const total = useSum(() => Object.values(poolStatus.value ?? {}))
4035
4136
const segments = computed<DonutChartWithLegendProps['segments']>(() => [
4237
{
4338
label: t('pools-status.connected'),
44-
value: poolStatus.value.connected,
39+
value: poolStatus.value?.connected ?? 0,
4540
accent: 'success',
4641
},
4742
{
4843
label: t('pools-status.unreachable'),
49-
value: poolStatus.value.unreachable,
44+
value: poolStatus.value?.unreachable ?? 0,
5045
accent: 'warning',
5146
tooltip: t('pools-status.unreachable.tooltip'),
5247
},
5348
{
5449
label: t('pools-status.unknown'),
55-
value: poolStatus.value.unknown,
50+
value: poolStatus.value?.unknown ?? 0,
5651
accent: 'muted',
5752
tooltip: t('pools-status.unknown.tooltip'),
5853
},

‎@xen-orchestra/web/src/components/site/dashboard/ResourcesOverview.vue

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<UiCard>
33
<UiCardTitle>{{ $t('resources-overview') }}</UiCardTitle>
4-
<VtsLoadingHero v-if="!isReady" type="card" />
4+
<VtsLoadingHero v-if="!resourcesOverviewIsReady" type="card" />
55
<template v-else>
66
<div class="line-1">
77
<UiCardNumbers
@@ -31,8 +31,9 @@ import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
3131
import { formatSizeRaw } from '@core/utils/size.util'
3232
import { computed } from 'vue'
3333
34-
const { record, isReady } = useDashboardStore().subscribe()
34+
const { record } = useDashboardStore().subscribe()
3535
36+
const resourcesOverviewIsReady = computed(() => record.value?.resourcesOverview !== undefined)
3637
const nCpus = computed(() => record.value?.resourcesOverview?.nCpus)
3738
const memorySize = computed(() => formatSizeRaw(record.value?.resourcesOverview?.memorySize, 1))
3839
const srSize = computed(() => formatSizeRaw(record.value?.resourcesOverview?.srSize, 1))

‎@xen-orchestra/web/src/components/site/dashboard/S3BackupRepository.vue

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,23 @@
44
{{ $t('s3-backup-repository') }}
55
<template #description>{{ $t('for-backup') }}</template>
66
</UiCardTitle>
7-
<UiCardNumbers :value="usedSize?.value" :unit="usedSize?.prefix" :label="$t('used')" size="medium" />
7+
<VtsLoadingHero v-if="!s3BackupRepositoryIsReady" type="card" />
8+
<UiCardNumbers v-else :value="usedSize?.value" :unit="usedSize?.prefix" :label="$t('used')" size="medium" />
89
</div>
910
</template>
1011

1112
<script setup lang="ts">
1213
import { useDashboardStore } from '@/stores/xo-rest-api/dashboard.store'
14+
import VtsLoadingHero from '@core/components/state-hero/VtsLoadingHero.vue'
1315
import UiCardNumbers from '@core/components/ui/card-numbers/UiCardNumbers.vue'
1416
import UiCardTitle from '@core/components/ui/card-title/UiCardTitle.vue'
1517
import { formatSizeRaw } from '@core/utils/size.util'
1618
import { computed } from 'vue'
1719
1820
const { record } = useDashboardStore().subscribe()
1921
22+
const s3BackupRepositoryIsReady = computed(() => record.value?.backupRepositories?.s3 !== undefined)
23+
2024
const usedSize = computed(() => formatSizeRaw(record.value?.backupRepositories?.s3.size.backups, 1))
2125
</script>
2226

‎@xen-orchestra/web/src/components/site/dashboard/StorageRepository.vue

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,25 @@
44
{{ $t('storage-repository') }}
55
<template #description>{{ $t('for-replication') }}</template>
66
</UiCardTitle>
7-
<VtsLoadingHero v-if="!isReady" type="card" />
7+
<VtsLoadingHero v-if="!storageRepositoriesIsReady" type="card" />
88
<template v-else>
99
<VtsStackedBarWithLegend :max-value="maxValue" :segments />
1010
<div class="numbers">
1111
<UiCardNumbers
12-
:value="storageRepositories.used?.value"
13-
:unit="storageRepositories.used?.prefix"
12+
:value="storageRepositories?.used?.value"
13+
:unit="storageRepositories?.used?.prefix"
1414
:label="$t('used')"
1515
size="medium"
1616
/>
1717
<UiCardNumbers
18-
:value="storageRepositories.available?.value"
19-
:unit="storageRepositories.available?.prefix"
18+
:value="storageRepositories?.available?.value"
19+
:unit="storageRepositories?.available?.prefix"
2020
:label="$t('available')"
2121
size="medium"
2222
/>
2323
<UiCardNumbers
24-
:value="storageRepositories.total?.value"
25-
:unit="storageRepositories.total?.prefix"
24+
:value="storageRepositories?.total?.value"
25+
:unit="storageRepositories?.total?.prefix"
2626
:label="$t('total')"
2727
size="medium"
2828
/>
@@ -44,26 +44,28 @@ import { useI18n } from 'vue-i18n'
4444
4545
const { t } = useI18n()
4646
47-
const { storageRepositories, isReady } = useDashboardStore().subscribe()
47+
const { storageRepositories } = useDashboardStore().subscribe()
48+
49+
const storageRepositoriesIsReady = computed(() => storageRepositories.value !== undefined)
4850
4951
const segments: ComputedRef<StackedBarWithLegendProps['segments']> = computed(() => [
5052
{
5153
label: t('xo-replications'),
52-
value: storageRepositories.value.replicated?.value ?? 0,
54+
value: storageRepositories.value?.replicated?.value ?? 0,
5355
accent: 'info',
54-
unit: storageRepositories.value.replicated?.prefix,
56+
unit: storageRepositories.value?.replicated?.prefix,
5557
},
5658
{
5759
label: t('other'),
58-
value: storageRepositories.value.other?.value ?? 0,
60+
value: storageRepositories.value?.other?.value ?? 0,
5961
accent: 'warning',
60-
unit: storageRepositories.value.other?.prefix,
62+
unit: storageRepositories.value?.other?.prefix,
6163
},
6264
])
6365
6466
const maxValue = computed(() => ({
65-
value: storageRepositories.value.total?.value,
66-
unit: storageRepositories.value.total?.prefix,
67+
value: storageRepositories.value?.total?.value,
68+
unit: storageRepositories.value?.total?.prefix,
6769
}))
6870
</script>
6971

0 commit comments

Comments
 (0)