Add features - restructure code

This commit is contained in:
JR 2019-12-05 23:48:29 +01:00
parent 4c99fc5b12
commit 1f2039a474
5 changed files with 304 additions and 61 deletions

6
dist/main.js vendored

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,45 @@
/**
*
*/
export default class XtrData {
/**
*
*/
constructor() {
this._requestServer = '';
this._requestSendTime = '';
this._responseData = '';
this._targetUrl = '';
}
/**
*
* @param {*} elemet
*/
initObjectByJson (elemet) {
this._requestServer = elemet._requestServer;
this._requestSendTime = elemet._requestSendTime;
this._responseData = elemet._responseData;
this._targetUrl = elemet._targetUrl;
}
/**
*
* @param {*} requestServer
* @param {*} requestSendTime
* @param {*} responseData
* @param {*} targetUrl
*/
initObjectByElements (requestServer, requestSendTime, responseData, targetUrl) {
this._requestServer = requestServer;
this._requestSendTime = requestSendTime;
this._responseData = responseData;
this._targetUrl = targetUrl;
}
displayInfo () {
return 'Server: ' + this._requestServer.getIpPortAsString() + ' RequestTime: ' + this._requestSendTime;
}
}

View File

@ -0,0 +1,50 @@
const IP_INDEX = 0;
const PORT_INDEX = 1;
const AS_INDEX = 2;
const SERVER_STATUS_INDEX = 3;
/**
*
*/
export default class XtrServer {
constructor() {
this._ip = '';
this._port = '';
// autonomous system
this._as = '';
// is online ?
// http://xtr-master.xicon.eu/v3/server/list/online
this._serverStatus = '';
}
initObjectByValues (ip, port, as, serverStatus) {
this._ip = ip;
this._port = port;
this._as = as;
this._serverStatus = serverStatus;
}
initObjectByArray (element) {
this._ip = element[IP_INDEX];
this._port = element[PORT_INDEX];
this._as = element[AS_INDEX];
this._serverStatus = element[SERVER_STATUS_INDEX];
}
initObjectByJson (elemet) {
this._ip = elemet._ip;
this._port = elemet._port;
this._as = elemet._as;
this._serverStatus = elemet._serverStatus;
}
getIpPortAsString() {
return this._ip + ':' + this._port;
}
getLabelInfoString() {
return this._ip + ':' + this._port + ' ' + '(AS' + this._as + ')';
}
}

View File

