Migracia a male opravy

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

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>