Migracia a male opravy

- csrf ocharana, vypnutie pre /log
- oprava loggovania pamate
- pridanie vue skriptov

resources/js/app.js

@@ -0,0 +1,41 @@
+/**
+ * First we will load all of this project's JavaScript dependencies which
+ * includes Vue and other libraries. It is a great starting point when
+ * building robust, powerful web applications using Vue and Laravel.
+ */
+
+require('./bootstrap');
+
+window.Vue = require('vue');
+window.moment = require('moment');
+
+/**
+ * The following block of code may be used to automatically register your
+ * Vue components. It will recursively scan this directory for the Vue
+ * components and automatically register them with their "basename".
+ *
+ * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
+ */
+
+// const files = require.context('./', true, /\.vue$/i)
+// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
+import { Datetime } from 'vue-datetime';
+
+Vue.component('datetime', Datetime);
+Vue.component('example-component', require('./components/ExampleComponent.vue').default);
+Vue.component('network-graph', require('./components/NetworkGraph.vue').default);
+Vue.component('temp-graph', require('./components/TempGraph.vue').default);
+Vue.component('memory-graph', require('./components/MemoryGraph.vue').default);
+Vue.component('load-graph', require('./components/LoadGraph.vue').default);
+Vue.component('processes-graph', require('./components/ProcessesGraph.vue').default);
+Vue.component('disk-graph', require('./components/DiskGraph.vue').default);
+Vue.component('search-input', require('./components/SearchInput.vue').default);
+/**
+ * Next, we will create a fresh Vue application instance and attach it to
+ * the page. Then, you manwy begin adding components to this application
+ * or customize the JavaScript scaffolding to fit your unique needs.
+ */
+
+const app = new Vue({
+    el: '#app',
+});

resources/js/bootstrap.js

@@ -0,0 +1,48 @@
+window._ = require('lodash');
+
+/**
+ * We'll load jQuery and the Bootstrap jQuery plugin which provides support
+ * for JavaScript based Bootstrap features such as modals and tabs. This
+ * code may be modified to fit the specific needs of your application.
+ */
+
+try {
+    window.Popper = require('popper.js').default;
+    window.$ = window.jQuery = require('jquery');
+
+    require('bootstrap');
+} catch (e) {}
+
+/**
+ * We'll load the axios HTTP library which allows us to easily issue requests
+ * to our Laravel back-end. This library automatically handles sending the
+ * CSRF token as a header based on the value of the "XSRF" token cookie.
+ */
+
+window.axios = require('axios');
+
+window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+
+/**
+ * Echo exposes an expressive API for subscribing to channels and listening
+ * for events that are broadcast by Laravel. Echo and event broadcasting
+ * allows your team to easily build robust real-time web applications.
+ */
+
+import Vue from 'vue';
+import VueDygraphs from 'vue-dygraphs';
+import VueSuggestion from 'vue-suggestion';
+
+Vue.use(VueSuggestion);
+Vue.use(VueDygraphs);
+
+// import Echo from 'laravel-echo';
+
+// window.Pusher = require('pusher-js');
+
+// window.Echo = new Echo({
+//     broadcaster: 'pusher',
+//     key: process.env.MIX_PUSHER_APP_KEY,
+//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
+//     encrypted: true
+// });

resources/js/components/DemoLine.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="chart">
+    <line-chart 
+      :data="data" 
+      area 
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "LineBase",
+  data() {
+    return {
+      data: [
+        {
+          name: "Test",
+          data: [
+            {
+              label: "2016",
+              value: 84000
+            },
+            {
+              label: "2017",
+              value: 90000
+            },
+            {
+              label: "2018",
+              value: 80000
+            },
+            {
+              label: "2019",
+              value: 100000
+            }
+          ]
+        }
+      ]
+    };
+  }
+};
+</script>
+
+<style scoped>
+.chart {
+  width: 100%;
+  height: 300px;
+}
+</style>

resources/js/components/DiskGraph.vue