@ -2,17 +2,18 @@
<div id="statusBox"> <div id="statusBox">
<div class="row"> <div class="row">
<div class="col-4"> <div class="col-4">
<select v-model="selectedIp" id="serverSelectList"> <select :ref="'serverSelectBox' + 1" v-if="pending === false" v-model="selectedServerData" id="serverSelectList">
<option v-for="(serverItem, index) in serverlist" <option v-for="(serverItem, index) in serverlist"
v-bind:value="serverItem" v-bind:value="serverItem"
> >
{{ serverItem[0] }}:{{ serverItem[1] }} (AS{{ serverItem[2] }}) {{serverItem.getLabelInfoString()}}
</option> </option>
</select> </select>
<input v-model="target" placeholder="Enter Ip or Domain"> <input v-model="target" placeholder="Enter Ip or Domain">
<a href="#" class="traceroutes" v-on:click="traceRoute()"></a> <button v-on:click="traceRoute()"></button> <br>
<span class="small">{{executionTime}}</span> <!-- <span class="small">{{executionTime}}</span> -->
<span class="small">{{infoString}}</span>
<div> <div>
<table :id="'tableId_'+boxNumber" class="table table-striped"> <table :id="'tableId_'+boxNumber" class="table table-striped">
<thead> <thead>
@ -22,7 +23,7 @@
<td>PING</td> <td>PING</td>
<td>AS</td> <td>AS</td>
</tr> </tr>
<tr v-for="tData in tableData"> <tr :class="isOdd(index)" v-for="(tData, index) in tableData">
<td>{{ tData[0] }}</td> <td>{{ tData[0] }}</td>
<td>{{ tData[1] }}</td> <td>{{ tData[1] }}</td>
<td>{{ tData[2] }}</td> <td>{{ tData[2] }}</td>
@ -30,6 +31,13 @@
</tr> </tr>
</thead> </thead>
</table> </table>
<input class="range" v-model="tick" type="range" v-if="tableDataHistory.length > 1" :max="tableDataHistory.length -1" min="0" :list="'tickmarks'+_uid">
<datalist :id="'tickmarks'+_uid">
<option v-for="(historyItem, index) in tableDataHistory"
:value="index"
>
</option>
</datalist>
</div> </div>
</div> </div>
</div> </div>
@ -38,45 +46,134 @@
<script> <script>
import axios from 'axios'; import axios from 'axios';
import XtrServer from './ModelObjects/XtrServer.js';
import XtrData from './ModelObjects/XtrData.js';
export default { export default {
props: { props: {
serverlist: Array, serverlist: Array,
boxNumber: Number pending: Boolean,
boxNumber: Number,
initData: XtrServer
},
data : function () {
return {
executionTime: 'Not execute yet',
selectedServerData: this.initData,
tick: '',
target: 'luan.xicon.eu',
tableData : [ ],
tableDataHistory: [],
tableDataHistoryObject: []
}
}, },
watch: { watch: {
tableDataHistory: { pending : {
handler() { handler() {
sessionStorage.setItem('tableDataHistory' + this.boxNumber, JSON.stringify(this.tableDataHistory)); if(this.pending === false
&& this.serverlist.length > 0
&& !(JSON.parse(sessionStorage.getItem(this.selectedServerDataIndex)))
) {
this.selectedServerData = this.serverlist[0];
}
} }
}, },
executionTime: {
tableDataHistory : {
handler() {
sessionStorage.setItem('tableDataHistory' + this.boxNumber, JSON.stringify(this.tableDataHistory));
// Restore history data and set the marker to the last range item
this.tick = this.tableDataHistory.length -1;
}
},
tableDataHistoryObject : {
handler() {
sessionStorage.setItem('tableDataHistoryObject' + this.boxNumber, JSON.stringify(this.tableDataHistoryObject));
// Restore history data and set the marker to the last range item
this.tick = this.tableDataHistoryObject.length -1;
},
deep: true
},
executionTime : {
handler() { handler() {
sessionStorage.setItem('executionTime' + this.boxNumber, JSON.stringify(this.executionTime)); sessionStorage.setItem('executionTime' + this.boxNumber, JSON.stringify(this.executionTime));
}, },
deep: true deep: true
}, },
selectedIp: {
selectedServerData : {
handler() { handler() {
sessionStorage.setItem('selectedIp' + this.boxNumber, JSON.stringify(this.selectedIp)); sessionStorage.setItem('selectedServerData' + this.boxNumber, JSON.stringify(this.selectedServerData));
}, },
deep: true deep: true
}, },
target : { target : {
handler() { handler() {
sessionStorage.setItem('target' + this.boxNumber, JSON.stringify(this.target)); sessionStorage.setItem('target' + this.boxNumber, JSON.stringify(this.target));
}, },
deep: true deep: true
}, },
tableData : { tableData : {
handler() { handler() {
sessionStorage.setItem('tableData' + this.boxNumber, JSON.stringify(this.tableData)); sessionStorage.setItem(this.tableDataIndex, JSON.stringify(this.tableData));
}, },
deep: true deep: true
},
tick : {
handler() {
sessionStorage.setItem(this.tickIndex, JSON.stringify(this.tick));
if(this.tableDataHistory.length > 0) {
this.tableData = this.tableDataHistory[this.tick];
}
}
} }
}, },
methods: { computed : {
setLastExecutionTime: function setLastExecutionTime() { selectedServerDataIndex : function selectedServerDataIndex() {
return 'selectedServerData' + this.boxNumber;
},
tickIndex: function tickIndex() {
return 'tick' + this.boxNumber;
},
tableDataIndex : function tableDataIndex() {
return 'tableData' + this.boxNumber;
},
infoString : function infoString() {
var obData = this.tableDataHistoryObject[this.tick];
if(typeof(obData) !== "undefined" && obData !== null){
return obData.displayInfo();
} else {
return '';
}
},
tryHard : function tryHard() {
if (this.selectedServerData) {
} else {
this.selectedServerData = this.initData;
}
}
},
methods : {
isOdd : function isOdd(index) {
if(index % 2 === 0) {
return 'odd';
} else {
return 'even';
}
},
setLastExecutionTime : function setLastExecutionTime() {
var day = new Date(); var day = new Date();
var hours = day.getHours(); var hours = day.getHours();
var minutes = day.getMinutes() ; var minutes = day.getMinutes() ;
@ -96,60 +193,80 @@ export default {
this.executionTime = hours + ':' + minutes + ':' + seconds; this.executionTime = hours + ':' + minutes + ':' + seconds;
}, },
traceRoute: function traceRoute() {
traceRoute : function traceRoute() {
// e.g. http://199.247.22.146:12111/v3/client/request/8.8.8.8 // 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) axios.get("http://" + this.selectedServerData.getIpPortAsString() + "/v3/client/request/" + this.target)
.then(response => { .then(response => {
// JSON responses are automatically parsed. // JSON responses are automatically parsed.
this.tableData = response.data; this.tableData = response.data;
this.setLastExecutionTime(); this.setLastExecutionTime();
this.tableDataHistory.push(this.tableData); this.tableDataHistory.push(this.tableData);
this.tick = this.tableDataHistory.length -1;
var xtrData = new XtrData();
xtrData.initObjectByElements(this.selectedServerData, this.executionTime , this.tableData ,this.target);
this.tableDataHistoryObject.push(xtrData);
}) })
.catch(e => { .catch(e => {
this.executionTime = 'Check request' this.executionTime = 'Check request'
}) })
}, },
resetData: function resetData() {
this.executionTime = 'Not execute yet', resetData : function resetData() {
this.selectedIp = ["199.247.22.146",12111,20473,1], this.executionTime = 'Not execute yet';
this.target = '8.8.8.8', this.target = 'luan.xicon.eu';
this.tableData = [ ], this.tableData = [ ];
this.tableDataHistory = [ ] this.tableDataHistory = [ ];
this.tableDataHistoryObject = [ ];
this.selectedServerData = this.serverlist[0];
this.tick = '';
} }
}, },
mounted() { mounted() {
if (sessionStorage.getItem('tableDataHistory'+ this.boxNumber)) this.tableDataHistory = JSON.parse(sessionStorage.getItem('tableDataHistory'+ this.boxNumber));
if (sessionStorage.getItem('tick'+ this.boxNumber)) this.tick = parseInt(sessionStorage.getItem('tick'+ this.boxNumber));
if (sessionStorage.getItem('executionTime'+ this.boxNumber)) this.executionTime = JSON.parse(sessionStorage.getItem('executionTime'+ this.boxNumber)); 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)); if (sessionStorage.getItem('tableDataHistoryObject'+ this.boxNumber)) {
} else {
this.selectedIp = ["199.247.22.146",12111,20473,1]; // Change from static to dynamic var manA = JSON.parse(sessionStorage.getItem('tableDataHistoryObject'+ this.boxNumber));
manA.forEach(element => {
var restoreData = new XtrData();
var restoreServer = new XtrServer();
restoreServer.initObjectByJson(element._requestServer);
restoreData.initObjectByElements(restoreServer, element._requestSendTime, element._responseData, element._targetUrl);
this.tableDataHistoryObject.push(restoreData);
});
}
if (sessionStorage.getItem('selectedServerData'+ this.boxNumber)) {
var restoreData = new XtrServer();
var man = JSON.parse(sessionStorage.getItem('selectedServerData'+ this.boxNumber))
restoreData.initObjectByJson(man);
this.selectedServerData = restoreData;
} }
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('target'+ this.boxNumber)) this.target = JSON.parse(sessionStorage.getItem('target'+ this.boxNumber));
if (sessionStorage.getItem('tableData'+ this.boxNumber)) this.tableData = JSON.parse(sessionStorage.getItem('tableData'+ this.boxNumber)); if (sessionStorage.getItem('tableData'+ this.boxNumber)) this.tableData = JSON.parse(sessionStorage.getItem('tableData'+ this.boxNumber));
},
data: function () {
return {
executionTime: 'Not execute yet',
selectedIp: ["199.247.22.146",12111,20473,1],
target: '8.8.8.8',
tableData : [ ],
tableDataHistory: []
}
} }
} }
</script> </script>
<style scoped> <style scoped>
input[type=range] {
width: 90%;
display: flex;
flex-direction: column;
align-items: stretch;
}
span.small { span.small {
font-size: 75%; font-size: 75%;
} }
table.active { table.active {
border: 3px solid #9ac5e3; border: 3px solid #9ac5e3;
} }
table { table {
@ -157,44 +274,41 @@ export default {
width: 90%; width: 90%;
} }
td td {
{
border:1px solid grey; border:1px solid grey;
font-size: 9pt; font-size: 9pt;
} }
.traceroutes .traceroutes {
{
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
} }
.traceroutes:visited .traceroutes:visited {
{
color: #000000; color: #000000;
} }
.traceroutes:hover .traceroutes:hover {
{
color: #880000; color: #880000;
transform: rotate(-30deg); transform: rotate(-30deg);
} }
.traceroutes:active .traceroutes:active {
{
color: #bb0000; color: #bb0000;
} }
.traceroutes_rotating .traceroutes_rotating {
{
display: inline-block; display: inline-block;
text-decoration: none; text-decoration: none;
color: #bb0000; color: #bb0000;
animation: spin 2s linear infinite; animation: spin 2s linear infinite;
} }
@keyframes spin .odd {
{ background-color: #EEE;
}
@keyframes spin {
0% { transform: rotate(-30deg); } 0% { transform: rotate(-30deg); }
25% { transform: rotate(0deg); } 25% { transform: rotate(0deg); }
50% { transform: rotate(30deg); } 50% { transform: rotate(30deg); }

View File

@ -2,6 +2,9 @@
<div id="statusBoxContainer"> <div id="statusBoxContainer">
<div> <div>
<button v-on:click="resetSession()">Reset whole session</button> <button v-on:click="resetSession()">Reset whole session</button>
<button v-on:click="refreshServerlist()">Refresh Serverlist</button>
<button v-on:click="addTraceBox()">Add new TraceBox</button>
</div> </div>
<!-- Hover icon section --> <!-- Hover icon section -->
<div id="info" class="info" title="test"> <div id="info" class="info" title="test">
@ -35,11 +38,18 @@
</div> </div>
<br> <br>
<button v-on:click="executeAllBoxes()">Request for all boxes</button> <button v-on:click="executeAllBoxes()">Request for all boxes</button>
<button v-on:click="addTraceBox()">Add new TraceBox</button>
<div class="grid-container"> <div class="grid-container">
<template v-for="(traceBox, index) in traceBoxes"> <template v-for="(traceBox, index) in traceBoxes">
<component :is="traceBox" :ref="'boxref'" :key="index" v-bind:serverlist="listOfServers" v-bind:boxNumber="index"></component> <component
:is="traceBox"
:ref="'boxref'"
:key="index"
v-bind:serverlist="listOfServers"
v-bind:initData="listOfServers[0]"
v-bind:pending="pendingParent"
v-bind:boxNumber="index">
</component>
</template> </template>
</div> </div>
</div> </div>
@ -48,6 +58,7 @@
<script> <script>
import axios from 'axios'; import axios from 'axios';
import StatusBoxVue from './StatusBox.vue'; import StatusBoxVue from './StatusBox.vue';
import XtrServer from './ModelObjects/XtrServer.js';
export default { export default {
components: { components: {
@ -55,6 +66,7 @@ export default {
}, },
data: function () { data: function () {
return { return {
pendingParent: true,
listOfServers: [], listOfServers: [],
checkedBoxes: [], checkedBoxes: [],
traceBoxes: [ traceBoxes: [
@ -89,7 +101,15 @@ export default {
}, },
mounted() { mounted() {
if (sessionStorage.getItem('listOfServers')) { if (sessionStorage.getItem('listOfServers')) {
this.listOfServers = JSON.parse(sessionStorage.getItem('listOfServers')); var sessionServerList = JSON.parse(sessionStorage.getItem('listOfServers'));
sessionServerList.forEach(elementObject => {
let xtrServer = new XtrServer();
xtrServer.initObjectByJson(elementObject);
this.listOfServers.push(xtrServer);
});
this.pendingParent = false;
} else { } else {
this.getServer(); this.getServer();
} }
@ -147,6 +167,7 @@ export default {
boxRef.traceRoute(); boxRef.traceRoute();
}); });
}, },
executeSpecificBoxes: function (choosedBoxes) { executeSpecificBoxes: function (choosedBoxes) {
var boxesRefs = this.$refs.boxref; var boxesRefs = this.$refs.boxref;
@ -158,18 +179,31 @@ export default {
}); });
}); });
}, },
addTraceBox () { addTraceBox () {
this.traceBoxes.push(StatusBoxVue); this.traceBoxes.push(StatusBoxVue);
}, },
refreshServerlist: function refreshServerlist() {
this.listOfServers = [];
this.getServer();
},
getServer: function getServerList() { getServer: function getServerList() {
axios.get("http://xtr-master.xicon.eu/v3/server/list/online") axios.get("http://xtr-master.xicon.eu/v3/server/list/online")
.then(response => { .then(response => {
// JSON responses are automatically parsed. response.data.forEach(elementArray => {
this.listOfServers = response.data; let xtrServer = new XtrServer();
xtrServer.initObjectByArray(elementArray);
this.listOfServers.push(xtrServer);
});
}) })
.catch(e => { .catch(e => {
this.errors.push(e) // console.log('error', e);
}) })
.finally(ee => {
this.pendingParent = false
});
}, },
} }
} }
@ -181,7 +215,7 @@ export default {
} }
.grid-container { .grid-container {
display: grid; display: grid;
grid-template-columns: auto auto auto; grid-template-columns: repeat(auto-fill, minmax(525px, 1fr));
grid-gap: 5px; grid-gap: 5px;
padding: 5px; padding: 5px;
} }