[CE-338] Enable socket.io in operator dashboard

Support websocket in operator dashboard.
Add operator-dashboard image build in make docker.
Add make operator-dashboard docker image build in check.

Change-Id: I5d9f4c19ac5a734871a5437f7882a715da8a8d83
Signed-off-by: Haitao Yue <hightall@me.com>

Makefile

@@ -51,7 +51,7 @@ else
 endif
 
 # Docker images needed to run cello services
-DOCKER_IMAGES = baseimage mongo nginx
+DOCKER_IMAGES = baseimage mongo nginx operator-dashboard
 DUMMY = .$(IMG_TAG)
 
 ifeq ($(DOCKER_BASE), )
@@ -102,6 +102,7 @@ all: check
 build/docker/baseimage/$(DUMMY): build/docker/baseimage/$(DUMMY)
 build/docker/nginx/$(DUMMY): build/docker/nginx/$(DUMMY)
 build/docker/mongo/$(DUMMY): build/docker/mongo/$(DUMMY)
+build/docker/operator-dashboard/$(DUMMY): build/docker/operator-dashboard/$(DUMMY)
 
 build/docker/%/$(DUMMY): ##@Build an image locally
 	$(eval TARGET = ${patsubst build/docker/%/$(DUMMY),%,${@}})
@@ -127,6 +128,8 @@ build/docker/%/.push: build/docker/%/$(DUMMY)
 
 docker: $(patsubst %,build/docker/%/$(DUMMY),$(DOCKER_IMAGES)) ##@Generate docker images locally
 
+docker-operator-dashboard: build/docker/operator-dashboard/$(DUMMY)
+
 docker-clean: image-clean ##@Clean all existing images
 
 DOCKERHUB_IMAGES = baseimage engine mongo nginx operator-dashboard user-dashboard watchdog
@@ -153,7 +156,7 @@ install: $(patsubst %,build/docker/%/.push,$(DOCKER_IMAGES))
 check-js: ##@Code Check check js code format
 	docker-compose -f docker-compose-check-js.yaml up
 
-check: setup-master ##@Code Check code format
+check: setup-master docker-operator-dashboard ##@Code Check code format
 	@$(MAKE) license
 	find ./docs -type f -name "*.md" -exec egrep -l " +$$" {} \;
 	tox

docker-compose-check-js.yaml

@@ -8,6 +8,7 @@ services:
   check-js:
     build:
       context: $ROOT_PATH/src/themes/react/static
+      dockerfile: $ROOT_PATH/src/themes/react/static/Dockerfile-check-js
     volumes:
       - ./src/themes/react/static:/var/www
     command: bash -c "ln -sf /node_modules /var/www/dashboard/node_modules && cd /var/www/dashboard && npm run lint && rm -rf node_modules"

docker/baseimage/Dockerfile.in

@@ -3,3 +3,7 @@ COPY docker/baseimage /tmp/baseimage
 RUN cd /tmp/baseimage && \
     bash install.sh && \
 rm -rf /tmp/baseimage
+COPY src /app
+RUN	cd /app/ && \
+	pip install -r requirements.txt && \
+	rm -rf /tmp/cello

docker/operator-dashboard/Dockerfile.in

@@ -0,0 +1,8 @@
+FROM hyperledger/cello-baseimage:latest
+
+COPY src /app
+RUN	cd /app/ && \
+	pip install -r requirements.txt && \
+	rm -rf /tmp/cello
+
+CMD if [ "$DEBUG" = "True" ]; then python dashboard.py ; else gunicorn -w 1 --worker-class eventlet -b 0.0.0.0:8080 dashboard:app ;fi

dockerhub/latest/operator-dashboard/Dockerfile

@@ -4,4 +4,4 @@
 #
 FROM hyperledger/cello-baseimage:x86_64-latest
 
-CMD if [ "$DEBUG" = "True" ]; then python dashboard.py ; else gunicorn -w $(( 2 * `cat /proc/cpuinfo | grep "core id" | wc -l` + 1 )) -b 0.0.0.0:8080 dashboard:app ;fi
+CMD if [ "$DEBUG" = "True" ]; then python dashboard.py ; else gunicorn -w 1 --worker-class eventlet -b 0.0.0.0:8080 dashboard:app ;fi

nginx/nginx.conf

@@ -88,6 +88,15 @@ http {
 	    proxy_set_header X-Real-IP $remote_addr;
         }
 