@@ -0,0 +1,83 @@
+<template>
+   <div>
+     <dygraphs width="800" :graphData="series" :graphOptions="options"></dygraphs>
+   </div>
+</template>
+
+<script>
+export default {
+  props: ['raw_data'],
+  name: "LineBase",
+  data() {
+    return {
+      options: {
+        legend: 'always',
+        title: 'Disk Graph',
+        xlabel: 'Dátum',
+        labels: ['Dátum','Celkom','Pouzita','Volna','Percent'],
+        ylabel: 'Bytes',
+        y2label: 'Percent',
+        
+        fillGraph: true,
+        series: {
+              'Percent': {
+                axis: 'y2'
+              },
+            },
+        axes: {
+              y: {
+                axisLabelWidth: 60,
+                labelsKMG2: true,
+              },
+              y2: {
+                // set axis-related properties here
+                labelsKMB: false
+              }
+            },
+      },
+      series: [],
+    };
+  },
+    created: function () {
+    // `this` points to the vm instance
+    console.log('created');
+
+    let last_time = null;
+    let last_total = 0;
+    let last_free = 0;
+    let last_used = 0;
+
+    for (var index = 0; index < this.raw_data.length; ++index) {
+        let row = this.raw_data[index];
+        let disk = [row["disk_total"],row["disk_used"], row["disk_free"],row["disk_percent"]];
+        let created_at = row["created_at"];
+
+        let time = moment(created_at);
+
+        if (last_time == null || time.unix() - last_time.unix() > 900 ) {
+          if (last_time != null) {
+            this.series.push([last_time.toDate(),0,0,0,0]);
+          }
+
+          this.series.push([time.toDate(),0,0,0,0]);
+
+          last_time = time;
+ 
+          continue;
+        }
+
+        this.series.push([time.toDate()].concat(disk));
+
+        last_time = time;
+    }
+    console.log(this.series);
+  }
+};
+</script>
+
+<style scoped>
+.chart {
+  width: 100%;
+  height: 300px;
+}
+</style>

resources/js/components/ExampleComponent.vue

@@ -0,0 +1,23 @@
+<template>
+    <div class="container">
+        <div class="row justify-content-center">
+            <div class="col-md-8">
+                <div class="card">
+                    <div class="card-header">Example Component</div>
+
+                    <div class="card-body">
+                        I'm an example component.
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        mounted() {
+            console.log('Component mounted.')
+        }
+    }
+</script>

resources/js/components/LoadGraph.vue

@@ -0,0 +1,66 @@
+<template>
+   <div>
+     <dygraphs width="800" :graphData="series" :graphOptions="options"></dygraphs>
+   </div>
+</template>
+
+<script>
+export default {
+  props: ['raw_data'],
+  name: "LineBase",
+  data() {
+    return {
+      options: {
+        legend: 'always',
+        title: 'Load Graph',
+        xlabel: 'Dátum',
+        labels: ['Dátum','Zatazenie'],
+        ylabel: 'Percent',
+        fillGraph: true
+      },
+      series: [],
+    };
+  },
+    created: function () {
+    // `this` points to the vm instance
+    console.log('created load');
+
+    let last_time = null;
+    let last_load = null;
+
+    for (var index = 0; index < this.raw_data.length; ++index) {
+        let row = this.raw_data[index];
+        let load = row["load"];
+        let created_at = row["created_at"];
+
+        let time = moment(created_at);
+
+        if (last_time == null || time.unix() - last_time.unix() > 900 ) {
+          if (last_time != null) {
+            this.series.push([last_time.toDate(),null]);
+          }
+
+          this.series.push([time.toDate(),null]);
+
+          last_time = time;
+          last_load = null;
+
+          continue;
+        }
+
+        this.series.push([time.toDate(),load]);
+
+        last_time = time;
+        last_load = load;
+    }
+    console.log(this.series);
+  }
+};
+</script>
+
+<style scoped>
+.chart {
+  width: 100%;
+  height: 300px;
+}
+</style>

resources/js/components/MemoryGraph.vue

