Merge branch 'feature/history_timeline' of xicon/xtr-improved-frontend into master

* history timeline
* refactoring
* small fixes
* gui updates

package-lock.json

@@ -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",

package.json

@@ -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"
   }
 }

src/ModelObjects/XtrData.js

@@ -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;
+	}
+
+}

src/ModelObjects/XtrServer.js

@@ -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 + ')';
+    }
+
+}

src/StatusBox.vue

@@ -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>
+			<button v-on:click="handleClick()">
-			<span class="small">{{executionTime}}</span>
+				⛟
+			</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: {
+		pending : {
+			handler() {
+				if(this.pending === false 
+				&& this.serverlist.length > 0 
+				&& !(JSON.parse(sessionStorage.getItem(this.selectedServerDataIndex)))
+				) {
+					this.selectedServerData = this.serverlist[0];
+				}
+			}
+		},
+
 		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];
+				}
+				
+			}
+		}
+	},
+	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();
+			this.executionTime = day.toISOString()
-			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() {
+			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;
+					}
+				});
 				
 		},
+
+		getJobCount : function getJobCount() {
+			this.jobCount += 1;
+			return this.jobCount;
+		},
+
 		resetData : function resetData() {
-			this.executionTime =  'Not execute yet',
+			this.executionTime =  'Not execute yet';
-			this.selectedIp =  ["199.247.22.146",12111,20473,1],
+			this.target =  'luan.xicon.eu';
-			this.target =  '8.8.8.8',
+			this.tableData =  [ ];
-			this.tableData =  [ ],
+			this.tableDataHistory = [ ];
-			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));
+		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('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,44 +307,41 @@ 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); } 

src/StatusBoxContainer.vue

@@ -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) {
+			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.
+				response.data.forEach(elementArray => {
-				this.listOfServers = response.data;
+					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;