xtr-improved-frontend/src/StatusBox.vue

<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>