@@ -0,0 +1,70 @@
+<template>
+   <div>
+     <dygraphs width="800" :graphData="series" :graphOptions="options"></dygraphs>
+   </div>
+</template>
+
+<script>
+export default {
+  props: ['raw_data'],
+  name: "LineBase",
+  data() {
+    return {
+      options: {
+        legend: 'always',
+        title: 'Memory Graph',
+        xlabel: 'Dátum',
+        labels: ['Dátum','Celkom','Pouzita','Volna'],
+        ylabel: 'Bytes',
+        fillGraph: true
+      },
+      series: [],
+    };
+  },
+    created: function () {
+    // `this` points to the vm instance
+    console.log('created');
+
+    let last_time = null;
+    let last_total = 0;
+    let last_free = 0;
+    let last_used = 0;
+
+    for (var index = 0; index < this.raw_data.length; ++index) {
+        let row = this.raw_data[index];
+        let memory = [row["memory_total"],row["memory_used"], row["memory_free"]];
+        memory = memory.map(function (x) {
+            if (x > 8*1024) { return Math.floor(x/1024) } 
+            else {return x} 
+        }); 
+        let created_at = row["created_at"];
+
+        let time = moment(created_at);
+
+        if (last_time == null || time.unix() - last_time.unix() > 900 ) {
+          if (last_time != null) {
+            this.series.push([last_time.toDate(),0,0,0]);
+          }
+
+          this.series.push([time.toDate(),0,0,0]);
+
+          last_time = time;
+ 
+          continue;
+        }
+
+        this.series.push([time.toDate()].concat(memory));
+
+        last_time = time;
+    }
+    console.log(this.series);
+  }
+};
+</script>
+
+<style scoped>
+.chart {
+  width: 100%;
+  height: 300px;
+}
+</style>

resources/js/components/NetworkGraph.vue

@@ -0,0 +1,76 @@
+<template>
+   <div>
+     <dygraphs width="800" :graphData="series" :graphOptions="options"></dygraphs>
+   </div>
+</template>
+
+<script>
+export default {
+  props: ['raw_data'],
+  name: "LineBase",
+  data() {
+    return {
+      options: {
+        legend: 'always',
+        title: 'Network Graph',
+        xlabel: 'Dátum',
+        labels: ['Dátum','Prijate','Odoslane'],
+        ylabel: 'Bytes',
+        labelsKMG2: true,
+        fillGraph: true
+      },
+      series: [],
+    };
+  },
+    created: function () {
+    // `this` points to the vm instance
+    console.log('created');
+
+    let last_time = null;
+    let last_recv = 0;
+    let last_sent = 0;
+
+    for (var index = 0; index < this.raw_data.length; ++index) {
+        let row = this.raw_data[index];
+        let sent = row["netstat_sent"];
+        let recv = row["netstat_recv"];
+        let created_at = row["created_at"];
+
+        let time = moment(created_at);
+
+        if (last_time == null || time.unix() - last_time.unix() > 900 || recv - last_recv < 0 || sent - last_sent < 0 ) {
+          if (last_time != null) {
+            this.series.push([last_time.toDate(),0,0]);
+          }
+
+          this.series.push([time.toDate(),0,0]);
+
+          last_time = time;
+          last_recv = 0;
+          last_sent = 0;
+
+          continue;
+        }
+
+        let rb = recv - last_recv;
+        let sb = sent - last_sent;
+        let lt = time.unix() - last_time.unix();
+
+        this.series.push([time.toDate(),rb/lt,sb/lt]);
+
+        last_time = time;
+        last_recv = recv;
+        last_sent = sent;
+
+    }
+    console.log(this.series);
+  }
+};
+</script>
+
+<style scoped>
+.chart {
+  width: 100%;
+  height: 300px;
+}
+</style>

resources/js/components/ProcessesGraph.vue

