Web Styling

src/overseer/api/__init__.py

@@ -1,25 +1,11 @@
 open_websockets = []
 
 
-"""
-EVENT:
-    DATA:
-        {
-            id: 1,
-            target: "127.0.0.1",
-            total_progress: 90,
-            tcp_progress: 80,
-            udp_progress: 100,
-        }
-"""
-
-
 def send_websocket_event(data):
     """Send an event to all registered websockets.
 
     Arguments:
     data -- Data to send over the websocket(s)
     """
-    print("EMITTING DATA: %s" % data)
     for socket in open_websockets:
         socket.send(data)

src/overseer/api/v1/routes.py

@@ -4,18 +4,8 @@ from flask import request
 
 
 @api.route("/status", methods=["GET"])
-def status():
+def get_status():
-    """
+    """Get server version and all active scans."""
-    GET:
-        REQUEST: /api/v1/status
-        RESPONSE:
-            {
-                version: "0.0.1",,
-                active_scans: [
-                    <WEBSOCKET_DATA>
-                ],
-            }
-    """
     return {
         "version": overseer.__version__,
         "active_scans": overseer.scan_manager.get_status(),
@@ -23,7 +13,7 @@ def status():
 
 
 @api.route("/scans", methods=["POST"])
-def scans_post():
+def post_scans():
     """
     POST:
         REQUEST: /api/v1/scans
@@ -43,7 +33,7 @@ def scans_post():
 
 
 @api.route("/scans/<string:target>", methods=["GET"])
-def scan_get_history(target):
+def get_scans_by_target(target):
     """
     GET:
         REQUEST: /api/v1/scans/www.google.com
@@ -64,9 +54,8 @@ def scan_get_history(target):
     return {"data": __normalize_scan_results(scan_results)}
 
 
-# TODO
 @api.route("/search", methods=["GET"])
-def scan_get_all(search):
+def get_scans(search):
     """
     GET:
         REQUEST: /api/v1/search?query=1.1.1.1

src/overseer/static/css/app.4d1483d7.css

@@ -1 +0,0 @@
-#overseer-body[data-v-dc8467c2]{background-color:#ff0;width:100%;height:100%}#center[data-v-dc8467c2]{margin:0 auto;width:800px;height:100%;background-color:purple}#overseer-search[data-v-dc8467c2]{width:400px;border-radius:5px;height:40px;margin-top:300px;font-size:1rem;padding:.3rem .8rem;text-indent:0;outline:none;border:0 solid}#overseer-header[data-v-182df07c]{background-color:green;width:100%;height:60px}#overseer-notifications[data-v-5c26d9a3]{height:100%;width:320px;padding:10px;float:right;background-color:#00f}.overseer-notification[data-v-5c26d9a3]{width:300px;height:65px;background-color:green;border-radius:5px;border:1px solid #000;text-align:start;padding:10px}#overseer-app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;height:100%}body,html{height:100%;width:100%;margin:0}

src/overseer/static/css/app.efe1070d.css

@@ -0,0 +1 @@
+#overseer-body[data-v-352462f2]{width:100%;height:100%}#center[data-v-352462f2]{margin:0 auto;width:1000px;height:100%;background-color:#343a46;box-shadow:inset 0 0 3px 3px #2b303a}#overseer-search[data-v-352462f2]::-moz-placeholder{text-align:center}#overseer-search[data-v-352462f2]:-ms-input-placeholder{text-align:center}#overseer-search[data-v-352462f2]::placeholder{text-align:center}#overseer-search[data-v-352462f2]{width:400px;height:40px;border-radius:5px;text-align:center;margin-top:400px;font-size:1rem;padding:.3rem .8rem;text-indent:0;outline:none;border:0 solid}#overseer-header[data-v-1f75c2e8]{background-color:#c9582c;width:100%;height:60px;position:fixed;top:0}#overseer-notifications[data-v-47117d80]{height:calc(100% - 60px);width:320px;position:fixed;transition:.5s;right:0;overflow:scroll;margin-top:60px}.overseer-notification[data-v-47117d80]{height:65px;transition:.5s;background-color:#e0e3de;border-radius:2px;text-align:start;padding:10px;margin:10px}#overseer-app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#3a4040;height:100%}body,html{height:100%;width:100%;margin:0;background-color:#2b303a}

src/overseer/static/js/app.77b1e8f6.js

@@ -1,2 +0,0 @@
-(function(e){function t(t){for(var r,c,s=t[0],a=t[1],u=t[2],l=0,p=[];l<s.length;l++)c=s[l],Object.prototype.hasOwnProperty.call(o,c)&&o[c]&&p.push(o[c][0]),o[c]=0;for(r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r]);f&&f(t);while(p.length)p.shift()();return i.push.apply(i,u||[]),n()}function n(){for(var e,t=0;t<i.length;t++){for(var n=i[t],r=!0,s=1;s<n.length;s++){var a=n[s];0!==o[a]&&(r=!1)}r&&(i.splice(t--,1),e=c(c.s=n[0]))}return e}var r={},o={app:0},i=[];function c(t){if(r[t])return r[t].exports;var n=r[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,c),n.l=!0,n.exports}c.m=e,c.c=r,c.d=function(e,t,n){c.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},c.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.t=function(e,t){if(1&t&&(e=c(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(c.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)c.d(n,r,function(t){return e[t]}.bind(null,r));return n},c.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return c.d(t,"a",t),t},c.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},c.p="/static/";var s=window["webpackJsonp"]=window["webpackJsonp"]||[],a=s.push.bind(s);s.push=t,s=s.slice();for(var u=0;u<s.length;u++)t(s[u]);var f=a;i.push([0,"chunk-vendors"]),n()})({0:function(e,t,n){e.exports=n("56d7")},"034f":function(e,t,n){"use strict";n("85ec")},"3b75":function(e,t,n){},"56d7":function(e,t,n){"use strict";n.r(t);n("e260"),n("e6cf"),n("cca6"),n("a79d");var r=n("2b0e"),o=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{attrs:{id:"overseer-app"}},[n("OverseerHeader"),n("OverseerNotifications"),n("OverseerHome")],1)},i=[],c=function(){var e=this,t=e.$createElement;e._self._c;return e._m(0)},s=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{attrs:{id:"overseer-body"}},[n("div",{attrs:{id:"center"}},[n("input",{attrs:{id:"overseer-search",placeholder:"IP / Hostname",type:"text"}})])])}],a={name:"OverseerHome"},u=a,f=(n("c931"),n("2877")),l=Object(f["a"])(u,c,s,!1,null,"dc8467c2",null),p=l.exports,d=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{attrs:{id:"overseer-header"}})},v=[],b={name:"OverseerHeader"},_=b,O=(n("8033"),Object(f["a"])(_,d,v,!1,null,"182df07c",null)),h=O.exports,m=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{attrs:{id:"overseer-notifications"}},e._l(e.items,(function(t){return n("div",{key:t.id,staticClass:"overseer-notification"},[n("b",[e._v("Target: ")]),e._v(" "+e._s(t.target)+" "),n("br"),n("b",[e._v("Status: ")]),e._v(e._s(t.status)+" "),n("br"),"total_progress"in t?n("span",[n("b",[e._v("Progress: ")]),e._v(e._s(t.total_progress)+" "),n("br")]):e._e()])})),0)},g=[],y={name:"OverseerNotifications",computed:{items:function(){return this.$store.state.notifications}}},w=y,j=(n("d09c"),Object(f["a"])(w,m,g,!1,null,"5c26d9a3",null)),x=j.exports,E={name:"App",components:{OverseerHome:p,OverseerHeader:h,OverseerNotifications:x}},S=E,P=(n("034f"),Object(f["a"])(S,o,i,!1,null,null,null)),T=P.exports,C=(n("7db0"),n("159b"),n("b64b"),n("2f62"));r["a"].use(C["a"]);var H=new C["a"].Store({state:{ws_connected:!1,notifications:[]},mutations:{SOCKET_connect:function(e,t){e.ws_connected=!0,console.log("CONNECT: ",e,t)},SOCKET_disconnect:function(e,t){e.ws_connected=!1,console.log("DISCONNECT: ",e,t)},SOCKET_message:function(e,t){var n=e.notifications.find((function(e){return e.id==t.id}));n?Object.keys(t).forEach((function(e){r["a"].set(n,e,t[e])})):e.notifications.push(t)}},actions:{}}),N=n("8e27"),$=n.n(N),k=n("5132"),K=n.n(k);r["a"].use(new K.a({debug:!0,connection:$()({path:"/api/v1/socket.io"}),vuex:{store:H,actionPrefix:"SOCKET_",mutationPrefix:"SOCKET_"}})),r["a"].config.productionTip=!1,console.log(H),new r["a"]({render:function(e){return e(T)},store:H}).$mount("#app")},8033:function(e,t,n){"use strict";n("3b75")},"85ec":function(e,t,n){},a2a5:function(e,t,n){},c931:function(e,t,n){"use strict";n("a2a5")},d09c:function(e,t,n){"use strict";n("e6eb")},e6eb:function(e,t,n){}});
-//# sourceMappingURL=app.77b1e8f6.js.map

src/overseer/templates/index.html

@@ -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_client</title><link href="/static/css/app.4d1483d7.css" rel="preload" as="style"><link href="/static/js/app.77b1e8f6.js" rel="preload" as="script"><link href="/static/js/chunk-vendors.6130e7bc.js" rel="preload" as="script"><link href="/static/css/app.4d1483d7.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but overseer_client doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/static/js/chunk-vendors.6130e7bc.js"></script><script src="/static/js/app.77b1e8f6.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_client</title><link href="/static/css/app.efe1070d.css" rel="preload" as="style"><link href="/static/js/app.b2809d88.js" rel="preload" as="script"><link href="/static/js/chunk-vendors.6130e7bc.js" rel="preload" as="script"><link href="/static/css/app.efe1070d.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but overseer_client doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/static/js/chunk-vendors.6130e7bc.js"></script><script src="/static/js/app.b2809d88.js"></script></body></html>

src/overseer_client/src/App.vue

@@ -27,7 +27,7 @@ export default {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-align: center;
-    color: #2c3e50;
+    color: #3A4040;
     height: 100%;
 }
 
@@ -35,5 +35,6 @@ html, body {
     height: 100%;
     width: 100%;
     margin: 0px;
+    background-color: #2B303A;
 }
 </style>

src/overseer_client/src/components/OverseerHeader.vue

@@ -1,18 +1,34 @@
 <template>
-  <div id="overseer-header">
+    <div id="overseer-header">
-  </div>
+        <div style="float: left; margin: 8px 20px; font-weight: 700; font-size: 2em;">Overseer</div>
+        <div style="float: right; margin: 10px 20px;">
+            <p style="color: white; position: absolute; font-weight: 700; width: 35px; height: 35px; margin: 9px 0px; font-size: .8em;">
+            {{ notificationCount }}
+            </p>
+            <svg style="width:35px; height:35px;" viewBox="0 0 24 24">
+                <path fill="currentColor" d="M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21M19.75,3.19L18.33,4.61C20.04,6.3 21,8.6 21,11H23C23,8.07 21.84,5.25 19.75,3.19M1,11H3C3,8.6 3.96,6.3 5.67,4.61L4.25,3.19C2.16,5.25 1,8.07 1,11Z" />
+            </svg>
+        </div>
+    </div>
 </template>
 
 <script>
 export default {
-  name: 'OverseerHeader'
+    name: 'OverseerHeader',
+    computed: {
+        notificationCount() {
+            return this.$store.state.notifications.length
+        }
+    }
 }
 </script>
 
 <style scoped>
 #overseer-header {
-    background-color: green;
+    background-color: #C9582C;
     width: 100%;
     height: 60px;
+    position: fixed;
+    top: 0;
 }
 </style>

src/overseer_client/src/components/OverseerHome.vue

@@ -1,34 +1,44 @@
 <template>
     <div id="overseer-body">
         <div id="center">
-            <input id="overseer-search" placeholder="IP / Hostname" type="text">
+            <input @keyup.enter="onSubmit" id="overseer-search" placeholder="IP Address / Hostname" type="text">
         </div>
     </div>
 </template>
 
 <script>
 export default {
-    name: 'OverseerHome'
+    name: 'OverseerHome',
+    methods: {
+        onSubmit(event){
+            alert(event.target.value)
+        }
+    }
 }
 </script>
 
 <style scoped>
 #overseer-body {
-    background-color: yellow;
     width: 100%;
     height: 100%;
 }
 #center {
     margin: 0px auto;
-    width: 800px;
+    width: 1000px;
     height: 100%;
-    background-color: purple;
+    background-color: #343A46;
+    /* background-color: #CAD2C5; */
+    box-shadow: 0 0 3px 3px #2B303A inset;
+}
+#overseer-search::placeholder{
+    text-align: center;
 }
 #overseer-search {
     width: 400px;
-    border-radius: 5px;
     height: 40px;
-    margin-top: 300px;
+    border-radius: 5px;
+    text-align: center;
+    margin-top: 400px;
     font-size: 1rem;
     padding: .3rem .8rem;
     text-indent: 0px;

src/overseer_client/src/components/OverseerNotifications.vue

@@ -23,21 +23,22 @@ export default {
 
 <style scoped>
 #overseer-notifications {
-    height: 100%;
+    height: calc(100% - 60px);
     width: 320px;
-    padding: 10px;
+    position: fixed;
-    float: right;
+    transition: 0.5s;
-    background-color: blue;
+    right: 0px;
+    overflow: scroll;
+    margin-top: 60px;
 }
 
 .overseer-notification {
-    width: 300px;
     height: 65px;
-    background-color: green;
+    transition: 0.5s;
-    border-radius: 5px;
+    background-color: #E0E3DE;
-    border: 1px solid black;
+    border-radius: 2px;
     text-align: start;
     padding: 10px;
-    margin: 3px 0px;
+    margin: 10px;
 }
 </style>

src/overseer_client/src/main.js

@@ -1,9 +1,7 @@
 import Vue from 'vue'
 import App from './App.vue'
 import store from './store'
-import router from './router'
 import socketio from 'socket.io-client';
-import VueRouter from 'vue-router'
 import VueSocketIO from 'vue-socket.io'
 
 Vue.use(new VueSocketIO({
@@ -22,6 +20,5 @@ console.log(store)
 
 new Vue({
     render: h => h(App),
-    router,
     store,
 }).$mount('#app')