mirror of
https://github.com/ntop/ntopng.git
synced 2026-05-05 02:16:39 +00:00
74 lines
2.1 KiB
Vue
74 lines
2.1 KiB
Vue
<template>
|
|
<div>
|
|
<div class="form-group ms-2 me-2 mt-3 row">
|
|
<div class="col-11">
|
|
<label class="col-form-label" >
|
|
<b>{{title}}</b>
|
|
</label>
|
|
</div>
|
|
<div class="col-1" v-if="show_delete_button" @click="delete_ts">
|
|
<button type="button" class="btn border">
|
|
<span>
|
|
<i class="fas fa-trash"></i>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="container">
|
|
<div v-for="item in timeseries" class="row custom-ms me-2 mt-1">
|
|
<div class="col-5">
|
|
<input type="checkbox" class="custom-control-input whitespace form-check-input" @change="update_timeseries" v-model="item.raw">
|
|
|
|
<label class="custom-control-label ms-1 form-check-label">{{item.label}}</label>
|
|
</div>
|
|
<div class="col-2">
|
|
<input type="checkbox" class="custom-control-input whitespace form-check-input" @change="update_timeseries" v-model="item.past">
|
|
|
|
<label class="custom-control-label ms-1 form-check-label">Past </label>
|
|
</div>
|
|
<div class="col-2">
|
|
<input type="checkbox" class="custom-control-input whitespace form-check-input" @change="update_timeseries" v-model="item.avg">
|
|
|
|
<label class="custom-control-label ms-1 form-check-label">Avg </label>
|
|
</div>
|
|
<div class="col-3">
|
|
<input type="checkbox" class="custom-control-input whitespace form-check-input" @change="update_timeseries" v-model="item.perc_95">
|
|
|
|
<label class="custom-control-label ms-1 form-check-label">95th Perc </label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
id: String,
|
|
timeseries: Array,
|
|
title: String,
|
|
show_delete_button: Boolean,
|
|
});
|
|
|
|
const emit = defineEmits(['delete_ts', 'update:timeseries'])
|
|
|
|
function update_timeseries() {
|
|
emit('update:timeseries', props.timeseries);
|
|
}
|
|
|
|
function delete_ts() {
|
|
emit('delete_ts', props.id);
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.custom-ms {
|
|
margin-left: 2rem !important;
|
|
}
|
|
.inline-block {
|
|
display: inline-block;
|
|
margin-right: 1rem;
|
|
}
|
|
.border {
|
|
border-style: solid !important;
|
|
}
|
|
</style>
|