@@ -0,0 +1,66 @@
+<template>
+   <div>
+     <dygraphs width="800" :graphData="series" :graphOptions="options"></dygraphs>
+   </div>
+</template>
+
+<script>
+export default {
+  props: ['raw_data'],
+  name: "LineBase",
+  data() {
+    return {
+      options: {
+        legend: 'always',
+        title: 'Process Graph',
+        xlabel: 'Dátum',
+        labels: ['Dátum','Počet'],
+        ylabel: 'Procesov',
+        fillGraph: true
+      },
+      series: [],
+    };
+  },
+    created: function () {
+    // `this` points to the vm instance
+    console.log('created process');
+
+    let last_time = null;
+    let last_processes = null;
+
+    for (var index = 0; index < this.raw_data.length; ++index) {
+        let row = this.raw_data[index];
+        let processes = row["processes"];
+        let created_at = row["created_at"];
+
+        let time = moment(created_at);
+
+        if (last_time == null || time.unix() - last_time.unix() > 900 ) {
+          if (last_time != null) {
+            this.series.push([last_time.toDate(),null]);
+          }
+
+          this.series.push([time.toDate(),null]);
+
+          last_time = time;
+          last_processes = null;
+
+          continue;
+        }
+
+        this.series.push([time.toDate(),processes]);
+
+        last_time = time;
+        last_processes = processes;
+    }
+    console.log(this.series);
+  }
+};
+</script>
+
+<style scoped>
+.chart {
+  width: 100%;
+  height: 300px;
+}
+</style>

resources/js/components/SearchInput.vue

@@ -0,0 +1,45 @@
+<template>
+  <vue-suggestion :items="items" 
+                  v-model="item" 
+                  :setLabel="setLabel"
+                  :itemTemplate="itemTemplate"
+                  @changed="inputChange" 
+                  @selected="itemSelected">
+  </vue-suggestion>
+</template>
+
+<script>
+import itemTemplate from './item-template.vue';
+export default {
+  data () {
+    return {
+      item: {},
+      items: [
+       
+      ],
+      itemTemplate,
+    }
+  },
+  methods: {
+    itemSelected (item) {
+      this.item = item;
+    },
+    setLabel (item) {
+      return item.computer;
+    },
+    inputChange (text) {
+        axios.get('search/autocomplete', {
+                        params: {
+                        term: text,
+                        }
+            })
+            .then((response)  => {
+                this.items = response.data;
+            })
+            .catch(function (error) {
+                console.log(error);
+            });
+    },
+  },
+};
+</script>

resources/js/components/TempGraph.vue

@@ -0,0 +1,66 @@
+<template>
+   <div>
+     <dygraphs width="800" :graphData="series" :graphOptions="options"></dygraphs>
+   </div>
+</template>
+
+<script>
+export default {
+  props: ['raw_data'],
+  name: "LineBase",
+  data() {
+    return {
+      options: {
+        legend: 'always',
+        title: 'Temperature Graph',
+        xlabel: 'Dátum',
+        labels: ['Dátum','Teplota'],
+        ylabel: 'Stupeň',
+        fillGraph: true
+      },
+      series: [],
+    };
+  },
+    created: function () {
+    // `this` points to the vm instance
+    console.log('created temp');
+
+    let last_time = null;
+    let last_temp = null;
+
+    for (var index = 0; index < this.raw_data.length; ++index) {
+        let row = this.raw_data[index];
+        let temp = row["temp"];
+        let created_at = row["created_at"];
+
+        let time = moment(created_at);
+
+        if (last_time == null || time.unix() - last_time.unix() > 900 ) {
+          if (last_time != null) {
+            this.series.push([last_time.toDate(),null]);
+          }
+
+          this.series.push([time.toDate(),null]);
+
+          last_time = time;
+          last_temp = null;
+
+          continue;
+        }
+
+        this.series.push([time.toDate(),temp]);
+
+        last_time = time;
+        last_temp = temp;
+    }
+    console.log(this.series);
+  }
+};
+</script>
+
+<style scoped>
+.chart {
+  width: 100%;
+  height: 300px;
+}
+</style>

resources/js/components/item-template.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <b>#{{ item.id }}</b>
+    <span>{{ item.computer }}</span>
+    <span>{{ item.user }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    item: { required: true },
+  }
+}
+</script>