From d45ccbbb2992027bbc36e193fa807ca222ec9850 Mon Sep 17 00:00:00 2001
From: Meina Zhou <meinaz@vmware.com>
Date: Wed, 5 Dec 2018 15:08:40 +0800
Subject: [PATCH] add developer center in swagger ui way

Signed-off-by: Meina Zhou <meinaz@vmware.com>
---
 make/photon/portal/Dockerfile                 |   5 +
 make/photon/portal/entrypoint.sh              |   7 +-
 src/portal/angular.json                       |   6 +-
 .../lib/src/log/recent-log.component.html     |   3 +-
 src/portal/package-lock.json                  | 705 ++++++++++++++++--
 src/portal/package.json                       |   8 +
 src/portal/src/app/app.module.ts              |   7 +-
 .../harbor-shell/harbor-shell.component.html  |  50 +-
 .../app/dev-center/dev-center.component.html  |   2 +
 .../app/dev-center/dev-center.component.scss  |   8 +
 .../dev-center/dev-center.component.spec.ts   |  26 +
 .../app/dev-center/dev-center.component.ts    |  37 +
 .../src/app/dev-center/dev-center.module.ts   |  23 +
 src/portal/src/app/harbor-routing.module.ts   |   7 +-
 src/portal/src/i18n/lang/en-us-lang.json      |   3 +-
 src/portal/src/i18n/lang/es-es-lang.json      |   3 +-
 src/portal/src/i18n/lang/fr-fr-lang.json      |   3 +-
 src/portal/src/i18n/lang/pt-br-lang.json      |   3 +-
 src/portal/src/i18n/lang/zh-cn-lang.json      |   3 +-
 src/portal/src/polyfills.ts                   |   3 +
 src/portal/src/tsconfig.app.json              |   4 +
 src/portal/tsconfig.json                      |   2 +-
 22 files changed, 834 insertions(+), 84 deletions(-)
 create mode 100644 src/portal/src/app/dev-center/dev-center.component.html
 create mode 100644 src/portal/src/app/dev-center/dev-center.component.scss
 create mode 100644 src/portal/src/app/dev-center/dev-center.component.spec.ts
 create mode 100644 src/portal/src/app/dev-center/dev-center.component.ts
 create mode 100644 src/portal/src/app/dev-center/dev-center.module.ts

diff --git a/make/photon/portal/Dockerfile b/make/photon/portal/Dockerfile
index c011dc0de..e3fd9b3bb 100644
--- a/make/photon/portal/Dockerfile
+++ b/make/photon/portal/Dockerfile
@@ -5,6 +5,7 @@ RUN mkdir -p /build_dir
 
 COPY make/photon/portal/entrypoint.sh /
 COPY src/portal /portal_src
+COPY ./docs/swagger.yaml   /portal_src
 
 WORKDIR /portal_src
 
@@ -24,7 +25,11 @@ RUN tdnf install -y nginx >> /dev/null \
 EXPOSE 80
 VOLUME /var/cache/nginx /var/log/nginx /run
 
+
 COPY --from=nodeportal /build_dir/dist /usr/share/nginx/html
+COPY --from=nodeportal /build_dir/swagger.yaml /usr/share/nginx/html
+COPY --from=nodeportal /build_dir/swagger.json /usr/share/nginx/html
+
 COPY make/photon/portal/nginx.conf /etc/nginx/nginx.conf
 
 STOPSIGNAL SIGQUIT
