mirror of
https://github.com/harvester/harvester-ui-extension.git
synced 2026-08-16 04:39:15 +00:00
refactor(host): update resource usage gauges and table column headers to fit small screen (#1031)
* refactor(host): update resource usage gauges and table column headers - Replace ConsumptionGauge with PercentageBar in CPU/Memory/Storage formatters to show the percentage next to the progress bar - Rename the Disk State column header to Disk (via i18n) - Display the CPU Manager column header on two lines Signed-off-by: Andy Lee <andy.lee@suse.com> * refactor: add noopener noreferrer rel Signed-off-by: Andy Lee <andy.lee@suse.com> --------- Signed-off-by: Andy Lee <andy.lee@suse.com>
This commit is contained in:
Andy Lee
GitHub
parent
87baf75301
commit
1c3b40b631
@ -1,11 +1,11 @@
|
||||
<script>
|
||||
import ConsumptionGauge from '@shell/components/ConsumptionGauge';
|
||||
import PercentageBar from '@shell/components/PercentageBar';
|
||||
import { METRIC, NODE } from '@shell/config/types';
|
||||
import { parseSi } from '@shell/utils/units';
|
||||
|
||||
export default {
|
||||
name: 'HarvesterCpuUsed',
|
||||
components: { ConsumptionGauge },
|
||||
components: { PercentageBar },
|
||||
|
||||
props: {
|
||||
value: {
|
||||
@ -74,54 +74,89 @@ export default {
|
||||
return 0;
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
reservedPercentage() {
|
||||
return this.cpuTotal ? (this.reserved * 100) / this.cpuTotal : 0;
|
||||
},
|
||||
|
||||
usedPercentage() {
|
||||
return this.cpuTotal ? (this.used * 100) / this.cpuTotal : 0;
|
||||
},
|
||||
|
||||
reservedAmountTemplateValues() {
|
||||
return {
|
||||
used: this.numberFormatter(this.reserved || 0),
|
||||
total: this.numberFormatter(this.cpuTotal || 0),
|
||||
unit: ` ${ this.cpuUnits }`,
|
||||
};
|
||||
},
|
||||
|
||||
usedAmountTemplateValues() {
|
||||
return {
|
||||
used: this.numberFormatter(this.used || 0),
|
||||
total: this.numberFormatter(this.cpuTotal || 0),
|
||||
unit: ` ${ this.cpuUnits }`,
|
||||
};
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
numberFormatter(value) {
|
||||
return Number.isInteger(value) ? value : value.toFixed(2);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<ConsumptionGauge
|
||||
:capacity="cpuTotal"
|
||||
:used="reserved"
|
||||
:units="cpuUnits"
|
||||
:resource-name="resourceName"
|
||||
>
|
||||
<template #title="{amountTemplateValues, formattedPercentage}">
|
||||
<span>
|
||||
<div class="consumption-gauge">
|
||||
<div class="numbers">
|
||||
<span class="mr-5">
|
||||
{{ t('harvester.formatters.hardwareResourceGauge.reserved') }}
|
||||
</span>
|
||||
<span class="precent-data">
|
||||
{{ t('node.detail.glance.consumptionGauge.amount', amountTemplateValues) }}
|
||||
<span class="ml-10 percentage">/ {{ formattedPercentage }}
|
||||
</span>
|
||||
{{ t('node.detail.glance.consumptionGauge.amount', reservedAmountTemplateValues) }}
|
||||
</span>
|
||||
</template>
|
||||
</ConsumptionGauge>
|
||||
</div>
|
||||
<div class="mt-10">
|
||||
<PercentageBar
|
||||
:model-value="reservedPercentage"
|
||||
show-percentage
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="showUsed"
|
||||
class="mt-10"
|
||||
class="consumption-gauge mt-10"
|
||||
>
|
||||
<ConsumptionGauge
|
||||
:capacity="cpuTotal"
|
||||
:used="used"
|
||||
:units="cpuUnits"
|
||||
>
|
||||
<template #title="{amountTemplateValues, formattedPercentage}">
|
||||
<span>
|
||||
{{ t('harvester.formatters.hardwareResourceGauge.used') }}
|
||||
</span>
|
||||
<span class="precent-data">
|
||||
{{ t('node.detail.glance.consumptionGauge.amount', amountTemplateValues) }}
|
||||
<span class="ml-10 percentage">/ {{ formattedPercentage }}
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
</ConsumptionGauge>
|
||||
<div class="numbers">
|
||||
<span>
|
||||
{{ t('harvester.formatters.hardwareResourceGauge.used') }}
|
||||
</span>
|
||||
<span class="precent-data">
|
||||
{{ t('node.detail.glance.consumptionGauge.amount', usedAmountTemplateValues) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="mt-10">
|
||||
<PercentageBar
|
||||
:model-value="usedPercentage"
|
||||
show-percentage
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.consumption-gauge {
|
||||
.numbers {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.precent-data {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<script>
|
||||
import ConsumptionGauge from '@shell/components/ConsumptionGauge';
|
||||
import PercentageBar from '@shell/components/PercentageBar';
|
||||
import { METRIC, NODE } from '@shell/config/types';
|
||||
import { formatSi, exponentNeeded, UNITS, parseSi } from '@shell/utils/units';
|
||||
import { UNIT_SUFFIX } from '../utils/unit';
|
||||
export default {
|
||||
name: 'HarvesterMemoryUsed',
|
||||
components: { ConsumptionGauge },
|
||||
components: { PercentageBar },
|
||||
|
||||
props: {
|
||||
value: {
|
||||
@ -76,6 +76,30 @@ export default {
|
||||
return 0;
|
||||
}
|
||||
},
|
||||
|
||||
reservedPercentage() {
|
||||
return this.memoryTotal ? (this.reserved * 100) / this.memoryTotal : 0;
|
||||
},
|
||||
|
||||
usedPercentage() {
|
||||
return this.memoryTotal ? (this.used * 100) / this.memoryTotal : 0;
|
||||
},
|
||||
|
||||
reservedAmountTemplateValues() {
|
||||
return {
|
||||
used: this.memoryFormatter(this.reserved || 0),
|
||||
total: this.memoryFormatter(this.memoryTotal || 0),
|
||||
unit: ` ${ this.memoryUnits }`,
|
||||
};
|
||||
},
|
||||
|
||||
usedAmountTemplateValues() {
|
||||
return {
|
||||
used: this.memoryFormatter(this.used || 0),
|
||||
total: this.memoryFormatter(this.memoryTotal || 0),
|
||||
unit: ` ${ this.memoryUnits }`,
|
||||
};
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
@ -96,50 +120,53 @@ export default {
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<ConsumptionGauge
|
||||
:capacity="memoryTotal"
|
||||
:used="reserved"
|
||||
:units="memoryUnits"
|
||||
:number-formatter="memoryFormatter"
|
||||
:resource-name="resourceName"
|
||||
>
|
||||
<template #title="{amountTemplateValues, formattedPercentage}">
|
||||
<span>
|
||||
<div class="consumption-gauge">
|
||||
<div class="numbers">
|
||||
<span class="mr-10">
|
||||
{{ t('harvester.formatters.hardwareResourceGauge.reserved') }}
|
||||
</span>
|
||||
<span class="precent-data">
|
||||
{{ t('node.detail.glance.consumptionGauge.amount', amountTemplateValues) }}
|
||||
<span class="ml-10 percentage">/ {{ formattedPercentage }}
|
||||
</span>
|
||||
{{ t('node.detail.glance.consumptionGauge.amount', reservedAmountTemplateValues) }}
|
||||
</span>
|
||||
</template>
|
||||
</ConsumptionGauge>
|
||||
</div>
|
||||
<div class="mt-10">
|
||||
<PercentageBar
|
||||
:model-value="reservedPercentage"
|
||||
show-percentage
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="showUsed"
|
||||
class="mt-10"
|
||||
class="consumption-gauge mt-10"
|
||||
>
|
||||
<ConsumptionGauge
|
||||
:capacity="memoryTotal"
|
||||
:used="used"
|
||||
:units="memoryUnits"
|
||||
:number-formatter="memoryFormatter"
|
||||
>
|
||||
<template #title="{amountTemplateValues, formattedPercentage}">
|
||||
<span>
|
||||
{{ t('harvester.formatters.hardwareResourceGauge.used') }}
|
||||
</span>
|
||||
<span class="precent-data">
|
||||
{{ t('node.detail.glance.consumptionGauge.amount', amountTemplateValues) }}
|
||||
<span class="ml-10 percentage">/ {{ formattedPercentage }}
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
</ConsumptionGauge>
|
||||
<div class="numbers">
|
||||
<span>
|
||||
{{ t('harvester.formatters.hardwareResourceGauge.used') }}
|
||||
</span>
|
||||
<span class="precent-data">
|
||||
{{ t('node.detail.glance.consumptionGauge.amount', usedAmountTemplateValues) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="mt-10">
|
||||
<PercentageBar
|
||||
:model-value="usedPercentage"
|
||||
show-percentage
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.consumption-gauge {
|
||||
.numbers {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.precent-data {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<script>
|
||||
import ConsumptionGauge from '@shell/components/ConsumptionGauge';
|
||||
import PercentageBar from '@shell/components/PercentageBar';
|
||||
import { LONGHORN } from '@shell/config/types';
|
||||
import { formatSi, exponentNeeded, UNITS } from '@shell/utils/units';
|
||||
import { UNIT_SUFFIX } from '../utils/unit';
|
||||
|
||||
export default {
|
||||
name: 'HarvesterStorageUsed',
|
||||
components: { ConsumptionGauge },
|
||||
components: { PercentageBar },
|
||||
|
||||
props: {
|
||||
value: {
|
||||
@ -120,6 +120,14 @@ export default {
|
||||
unit: this.allocatedUnits,
|
||||
};
|
||||
},
|
||||
|
||||
usedPercentage() {
|
||||
return this.storageStats.maximum ? (this.storageStats.used * 100) / this.storageStats.maximum : 0;
|
||||
},
|
||||
|
||||
allocatedPercentage() {
|
||||
return this.storageStats.total ? (this.storageStats.scheduled * 100) / this.storageStats.total : 0;
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
@ -144,53 +152,54 @@ export default {
|
||||
<div>
|
||||
<div
|
||||
v-if="showAllocated"
|
||||
class="consumption-gauge"
|
||||
>
|
||||
<ConsumptionGauge
|
||||
:capacity="storageStats.total"
|
||||
:used="storageStats.scheduled"
|
||||
:units="allocatedUnits"
|
||||
:number-formatter="formatter"
|
||||
:resource-name="resourceName"
|
||||
>
|
||||
<template #title="{formattedPercentage}">
|
||||
<span>
|
||||
{{ t('harvester.dashboard.hardwareResourceGauge.allocated') }}
|
||||
</span>
|
||||
<span class="precent-data">
|
||||
{{ t('node.detail.glance.consumptionGauge.amount', allocatedAmountTemplateValues) }}
|
||||
<span class="ml-10 percentage">
|
||||
/ {{ formattedPercentage }}
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
</ConsumptionGauge>
|
||||
<div class="numbers">
|
||||
<span class="mr-10">
|
||||
{{ t('harvester.dashboard.hardwareResourceGauge.allocated') }}
|
||||
</span>
|
||||
<span class="precent-data">
|
||||
{{ t('node.detail.glance.consumptionGauge.amount', allocatedAmountTemplateValues) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="mt-10">
|
||||
<PercentageBar
|
||||
:model-value="allocatedPercentage"
|
||||
show-percentage
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<ConsumptionGauge
|
||||
:capacity="storageStats.maximum"
|
||||
:used="storageStats.used"
|
||||
:units="usedUnits"
|
||||
:number-formatter="formatter"
|
||||
:resource-name="showAllocated ? '' : resourceName"
|
||||
:class="{
|
||||
'mt-10': showAllocated,
|
||||
}"
|
||||
<div
|
||||
class="consumption-gauge"
|
||||
:class="{ 'mt-10': showAllocated }"
|
||||
>
|
||||
<template #title="{formattedPercentage}">
|
||||
<div class="numbers">
|
||||
<span>
|
||||
{{ t('node.detail.glance.consumptionGauge.used') }}
|
||||
</span>
|
||||
<span class="precent-data">
|
||||
{{ t('node.detail.glance.consumptionGauge.amount', usedAmountTemplateValues) }}
|
||||
<span class="ml-10 percentage">
|
||||
/ {{ formattedPercentage }}
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
</ConsumptionGauge>
|
||||
</div>
|
||||
<div class="mt-10">
|
||||
<PercentageBar
|
||||
:model-value="usedPercentage"
|
||||
show-percentage
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.consumption-gauge {
|
||||
.numbers {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.precent-data {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@ -331,7 +331,8 @@ harvester:
|
||||
message: Message
|
||||
phase: Phase
|
||||
attachedVM: Attached Virtual Machine
|
||||
cpuManager: CPU Manager
|
||||
cpuManager: CPU<br>Manager
|
||||
diskState: Disk
|
||||
routeConnectivityTooltip: Connectivity between the VM network and the management network, which the Harvester nodes are connected to.
|
||||
fingerprint: Fingerprint
|
||||
value: Value
|
||||
|
||||
@ -84,7 +84,7 @@ export default {
|
||||
},
|
||||
{
|
||||
...NAME,
|
||||
width: 130,
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
name: 'host-ip',
|
||||
@ -136,14 +136,14 @@ export default {
|
||||
value: 'id',
|
||||
formatter: 'HarvesterCPUPinning',
|
||||
formatterOpts: { rows: this.rows },
|
||||
width: 150,
|
||||
width: 75,
|
||||
align: 'center',
|
||||
});
|
||||
}
|
||||
if (this.hasLonghornSchema) {
|
||||
out.push({
|
||||
name: 'diskState',
|
||||
labelKey: 'tableHeaders.diskState',
|
||||
labelKey: 'harvester.tableHeaders.diskState',
|
||||
value: 'diskState',
|
||||
formatter: 'HarvesterDiskState',
|
||||
width: 130,
|
||||
@ -156,7 +156,6 @@ export default {
|
||||
name: 'console',
|
||||
label: ' ',
|
||||
align: 'right',
|
||||
width: 80,
|
||||
});
|
||||
|
||||
return out;
|
||||
@ -239,6 +238,8 @@ export default {
|
||||
v-if="!row.consoleUrl"
|
||||
:href="consoleDocLink"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="console-info"
|
||||
><i class="icon icon-info" /></a>
|
||||
</div>
|
||||
</template>
|
||||
@ -249,5 +250,13 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.console-button {
|
||||
display: flex;
|
||||
position: relative;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.console-info {
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: -3px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user