135 lines
7.0 KiB
PHP
135 lines
7.0 KiB
PHP
@extends('master')
|
|
|
|
@section('content')
|
|
<div id="app">
|
|
<template>
|
|
<div class="links">
|
|
<a v-bind:class="{ linkactive: s.show }" v-for="(s,key) in settings" v-on:click="changeDisplay(key)" >@{{ s.name }}</a>
|
|
</div>
|
|
|
|
|
|
<div class="row">
|
|
<div class="form-group col-sm-4">
|
|
<div class='input-group time' id='datetimepicker1'>
|
|
<datetime type="datetime" input-class="form-control" placeholder="Od" v-model="from_date"></datetime>
|
|
<span class="input-group-append">
|
|
<span class="input-group-text"><i class="fa fa-calendar"></i></span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group col-sm-4">
|
|
<div class='input-group time' id='datetimepicker2'>
|
|
<datetime type="datetime" input-class="form-control" placeholder="Do" v-model="to_date"></datetime>
|
|
<span class="input-group-append">
|
|
<span class="input-group-text"><i class="fa fa-calendar"></i></span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group col-sm-4">
|
|
<div class='input-group time' id='search_input'>
|
|
<search-input ref="search" placeholder="Uživateľ"></search-input>
|
|
<span class="input-group-append">
|
|
<button v-on:click="displayResults()" type="button" class="btn btn-secondary">Zobraz</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="counter > 0" :key="counter">
|
|
<network-graph v-show="settings['network'].show" :raw_data="chartData"></network-graph>
|
|
<temp-graph ref="temp" v-show="settings['temp'].show" :raw_data="chartData" style="display: block; "></temp-graph>
|
|
<memory-graph v-show="settings['memory'].show" :raw_data="chartData" style="display: block; "></memory-graph>
|
|
<load-graph v-show="settings['load'].show" :raw_data="chartData"></load-graph>
|
|
<processes-graph v-show="settings['processes'].show" :raw_data="chartData"></processes-graph>
|
|
<disk-graph v-show="settings['disk'].show" :raw_data="chartData"></disk-graph>
|
|
</div>
|
|
|
|
</template>
|
|
</div>
|
|
|
|
<script>
|
|
$(document).ready( function() {
|
|
Cookies.set('test','test2');
|
|
var settings = { "network": { name:"Network",show: false, prefix: "netstat",suffix: { "recv": "Received", "sent": "Send Bytes" }, units:"B"},
|
|
"temp": {name:"Temerature",show: false,prefix: null,units:"C"},
|
|
"memory": {name:"Memory",show: false,prefix:"memory", suffix: {"free":"Free Memory", "total": "Total Memory","used":"Used Memory"},units: "KB"},
|
|
"load": {name:"Load",show: false, prefix:null, units:"%"},
|
|
"disk": {name:"Disk",show: false,prefix:"disk",suffix: {"free":"Free Memory", "total": "Total Memory","used":"Used Memory"}, units:"MB"},
|
|
"processes": {name:"Processes",show:false,prefix: null,units:""}};
|
|
|
|
function sleep (time) {
|
|
return new Promise((resolve) => setTimeout(resolve, time));
|
|
}
|
|
|
|
|
|
var app = new Vue({
|
|
el: "#app",
|
|
data: {
|
|
chartData: {},
|
|
settings: settings,
|
|
from_date: null,
|
|
to_date:null,
|
|
counter: 0
|
|
},
|
|
mounted: function () {
|
|
console.log('MOUNTED');
|
|
},
|
|
methods: {
|
|
changeDisplay: function (key) {
|
|
for (s in settings) {
|
|
settings[s].show = false;
|
|
};
|
|
settings[key].show = true;
|
|
console.log(key);
|
|
},
|
|
displayResults: function () {
|
|
|
|
if ("id" in this.$refs.search.item && this.from_date) {
|
|
var computer_id = this.$refs.search.item.id;
|
|
} else {
|
|
return;
|
|
}
|
|
|
|
|
|
axios.get('{{ url('/data') }}', {
|
|
params: {
|
|
computer_id: computer_id,
|
|
from: this.from_date,
|
|
to: this.to_date
|
|
}
|
|
})
|
|
.then(function (response) {
|
|
|
|
for (s in app.settings) {
|
|
app.settings[s].show = true;
|
|
}
|
|
|
|
app.chartData = response.data;
|
|
app.counter += 1;
|
|
|
|
sleep(1000).then(() => {
|
|
for (s in app.settings) {
|
|
app.settings[s].show = false;
|
|
}
|
|
app.settings["network"].show = true;
|
|
});
|
|
|
|
})
|
|
.catch(function (error) {
|
|
console.log(error);
|
|
});
|
|
|
|
}
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
});
|
|
</script>
|
|
@stop
|