update it

webui/src/components/Subscriber/Form.js

@@ -9,30 +9,91 @@ import SchemaForm from 'react-jsonschema-form';
 
 import { Modal } from 'components';
 
+const Wrapper = styled.div`
+  width: 800px;
+  height: 600px;
+  overflow: scroll;
+
+  padding: 2rem;
+  font-size: 14px;
+
+  background: white;
+  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+`
+
 const schema = {
-  title: "Todo",
+  title: "Subscriber",
   type: "object",
-  required: ["title"],
+  required: ["imsi"],
   properties: {
-    title: {type: "string", title: "Title", default: "A new task"},
-    done: {type: "boolean", title: "Done?", default: false}
+    imsi: {
+      type: "string", 
+      title: "IMSI" 
+    },
+    ambr: {
+      title: "AMBR",
+      type: "object",
+      properties: {
+        ul: {
+          type: "string",
+          title: "Uplink"
+        },
+        dl: {
+          type: "string",
+          title: "Downlink"
+        }
+      }
+    },
+    security: {
+      title: "Security",
+      type: "object",
+      properties: {
+        k: {
+          type: "string",
+          title: "K"
+        },
+        sqn: {
+          type: "string",
+          title: "SQN"
+        },
+        rand: {
+          type: "string",
+          title: "RAND"
+        },
+        op: {
+          type: "string",
+          title: "OP"
+        },
+        amf: {
+          type: "string",
+          title: "AMF"
+        }
+      }
+    },
+    pdns: {
+      type: "array",
+      title: "PDN",
+      items: {
+        type: "object",
+        properties: {
+          apn: {
+            type: "string",
+            title: "APN"
+          },
+        }
+      }
+    }
   }
 };
 
-const log = (type) => console.log.bind(console, type);
-
-const Wrapper = styled.div`
-  background: white;
-  padding: 2rem;
-  width: 600px;
-`
-
 const propTypes = {
   visible: PropTypes.bool, 
   onHide: PropTypes.func, 
   onSubmit: PropTypes.func,
 };
 
+const log = (type) => console.log.bind(console, type);
+
 const Form = ({ visible, onHide, onSubmit }) => (
   <Modal 
     visible={visible} 

webui/src/containers/SubscriberContainer.js

@@ -22,8 +22,8 @@ class SubscriberContainer extends Component {
   state = {
     search: '',
     form: {
-      visible: false,
-      dimmed: false
+      visible: true,
+      dimmed: true
     }
   };
 

webui/static/index.css

@@ -3,6 +3,7 @@
 @import url('https://fonts.googleapis.com/css?family=Open+Sans');
 @import url('https://fonts.googleapis.com/css?family=Ubuntu');
 @import url('https://fonts.googleapis.com/css?family=Merriweather');
+@import url("//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
 
 html, body {
   margin: 0;