102 lines
3.3 KiB
Vue
102 lines
3.3 KiB
Vue
<template>
|
|
<div class="padding-xl content-l">
|
|
<h1>Monitorings</h1>
|
|
<div class="left-center">
|
|
<UiInput class="timeframe">
|
|
<select name="" id="" v-model="timeframe">
|
|
<option :value="Timeframe.LAST_HOUR">Letzte Stunde</option>
|
|
<option :value="Timeframe.LAST_3_HOURS">Letzte 3 Stunden</option>
|
|
<option :value="Timeframe.LAST_6_HOURS">Letzte 6 Stunden</option>
|
|
<option :value="Timeframe.LAST_12_HOURS">Letzte 12 Stunden</option>
|
|
<option :value="Timeframe.LAST_24_HOURS">Letzte 24 Stunden</option>
|
|
<option :value="Timeframe.LAST_7_DAYS">Letzte 7 Tage</option>
|
|
<option :value="Timeframe.LAST_30_DAYS">Letzte 30 Tage</option>
|
|
<option :value="Timeframe.LAST_90_DAYS">Letzte 90 Tage</option>
|
|
<option :value="undefined">Custom...</option>
|
|
</select>
|
|
</UiInput>
|
|
<div class="left-center" v-if="timeframe == null">
|
|
<UiInput>
|
|
<input type="datetime-local">
|
|
</UiInput>
|
|
<p>bis</p>
|
|
<UiInput>
|
|
<input type="datetime-local">
|
|
</UiInput>
|
|
</div>
|
|
</div>
|
|
<div v-for="monitoring in monitorings">
|
|
<VolumeMonitoringConfigComponent :monitoring="monitoring" v-if="monitoring.type === 'VOLUME'"></VolumeMonitoringConfigComponent>
|
|
<MemoryMonitoringConfigComponent :monitoring="monitoring" v-if="monitoring.type === 'MEMORY'"></MemoryMonitoringConfigComponent>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import 'chartjs-adapter-luxon';
|
|
import { VolumeMonitoringConfig } from './MonitoringConfig';
|
|
import VolumeMonitoringConfigComponent from './volumes/VolumeMonitoringConfigComponent.vue';
|
|
import MemoryMonitoringConfigComponent from './memory/MemoryMonitoringConfigComponent.vue';
|
|
import utc from 'dayjs/plugin/utc';
|
|
import dayjs from 'dayjs';
|
|
|
|
const enum Timeframe
|
|
{
|
|
LAST_HOUR = "LAST_HOUR",
|
|
LAST_3_HOURS = "LAST_3_HOURS",
|
|
LAST_6_HOURS = "LAST_6_HOURS",
|
|
LAST_12_HOURS = "LAST_12_HOURS",
|
|
TODAY = "TODAY",
|
|
LAST_24_HOURS = "LAST_24_HOURS",
|
|
LAST_7_DAYS = "LAST_7_DAYS",
|
|
LAST_30_DAYS = "LAST_30_DAYS",
|
|
LAST_90_DAYS = "LAST_90_DAYS"
|
|
}
|
|
|
|
const monitorings: Ref<VolumeMonitoringConfig[] | undefined> = ref(undefined);
|
|
|
|
const timeframe: Ref<string | undefined> = ref("LAST_HOUR");
|
|
|
|
onMounted(() => {
|
|
VolumeMonitoringConfig.get((_monitorings) => {
|
|
monitorings.value = _monitorings;
|
|
});
|
|
});
|
|
|
|
const startTime = computed(() => {
|
|
dayjs.extend(utc)
|
|
switch (timeframe.value)
|
|
{
|
|
case Timeframe.LAST_HOUR: {
|
|
return dayjs().utc().subtract(1, 'hours');
|
|
}
|
|
case Timeframe.LAST_3_HOURS: {
|
|
return dayjs().utc().subtract(3, 'hours');
|
|
}
|
|
case Timeframe.LAST_6_HOURS: {
|
|
return dayjs().utc().subtract(6, 'hours');
|
|
}
|
|
case Timeframe.LAST_12_HOURS: {
|
|
return dayjs().utc().subtract(12, 'hours');
|
|
}
|
|
case Timeframe.LAST_24_HOURS: {
|
|
return dayjs().utc().subtract(24, 'hours');
|
|
}
|
|
case Timeframe.LAST_7_DAYS: {
|
|
return dayjs().utc().subtract(7, 'days');
|
|
}
|
|
case Timeframe.LAST_30_DAYS: {
|
|
return dayjs().utc().subtract(30, 'days');
|
|
}
|
|
case Timeframe.LAST_90_DAYS: {
|
|
return dayjs().utc().subtract(90, 'days');
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.timeframe {
|
|
width: 13rem;
|
|
}
|
|
</style> |