diff --git a/make/photon/portal/entrypoint.sh b/make/photon/portal/entrypoint.sh
index 3b1350906..c00b5e0dc 100644
--- a/make/photon/portal/entrypoint.sh
+++ b/make/photon/portal/entrypoint.sh
@@ -5,6 +5,11 @@ cd /build_dir
 cp -r /portal_src/* .
 ls -la
 
+# Update
+apt-get update
+apt-get install -y ruby
+ruby -ryaml -rjson -e 'puts JSON.pretty_generate(YAML.load(ARGF))' swagger.yaml>swagger.json
+
 cat ./package.json
 npm install
 
@@ -13,4 +18,4 @@ npm run build_lib
 npm run link_lib
 
 ## Build production
-npm run release
\ No newline at end of file
+npm run release
diff --git a/src/portal/angular.json b/src/portal/angular.json
index 63e3fda46..157657038 100644
--- a/src/portal/angular.json
+++ b/src/portal/angular.json
@@ -24,6 +24,7 @@
             "styles": [
               "node_modules/@clr/icons/clr-icons.min.css",
               "node_modules/@clr/ui/clr-ui.min.css",
+              "node_modules/swagger-ui/dist/swagger-ui.css",
               "node_modules/prismjs/themes/prism-solarizedlight.css",
               "src/styles.css"
             ],
@@ -35,7 +36,10 @@
               "node_modules/web-animations-js/web-animations.min.js",
               "node_modules/marked/lib/marked.js",
               "node_modules/prismjs/prism.js",
-              "node_modules/prismjs/components/prism-yaml.min.js"
+              "node_modules/prismjs/components/prism-yaml.min.js",
+              "node_modules/jquery/dist/jquery.slim.js",
+              "node_modules/popper.js/dist/umd/popper.js",
+              "node_modules/bootstrap/dist/js/bootstrap.js"
             ]
           },
           "configurations": {
diff --git a/src/portal/lib/src/log/recent-log.component.html b/src/portal/lib/src/log/recent-log.component.html
index c9fd5e5d6..e5cf0e3bc 100644
--- a/src/portal/lib/src/log/recent-log.component.html
+++ b/src/portal/lib/src/log/recent-log.component.html
@@ -1,8 +1,7 @@
 <div>
-    <h2 class="h2-log-override" *ngIf="withTitle">{{'SIDE_NAV.LOGS' | translate}}</h2>
     <div class="row flex-items-xs-between flex-items-xs-bottom">
         <div></div>
-        <div class="action-head-pos rightPos">
+        <div class="action-head-pos">
             <div class="select filterTag" [hidden]="!isOpenFilterTag">
                 <select id="selectKey" (change)="selectFilterKey($event)">
                     <option value="username">{{"AUDIT_LOG.USERNAME" | translate | lowercase}}</option>
diff --git a/src/portal/package-lock.json b/src/portal/package-lock.json
index d99d658ca..34970fce6 100644
--- a/src/portal/package-lock.json
+++ b/src/portal/package-lock.json
@@ -1339,6 +1339,11 @@
                 "tslib": "^1.9.0"
             }
         },
+        "@braintree/sanitize-url": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/@braintree/sanitize-url/-/sanitize-url-2.1.0.tgz",
+            "integrity": "sha1-VJqdH5I8m8eVOlhdPpqpQpvo/ig="
+        },
         "@clr/angular": {
             "version": "0.12.10",
             "resolved": "https://registry.npmjs.org/@clr/angular/-/angular-0.12.10.tgz",
@@ -1357,6 +1362,29 @@
             "resolved": "https://registry.npmjs.org/@clr/ui/-/ui-0.12.9.tgz",
             "integrity": "sha512-/Ck+VNelDKYHPqa8nDrJYVStQDY6BMpkUabGfYq9UfKdoWP7qYZyn6xP+vivADaWtzfsot1f8Ufezu6r3tJNaQ=="
         },
+        "@fortawesome/fontawesome-free": {
+            "version": "5.5.0",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.5.0.tgz",
+            "integrity": "sha512-p4lu0jfj5QN013ddArh99r3OXZ/fp9rbovs62LfaO70OMBsAXxtNd0lAq/97fitrscR0fqfd+/a5KNcp6Sh/0A=="
+        },
+        "@kyleshockey/object-assign-deep": {
+            "version": "0.4.2",
+            "resolved": "https://registry.npmjs.org/@kyleshockey/object-assign-deep/-/object-assign-deep-0.4.2.tgz",
+            "integrity": "sha1-hJAPDu/DcnmPR1G1JigwuCCJIuw="
+        },
+        "@kyleshockey/xml": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/@kyleshockey/xml/-/xml-1.0.2.tgz",
+            "integrity": "sha512-iMo32MPLcI9cPxs3YL5kmKxKgDmkSZDCFEqIT5eRk7d/Ll8r4X3SwGYSigzALd6+RHWlFEmjL1QyaQ15xDZFlw==",
+            "requires": {
+                "stream": "^0.0.2"
+            }
+        },
+        "@ng-bootstrap/ng-bootstrap": {
+            "version": "2.2.2",
+            "resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-2.2.2.tgz",
+            "integrity": "sha512-uqngK1urcevQeF+zgoGW1XDnasjoob4QrwhynNUFpDnnplP1wa+BEUjpSccxU+L2dHLfrOb2sPGEGp8cE2X3Iw=="
+        },
         "@ngtools/json-schema": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/@ngtools/json-schema/-/json-schema-1.1.0.tgz",
@@ -2172,6 +2200,15 @@
             "integrity": "sha1-vShOV8hPEyXacCur/IKlMoGQwMU=",
             "dev": true
         },
+        "@types/react": {
+            "version": "16.4.6",
+            "resolved": "https://registry.npmjs.org/@types/react/-/react-16.4.6.tgz",
+            "integrity": "sha512-9LDZdhsuKSc+DjY65SjBkA958oBWcTWSVWAd2cD9XqKBjhGw1KzAkRhWRw2eIsXvaIE/TOTjjKMFVC+JA1iU4g==",
+            "optional": true,
+            "requires": {
+                "csstype": "^2.2.0"
+            }
+        },
         "@types/selenium-webdriver": {
             "version": "2.53.43",
             "resolved": "https://registry.npmjs.org/@types/selenium-webdriver/-/selenium-webdriver-2.53.43.tgz",
@@ -2634,7 +2671,6 @@
             "version": "1.0.10",
             "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
             "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-            "dev": true,
             "requires": {
                 "sprintf-js": "~1.0.2"
             }
@@ -2790,6 +2826,11 @@
             "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
             "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
         },
+        "autolinker": {
+            "version": "0.15.3",
+            "resolved": "http://registry.npmjs.org/autolinker/-/autolinker-0.15.3.tgz",
+            "integrity": "sha1-NCQX2PLzRhsUzwkIjV7fh5HcmDI="
+        },
         "autoprefixer": {
             "version": "8.6.5",
             "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-8.6.5.tgz",
@@ -2876,7 +2917,6 @@
             "version": "6.26.0",
             "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
             "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
-            "dev": true,
             "requires": {
                 "core-js": "^2.4.0",
                 "regenerator-runtime": "^0.11.0"
@@ -3010,8 +3050,7 @@
         "base64-js": {
             "version": "1.3.0",
             "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.0.tgz",
-            "integrity": "sha512-ccav/yGvoa80BQDljCxsmmQ3Xvx60/UpBIij5QN21W3wBi/hhIC9OoO+KLpu9IJTS9j4DRVJ3aDDF9cMSoa2lw==",
-            "dev": true
+            "integrity": "sha512-ccav/yGvoa80BQDljCxsmmQ3Xvx60/UpBIij5QN21W3wBi/hhIC9OoO+KLpu9IJTS9j4DRVJ3aDDF9cMSoa2lw=="
         },
         "base64id": {
             "version": "1.0.0",
@@ -3149,6 +3188,11 @@
             "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
             "dev": true
         },
+        "bootstrap": {
+            "version": "4.1.3",
+            "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.1.3.tgz",
+            "integrity": "sha512-rDFIzgXcof0jDyjNosjv4Sno77X4KuPeFxG2XZZv1/Kc8DRVGVADdoQyyOVDwPqL36DDmtCQbrpMCqvpPLJQ0w=="
+        },
         "boxen": {
             "version": "1.3.0",
             "resolved": "https://registry.npmjs.org/boxen/-/boxen-1.3.0.tgz",
@@ -3303,15 +3347,18 @@
                 "electron-to-chromium": "^1.3.47"
             }
         },
+        "btoa": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.1.2.tgz",
+            "integrity": "sha1-PkC4FmP4HS3WWWpMtxSo3BbPq+A="
+        },
         "buffer": {
-            "version": "4.9.1",
-            "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
-            "integrity": "sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=",
-            "dev": true,
+            "version": "5.2.1",
+            "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.2.1.tgz",
+            "integrity": "sha512-c+Ko0loDaFfuPWiL02ls9Xd3GO3cPVmUobQ6t3rXNUk304u6hGq+8N/kFi+QEIKhzK3uwolVhLzszmfLmMLnqg==",
             "requires": {
                 "base64-js": "^1.0.2",
-                "ieee754": "^1.1.4",
-                "isarray": "^1.0.0"
+                "ieee754": "^1.1.4"
             }
         },
         "buffer-from": {
@@ -3541,6 +3588,11 @@
                 }
             }
         },
+        "classnames": {
+            "version": "2.2.6",
+            "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+            "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+        },
         "clean-css": {
             "version": "4.2.1",
             "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz",
@@ -3904,8 +3956,7 @@
         "cookie": {
             "version": "0.3.1",
             "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz",
-            "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=",
-            "dev": true
+            "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s="
         },
         "cookie-signature": {
             "version": "1.0.6",
@@ -4044,6 +4095,32 @@
                 "sha.js": "^2.4.8"
             }
         },
+        "create-react-class": {
+            "version": "15.6.3",
+            "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.6.3.tgz",
+            "integrity": "sha512-M+/3Q6E6DLO6Yx3OwrWjwHBnvfXXYA7W+dFjt/ZDBemHO1DDZhsalX/NUtnTYclN6GfnBDRh4qRHjcDHmlJBJg==",
+            "requires": {
+                "fbjs": "^0.8.9",
+                "loose-envify": "^1.3.1",
+                "object-assign": "^4.1.1"
+            }
+        },
+        "cross-fetch": {
+            "version": "0.0.8",
+            "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-0.0.8.tgz",
+            "integrity": "sha1-Ae2U3EB98sAPGAf95wCnz6SKIFw=",
+            "requires": {
+                "node-fetch": "1.7.3",
+                "whatwg-fetch": "2.0.3"
+            },
+            "dependencies": {
+                "whatwg-fetch": {
+                    "version": "2.0.3",
+                    "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz",
+                    "integrity": "sha1-nITsLc9oGH/wC8ZOEnS0QhduHIQ="
+                }
+            }
+        },
         "cross-spawn": {
             "version": "3.0.1",
             "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz",
@@ -4111,6 +4188,11 @@
             "integrity": "sha1-lGfQMsOM+u+58teVASUwYvh/ob0=",
             "dev": true
         },
+        "css.escape": {
+            "version": "1.5.1",
+            "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
+            "integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s="
+        },
         "cssauron": {
             "version": "1.4.0",
             "resolved": "https://registry.npmjs.org/cssauron/-/cssauron-1.4.0.tgz",
@@ -4126,6 +4208,12 @@
             "integrity": "sha1-yBSQPkViM3GgR3tAEJqq++6t27Q=",
             "dev": true
         },
+        "csstype": {
+            "version": "2.5.8",
+            "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.5.8.tgz",
+            "integrity": "sha512-r4DbsyNJ7slwBSKoGesxDubRWJ71ghG8W2+1HcsDlAo12KGca9dDLv0u98tfdFw7ldBdoA7XmCnI6Q8LpAJXaQ==",
+            "optional": true
+        },
         "cuint": {
             "version": "0.2.2",
             "resolved": "https://registry.npmjs.org/cuint/-/cuint-0.2.2.tgz",
@@ -4151,6 +4239,14 @@
             "integrity": "sha1-GzN5LhHpFKL9bW7WRHRkRE5fpkA=",
             "dev": true
         },
+        "d": {
+            "version": "1.0.0",
+            "resolved": "http://registry.npmjs.org/d/-/d-1.0.0.tgz",
+            "integrity": "sha1-dUu1v+VUUdpppYuU1F9MWwRi1Y8=",
+            "requires": {
+                "es5-ext": "^0.10.9"
+            }
+        },
         "dashdash": {
             "version": "1.14.1",
             "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@@ -4203,8 +4299,7 @@
         "deep-equal": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz",
-            "integrity": "sha1-9dJgKStmDghO/0zbyfCK0yR0SLU=",
-            "dev": true
+            "integrity": "sha1-9dJgKStmDghO/0zbyfCK0yR0SLU="
         },
         "deep-extend": {
             "version": "0.5.1",
@@ -4523,6 +4618,11 @@
                 "domelementtype": "1"
             }
         },
+        "dompurify": {
+            "version": "1.0.8",
+            "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-1.0.8.tgz",
+            "integrity": "sha512-vetRFbN1SXSPfP3ClIiYnxTrXquSqakBEOoB5JESn0SVcSYzpu6ougjakpKnskGctYdlNpwf+riUHSkG7d4XUw=="
+        },
         "domutils": {
             "version": "1.5.1",
             "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz",
@@ -4641,18 +4741,36 @@
                 "minimalistic-crypto-utils": "^1.0.0"
             }
         },
+        "emitter-component": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/emitter-component/-/emitter-component-1.1.1.tgz",
+            "integrity": "sha1-Bl4tvtaVm/RwZ57avq95gdEAOrY="
+        },
         "emojis-list": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
             "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=",
             "dev": true
         },
+        "encode-3986": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/encode-3986/-/encode-3986-1.0.0.tgz",
+            "integrity": "sha1-lA1RSY+HQa3hhLda0UObMXwMemA="
+        },
         "encodeurl": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
             "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=",
             "dev": true
         },
+        "encoding": {
+            "version": "0.1.12",
+            "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
+            "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
+            "requires": {
+                "iconv-lite": "~0.4.13"
+            }
+        },
         "end-of-stream": {
             "version": "1.4.1",
             "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz",
@@ -4818,6 +4936,26 @@
                 "is-symbol": "^1.0.1"
             }
         },
+        "es5-ext": {
+            "version": "0.10.46",
+            "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.46.tgz",
+            "integrity": "sha512-24XxRvJXNFwEMpJb3nOkiRJKRoupmjYmOPVlI65Qy2SrtxwOTB+g6ODjBKOtwEHbYrhWRty9xxOWLNdClT2djw==",
+            "requires": {
+                "es6-iterator": "~2.0.3",
+                "es6-symbol": "~3.1.1",
+                "next-tick": "1"
+            }
+        },
+        "es6-iterator": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
+            "integrity": "sha1-p96IkUGgWpSwhUQDstCg+/qY87c=",
+            "requires": {
+                "d": "1",
+                "es5-ext": "^0.10.35",
+                "es6-symbol": "^3.1.1"
+            }
+        },
         "es6-promise": {
             "version": "4.2.4",
             "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.4.tgz",
@@ -4833,6 +4971,26 @@
                 "es6-promise": "^4.0.3"
             }
         },
+        "es6-symbol": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.1.tgz",
+            "integrity": "sha1-vwDvT9q2uhtG7Le2KbTH7VcVzHc=",
+            "requires": {
+                "d": "1",
+                "es5-ext": "~0.10.14"
+            }
+        },
+        "es6-weak-map": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/es6-weak-map/-/es6-weak-map-2.0.2.tgz",
+            "integrity": "sha1-XjqzIlH/0VOKH45f+hNXdy+S2W8=",
+            "requires": {
+                "d": "1",
+                "es5-ext": "^0.10.14",
+                "es6-iterator": "^2.0.1",
+                "es6-symbol": "^3.1.1"
+            }
+        },
         "escape-html": {
             "version": "1.0.3",
             "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
@@ -4929,6 +5087,15 @@
             "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
             "dev": true
         },
+        "event-emitter": {
+            "version": "0.3.5",
+            "resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz",
+            "integrity": "sha1-34xp7vFkeSPHFXuc6DhAYQsCzDk=",
+            "requires": {
+                "d": "1",
+                "es5-ext": "~0.10.14"
+            }
+        },
         "eventemitter3": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.0.tgz",
@@ -5171,6 +5338,14 @@
             "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz",
             "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ="
         },
+        "fast-json-patch": {
+            "version": "2.0.7",
+            "resolved": "https://registry.npmjs.org/fast-json-patch/-/fast-json-patch-2.0.7.tgz",
+            "integrity": "sha512-DQeoEyPYxdTtfmB3yDlxkLyKTdbJ6ABfFGcMynDqjvGhPYLto/pZyb/dG2Nyd/n9CArjEWN9ZST++AFmgzgbGw==",
+            "requires": {
+                "deep-equal": "^1.0.1"
+            }
+        },
         "fast-json-stable-stringify": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz",
@@ -5197,6 +5372,27 @@
                 "websocket-driver": ">=0.5.1"
             }
         },
+        "fbjs": {
+            "version": "0.8.17",
+            "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz",
+            "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
+            "requires": {
+                "core-js": "^1.0.0",
+                "isomorphic-fetch": "^2.1.1",
+                "loose-envify": "^1.0.0",
+                "object-assign": "^4.1.0",
+                "promise": "^7.1.1",
+                "setimmediate": "^1.0.5",
+                "ua-parser-js": "^0.7.18"
+            },
+            "dependencies": {
+                "core-js": {
+                    "version": "1.2.7",
+                    "resolved": "http://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+                    "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
+                }
+            }
+        },
         "file-loader": {
             "version": "1.1.11",
             "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-1.1.11.tgz",
@@ -6429,6 +6625,11 @@
                 "minimalistic-crypto-utils": "^1.0.1"
             }
         },
+        "hoist-non-react-statics": {
+            "version": "2.5.5",
+            "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
+            "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
+        },
         "hosted-git-info": {
             "version": "2.6.0",
             "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.6.0.tgz",
@@ -6942,14 +7143,12 @@
         "iconv-lite": {
             "version": "0.4.19",
             "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz",
-            "integrity": "sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ==",
-            "dev": true
+            "integrity": "sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ=="
         },
         "ieee754": {
             "version": "1.1.12",
             "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.12.tgz",
-            "integrity": "sha512-GguP+DRY+pJ3soyIiGPTvdiVXjZ+DbXOxGpXn3eMvNW4x4irjqXm4wHKscC+TfxSJ0yw/S1F24tqdMNsMZTiLA==",
-            "dev": true
+            "integrity": "sha512-GguP+DRY+pJ3soyIiGPTvdiVXjZ+DbXOxGpXn3eMvNW4x4irjqXm4wHKscC+TfxSJ0yw/S1F24tqdMNsMZTiLA=="
         },
         "iferr": {
             "version": "0.1.5",
@@ -6975,6 +7174,11 @@
             "integrity": "sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=",
             "dev": true
         },
+        "immutable": {
+            "version": "3.8.2",
+            "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.8.2.tgz",
+            "integrity": "sha1-wkOZUUVbs5kT2vKBN28VMOEErfM="
+        },
         "import-cwd": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
@@ -7074,7 +7278,6 @@
             "version": "2.2.4",
             "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
             "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
-            "dev": true,
             "requires": {
                 "loose-envify": "^1.0.0"
             }
@@ -7199,6 +7402,11 @@
             "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=",
             "dev": true
         },
+        "is-dom": {
+            "version": "1.0.9",
+            "resolved": "https://registry.npmjs.org/is-dom/-/is-dom-1.0.9.tgz",
+            "integrity": "sha1-SDgy1SlyBz3hK5/j9gMghw2oNw0="
+        },
         "is-dotfile": {
             "version": "1.0.3",
             "resolved": "https://registry.npmjs.org/is-dotfile/-/is-dotfile-1.0.3.tgz",
@@ -7332,6 +7540,11 @@
             "resolved": "https://registry.npmjs.org/is-primitive/-/is-primitive-2.0.0.tgz",
             "integrity": "sha1-IHurkWOEmcB7Kt8kCkGochADRXU="
         },
+        "is-promise": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.1.0.tgz",
+            "integrity": "sha1-eaKp7OfwlugPNtKy87wWwf9L8/o="
+        },
         "is-redirect": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/is-redirect/-/is-redirect-1.0.0.tgz",
@@ -7425,6 +7638,43 @@
                 "isarray": "1.0.0"
             }
         },
+        "isomorphic-fetch": {
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
+            "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
+            "requires": {
+                "node-fetch": "^1.0.1",
+                "whatwg-fetch": ">=0.10.0"
+            }
+        },
+        "isomorphic-form-data": {
+            "version": "0.0.1",
+            "resolved": "https://registry.npmjs.org/isomorphic-form-data/-/isomorphic-form-data-0.0.1.tgz",
+            "integrity": "sha1-Am9ifgMrDNhBPsyHVZKLlKRosGI=",
+            "requires": {
+                "form-data": "^1.0.0-rc3"
+            },
+            "dependencies": {
+                "async": {
+                    "version": "2.6.1",
+                    "resolved": "https://registry.npmjs.org/async/-/async-2.6.1.tgz",
+                    "integrity": "sha512-fNEiL2+AZt6AlAw/29Cr0UDe4sRAHCpEHh54WMz+Bb7QfNcFw4h3loofyJpLeQs4Yx7yuqu/2dLgM5hKOs6HlQ==",
+                    "requires": {
+                        "lodash": "^4.17.10"
+                    }
+                },
+                "form-data": {
+                    "version": "1.0.1",
+                    "resolved": "http://registry.npmjs.org/form-data/-/form-data-1.0.1.tgz",
+                    "integrity": "sha1-rjFduaSQf6BlUCMEpm13M0de43w=",
+                    "requires": {
+                        "async": "^2.0.1",
+                        "combined-stream": "^1.0.5",
+                        "mime-types": "^2.1.11"
+                    }
+                }
+            }
+        },
         "isstream": {
             "version": "0.1.2",
             "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
@@ -7728,16 +7978,25 @@
             "integrity": "sha1-43zwsX8ZnM4jvqcbIDk5Uka07E4=",
             "dev": true
         },
+        "jquery": {
+            "version": "3.3.1",
+            "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
+            "integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg=="
+        },
         "js-base64": {
             "version": "2.4.8",
             "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.8.tgz",
             "integrity": "sha512-hm2nYpDrwoO/OzBhdcqs/XGT6XjSuSSCVEpia+Kl2J6x4CYt5hISlVL/AYU1khoDXv0AQVgxtdJySb9gjAn56Q=="
         },
+        "js-file-download": {
+            "version": "0.4.4",
+            "resolved": "https://registry.npmjs.org/js-file-download/-/js-file-download-0.4.4.tgz",
+            "integrity": "sha512-lH75hwOMBkIDqIyAWgSYwkMa+YkBu/ATJf2rEXnC1TmHCCHmLNG/NFhZ6R4tipnH2v0EvLOhGlARc0vyS1j0mA=="
+        },
         "js-tokens": {
             "version": "3.0.2",
             "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
-            "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=",
-            "dev": true
+            "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls="
         },
         "js-yaml": {
             "version": "3.11.0",
@@ -8225,6 +8484,11 @@
             "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz",
             "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg=="
         },
+        "lodash-es": {
+            "version": "4.17.11",
+            "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.11.tgz",
+            "integrity": "sha512-DHb1ub+rMjjrxqlB3H56/6MXtm1lSksDp2rA2cNWjG8mlDUYFhUj3Di2Zn5IwSU87xLv8tNIQ7sSwE/YOX/D/Q=="
+        },
         "lodash._basecopy": {
             "version": "3.0.1",
             "resolved": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz",
@@ -8453,7 +8717,6 @@
             "version": "1.3.1",
             "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.1.tgz",
             "integrity": "sha1-0aitM/qc4OcT1l/dCsi3SNR4yEg=",
-            "dev": true,
             "requires": {
                 "js-tokens": "^3.0.0"
             }
@@ -8487,6 +8750,14 @@
                 "yallist": "^2.1.2"
             }
         },
+        "lru-queue": {
+            "version": "0.1.0",
+            "resolved": "https://registry.npmjs.org/lru-queue/-/lru-queue-0.1.0.tgz",
+            "integrity": "sha1-Jzi9nw089PhEkMVzbEhpmsYyzaM=",
+            "requires": {
+                "es5-ext": "~0.10.2"
+            }
+        },
         "magic-string": {
             "version": "0.22.5",
             "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.22.5.tgz",
@@ -8571,6 +8842,21 @@
                 "mimic-fn": "^1.0.0"
             }
         },
+        "memoizee": {
+            "version": "0.4.14",
+            "resolved": "https://registry.npmjs.org/memoizee/-/memoizee-0.4.14.tgz",
+            "integrity": "sha512-/SWFvWegAIYAO4NQMpcX+gcra0yEZu4OntmUdrBaWrJncxOqAziGFlHxc7yjKVK2uu3lpPW27P27wkR82wA8mg==",
+            "requires": {
+                "d": "1",
+                "es5-ext": "^0.10.45",
+                "es6-weak-map": "^2.0.2",
+                "event-emitter": "^0.3.5",
+                "is-promise": "^2.1",
+                "lru-queue": "0.1",
+                "next-tick": "1",
+                "timers-ext": "^0.1.5"
+            }
+        },
         "memory-fs": {
             "version": "0.4.1",
             "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
@@ -8884,6 +9170,11 @@
             "integrity": "sha512-vdqTKI9GBIYcAEbFAcpKPErKINfPF5zIuz3/niBfq8WUZjpT2tytLlFVrBgWdOtqI4uaA/Rb6No0hux39XXDuw==",
             "dev": true
         },
+        "next-tick": {
+            "version": "1.0.0",
+            "resolved": "http://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz",
+            "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw="
+        },
         "ng-packagr": {
             "version": "4.1.1",
             "resolved": "https://registry.npmjs.org/ng-packagr/-/ng-packagr-4.1.1.tgz",
@@ -9460,6 +9751,15 @@
                 "lower-case": "^1.1.1"
             }
         },
+        "node-fetch": {
+            "version": "1.7.3",
+            "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
+            "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
+            "requires": {
+                "encoding": "^0.1.11",
+                "is-stream": "^1.0.1"
+            }
+        },
         "node-forge": {
             "version": "0.7.5",
             "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.5.tgz",
@@ -9523,6 +9823,17 @@
                 "vm-browserify": "0.0.4"
             },
             "dependencies": {
+                "buffer": {
+                    "version": "4.9.1",
+                    "resolved": "http://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
+                    "integrity": "sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=",
+                    "dev": true,
+                    "requires": {
+                        "base64-js": "^1.0.2",
+                        "ieee754": "^1.1.4",
+                        "isarray": "^1.0.0"
+                    }
+                },
                 "punycode": {
                     "version": "1.4.1",
                     "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
@@ -10137,6 +10448,11 @@
                 "sha.js": "^2.4.8"
             }
         },
+        "performance-now": {
+            "version": "0.2.0",
+            "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz",
+            "integrity": "sha1-M+8wxcd9TqIcWlOGnZG1bY8lVeU="
+        },
         "pify": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
@@ -10164,6 +10480,11 @@
                 "find-up": "^2.1.0"
             }
         },
+        "popper.js": {
+            "version": "1.14.6",
+            "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.6.tgz",
+            "integrity": "sha512-AGwHGQBKumlk/MDfrSOf0JHhJCImdDMcGNoqKmKkU+68GFazv3CQ6q9r7Ja1sKDZmYWTckY/uLyEznheTDycnA=="
+        },
         "popsicle": {
             "version": "8.2.0",
             "resolved": "https://registry.npmjs.org/popsicle/-/popsicle-8.2.0.tgz",
@@ -10374,7 +10695,6 @@
             "version": "7.3.1",
             "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
             "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
-            "optional": true,
             "requires": {
                 "asap": "~2.0.3"
             }
@@ -10394,6 +10714,15 @@
             "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=",
             "dev": true
         },
+        "prop-types": {
+            "version": "15.6.2",
+            "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
+            "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
+            "requires": {
+                "loose-envify": "^1.3.1",
+                "object-assign": "^4.1.1"
+            }
+        },
         "protractor": {
             "version": "5.3.2",
             "resolved": "https://registry.npmjs.org/protractor/-/protractor-5.3.2.tgz",
@@ -10591,14 +10920,17 @@
         "qs": {
             "version": "6.5.1",
             "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.1.tgz",
-            "integrity": "sha512-eRzhrN1WSINYCDCbrz796z37LOe3m5tmW7RQf6oBntukAG1nmovJvhnwHHRMAfeoItc1m2Hk02WER2aQ/iqs+A==",
-            "dev": true
+            "integrity": "sha512-eRzhrN1WSINYCDCbrz796z37LOe3m5tmW7RQf6oBntukAG1nmovJvhnwHHRMAfeoItc1m2Hk02WER2aQ/iqs+A=="
         },
         "querystring": {
             "version": "0.2.0",
             "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
-            "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=",
-            "dev": true
+            "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA="
+        },
+        "querystring-browser": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/querystring-browser/-/querystring-browser-1.0.4.tgz",
+            "integrity": "sha1-8uNYgYQKgZvHsb9Zf68JeeZiLcY="
         },
         "querystring-es3": {
             "version": "0.2.1",
@@ -10609,8 +10941,22 @@
         "querystringify": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.0.0.tgz",
-            "integrity": "sha512-eTPo5t/4bgaMNZxyjWx6N2a6AuE0mq51KWvpc7nU/MAqixcI6v6KrGUKES0HaomdnolQBBXU/++X6/QQ9KL4tw==",
-            "dev": true
+            "integrity": "sha512-eTPo5t/4bgaMNZxyjWx6N2a6AuE0mq51KWvpc7nU/MAqixcI6v6KrGUKES0HaomdnolQBBXU/++X6/QQ9KL4tw=="
+        },
+        "raf": {
+            "version": "3.4.1",
+            "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+            "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+            "requires": {
+                "performance-now": "^2.1.0"
+            },
+            "dependencies": {
+                "performance-now": {
+                    "version": "2.1.0",
+                    "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+                    "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
+                }
+            }
         },
         "randomatic": {
             "version": "3.0.0",
@@ -10721,6 +11067,93 @@
                 }
             }
         },
+        "react": {
+            "version": "15.6.2",
+            "resolved": "https://registry.npmjs.org/react/-/react-15.6.2.tgz",
+            "integrity": "sha1-26BDSrQ5z+gvEI8PURZjkIF5qnI=",
+            "requires": {
+                "create-react-class": "^15.6.0",
+                "fbjs": "^0.8.9",
+                "loose-envify": "^1.1.0",
+                "object-assign": "^4.1.0",
+                "prop-types": "^15.5.10"
+            }
+        },
+        "react-addons-perf": {
+            "version": "15.4.2",
+            "resolved": "https://registry.npmjs.org/react-addons-perf/-/react-addons-perf-15.4.2.tgz",
+            "integrity": "sha1-EQvc9cRZxPd8uF7WNLzTOXU2ODs=",
+            "requires": {
+                "fbjs": "^0.8.4",
+                "object-assign": "^4.1.0"
+            }
+        },
+        "react-debounce-input": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/react-debounce-input/-/react-debounce-input-3.2.0.tgz",
+            "integrity": "sha1-aXjGBh2Jj1SfQEF/sNLrvs9Qqqo=",
+            "requires": {
+                "lodash.debounce": "^4",
+                "prop-types": "^15"
+            }
+        },
+        "react-dom": {
+            "version": "15.6.2",
+            "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-15.6.2.tgz",
+            "integrity": "sha1-Qc+t9pO3V/rycIRDodH9WgK+9zA=",
+            "requires": {
+                "fbjs": "^0.8.9",
+                "loose-envify": "^1.1.0",
+                "object-assign": "^4.1.0",
+                "prop-types": "^15.5.10"
+            }
+        },
+        "react-immutable-proptypes": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/react-immutable-proptypes/-/react-immutable-proptypes-2.1.0.tgz",
+            "integrity": "sha1-Aj1vObsVyXwHHp5g0A0TbqxfoLQ="
+        },
+        "react-immutable-pure-component": {
+            "version": "1.2.3",
+            "resolved": "https://registry.npmjs.org/react-immutable-pure-component/-/react-immutable-pure-component-1.2.3.tgz",
+            "integrity": "sha512-kNy2A/fDrSuR8TKwB+4ynmItmp1vgF87tWxxfmadwDYo2J3ANipHqTjDIBvJvJ7libvuh76jIbvmK0krjtKH1g==",
+            "requires": {
+                "@types/react": "16.4.6"
+            }
+        },
+        "react-inspector": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/react-inspector/-/react-inspector-2.3.1.tgz",
+            "integrity": "sha512-tUUK7t3KWgZEIUktOYko5Ic/oYwvjEvQUFAGC1UeMeDaQ5za2yZFtItJa2RTwBJB//NxPr000WQK6sEbqC6y0Q==",
+            "requires": {
+                "babel-runtime": "^6.26.0",
+                "is-dom": "^1.0.9",
+                "prop-types": "^15.6.1"
+            }
+        },
+        "react-motion": {
+            "version": "0.5.2",
+            "resolved": "https://registry.npmjs.org/react-motion/-/react-motion-0.5.2.tgz",
+            "integrity": "sha512-9q3YAvHoUiWlP3cK0v+w1N5Z23HXMj4IF4YuvjvWegWqNPfLXsOBE/V7UvQGpXxHFKRQQcNcVQE31g9SB/6qgQ==",
+            "requires": {
+                "performance-now": "^0.2.0",
+                "prop-types": "^15.5.8",
+                "raf": "^3.1.0"
+            }
+        },
+        "react-redux": {
+            "version": "4.4.9",
+            "resolved": "http://registry.npmjs.org/react-redux/-/react-redux-4.4.9.tgz",
+            "integrity": "sha512-3XS7mjTOcvaP2H5OE/LxEgDHRuEyTZxBRlwvXHzNqYkZdYd7Ra98AimWoDSHP9OcLoydjA1ocgiZxxcqeXj0Sw==",
+            "requires": {
+                "create-react-class": "^15.5.1",
+                "hoist-non-react-statics": "^2.5.0",
+                "invariant": "^2.0.0",
+                "lodash": "^4.2.0",
+                "loose-envify": "^1.1.0",
+                "prop-types": "^15.5.4"
+            }
+        },
         "read-all-stream": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/read-all-stream/-/read-all-stream-3.1.0.tgz",
@@ -10837,6 +11270,25 @@
                 "strip-indent": "^1.0.1"
             }
         },
+        "redux": {
+            "version": "3.7.2",
+            "resolved": "https://registry.npmjs.org/redux/-/redux-3.7.2.tgz",
+            "integrity": "sha512-pNqnf9q1hI5HHZRBkj3bAngGZW/JMCmexDlOxw4XagXY2o1327nHH54LoTjiPJ0gizoqPDRqWyX/00g0hD6w+A==",
+            "requires": {
+                "lodash": "^4.2.1",
+                "lodash-es": "^4.2.1",
+                "loose-envify": "^1.1.0",
+                "symbol-observable": "^1.0.3"
+            }
+        },
+        "redux-immutable": {
+            "version": "3.0.8",
+            "resolved": "https://registry.npmjs.org/redux-immutable/-/redux-immutable-3.0.8.tgz",
+            "integrity": "sha1-31pdYByIInujj0dM+C99AOVvjBQ=",
+            "requires": {
+                "immutable": "^3.7.6"
+            }
+        },
         "reflect-metadata": {
             "version": "0.1.12",
             "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.12.tgz",
@@ -10852,8 +11304,7 @@
         "regenerator-runtime": {
             "version": "0.11.1",
             "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
-            "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
-            "dev": true
+            "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
         },
         "regex-cache": {
             "version": "0.4.4",
@@ -10987,6 +11438,26 @@
                 }
             }
         },
+        "remarkable": {
+            "version": "1.7.1",
+            "resolved": "https://registry.npmjs.org/remarkable/-/remarkable-1.7.1.tgz",
+            "integrity": "sha1-qspJchALZqZCpjoQIcpLrBvjv/Y=",
+            "requires": {
+                "argparse": "~0.1.15",
+                "autolinker": "~0.15.0"
+            },
+            "dependencies": {
+                "argparse": {
+                    "version": "0.1.16",
+                    "resolved": "https://registry.npmjs.org/argparse/-/argparse-0.1.16.tgz",
+                    "integrity": "sha1-z9AeD7uj1srtBJ+9dY1A9lGW9Xw=",
+                    "requires": {
+                        "underscore": "~1.7.0",
+                        "underscore.string": "~2.4.0"
+                    }
+                }
+            }
+        },
         "remove-trailing-separator": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
@@ -11150,8 +11621,12 @@
         "requires-port": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
-            "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
-            "dev": true
+            "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
+        },
+        "reselect": {
+            "version": "2.5.4",
+            "resolved": "http://registry.npmjs.org/reselect/-/reselect-2.5.4.tgz",
+            "integrity": "sha1-t9I/3wC4P6etAnlUb427vXZccEc="
         },
         "resolve": {
             "version": "1.7.1",
@@ -11569,6 +12044,11 @@
                 }
             }
         },
+        "serialize-error": {
+            "version": "2.1.0",
+            "resolved": "http://registry.npmjs.org/serialize-error/-/serialize-error-2.1.0.tgz",
+            "integrity": "sha1-ULZ51WNc34Rme9yOWa9OW4HV9go="
+        },
         "serialize-javascript": {
             "version": "1.5.0",
             "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-1.5.0.tgz",
@@ -11636,8 +12116,7 @@
         "setimmediate": {
             "version": "1.0.5",
             "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
-            "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=",
-            "dev": true
+            "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
         },
         "setprototypeof": {
             "version": "1.1.0",
@@ -12125,8 +12604,7 @@
         "sprintf-js": {
             "version": "1.0.3",
             "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-            "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
-            "dev": true
+            "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
         },
         "sshpk": {
             "version": "1.14.1",
@@ -12201,6 +12679,14 @@
                 "readable-stream": "^2.0.1"
             }
         },
+        "stream": {
+            "version": "0.0.2",
+            "resolved": "https://registry.npmjs.org/stream/-/stream-0.0.2.tgz",
+            "integrity": "sha1-f1Nj8Ff2WSxVlfALyAon9c7B8O8=",
+            "requires": {
+                "emitter-component": "^1.1.1"
+            }
+        },
         "stream-browserify": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.1.tgz",
@@ -12363,11 +12849,95 @@
                 "has-flag": "^2.0.0"
             }
         },
+        "swagger-client": {
+            "version": "3.8.22",
+            "resolved": "https://registry.npmjs.org/swagger-client/-/swagger-client-3.8.22.tgz",
+            "integrity": "sha512-Jm+X3p6B6hvdSIZ3hJRltrHP2z3if6zt+fmYZaFwyAiPt6IU25PHkipqC92KSCy/pK2bpo9ZQfmphFEtuGc3ig==",
+            "requires": {
+                "@kyleshockey/js-yaml": "^1.0.1",
+                "@kyleshockey/object-assign-deep": "^0.4.0",
+                "babel-runtime": "^6.26.0",
+                "btoa": "1.1.2",
+                "buffer": "^5.1.0",
+                "cookie": "^0.3.1",
+                "cross-fetch": "0.0.8",
+                "deep-extend": "^0.5.1",
+                "encode-3986": "^1.0.0",
+                "fast-json-patch": "^2.0.6",
+                "isomorphic-form-data": "0.0.1",
+                "lodash": "^4.16.2",
+                "qs": "^6.3.0",
+                "querystring-browser": "^1.0.4",
+                "url": "^0.11.0",
+                "utf8-bytes": "0.0.1",
+                "utfstring": "^2.0.0"
+            },
+            "dependencies": {
+                "@kyleshockey/js-yaml": {
+                    "version": "1.0.1",
+                    "resolved": "https://registry.npmjs.org/@kyleshockey/js-yaml/-/js-yaml-1.0.1.tgz",
+                    "integrity": "sha512-coFyIk1LvTscq1cUU4nCCfYwv+cmG4fCP+wgDKgYZjhM4f++YwZy+g0k+1tUqa4GuUpBTEOGH2KUqKFFWdT73g==",
+                    "requires": {
+                        "argparse": "^1.0.7"
+                    }
+                }
+            }
+        },
+        "swagger-ui": {
+            "version": "3.20.2",
+            "resolved": "https://registry.npmjs.org/swagger-ui/-/swagger-ui-3.20.2.tgz",
+            "integrity": "sha512-XkJ7v0edH63Lj3iGpzMAli7UNBFxMNgFFDK8jOHdQzGvYnGQ9IvLCv6Uh7BxSK53h2tA/1tfG+PuI2ZU5VI7tw==",
+            "requires": {
+                "@braintree/sanitize-url": "^2.0.2",
+                "@kyleshockey/js-yaml": "^1.0.1",
+                "@kyleshockey/object-assign-deep": "^0.4.2",
+                "@kyleshockey/xml": "^1.0.2",
+                "base64-js": "^1.2.0",
+                "classnames": "^2.2.5",
+                "core-js": "^2.5.1",
+                "css.escape": "1.5.1",
+                "deep-extend": "0.5.1",
+                "dompurify": "^1.0.4",
+                "ieee754": "^1.1.8",
+                "immutable": "^3.x.x",
+                "js-file-download": "^0.4.1",
+                "lodash": "^4.17.10",
+                "memoizee": "^0.4.12",
+                "prop-types": "^15.5.10",
+                "react": "^15.6.2",
+                "react-addons-perf": "^15.4.0",
+                "react-debounce-input": "^3.2.0",
+                "react-dom": "^15.6.2",
+                "react-immutable-proptypes": "2.1.0",
+                "react-immutable-pure-component": "^1.1.1",
+                "react-inspector": "^2.3.0",
+                "react-motion": "^0.5.2",
+                "react-redux": "^4.x.x",
+                "redux": "^3.x.x",
+                "redux-immutable": "3.0.8",
+                "remarkable": "^1.7.1",
+                "reselect": "^2.5.4",
+                "serialize-error": "^2.1.0",
+                "swagger-client": "^3.8.22",
+                "url-parse": "^1.1.8",
+                "xml-but-prettier": "^1.0.1",
+                "zenscroll": "^4.0.2"
+            },
+            "dependencies": {
+                "@kyleshockey/js-yaml": {
+                    "version": "1.0.1",
+                    "resolved": "https://registry.npmjs.org/@kyleshockey/js-yaml/-/js-yaml-1.0.1.tgz",
+                    "integrity": "sha512-coFyIk1LvTscq1cUU4nCCfYwv+cmG4fCP+wgDKgYZjhM4f++YwZy+g0k+1tUqa4GuUpBTEOGH2KUqKFFWdT73g==",
+                    "requires": {
+                        "argparse": "^1.0.7"
+                    }
+                }
+            }
+        },
         "symbol-observable": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
-            "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==",
-            "dev": true
+            "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
         },
         "tapable": {
             "version": "0.2.8",
@@ -12453,6 +13023,15 @@
                 "setimmediate": "^1.0.4"
             }
         },
+        "timers-ext": {
+            "version": "0.1.7",
+            "resolved": "https://registry.npmjs.org/timers-ext/-/timers-ext-0.1.7.tgz",
+            "integrity": "sha512-b85NUNzTSdodShTIbky6ZF02e8STtVVfD+fu4aXXShEELpozH+bCpJLYMPZbsABN2wDH7fJpqIoXxJpzbf0NqQ==",
+            "requires": {
+                "es5-ext": "~0.10.46",
+                "next-tick": "1"
+            }
+        },
         "tiny-emitter": {
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.0.2.tgz",
@@ -13160,6 +13739,11 @@
                 }
             }
         },
+        "ua-parser-js": {
+            "version": "0.7.19",
+            "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.19.tgz",
+            "integrity": "sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ=="
+        },
         "uglify-js": {
             "version": "3.3.18",
             "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.3.18.tgz",
@@ -13235,6 +13819,16 @@
             "integrity": "sha1-5z3T17DXxe2G+6xrCufYxqadUPo=",
             "dev": true
         },
+        "underscore": {
+            "version": "1.7.0",
+            "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.7.0.tgz",
+            "integrity": "sha1-a7rwh3UA02vjTsqlhODbn+8DUgk="
+        },
+        "underscore.string": {
+            "version": "2.4.0",
+            "resolved": "http://registry.npmjs.org/underscore.string/-/underscore.string-2.4.0.tgz",
+            "integrity": "sha1-jN2PusTi0uoefi6Al8QvRCKA+Fs="
+        },
         "union-value": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.0.tgz",
@@ -13396,7 +13990,6 @@
             "version": "0.11.0",
             "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz",
             "integrity": "sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=",
-            "dev": true,
             "requires": {
                 "punycode": "1.3.2",
                 "querystring": "0.2.0"
@@ -13405,8 +13998,7 @@
                 "punycode": {
                     "version": "1.3.2",
                     "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
-                    "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=",
-                    "dev": true
+                    "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0="
                 }
             }
         },
@@ -13450,7 +14042,6 @@
             "version": "1.4.3",
             "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.4.3.tgz",
             "integrity": "sha512-rh+KuAW36YKo0vClhQzLLveoj8FwPJNu65xLb7Mrt+eZht0IPT0IXgSv8gcMegZ6NvjJUALf6Mf25POlMwD1Fw==",
-            "dev": true,
             "requires": {
                 "querystringify": "^2.0.0",
                 "requires-port": "^1.0.0"
@@ -13479,6 +14070,16 @@
                 "tmp": "0.0.x"
             }
         },
+        "utf8-bytes": {
+            "version": "0.0.1",
+            "resolved": "https://registry.npmjs.org/utf8-bytes/-/utf8-bytes-0.0.1.tgz",
+            "integrity": "sha1-EWsCVEjJtQAIHN+/H01sbDfYg30="
+        },
+        "utfstring": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/utfstring/-/utfstring-2.0.0.tgz",
+            "integrity": "sha512-/ugBfyvIoLe9xqkFHio3CxXnpUKQ1p2LfTxPr6QTRj6GiwpHo73YGdh03UmAzDQNOWpNIE0J5nLss00L4xlWgg=="
+        },
         "util": {
             "version": "0.10.4",
             "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz",
@@ -15143,6 +15744,11 @@
             "integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==",
             "dev": true
         },
+        "whatwg-fetch": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz",
+            "integrity": "sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q=="
+        },
         "when": {
             "version": "3.6.4",
             "resolved": "https://registry.npmjs.org/when/-/when-3.6.4.tgz",
@@ -15273,6 +15879,14 @@
             "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-3.0.0.tgz",
             "integrity": "sha1-SWsswQnsqNus/i3HK2A8F8WHCtQ="
         },
+        "xml-but-prettier": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/xml-but-prettier/-/xml-but-prettier-1.0.1.tgz",
+            "integrity": "sha1-9aMyZ+1CzNTjVcYlV6XjmwH7QPM=",
+            "requires": {
+                "repeat-string": "^1.5.2"
+            }
+        },
         "xml2js": {
             "version": "0.4.19",
             "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.19.tgz",
@@ -15393,6 +16007,11 @@
             "integrity": "sha1-5a2ryKz0CPY4X8dklWhMiOavaJo=",
             "dev": true
         },
+        "zenscroll": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/zenscroll/-/zenscroll-4.0.2.tgz",
+            "integrity": "sha1-6NV3TRwHOKR7z6hynzcS4t7d6yU="
+        },
         "zip-object": {
             "version": "0.1.0",
             "resolved": "https://registry.npmjs.org/zip-object/-/zip-object-0.1.0.tgz",
diff --git a/src/portal/package.json b/src/portal/package.json
index e6f654726..1a86be6d9 100644
--- a/src/portal/package.json
+++ b/src/portal/package.json
@@ -32,18 +32,26 @@
         "@clr/angular": "^0.12.10",
         "@clr/icons": "^0.12.0",
         "@clr/ui": "^0.12.0",
+        "@fortawesome/fontawesome-free": "^5.1.0-4",
+        "@ng-bootstrap/ng-bootstrap": "^2.0.0",
         "@ngx-translate/core": "^10.0.2",
         "@ngx-translate/http-loader": "^3.0.1",
         "@types/jquery": "^2.0.41",
         "@webcomponents/custom-elements": "^1.1.3",
+        "bootstrap": "^4.1.1",
+        "buffer": "^5.2.1",
         "core-js": "^2.5.4",
         "intl": "^1.2.5",
+        "jquery": "^3.3.1",
         "mutationobserver-shim": "^0.3.2",
         "ng-packagr": "^4.1.1",
         "ngx-clipboard": "^11.1.1",
         "ngx-cookie": "^1.0.0",
         "ngx-markdown": "^6.2.0",
+        "popper.js": "^1.14.3",
         "rxjs": "^6.3.1",
+        "stream": "^0.0.2",
+        "swagger-ui": "^3.20.2",
         "ts-helpers": "^1.1.1",
         "tslib": "^1.9.0",
         "types": "^0.1.1",
diff --git a/src/portal/src/app/app.module.ts b/src/portal/src/app/app.module.ts
index f0944f2bf..42069309c 100644
--- a/src/portal/src/app/app.module.ts
+++ b/src/portal/src/app/app.module.ts
@@ -20,6 +20,7 @@ import { HarborRoutingModule } from './harbor-routing.module';
 import { SharedModule } from './shared/shared.module';
 import { AccountModule } from './account/account.module';
 import { ConfigurationModule } from './config/config.module';
+import { DeveloperCenterModule } from './dev-center/dev-center.module';
 import { registerLocaleData } from '@angular/common';
 
 import { TranslateService } from "@ngx-translate/core";
@@ -30,6 +31,7 @@ import { ProjectConfigComponent } from './project/project-config/project-config.
 import zh from '@angular/common/locales/zh-Hans';
 import es from '@angular/common/locales/es';
 import localeFr from '@angular/common/locales/fr';
+import { DevCenterComponent } from './dev-center/dev-center.component';
 registerLocaleData(zh, 'zh-cn');
 registerLocaleData(es, 'es-es');
 registerLocaleData(localeFr, 'fr-fr');
@@ -49,7 +51,7 @@ export function getCurrentLanguage(translateService: TranslateService) {
 @NgModule({
     declarations: [
         AppComponent,
-        ProjectConfigComponent,
+        ProjectConfigComponent
     ],
     imports: [
         BrowserModule,
@@ -57,7 +59,8 @@ export function getCurrentLanguage(translateService: TranslateService) {
         BaseModule,
         AccountModule,
         HarborRoutingModule,
-        ConfigurationModule
+        ConfigurationModule,
+        DeveloperCenterModule
     ],
     exports: [
     ],
diff --git a/src/portal/src/app/base/harbor-shell/harbor-shell.component.html b/src/portal/src/app/base/harbor-shell/harbor-shell.component.html
index 125bbcc9b..fb10c935a 100644
--- a/src/portal/src/app/base/harbor-shell/harbor-shell.component.html
+++ b/src/portal/src/app/base/harbor-shell/harbor-shell.component.html
@@ -2,7 +2,8 @@
     <global-message [isAppLevel]="true"></global-message>
     <navigator (showAccountSettingsModal)="openModal($event)" (showPwdChangeModal)="openModal($event)"></navigator>
     <div class="content-container">
-        <div class="content-area" [class.container-override]="showSearch" [class.content-area-override]="!shouldOverrideContent" [class.start-content-padding]="shouldOverrideContent">
+        <div class="content-area" [class.container-override]="showSearch" [class.content-area-override]="!shouldOverrideContent"
+            [class.start-content-padding]="shouldOverrideContent">
             <global-message [isAppLevel]="false"></global-message>
             <!-- Only appear when searching -->
             <search-result></search-result>
@@ -17,46 +18,39 @@
                 <clr-icon shape="list" clrVerticalNavIcon></clr-icon>
                 {{'SIDE_NAV.LOGS' | translate}}
             </a>
-            <clr-vertical-nav-group  *ngIf="isSystemAdmin" routerLinkActive="active">
+            <a clrVerticalNavLink target="_blank" routerLink="/devcenter" routerLinkActive="active">
+                <clr-icon shape="terminal" clrVerticalNavIcon></clr-icon>
+                {{'SIDE_NAV.SYSTEM_MGMT.DEVCENTER' | translate}}
+            </a>
+            <clr-vertical-nav-group *ngIf="isSystemAdmin" routerLinkActive="active">
                 <clr-icon shape="administrator" clrVerticalNavIcon></clr-icon>
                 {{'SIDE_NAV.SYSTEM_MGMT.NAME' | translate}}
                 <a routerLink="#" hidden aria-hidden="true"></a>
                 <clr-vertical-nav-group-children *clrIfExpanded="true">
-                    <a clrVerticalNavLink
-                       routerLink="/harbor/users"
-                       routerLinkActive="active">
-                       <clr-icon shape="users" clrVerticalNavIcon></clr-icon>
-                       {{'SIDE_NAV.SYSTEM_MGMT.USER' | translate}}
+                    <a clrVerticalNavLink routerLink="/harbor/users" routerLinkActive="active">
+                        <clr-icon shape="users" clrVerticalNavIcon></clr-icon>
+                        {{'SIDE_NAV.SYSTEM_MGMT.USER' | translate}}
                     </a>
-                    <a *ngIf='isLdapMode'
-                       clrVerticalNavLink
-                       routerLink="/harbor/groups"
-                       routerLinkActive="active">
-                       <clr-icon shape="users" clrVerticalNavIcon></clr-icon>
+                    <a *ngIf='isLdapMode' clrVerticalNavLink routerLink="/harbor/groups" routerLinkActive="active">
+                        <clr-icon shape="users" clrVerticalNavIcon></clr-icon>
                         {{'SIDE_NAV.SYSTEM_MGMT.GROUP' | translate}}
                     </a>
-                    <a clrVerticalNavLink
-                       routerLink="/harbor/registries"
-                       routerLinkActive="active">
-                       <clr-icon shape="block" clrVerticalNavIcon></clr-icon>
-                       {{'SIDE_NAV.SYSTEM_MGMT.REGISTRY' | translate}}
+                    <a clrVerticalNavLink routerLink="/harbor/registries" routerLinkActive="active">
+                        <clr-icon shape="block" clrVerticalNavIcon></clr-icon>
+                        {{'SIDE_NAV.SYSTEM_MGMT.REGISTRY' | translate}}
                     </a>
-                    <a clrVerticalNavLink
-                       routerLink="/harbor/replications"
-                       routerLinkActive="active">
-                       <clr-icon shape="cloud-traffic" clrVerticalNavIcon></clr-icon>
-                       {{'SIDE_NAV.SYSTEM_MGMT.REPLICATION' | translate}}
+                    <a clrVerticalNavLink routerLink="/harbor/replications" routerLinkActive="active">
+                        <clr-icon shape="cloud-traffic" clrVerticalNavIcon></clr-icon>
+                        {{'SIDE_NAV.SYSTEM_MGMT.REPLICATION' | translate}}
                     </a>
-                    <a clrVerticalNavLink
-                       routerLink="/harbor/configs"
-                       routerLinkActive="active">
-                       <clr-icon shape="cog" clrVerticalNavIcon></clr-icon>
-                       {{'SIDE_NAV.SYSTEM_MGMT.CONFIG' | translate}}
+                    <a clrVerticalNavLink routerLink="/harbor/configs" routerLinkActive="active">
+                        <clr-icon shape="cog" clrVerticalNavIcon></clr-icon>
+                        {{'SIDE_NAV.SYSTEM_MGMT.CONFIG' | translate}}
                     </a>
                 </clr-vertical-nav-group-children>
             </clr-vertical-nav-group>
         </clr-vertical-nav>
-        <hbr-operation-model  *ngIf="isUserExisting"></hbr-operation-model>
+        <hbr-operation-model *ngIf="isUserExisting"></hbr-operation-model>
     </div>
 </clr-main-container>
 <account-settings-modal></account-settings-modal>
diff --git a/src/portal/src/app/dev-center/dev-center.component.html b/src/portal/src/app/dev-center/dev-center.component.html
new file mode 100644
index 000000000..9eef24511
--- /dev/null
+++ b/src/portal/src/app/dev-center/dev-center.component.html
@@ -0,0 +1,2 @@
+
+<div class="swagger-container" style="overflow:scroll;"></div>
diff --git a/src/portal/src/app/dev-center/dev-center.component.scss b/src/portal/src/app/dev-center/dev-center.component.scss
new file mode 100644
index 000000000..c95a6e969
--- /dev/null
+++ b/src/portal/src/app/dev-center/dev-center.component.scss
@@ -0,0 +1,8 @@
+.swagger-container {
+    overflow: auto;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
\ No newline at end of file
diff --git a/src/portal/src/app/dev-center/dev-center.component.spec.ts b/src/portal/src/app/dev-center/dev-center.component.spec.ts
new file mode 100644
index 000000000..9878313eb
--- /dev/null
+++ b/src/portal/src/app/dev-center/dev-center.component.spec.ts
@@ -0,0 +1,26 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DevCenterComponent } from './dev-center.component';
+
+describe('DevCenterComponent', () => {
+  let component: DevCenterComponent;
+  let fixture: ComponentFixture<DevCenterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DevCenterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DevCenterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+});
diff --git a/src/portal/src/app/dev-center/dev-center.component.ts b/src/portal/src/app/dev-center/dev-center.component.ts
new file mode 100644
index 000000000..504a763cd
--- /dev/null
+++ b/src/portal/src/app/dev-center/dev-center.component.ts
@@ -0,0 +1,37 @@
+import { AfterViewInit, Component, ElementRef, OnInit } from '@angular/core';
+import { Http } from '@angular/http';
+import { throwError as observableThrowError, Observable } from 'rxjs';
+import { catchError, map } from 'rxjs/operators';
+
+
+const SwaggerUI = require('swagger-ui');
+@Component({
+  selector: 'dev-center',
+  templateUrl: 'dev-center.component.html',
+  styleUrls: ['dev-center.component.scss']
+})
+export class DevCenterComponent implements AfterViewInit {
+  private ui: any;
+  private host: any;
+  private json: any;
+  constructor(private el: ElementRef, private http: Http) {
+  }
+
+  ngAfterViewInit() {
+    this.http.get("/swagger.json")
+    .pipe(catchError(error => observableThrowError(error)))
+    .pipe(map(response => response.json())).subscribe(json => {
+      json.host = window.location.host;
+      const protocal = window.location.protocol;
+      json.schemes = [protocal.replace(":", "")];
+      let ui = SwaggerUI({
+        spec: json,
+        domNode: this.el.nativeElement.querySelector('.swagger-container'),
+        deepLinking: true,
+        presets: [
+          SwaggerUI.presets.apis
+        ],
+      });
+    });
+  }
+}
diff --git a/src/portal/src/app/dev-center/dev-center.module.ts b/src/portal/src/app/dev-center/dev-center.module.ts
new file mode 100644
index 000000000..2551d22c5
--- /dev/null
+++ b/src/portal/src/app/dev-center/dev-center.module.ts
@@ -0,0 +1,23 @@
+import { NgModule } from "@angular/core";
+import { RouterModule } from "@angular/router";
+import { CommonModule } from "@angular/common";
+import { ClarityModule } from '@clr/angular';
+import { SharedModule } from '../shared/shared.module';
+import { DevCenterComponent } from "./dev-center.component";
+
+
+@NgModule({
+    imports: [
+        CommonModule,
+        SharedModule,
+        RouterModule.forChild([{
+            path: "**",
+            component: DevCenterComponent,
+        }]),
+        ClarityModule.forRoot(),
+    ],
+    declarations: [
+        DevCenterComponent,
+    ],
+})
+export class DeveloperCenterModule {}
diff --git a/src/portal/src/app/harbor-routing.module.ts b/src/portal/src/app/harbor-routing.module.ts
index 2817716da..a6f01fbe2 100644
--- a/src/portal/src/app/harbor-routing.module.ts
+++ b/src/portal/src/app/harbor-routing.module.ts
@@ -22,6 +22,7 @@ import { MemberGuard } from './shared/route/member-guard-activate.service';
 import { PageNotFoundComponent } from './shared/not-found/not-found.component';
 import { HarborShellComponent } from './base/harbor-shell/harbor-shell.component';
 import { ConfigurationComponent } from './config/config.component';
+import { DevCenterComponent } from './dev-center/dev-center.component';
 
 import { UserComponent } from './user/user.component';
 import { SignInComponent } from './account/sign-in/sign-in.component';
@@ -43,7 +44,7 @@ import { LeavingRepositoryRouteDeactivate } from './shared/route/leaving-reposit
 import { ProjectComponent } from './project/project.component';
 import { ProjectDetailComponent } from './project/project-detail/project-detail.component';
 import { MemberComponent } from './project/member/member.component';
-import {ProjectLabelComponent} from "./project/project-label/project-label.component";
+import { ProjectLabelComponent } from "./project/project-label/project-label.component";
 import { ProjectConfigComponent } from './project/project-config/project-config.component';
 import { ProjectRoutingResolver } from './project/project-routing-resolver.service';
 import { ListChartsComponent } from './project/list-charts/list-charts.component';
@@ -53,6 +54,10 @@ import { ChartDetailComponent } from './project/chart-detail/chart-detail.compon
 const harborRoutes: Routes = [
   { path: '', redirectTo: 'harbor', pathMatch: 'full' },
   { path: 'reset_password', component: ResetPasswordComponent },
+  {
+    path: 'devcenter',
+    component: DevCenterComponent
+  },
   {
     path: 'harbor',
     component: HarborShellComponent,
diff --git a/src/portal/src/i18n/lang/en-us-lang.json b/src/portal/src/i18n/lang/en-us-lang.json
index e3bf82800..ae1e9bff9 100644
--- a/src/portal/src/i18n/lang/en-us-lang.json
+++ b/src/portal/src/i18n/lang/en-us-lang.json
@@ -121,7 +121,8 @@
             "GROUP": "Groups",
             "REGISTRY": "Registries",
             "REPLICATION": "Replications",
-            "CONFIG": "Configuration"
+            "CONFIG": "Configuration",
+            "DEVCENTER": "Developer Center"
         },
         "LOGS": "Logs"
     },
diff --git a/src/portal/src/i18n/lang/es-es-lang.json b/src/portal/src/i18n/lang/es-es-lang.json
index 1c6f7bccc..88e217eaa 100644
--- a/src/portal/src/i18n/lang/es-es-lang.json
+++ b/src/portal/src/i18n/lang/es-es-lang.json
@@ -121,7 +121,8 @@
             "REGISTRY": "Registries",
             "GROUP": "Groups",
             "REPLICATION": "Replicacións",
-            "CONFIG": "Configuración"
+            "CONFIG": "Configuración",
+            "DEVCENTER": "Developer Center"
         },
         "LOGS": "Logs"
     },
diff --git a/src/portal/src/i18n/lang/fr-fr-lang.json b/src/portal/src/i18n/lang/fr-fr-lang.json
index 9f780664a..d5b16fdea 100644
--- a/src/portal/src/i18n/lang/fr-fr-lang.json
+++ b/src/portal/src/i18n/lang/fr-fr-lang.json
@@ -107,7 +107,8 @@
             "USER": "Utilisateurs",
             "GROUP": "Groups",
             "REPLICATION": "Réplication",
-            "CONFIG": "Configuration"
+            "CONFIG": "Configuration",
+            "DEVCENTER": "Developer Center"
         },
         "LOGS": "Logs"
     },
diff --git a/src/portal/src/i18n/lang/pt-br-lang.json b/src/portal/src/i18n/lang/pt-br-lang.json
index eacc1d461..822c12d9c 100644
--- a/src/portal/src/i18n/lang/pt-br-lang.json
+++ b/src/portal/src/i18n/lang/pt-br-lang.json
@@ -119,7 +119,8 @@
             "GROUP": "Grupos",
             "REGISTRY": "Registros",
             "REPLICATION": "Replicações",
-            "CONFIG": "Configuração"
+            "CONFIG": "Configuração",
+            "DEVCENTER": "Developer Center"
         },
         "LOGS": "Logs"
     },
diff --git a/src/portal/src/i18n/lang/zh-cn-lang.json b/src/portal/src/i18n/lang/zh-cn-lang.json
index 426240437..1c05a5365 100644
--- a/src/portal/src/i18n/lang/zh-cn-lang.json
+++ b/src/portal/src/i18n/lang/zh-cn-lang.json
@@ -120,7 +120,8 @@
             "GROUP": "组管理",
             "REGISTRY": "仓库管理",
             "REPLICATION": "复制管理",
-            "CONFIG": "配置管理"
+            "CONFIG": "配置管理",
+            "DEVCENTER": "开发者中心"
         },
         "LOGS": "日志"
     },
diff --git a/src/portal/src/polyfills.ts b/src/portal/src/polyfills.ts
index 70d9165b9..fc6ef5280 100644
--- a/src/portal/src/polyfills.ts
+++ b/src/portal/src/polyfills.ts
@@ -37,3 +37,6 @@ import 'intl/locale-data/jsonp/zh';
 
 import 'zone.js/dist/zone';
 
+(window as any).global = window;
+// @ts-ignore
+window.Buffer = window.Buffer || require('buffer').Buffer;
diff --git a/src/portal/src/tsconfig.app.json b/src/portal/src/tsconfig.app.json
index e67ce7c76..d1f143d26 100644
--- a/src/portal/src/tsconfig.app.json
+++ b/src/portal/src/tsconfig.app.json
@@ -8,6 +8,10 @@
             "es6",
             "dom"
         ],
+        "types": [
+            "node",
+            "jasmine"
+        ],
         "mapRoot": "./",
         "module": "commonjs",
         "moduleResolution": "node",
diff --git a/src/portal/tsconfig.json b/src/portal/tsconfig.json
index fe7ff4d82..939d69229 100644
--- a/src/portal/tsconfig.json
+++ b/src/portal/tsconfig.json
@@ -7,7 +7,7 @@
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "lib": [
-      "es2015",
+      "es2017",
       "dom"
     ],
     "noImplicitAny": false,