Merge branch 'feature/history_timeline' of xicon/xtr-improved-frontend into master
* history timeline * refactoring * small fixes * gui updates
This commit is contained in:
Gitea
commit
00d4f39260
File diff suppressed because one or more lines are too long
|
|
@ -7491,6 +7491,11 @@
|
|||
"vue-style-loader": "^4.1.0"
|
||||
}
|
||||
},
|
||||
"vue-spinners-css": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/vue-spinners-css/-/vue-spinners-css-1.1.3.tgz",
|
||||
"integrity": "sha512-EbWBH2tPj+YjJOYcZ8gyFCYFK0QCxECCH5xFUeOXKxvN4tVgP6Axk5A60ld+GUBcg+YuBn/EYSG/jifEWpzi9Q=="
|
||||
},
|
||||
"vue-style-loader": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@
|
|||
"axios": "^0.19.0",
|
||||
"webpack": "^4.41.2",
|
||||
"webpack-cli": "^3.3.10",
|
||||
"webpack-dev-server": "^3.9.0"
|
||||
"webpack-dev-server": "^3.9.0",
|
||||
"vue-spinners-css": "^1.1.3"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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 + ')';
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -2,17 +2,22 @@
|
|||
<div id="statusBox">
|
||||
<div class="row">
|
||||
<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"
|
||||
v-bind:value="serverItem"
|
||||
>
|
||||
{{ serverItem[0] }}:{{ serverItem[1] }} (AS{{ serverItem[2] }})
|
||||
{{serverItem.getLabelInfoString()}}
|
||||
</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>
|
||||
<button v-on:click="handleClick()">
|
||||
⛟
|
||||
</button>
|
||||
<RingLoader :size="10" :loading="isLoading" color="black"></RingLoader>
|
||||
<br>
|
||||
|
||||
<span class="small">{{infoString}}</span>
|
||||
<div>
|
||||
<table :id="'tableId_'+boxNumber" class="table table-striped">
|
||||
<thead>
|
||||
|
|
@ -22,7 +27,7 @@
|
|||
<td>PING</td>
|
||||
<td>AS</td>
|
||||
</tr>
|
||||
<tr v-for="tData in tableData">
|
||||
<tr :class="isOdd(index)" v-for="(tData, index) in tableData">
|
||||
<td>{{ tData[0] }}</td>
|
||||
<td>{{ tData[1] }}</td>
|
||||
<td>{{ tData[2] }}</td>
|
||||
|
|
@ -30,6 +35,13 @@
|
|||
</tr>
|
||||
</thead>
|
||||
</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>
|
||||
|
|
@ -38,118 +50,256 @@
|
|||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import XtrServer from './ModelObjects/XtrServer.js';
|
||||
import XtrData from './ModelObjects/XtrData.js';
|
||||
import { RingLoader } from 'vue-spinners-css';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
RingLoader
|
||||
},
|
||||
props: {
|
||||
serverlist: Array,
|
||||
boxNumber: Number
|
||||
pending: Boolean,
|
||||
boxNumber: Number,
|
||||
initData: XtrServer
|
||||
},
|
||||
data : function () {
|
||||
return {
|
||||
isLoading: false,
|
||||
executionTime: 'Not execute yet',
|
||||
selectedServerData: this.initData,
|
||||
tick: '',
|
||||
target: 'luan.xicon.eu',
|
||||
tableData : [ ],
|
||||
tableDataHistory: [],
|
||||
tableDataHistoryObject: [],
|
||||
jobCount: 0,
|
||||
jobList: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
tableDataHistory: {
|
||||
pending : {
|
||||
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() {
|
||||
sessionStorage.setItem('executionTime' + this.boxNumber, JSON.stringify(this.executionTime));
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
selectedIp: {
|
||||
|
||||
selectedServerData : {
|
||||
handler() {
|
||||
sessionStorage.setItem('selectedIp' + this.boxNumber, JSON.stringify(this.selectedIp));
|
||||
sessionStorage.setItem('selectedServerData' + this.boxNumber, JSON.stringify(this.selectedServerData));
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
|
||||
target : {
|
||||
handler() {
|
||||
sessionStorage.setItem('target' + this.boxNumber, JSON.stringify(this.target));
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
|
||||
tableData : {
|
||||
handler() {
|
||||
sessionStorage.setItem('tableData' + this.boxNumber, JSON.stringify(this.tableData));
|
||||
sessionStorage.setItem(this.tableDataIndex, JSON.stringify(this.tableData));
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
|
||||
tick : {
|
||||
handler() {
|
||||
sessionStorage.setItem(this.tickIndex, JSON.stringify(this.tick));
|
||||
if(this.tableDataHistory.length > 0) {
|
||||
this.tableData = this.tableDataHistory[this.tick];
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setLastExecutionTime: function setLastExecutionTime() {
|
||||
computed : {
|
||||
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';
|
||||
}
|
||||
},
|
||||
|
||||
handleClick: function handleClick() {
|
||||
this.traceRoute();
|
||||
},
|
||||
|
||||
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;
|
||||
this.executionTime = day.toISOString()
|
||||
|
||||
},
|
||||
traceRoute: function traceRoute() {
|
||||
|
||||
traceRoute : function traceRoute() {
|
||||
this.isLoading = true;
|
||||
let jobId = this.getJobCount;
|
||||
this.jobList.push(jobId);
|
||||
// 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 => {
|
||||
// JSON responses are automatically parsed.
|
||||
this.tableData = response.data;
|
||||
this.setLastExecutionTime();
|
||||
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 => {
|
||||
this.executionTime = 'Check request'
|
||||
})
|
||||
if(e.response !== undefined) {
|
||||
// JSON responses are automatically parsed.
|
||||
this.tableData = {0 : {
|
||||
0: "Status-Code: HTTP/" + e.response.status,
|
||||
1: "Message: " + e.response.statusText,
|
||||
2: "",
|
||||
3: "",
|
||||
4: ""
|
||||
}};
|
||||
this.setLastExecutionTime();
|
||||
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);
|
||||
}
|
||||
}).finally(ee => {
|
||||
var position = this.jobList.indexOf(jobId);
|
||||
|
||||
if(~position) {
|
||||
this.jobList.splice(position, 1);
|
||||
}
|
||||
if(this.jobList.length < 1) {
|
||||
this.jobCount = 0;
|
||||
this.isLoading = false;
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
resetData: function resetData() {
|
||||
this.executionTime = 'Not execute yet',
|
||||
this.selectedIp = ["199.247.22.146",12111,20473,1],
|
||||
this.target = '8.8.8.8',
|
||||
this.tableData = [ ],
|
||||
this.tableDataHistory = [ ]
|
||||
|
||||
getJobCount : function getJobCount() {
|
||||
this.jobCount += 1;
|
||||
return this.jobCount;
|
||||
},
|
||||
|
||||
resetData : function resetData() {
|
||||
this.executionTime = 'Not execute yet';
|
||||
this.target = 'luan.xicon.eu';
|
||||
this.tableData = [ ];
|
||||
this.tableDataHistory = [ ];
|
||||
this.tableDataHistoryObject = [ ];
|
||||
this.selectedServerData = this.serverlist[0];
|
||||
this.tick = '';
|
||||
}
|
||||
},
|
||||
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('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('tableDataHistoryObject'+ this.boxNumber)) {
|
||||
|
||||
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('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>
|
||||
|
||||
<style scoped>
|
||||
input[type=range] {
|
||||
width: 90%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
span.small {
|
||||
font-size: 75%;
|
||||
}
|
||||
|
||||
table.active {
|
||||
border: 3px solid #9ac5e3;
|
||||
|
||||
}
|
||||
|
||||
table {
|
||||
|
|
@ -157,48 +307,45 @@ export default {
|
|||
width: 90%;
|
||||
}
|
||||
|
||||
td
|
||||
{
|
||||
td {
|
||||
border:1px solid grey;
|
||||
font-size: 9pt;
|
||||
}
|
||||
|
||||
.traceroutes
|
||||
{
|
||||
.traceroutes {
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.traceroutes:visited
|
||||
{
|
||||
.traceroutes:visited {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.traceroutes:hover
|
||||
{
|
||||
.traceroutes:hover {
|
||||
color: #880000;
|
||||
transform: rotate(-30deg);
|
||||
}
|
||||
|
||||
.traceroutes:active
|
||||
{
|
||||
.traceroutes:active {
|
||||
color: #bb0000;
|
||||
}
|
||||
|
||||
.traceroutes_rotating
|
||||
{
|
||||
.traceroutes_rotating {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
color: #bb0000;
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin
|
||||
{
|
||||
.odd {
|
||||
background-color: #EEE;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(-30deg); }
|
||||
25% { transform: rotate(0deg); }
|
||||
50% { transform: rotate(30deg); }
|
||||
75% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(-30deg); }
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,6 +2,9 @@
|
|||
<div id="statusBoxContainer">
|
||||
<div>
|
||||
<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>
|
||||
<!-- Hover icon section -->
|
||||
<div id="info" class="info" title="test">
|
||||
|
|
@ -35,11 +38,18 @@
|
|||
</div>
|
||||
<br>
|
||||
<button v-on:click="executeAllBoxes()">Request for all boxes</button>
|
||||
<button v-on:click="addTraceBox()">Add new TraceBox</button>
|
||||
|
||||
<div class="grid-container">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -48,6 +58,7 @@
|
|||
<script>
|
||||
import axios from 'axios';
|
||||
import StatusBoxVue from './StatusBox.vue';
|
||||
import XtrServer from './ModelObjects/XtrServer.js';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -55,6 +66,7 @@ export default {
|
|||
},
|
||||
data: function () {
|
||||
return {
|
||||
pendingParent: true,
|
||||
listOfServers: [],
|
||||
checkedBoxes: [],
|
||||
traceBoxes: [
|
||||
|
|
@ -89,7 +101,15 @@ export default {
|
|||
},
|
||||
mounted() {
|
||||
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 {
|
||||
this.getServer();
|
||||
}
|
||||
|
|
@ -128,12 +148,15 @@ export default {
|
|||
});
|
||||
},
|
||||
setActive: function setActive(tableId) {
|
||||
var settedClasses = document.getElementById("tableId_"+tableId).className;
|
||||
if (settedClasses == 'table table-striped') {
|
||||
document.getElementById("tableId_"+tableId).className = 'table table-striped active';
|
||||
} else {
|
||||
document.getElementById("tableId_"+tableId).className = 'table table-striped';
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
var settedClasses = document.getElementById("tableId_"+tableId).className;
|
||||
if (settedClasses == 'table table-striped') {
|
||||
document.getElementById("tableId_"+tableId).className = 'table table-striped active';
|
||||
} else {
|
||||
document.getElementById("tableId_"+tableId).className = 'table table-striped';
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
setActiveFromSession: function setActiveFromSession(tableIds) {
|
||||
tableIds.forEach(tableId => {
|
||||
|
|
@ -147,6 +170,7 @@ export default {
|
|||
boxRef.traceRoute();
|
||||
});
|
||||
},
|
||||
|
||||
executeSpecificBoxes: function (choosedBoxes) {
|
||||
var boxesRefs = this.$refs.boxref;
|
||||
|
||||
|
|
@ -158,18 +182,31 @@ export default {
|
|||
});
|
||||
});
|
||||
},
|
||||
|
||||
addTraceBox () {
|
||||
this.traceBoxes.push(StatusBoxVue);
|
||||
},
|
||||
|
||||
refreshServerlist: function refreshServerlist() {
|
||||
this.listOfServers = [];
|
||||
this.getServer();
|
||||
},
|
||||
|
||||
getServer: function getServerList() {
|
||||
axios.get("http://xtr-master.xicon.eu/v3/server/list/online")
|
||||
.then(response => {
|
||||
// JSON responses are automatically parsed.
|
||||
this.listOfServers = response.data;
|
||||
response.data.forEach(elementArray => {
|
||||
let xtrServer = new XtrServer();
|
||||
xtrServer.initObjectByArray(elementArray);
|
||||
this.listOfServers.push(xtrServer);
|
||||
});
|
||||
})
|
||||
.catch(e => {
|
||||
this.errors.push(e)
|
||||
// console.log('error', e);
|
||||
})
|
||||
.finally(ee => {
|
||||
this.pendingParent = false
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
@ -181,24 +218,21 @@ export default {
|
|||
}
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto;
|
||||
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
|
||||
grid-gap: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.info
|
||||
{
|
||||
.info {
|
||||
display: block; position: absolute; right: 10px; top: 10px;
|
||||
}
|
||||
|
||||
.info:hover .info_box
|
||||
{
|
||||
.info:hover .info_box {
|
||||
visibility: visible;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.info .info_box
|
||||
{
|
||||
.info .info_box {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue