Making namespace reflect cookie value

api/namespace.py

@@ -1,6 +1,6 @@
 import logging as log
 import datetime
-
+import json
 from google.appengine.api import namespace_manager
 
 from core.handlers.base import ProtectedRequestHandler
@@ -16,3 +16,10 @@ def persist_namespace(self):
     def get(self):
         log.info("User {} set namespace to be {}".format(self.current_user_email, self.request.get("namespace")))
         self.redirect("/")
+
+
+class NamespaceAPIList(ProtectedRequestHandler):
+    def get(self):
+        context = self._extra_context({})
+        self.response.write(json.dumps(context['available_namespaces']))
+

core/handlers/base.py

@@ -1,6 +1,7 @@
 import os
 import logging as log
 from copy import copy
+import datetime
 
 from google.appengine.api.namespace_manager import namespace_manager
 import jinja2
@@ -52,6 +53,7 @@ def namespace(self):
     def persist_namespace(self):
         namespace_from_cookies = self.request.cookies.get("namespace", None)
         namespace = namespace_from_cookies or "production"
+        self.response.set_cookie('namespace', namespace, expires=datetime.datetime.now() + datetime.timedelta(days=365))
         namespace_manager.set_namespace(namespace)
 
     @staticmethod

static/css/base.css

@@ -100,4 +100,9 @@ html {
 .btn-round {border-radius: 50%;}
 .btn-fade {opacity: 0.5;}
 
-#err {color: #FFA081;}
+#err {color: #FFA081;}
+
+
+.namespace-active{background-color: #42B5FF;margin-right:10px;color:#FFF;padding:0 5px;border-radius: 2px;}
+.namespace-inactive{color: black;margin-right:10px;}
+

static/js/base.js

@@ -70,11 +70,54 @@ var Err = React.createClass({
     }
 });
 
+
+var NameSpaceChecker = React.createClass({
+  getInitialState: function() {
+    return {namespace: getNamespace(), availableNamespaces: []}
+  },
+  getNamespaceFromCookie: function() {
+    var ns = getNamespace();
+    console.log(ns);
+    this.setState({namespace: ns})
+  },
+  getFromServer: function() {
+    $.ajax({
+      url: "/api/namespace/list",
+      dataType: 'json',
+      cache: false,
+      success: function(data) {
+        this.setState({availableNamespaces: data});
+      }.bind(this),
+      error: function(xhr, status, err) {
+        console.error(this.props.url, status, err.toString());
+      }.bind(this)
+    });
+  },
+  componentDidMount: function() {
+    this.getFromServer();
+    setInterval(this.getNamespaceFromCookie, 5000);
+  },
+  render: function() {
+    var el = <span>{
+      this.state.availableNamespaces.map(function(ns){
+        var url = "/api/namespace/?namespace=" + ns;
+        var cName = (this.state.namespace == ns) ? "namespace-active" : "namespace-inactive";
+        return <a href={url} className={cName}>{ns}</a>
+      }.bind(this))
+    }</span>;
+
+    return el
+  }
+});
+
+
 if (React.render) {
     React.render(<Err/>, document.getElementById("err"));
+    React.render(<NameSpaceChecker/>, document.getElementById("namespace-checker"));
 }
 else {
     React.renderComponent(<Err/>, document.getElementById("err"));
+    React.renderComponent(<NameSpaceChecker/>, document.getElementById("namespace-checker"));
 }
 
 

template/base.html

@@ -39,10 +39,8 @@
             <div class="header-name">Admin Panel</div>
         </div>
 
-        <div class="col-xs-11 header-namespace">
-            {% for nsp in available_namespaces %}
-                <span onclick="location.href='/api/namespace/?namespace={{nsp}}'" {% if nsp == namespace %} class="namespace-active" {% endif %}>{{nsp}}</span>&nbsp;&nbsp;
-            {% endfor %}
+
+        <div id="namespace-checker" class="col-xs-11 header-namespace">
         </div>
 
         <div class="col-xs-1 header-logout">

url/api_urls.py

@@ -6,7 +6,7 @@
 from api.feedback import FeedbackAPI
 from api.insights import InsightsAPI, InsightsGenericAPI
 from api.logs_level import LogsLevelAPI
-from api.namespace import NamespaceAPI
+from api.namespace import NamespaceAPI, NamespaceAPIList
 from api.password import PasswordResetAPI, PasswordForceUpdateAPI
 from api.feature import FeaturesAPI
 from api.device import ActiveDevices15MinutesHistoryAPI, PillColorAPI, DropoutDevicesAPI
@@ -155,6 +155,7 @@
     ('/api/clearbit/?$', ClearbitAPI),
     ('/api/create/buggy_firmware/?$', CreateBuggyFirmwareAPI),
     ("/api/init/?$", InitializeDataStore),
+    ("/api/namespace/list", NamespaceAPIList),
     ("/api/namespace/?$", NamespaceAPI),
     ('/update', UpdateAdminAccessTokenAPI),
     ('/pill_bin_upload', PillKeyDecryptAPI),