+	    location /socket.io {
+            include proxy_params;
+            proxy_http_version 1.1;
+            proxy_buffering off;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection "Upgrade";
+            proxy_pass http://BACKEND:PORT/socket.io;
+        }
+
         error_page   500 502 503 504  /50x.html;
         location = /50x.html {
             root   html;

src/dashboard.py

@@ -8,6 +8,7 @@
 import bcrypt
 from flask import Flask, render_template, redirect, url_for
 from flask_login import LoginManager
+from flask_socketio import SocketIO
 from mongoengine import connect
 
 from common import log_handler, LOG_LEVEL
@@ -18,6 +19,7 @@
     bp_host_view, bp_host_api, bp_auth_api, \
     bp_login, bp_user_api, bp_user_view, front_rest_user_v2
 from modules.user import User
+from sockets.custom import CustomSockets
 
 logger = logging.getLogger(__name__)
 logger.setLevel(LOG_LEVEL)
@@ -27,6 +29,7 @@
 TEMPLATE_FOLDER = os.getenv("TEMPLATE_FOLDER", "themes/basic/templates")
 app = Flask(__name__, static_folder=STATIC_FOLDER,
             template_folder=TEMPLATE_FOLDER)
+socketio = SocketIO(app)
 
 app.config.from_object('config.DevelopmentConfig')
 app.config.from_envvar('CELLO_CONFIG_FILE', silent=True)
@@ -94,9 +97,8 @@ def load_user(id):
         return None
 
 
+socketio.on_namespace(CustomSockets('/socket.io'))
+
 if __name__ == '__main__':
-    app.run(
-        host='0.0.0.0',
-        port=8080,
-        debug=os.environ.get('DEBUG', app.config.get("DEBUG", True)),
-        threaded=True)
+    socketio.run(app, port=8080, host="0.0.0.0",
+                 debug=os.environ.get('DEBUG', app.config.get("DEBUG", True)))

src/requirements.txt

@@ -19,3 +19,5 @@ pyvmomi>=5.5.0,<=6.5.0
 enum34>=1.1.0,<=1.1.6
 marshmallow>=2.13.6,<=2.14.0
 kubernetes==5.0.0
+flask-socketio>=2.9.0,<=2.9.6
+eventlet>=0.22,<=0.22.1

src/resources/index.py

@@ -48,7 +48,8 @@ def show():
 
     clusters_temp = len(list(cluster_handler.list(filter_data={
         "user_id": "/^__/"}, col_name="active")))
-    username, is_admin = current_user.username, current_user.isAdmin
+    user_id, username, is_admin = \
+        str(current_user.id), current_user.username, current_user.isAdmin
 
     return render_template("index.html", hosts=hosts,
                            hosts_free=hosts_free,
@@ -68,6 +69,7 @@ def show():
                            log_types=CLUSTER_LOG_TYPES,
                            log_levels=CLUSTER_LOG_LEVEL,
                            username=username,
+                           user_id=user_id,
                            is_admin=is_admin
                            )
 

src/sockets/__init__.py

@@ -0,0 +1,3 @@
+#
+# SPDX-License-Identifier: Apache-2.0
+#

src/sockets/custom.py

@@ -0,0 +1,25 @@
+#
+# SPDX-License-Identifier: Apache-2.0
+#
+from flask_socketio import Namespace, join_room
+import sys
+import os
+import logging
+
+sys.path.append(os.path.join(os.path.dirname(__file__), '..', '..'))
+from common import log_handler, LOG_LEVEL
+
+logger = logging.getLogger(__name__)
+logger.setLevel(LOG_LEVEL)
+logger.addHandler(log_handler)
+
+
+class CustomSockets(Namespace):
+    def on_connect(self):
+        logger.debug("socket is connected")
+
+    def on_disconnect(self):
+        logger.debug("socket is disconnected")
+
+    def on_join(self, message):
+        join_room(message.get("id", ""))

src/themes/react/static/Dockerfile-check-js

@@ -0,0 +1,10 @@
+
+# Copyright IBM Corp, All Rights Reserved.
+#
+# SPDX-License-Identifier: Apache-2.0
+#
+FROM node:8.11
+MAINTAINER haitao yue "hightall@me.com"
+COPY dashboard/package.json /
+RUN cd / && npm install --only=dev
+CMD bash -c "ln -sf /node_modules /var/www/dashboard/node_modules && cd /var/www/dashboard && npm run build && rm -rf node_modules"

src/themes/react/static/dashboard/package.json

@@ -7,7 +7,8 @@
     "precommit": "npm run lint-staged",
     "start": "cross-env ESLINT=none roadhog dev",
     "start:no-proxy": "cross-env NO_PROXY=true ESLINT=none roadhog dev",
-    "build": "cross-env ESLINT=none COMPRESS=none roadhog build --watch",
+    "build": "cross-env ESLINT=none roadhog build",
+    "build:dev": "cross-env ESLINT=none COMPRESS=none roadhog build",
     "site": "roadhog-api-doc static && gh-pages -d dist",
     "analyze": "cross-env ANALYZE=true roadhog build",
     "lint:style": "stylelint \"src/**/*.less\" --syntax less",
@@ -46,7 +47,8 @@
     "react-dom": "^16.2.0",
     "react-fittext": "^1.0.0",
     "react-intl": "^2.4.0",
-    "url-polyfill": "^1.0.10"
+    "url-polyfill": "^1.0.10",
+    "socket.io-client": "^2.1.0"
   },
   "devDependencies": {
     "babel-eslint": "^8.1.2",

src/themes/react/static/dashboard/src/models/global.js

@@ -1,6 +1,7 @@
 /*
  SPDX-License-Identifier: Apache-2.0
 */
+import io from 'socket.io-client';
 import { queryNotices } from '../services/api';
 
 export default {
@@ -66,5 +67,12 @@ export default {
         }
       });
     },
+    socketIO() {
+      const socketUrl = `${window.location.protocol}//${window.location.hostname}:${
+        window.location.port
+      }/socket.io`;
+      const socket = io(socketUrl);
+      socket.emit('join', { id: window.user_id });
+    },
   },
 };

src/themes/react/templates/index.html

@@ -26,11 +26,12 @@
 <body>
 
 <div id="root"></div>
-<script src="{{ url_for('static', filename='dist/index.js') }}"> </script>
 <script>
-    window.username = "{{ username }}"
-    window.isAdmin = "{{ is_admin }}"
+    window.username = "{{ username }}";
+    window.user_id = "{{ user_id }}";
+    window.isAdmin = "{{ is_admin }}";
 </script>
+<script src="{{ url_for('static', filename='dist/index.js') }}"> </script>
 
 </body>
 </html>