Nexus Agent
33 lines
774 B
Vue
33 lines
774 B
Vue
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
label: string
|
|
value: number | null | undefined
|
|
}>()
|
|
|
|
function barColor(v: number): string {
|
|
if (v >= 90) return 'error'
|
|
if (v >= 70) return 'warning'
|
|
return 'success'
|
|
}
|
|
|
|
function displayValue() {
|
|
return props.value != null ? `${props.value}%` : '—'
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="watch-metric-bar mb-1">
|
|
<div class="d-flex justify-space-between text-caption mb-0">
|
|
<span class="text-medium-emphasis">{{ label }}</span>
|
|
<span class="font-weight-medium">{{ displayValue() }}</span>
|
|
</div>
|
|
<v-progress-linear
|
|
:model-value="value ?? 0"
|
|
:color="value != null ? barColor(value) : 'grey'"
|
|
bg-opacity="0.2"
|
|
height="6"
|
|
rounded
|
|
/>
|
|
</div>
|
|
</template>
|