40 lines
1.9 KiB
Vue
40 lines
1.9 KiB
Vue
<template>
|
|
<div v-if="collection" class="content-l">
|
|
<div class="spaced-center">
|
|
<div class="left-center">
|
|
<h2>{{ collection.name }}</h2>
|
|
<UiButton icon="add" reverse @click="() => useRouter().push(useRoute().fullPath + '/add')">Add Config</UiButton>
|
|
</div>
|
|
<TimeframePicker @select="(_period: Period) => period = _period"></TimeframePicker>
|
|
</div>
|
|
<div class="content-l" v-for="config in collection.configs" v-if="period">
|
|
<VolumeMonitoringConfigComponent :monitoring="config" :period="period" v-if="config.type === 'VOLUME'"></VolumeMonitoringConfigComponent>
|
|
<MemoryMonitoringConfigComponent :monitoring="config" :period="period" v-if="config.type === 'WORKLOAD'"></MemoryMonitoringConfigComponent>
|
|
<CpuMonitoringConfigComponent :monitoring="config" :period="period" v-if="config.type === 'WORKLOAD'"></CpuMonitoringConfigComponent>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { MonitoringCollection } from '~/classes/monitoring/MonitoringCollection';
|
|
import VolumeMonitoringConfigComponent from '~/components/monitorings/volumes/VolumeMonitoringConfigComponent.vue';
|
|
import TimeframePicker from '~/components/monitorings/TimeframePicker.vue';
|
|
import type { Period } from '~/components/monitorings/Period';
|
|
import MemoryMonitoringConfigComponent from '~/components/monitorings/memory/MemoryMonitoringConfigComponent.vue';
|
|
import CpuMonitoringConfigComponent from '~/components/monitorings/cpu/CpuMonitoringConfigComponent.vue';
|
|
|
|
const period: Ref<Period | undefined> = ref(undefined);
|
|
|
|
const collection: Ref<MonitoringCollection | undefined> = ref(undefined);
|
|
|
|
onMounted(() => {
|
|
const id = useRoute().params.collectionId as string;
|
|
MonitoringCollection.getById(id, (_collection: MonitoringCollection) => {
|
|
collection.value = _collection;
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |