Restructure project tree
This commit is contained in:
205
src/StatusBox.vue
Normal file
205
src/StatusBox.vue
Normal file
@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<div id="statusBox">
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<select v-model="selectedIp" id="serverSelectList">
|
||||
<option v-for="(serverItem, index) in serverlist"
|
||||
v-bind:value="serverItem"
|
||||
>
|
||||
{{ serverItem[0] }}:{{ serverItem[1] }} (AS{{ serverItem[2] }})
|
||||
</option>
|
||||
</select>
|
||||
|
||||
<input v-model="target" placeholder="Enter Ip or Domain">
|
||||
<a href="#" class="traceroutes" v-on:click="traceRoute()">⛟</a>
|
||||
<span class="small">{{executionTime}}</span>
|
||||
<div>
|
||||
<span>History: {{ tableDataHistory.length }}</span>
|
||||
<table :id="'tableId_'+boxNumber" class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>IP</td>
|
||||
<td>HOSTNAME</td>
|
||||
<td>PING</td>
|
||||
<td>AS</td>
|
||||
</tr>
|
||||
<tr v-for="tData in tabeleData">
|
||||
<td>{{ tData[0] }}</td>
|
||||
<td>{{ tData[1] }}</td>
|
||||
<td>{{ tData[2] }}</td>
|
||||
<td :title="tData[4]">{{ tData[3] }}</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
serverlist: Array,
|
||||
boxNumber: Number
|
||||
},
|
||||
watch: {
|
||||
tableDataHistory: {
|
||||
handler() {
|
||||
sessionStorage.setItem('tableDataHistory' + this.boxNumber, JSON.stringify(this.tableDataHistory));
|
||||
}
|
||||
},
|
||||
executionTime: {
|
||||
handler() {
|
||||
sessionStorage.setItem('executionTime' + this.boxNumber, JSON.stringify(this.executionTime));
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
selectedIp: {
|
||||
handler() {
|
||||
sessionStorage.setItem('selectedIp' + this.boxNumber, JSON.stringify(this.selectedIp));
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
target : {
|
||||
handler() {
|
||||
sessionStorage.setItem('target' + this.boxNumber, JSON.stringify(this.target));
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
tabeleData : {
|
||||
handler() {
|
||||
sessionStorage.setItem('tabeleData' + this.boxNumber, JSON.stringify(this.tabeleData));
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setLastExecutionTime: function setLastExecutionTime() {
|
||||
var day = new Date();
|
||||
var hours = day.getHours();
|
||||
var minutes = day.getMinutes() ;
|
||||
var seconds = day.getSeconds();
|
||||
|
||||
if (hours < 10) {
|
||||
hours = '0' + hours;
|
||||
}
|
||||
|
||||
if (minutes < 10) {
|
||||
minutes = '0' + minutes;
|
||||
}
|
||||
|
||||
if (seconds < 10) {
|
||||
seconds = '0' + seconds;
|
||||
}
|
||||
this.executionTime = hours + ':' + minutes + ':' + seconds;
|
||||
|
||||
},
|
||||
traceRoute: function traceRoute() {
|
||||
// e.g. http://199.247.22.146:12111/v3/client/request/8.8.8.8
|
||||
axios.get("http://"+ this.selectedIp[0] + ":" +this.selectedIp[1] + "/v3/client/request/" + this.target)
|
||||
.then(response => {
|
||||
// JSON responses are automatically parsed.
|
||||
this.tabeleData = response.data;
|
||||
this.setLastExecutionTime();
|
||||
this.tableDataHistory.push(this.tabeleData);
|
||||
})
|
||||
.catch(e => {
|
||||
this.executionTime = 'Check request'
|
||||
})
|
||||
|
||||
},
|
||||
resetData: function resetData() {
|
||||
this.executionTime = 'Not execute yet',
|
||||
this.selectedIp = ["199.247.22.146",12111,20473,1],
|
||||
this.target = '8.8.8.8',
|
||||
this.tabeleData = [ ],
|
||||
this.tableDataHistory = [ ]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (sessionStorage.getItem('executionTime'+ this.boxNumber)) this.executionTime = JSON.parse(sessionStorage.getItem('executionTime'+ this.boxNumber));
|
||||
if (sessionStorage.getItem('selectedIp'+ this.boxNumber)) {
|
||||
this.selectedIp = JSON.parse(sessionStorage.getItem('selectedIp'+ this.boxNumber));
|
||||
} else {
|
||||
this.selectedIp = ["199.247.22.146",12111,20473,1]; // Change from static to dynamic
|
||||
}
|
||||
|
||||
if (sessionStorage.getItem('tableDataHistory'+ this.boxNumber)) this.tableDataHistory = JSON.parse(sessionStorage.getItem('tableDataHistory'+ this.boxNumber));
|
||||
if (sessionStorage.getItem('target'+ this.boxNumber)) this.target = JSON.parse(sessionStorage.getItem('target'+ this.boxNumber));
|
||||
if (sessionStorage.getItem('tabeleData'+ this.boxNumber)) this.tabeleData = JSON.parse(sessionStorage.getItem('tabeleData'+ this.boxNumber));
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
executionTime: 'Not execute yet',
|
||||
selectedIp: ["199.247.22.146",12111,20473,1],
|
||||
target: '8.8.8.8',
|
||||
tabeleData : [ ],
|
||||
tableDataHistory: []
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
span.small {
|
||||
font-size: 75%;
|
||||
}
|
||||
|
||||
table.active {
|
||||
border: 3px solid #9ac5e3;
|
||||
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
td
|
||||
{
|
||||
border:1px solid grey;
|
||||
font-size: 9pt;
|
||||
}
|
||||
|
||||
.traceroutes
|
||||
{
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.traceroutes:visited
|
||||
{
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.traceroutes:hover
|
||||
{
|
||||
color: #880000;
|
||||
transform: rotate(-30deg);
|
||||
}
|
||||
|
||||
.traceroutes:active
|
||||
{
|
||||
color: #bb0000;
|
||||
}
|
||||
|
||||
.traceroutes_rotating
|
||||
{
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
color: #bb0000;
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin
|
||||
{
|
||||
0% { transform: rotate(-30deg); }
|
||||
25% { transform: rotate(0deg); }
|
||||
50% { transform: rotate(30deg); }
|
||||
75% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(-30deg); }
|
||||
}
|
||||
</style>
|
Reference in New Issue
Block a user