Break out components, add compare feature
This commit is contained in:
parent
6b40111a3b
commit
b0b9a4d0d0
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
src/overseer/static/js/app.fbd98594.js
Normal file
2
src/overseer/static/js/app.fbd98594.js
Normal file
File diff suppressed because one or more lines are too long
1
src/overseer/static/js/app.fbd98594.js.map
Normal file
1
src/overseer/static/js/app.fbd98594.js.map
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
src/overseer/static/js/chunk-vendors.1f751c93.js.map
Normal file
1
src/overseer/static/js/chunk-vendors.1f751c93.js.map
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1 +1 @@
|
||||
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/static/favicon.ico"><title>Overseer</title><link href="/static/css/app.adf7b5c2.css" rel="preload" as="style"><link href="/static/js/app.a3974328.js" rel="preload" as="script"><link href="/static/js/chunk-vendors.4fdbc4a4.js" rel="preload" as="script"><link href="/static/css/app.adf7b5c2.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but Overseer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/static/js/chunk-vendors.4fdbc4a4.js"></script><script src="/static/js/app.a3974328.js"></script></body></html>
|
||||
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/static/favicon.ico"><title>Overseer</title><link href="/static/css/app.107f39c9.css" rel="preload" as="style"><link href="/static/js/app.fbd98594.js" rel="preload" as="script"><link href="/static/js/chunk-vendors.1f751c93.js" rel="preload" as="script"><link href="/static/css/app.107f39c9.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but Overseer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/static/js/chunk-vendors.1f751c93.js"></script><script src="/static/js/app.fbd98594.js"></script></body></html>
|
||||
56
src/overseer_client/src/components/PortList.vue
Normal file
56
src/overseer_client/src/components/PortList.vue
Normal file
@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<ul>
|
||||
<li v-for="port in ports" :key="port" v-bind:style="getItemWidth()">
|
||||
<span>{{ port.split(" ")[0] }}</span>
|
||||
<span class="proto" v-bind:style="dynamicProtocolStyle(port.split(' ')[1])" >{{ port.split(" ")[1] }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'PortList',
|
||||
props: ["ports", "itemWidth"],
|
||||
methods: {
|
||||
dynamicProtocolStyle(proto) {
|
||||
return {
|
||||
backgroundColor: proto == "TCP" ? "#E7E6FF" : "#D5EFFF",
|
||||
}
|
||||
},
|
||||
getItemWidth() {
|
||||
return {
|
||||
width: this.itemWidth || "75px"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.proto {
|
||||
border-radius: 4px;
|
||||
padding: 0px 2px;
|
||||
color: #0A282F;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
margin: 10px 43px;
|
||||
width: 75px;
|
||||
}
|
||||
|
||||
li span {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
column-count: 3;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
list-style-type: none;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
</style>
|
||||
40
src/overseer_client/src/components/ScanCompare.vue
Normal file
40
src/overseer_client/src/components/ScanCompare.vue
Normal file
@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="getPortDiff(newScan, oldScan).length + getPortDiff(oldScan, newScan).length == 0">
|
||||
<h4>No Differences Found</h4>
|
||||
</div>
|
||||
<div v-if="getPortDiff(newScan, oldScan).length > 0">
|
||||
<h4 style="text-decoration: underline;">New Ports</h4>
|
||||
<PortList :ports="getPortDiff(newScan, oldScan)" itemWidth="70px" />
|
||||
</div>
|
||||
<div v-if="getPortDiff(oldScan, newScan).length > 0">
|
||||
<h4 style="text-decoration: underline;">Removed Ports</h4>
|
||||
<PortList :ports="getPortDiff(oldScan, newScan)" itemWidth="70px" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PortList from '../components/PortList.vue'
|
||||
|
||||
export default {
|
||||
name: 'ScanCompare',
|
||||
props: ["newScan", "oldScan"],
|
||||
components: {
|
||||
PortList,
|
||||
},
|
||||
methods: {
|
||||
getPortDiff(s1, s2) {
|
||||
return s1.results
|
||||
.filter(p => !s2.results.includes(p));
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
h4 {
|
||||
margin: 10px 0px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@ -11,8 +11,10 @@
|
||||
<h2 id="scan-status">No Scans Found</h2>
|
||||
</div>
|
||||
<div v-else>
|
||||
<h2 v-if="scan.status == 'IN_PROGRESS'" id="scan-status">Scanning in Progress</h2>
|
||||
<h2 v-else id="scan-status">Scan Results</h2>
|
||||
<router-link :to="`/scan/${scan.target}/${scan.id}`" style="text-decoration: none;">
|
||||
<h2 v-if="scan.status == 'IN_PROGRESS'" id="scan-status">Scanning in Progress</h2>
|
||||
<h2 v-else id="scan-status">Scan Result</h2>
|
||||
</router-link>
|
||||
|
||||
<h5 id="sub-status">{{ normalizeDate(scan.created_at) }}</h5>
|
||||
|
||||
@ -22,17 +24,13 @@
|
||||
<ScanProgress title="Total" :percentage="scan.total_progress" />
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
<li v-for="port in scan.results" :key="port">
|
||||
<span>{{ port.split(" ")[0] }}</span>
|
||||
<span class="proto" v-bind:style="dynamicProtocolStyle(port.split(' ')[1])" >{{ port.split(" ")[1] }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<PortList :ports="scan.results"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Loading from '../components/Loading.vue'
|
||||
import PortList from '../components/PortList.vue'
|
||||
import ScanProgress from '../components/ScanProgress.vue'
|
||||
|
||||
export default {
|
||||
@ -40,18 +38,14 @@ export default {
|
||||
props: ["scan", "error", "loading"],
|
||||
components: {
|
||||
Loading,
|
||||
PortList,
|
||||
ScanProgress,
|
||||
},
|
||||
methods: {
|
||||
normalizeDate(dateISO) {
|
||||
let parsedDate = new Date(dateISO);
|
||||
return parsedDate.toDateString() + " " + parsedDate.toLocaleTimeString()
|
||||
},
|
||||
dynamicProtocolStyle(proto) {
|
||||
return {
|
||||
"backgroundColor": proto == "TCP" ? "#E7E6FF" : "#D5EFFF",
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -60,19 +54,13 @@ export default {
|
||||
#scan-status {
|
||||
color: #EAECE9;
|
||||
text-align: center;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#sub-status {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin: -20px 0px 10px 0px;
|
||||
width: 200px;
|
||||
margin: -5px auto 10px auto;
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
|
||||
.proto {
|
||||
border-radius: 4px;
|
||||
padding: 0px 2px;
|
||||
color: #0A282F;
|
||||
margin-left: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,29 +1,63 @@
|
||||
<template>
|
||||
<div id="overseer-scan" style="padding: 50px;">
|
||||
<h1 style="font-size: 2.5em; margin: 0px; float: left;">{{ $route.params.target }}</h1>
|
||||
<span v-if="getRequestedScan.status == 'COMPLETE'" v-on:click="performScan()" id="scan-button">Scan Again</span>
|
||||
|
||||
<router-link :to="`/scan/${$route.params.target}`">
|
||||
<h1 style="font-size: 2.5em; margin: 0px; float: left; color: #EAECE9">{{ $route.params.target }}</h1>
|
||||
</router-link>
|
||||
<span v-if="getRequestedScans[0].status == 'COMPLETE'" v-on:click="performScan()" id="scan-button">Scan Again</span>
|
||||
<div id="results">
|
||||
<ScanResult :scan="getRequestedScan" :error="error" :loading="loading"/>
|
||||
<div v-for="(scan, index) in getRequestedScans" :key= "scan.id">
|
||||
<ScanResult
|
||||
:scan="scan"
|
||||
:error="error"
|
||||
:loading="loading"
|
||||
style="padding: 20px; margin-top: 25px; border-radius: 5px; box-shadow: 0px 0px 10px #e0e3de;"/>
|
||||
|
||||
<div ref="compareContainer"
|
||||
v-if="getRequestedScans.length != index + 1"
|
||||
v-bind:style="deriveCompareStyle(scan)"
|
||||
v-on:click="toggleCompare(scan)" class="compare-content">
|
||||
<h4 v-if="!openCompare.includes(scan)" style="margin: 0px; text-align: center;">Compare</h4>
|
||||
<ScanCompare v-else :newScan="scan" :oldScan="getRequestedScans[index + 1]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ScanResult from '../components/ScanResult.vue'
|
||||
import ScanCompare from '../components/ScanCompare.vue'
|
||||
|
||||
export default {
|
||||
name: 'Scan',
|
||||
components: {
|
||||
ScanResult,
|
||||
ScanCompare,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
error: null,
|
||||
loading: false
|
||||
loading: false,
|
||||
openCompare: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
deriveCompareStyle(scan) {
|
||||
if (!this.openCompare.includes(scan))
|
||||
return {};
|
||||
return {
|
||||
"width": "90%",
|
||||
"padding": "10px",
|
||||
"max-height": "10000px",
|
||||
}
|
||||
},
|
||||
toggleCompare(scan) {
|
||||
if (this.openCompare.includes(scan))
|
||||
this.openCompare = this.openCompare
|
||||
.filter(item => item !== scan)
|
||||
else
|
||||
this.openCompare.push(scan);
|
||||
},
|
||||
performScan() {
|
||||
this.error = null;
|
||||
this.loading = true;
|
||||
@ -32,28 +66,29 @@ export default {
|
||||
.then(scan => {
|
||||
if (scan.error)
|
||||
throw new Error(scan.error)
|
||||
this.$router.push({ path: `/scan/${this.$route.params.target}/${scan.id}` })
|
||||
this.$router.push({ path: `/scan/${this.$route.params.target}` })
|
||||
// this.$router.push({ path: `/scan/${this.$route.params.target}/${scan.id}` })
|
||||
}).catch(err => {
|
||||
this.error = err;
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
getRequestedScan() {
|
||||
getRequestedScans() {
|
||||
let scanCache = this.$store.state.scan_cache;
|
||||
let target = this.$route.params.target;
|
||||
let scanID = this.$route.params.scan_id;
|
||||
|
||||
if (!scanCache[target])
|
||||
return { "status": "LOADING" }
|
||||
return [{ "status": "LOADING" }]
|
||||
|
||||
if (scanID)
|
||||
return scanCache[target]
|
||||
.find(item => item.id == scanID) || { "status": "NO_RESULTS" };
|
||||
.filter(item => item.id == scanID) || [{ "status": "NO_RESULTS" }];
|
||||
else
|
||||
return scanCache[target][0] || { "status": "NO_RESULTS" };
|
||||
return scanCache[target] || [{ "status": "NO_RESULTS" }];
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
@ -68,29 +103,10 @@ export default {
|
||||
}
|
||||
|
||||
#results {
|
||||
width: 500px;
|
||||
width: 700px;
|
||||
margin: 150px auto 0px auto;
|
||||
}
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
margin: 10px 43px;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
li span {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
column-count: 3;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
list-style-type: none;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
#scan-button {
|
||||
font-size: 1em;
|
||||
background-color: #0E6A0E;
|
||||
@ -101,4 +117,17 @@ ul {
|
||||
cursor: pointer;
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.compare-content {
|
||||
width: 70px;
|
||||
max-height: 22px;
|
||||
padding: 0px 10px;
|
||||
background-color: #C9582C;
|
||||
border-radius: 15px;
|
||||
transition: 0.5s;
|
||||
font-weight: 700;
|
||||
margin: 25px auto 0px auto;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user