Job submission demo

src/webportal/README.md

@@ -34,7 +34,7 @@ To run web portal, the following services should be started:
 - Kubernetes
 - Other services your feature requires
 
-Create a ```.env``` file and fill the url of all above services, for example:
+Create a `.env` file and fill the url of all above services, for example:
 
 ```text
 REST_SERVER_URI=<hostname>/rest-server
@@ -53,25 +53,25 @@ All these values in .env file will be imported as global object [`window.ENV`](.
 
 ### Devlopment Mode
 
-- Run ```yarn install``` to install all the dependencies
-- Run ```yarn dev``` to start a webpack dev server
+- Run `yarn install` to install all the dependencies
+- Run `yarn dev` to start a webpack dev server
 
 ### Production Mode
 
-- Run ```yarn install``` to install all dependencies
-- Run ```yarn build``` to build static files
-- Run ```yarn start``` to start webportal's static file host server
+- Run `yarn install` to install all dependencies
+- Run `yarn build` to build static files
+- Run `yarn start` to start webportal's static file host server
 
 ## Code style check of webportal
 
 Webportal use [eslint](https://eslint.org/docs/user-guide/getting-started) with [standard config](https://github.com/standard/eslint-config-standard) as linter and [prettier](https://prettier.io/docs/en/index.html) as code formatter.
 
-Pleae refer to [eslint config file](./.eslintrc.js) and [prettier config file](./prettier.config.js) for details. Make sure to run ```yarn lint``` command every time before you push your code, and resolve all the errors and warnings. Otherwise it will break the CI check when you submit your pull request.
+Pleae refer to [eslint config file](./.eslintrc.js) and [prettier config file](./prettier.config.js) for details. Make sure to run `yarn lint` command every time before you push your code, and resolve all the errors and warnings. Otherwise it will break the CI check when you submit your pull request.
 
 If you use modern editors like VS Code. It is highly recommends to install [eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) and [prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) extensions.
 
 > How to do code format with prettier?
-> You could use cli like ```prettier --write 'src/**/*.js' 'src/**/*.jsx'``` or use prettier extension in vscode.
+> You could use cli like `prettier --write 'src/**/*.js' 'src/**/*.jsx'` or use prettier extension in vscode.
 
 ## Webportal Plugins
 

src/webportal/config/webpack.common.js

@@ -67,6 +67,7 @@ const config = (env, argv) => ({
     batchRegister: './src/app/user/fabric/batch-register.jsx',
     dashboard: './src/app/dashboard/dashboard.component.js',
     submit: './src/app/job-submission/job-submission.jsx',
+    submit_demo: './src/app/job-submission-demo/job-submission.jsx',
     submit_v1: './src/app/job/job-submit-v1/job-submit.component.js',
     jobList: './src/app/job/job-view/fabric/job-list.jsx',
     jobDetail: './src/app/job/job-view/fabric/job-detail.jsx',
@@ -164,7 +165,7 @@ const config = (env, argv) => ({
             options: {
               sourceMap: true,
               ident: 'postcss',
-              plugins: loader => [
+              plugins: (loader) => [
                 require('postcss-import')({ root: loader.resourcePath }),
                 require('autoprefixer')(),
                 require('cssnano')(),
@@ -204,7 +205,7 @@ const config = (env, argv) => ({
             options: {
               sourceMap: true,
               ident: 'postcss2',
-              plugins: loader => [
+              plugins: (loader) => [
                 require('postcss-import')({ root: loader.resourcePath }),
                 require('autoprefixer')(),
                 require('cssnano')(),
@@ -324,6 +325,10 @@ const config = (env, argv) => ({
       filename: 'submit.html',
       chunks: ['layout', 'submit'],
     }),
+    generateHtml({
+      filename: 'submit_demo.html',
+      chunks: ['layout', 'submit_demo'],
+    }),
     generateHtml({
       filename: 'submit_v1.html',
       chunks: ['layout', 'submit_v1'],

src/webportal/config/webportal.md

@@ -17,7 +17,7 @@ For example, if you want to use different port than the default 9286, add follow
 
 ```yaml
 webportal:
-    server-port: new-value
+  server-port: new-value
 ```
 
 About config the web portal plugin, see [here](https://openpai.readthedocs.io/en/latest/manual/cluster-admin/how-to-customize-cluster-by-plugins.html)
@@ -28,8 +28,8 @@ After parsing, object model looks like:
 
 ```yaml
 webportal:
-    server-port: 9286
-    uri: "http://master_ip:9286"
+  server-port: 9286
+  uri: 'http://master_ip:9286'
 ```
 
 ## Table <a name="T_Config"></a>

src/webportal/config/webportal.yaml

@@ -15,7 +15,7 @@
 # DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-service_type: "common"
+service_type: 'common'
 
 server-port: 9286
 

src/webportal/deploy/service.yaml

@@ -32,6 +32,5 @@ delete-script: delete.sh
 refresh-script: refresh.sh
 upgraded-script: upgraded.sh
 
-
 deploy-rules:
-  - in: pai-master
+  - in: pai-master

src/webportal/package.json

@@ -55,6 +55,7 @@
     "express": "~4.16.2",
     "font-awesome": "~4.7.0",
     "fs-extra": "~5.0.0",
+    "global": "^4.4.0",
     "handlebars": "^4.5.3",
     "joi-browser": "^13.4.0",
     "jquery": "~3.5.0",
@@ -74,14 +75,18 @@
     "react": "^16.8.3",
     "react-dom": "^16.8.3",
     "react-monaco-editor": "^0.25.1",
+    "react-redux": "^7.2.2",
     "react-responsive": "^8.0.1",
     "react-router-dom": "^5.0.1",
+    "redux": "^4.0.5",
+    "redux-saga": "^1.1.3",
     "regenerator-runtime": "^0.13.2",
     "serve-favicon": "~2.5.0",
     "sshpk": "^1.16.1",
     "strip-bom-string": "^1.0.0",
     "strip-json-comments": "^2.0.1",
     "styled-components": "^4.2.0",
+    "styled-system": "^5.1.5",
     "tachyons-sass": "^4.9.5",
     "url-join": "^4.0.1",
     "util": "~0.10.3",
@@ -123,7 +128,7 @@
     "node-sass": "^4.13.1",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
-    "prettier": "^1.18.2",
+    "prettier": "^2.2.1",
     "raw-loader": "~0.5.1",
     "rimraf": "~2.6.2",
     "sass-loader": "~6.0.6",

src/webportal/server/config/index.js

@@ -37,11 +37,7 @@ const configSchema = Joi.object()
     logLevel: Joi.string()
       .allow(['error', 'warn', 'info', 'verbose', 'debug', 'silly'])
       .default('debug'),
-    serverPort: Joi.number()
-      .integer()
-      .min(8000)
-      .max(65535)
-      .default(9286),
+    serverPort: Joi.number().integer().min(8000).max(65535).default(9286),
   })
   .required();
 

src/webportal/server/config/logger.js

@@ -25,7 +25,7 @@ const logTransports = {
     json: false,
     colorize: true,
     timestamp: () => new Date().toISOString(),
-    formatter: options => {
+    formatter: (options) => {
       const timestamp = options.timestamp();
       const level = winston.config.colorize(
         options.level,

src/webportal/src/app/cluster-view/hardware/hardware.component.js

@@ -33,17 +33,17 @@ const webportalConfig = require('../../config/webportal.config.js');
 //
 let table = null;
 
-const getHostname = host => host.split(':', 1)[0];
+const getHostname = (host) => host.split(':', 1)[0];
 
 //
 
-const getCellId = instanceName => {
+const getCellId = (instanceName) => {
   return '#' + instanceName.replace(/(:|\.|\[|\]|,|=|@)/g, '\\$1');
 };
 
 //
 
-const getCellHtml = percentage => {
+const getCellHtml = (percentage) => {
   let innerColorString = '';
   let outerColorString = '';
   let loadLevelString = '';
@@ -110,7 +110,7 @@ const loadCpuUtilData = (
       '&end=' +
       currentEpochTimeInSeconds +
       '&step=1',
-    success: function(data) {
+    success: function (data) {
       initCells('cpu', instanceList, table);
       const result = data.data.result;
       for (let i = 0; i < result.length; i++) {
@@ -121,7 +121,7 @@ const loadCpuUtilData = (
         table.cell(cellId).data(cellHtml);
       }
     },
-    error: function() {
+    error: function () {
       initCells('cpu', instanceList, table);
       alert('Error when loading CPU utilization data.');
     },
@@ -147,7 +147,7 @@ const loadMemUtilData = (
       '&end=' +
       currentEpochTimeInSeconds +
       '&step=1',
-    success: function(dataOfMemUsed) {
+    success: function (dataOfMemUsed) {
       const dictOfMemUsed = {};
       const result = dataOfMemUsed.data.result;
       for (let i = 0; i < result.length; i++) {
@@ -165,7 +165,7 @@ const loadMemUtilData = (
           '&end=' +
           currentEpochTimeInSeconds +
           '&step=1',
-        success: function(dataOfMemTotal) {
+        success: function (dataOfMemTotal) {
           initCells('mem', instanceList, table);
           const result = dataOfMemTotal.data.result;
           for (let i = 0; i < result.length; i++) {
@@ -179,13 +179,13 @@ const loadMemUtilData = (
             table.cell(cellId).data(cellHtml);
           }
         },
-        error: function() {
+        error: function () {
           initCells('mem', instanceList, table);
           alert('Error when loading memory utilization data (step 2).');
         },
       });
     },
-    error: function() {
+    error: function () {
       initCells('mem', instanceList, table);
       alert('Error when loading memory utilization data (step 1).');
     },
@@ -211,7 +211,7 @@ const loadGpuUtilData = (
       '&end=' +
       currentEpochTimeInSeconds +
       '&step=1',
-    success: function(data) {
+    success: function (data) {
       initCells('gpu', instanceList, table);
       const result = data.data.result;
       for (let i = 0; i < result.length; i++) {
@@ -222,7 +222,7 @@ const loadGpuUtilData = (
         table.cell(cellId).data(cellHtml);
       }
     },
-    error: function() {
+    error: function () {
       initCells('gpu', instanceList, table);
       alert('Error when loading GPU utilization data.');
     },
@@ -248,7 +248,7 @@ const loadGpuMemUtilData = (
       '&end=' +
       currentEpochTimeInSeconds +
       '&step=1',
-    success: function(data) {
+    success: function (data) {
       initCells('gpumem', instanceList, table);
       const result = data.data.result;
       for (let i = 0; i < result.length; i++) {
@@ -259,7 +259,7 @@ const loadGpuMemUtilData = (
         table.cell(cellId).data(cellHtml);
       }
     },
-    error: function() {
+    error: function () {
       initCells('gpumem', instanceList, table);
       alert('Error when loading GPU memory utilization data.');
     },
@@ -288,7 +288,7 @@ const loadDiskUtilData = (
       '&end=' +
       currentEpochTimeInSeconds +
       '&step=1',
-    success: function(dataOfDiskBytesRead) {
+    success: function (dataOfDiskBytesRead) {
       const dictOfDiskBytesRead = {};
       const result = dataOfDiskBytesRead.data.result;
       for (let i = 0; i < result.length; i++) {
@@ -308,7 +308,7 @@ const loadDiskUtilData = (
           '&end=' +
           currentEpochTimeInSeconds +
           '&step=1',
-        success: function(dataOfDiskBytesWritten) {
+        success: function (dataOfDiskBytesWritten) {
           initCells('disk', instanceList, table);
           const result = dataOfDiskBytesWritten.data.result;
           for (let i = 0; i < result.length; i++) {
@@ -328,13 +328,13 @@ const loadDiskUtilData = (
             }
           }
         },
-        error: function() {
+        error: function () {
           initCells('disk', instanceList, table);
           alert('Error when loading disk utilization data (step 2).');
         },
       });
     },
-    error: function() {
+    error: function () {
       initCells('disk', instanceList, table);
       alert('Error when loading disk utilization data (step 1).');
     },
@@ -363,7 +363,7 @@ const loadEthUtilData = (
       '&end=' +
       currentEpochTimeInSeconds +
       '&step=1',
-    success: function(dataOfEthBytesRecieved) {
+    success: function (dataOfEthBytesRecieved) {
       const dictOfEthBytesRecieved = {};
       const result = dataOfEthBytesRecieved.data.result;
       for (let i = 0; i < result.length; i++) {
@@ -383,7 +383,7 @@ const loadEthUtilData = (
           '&end=' +
           currentEpochTimeInSeconds +
           '&step=1',
-        success: function(dataOfEthBytesSent) {
+        success: function (dataOfEthBytesSent) {
           initCells('eth', instanceList, table);
           const result = dataOfEthBytesSent.data.result;
           for (let i = 0; i < result.length; i++) {
@@ -404,13 +404,13 @@ const loadEthUtilData = (
             }
           }
         },
-        error: function() {
+        error: function () {
           initCells('eth', instanceList, table);
           alert('Error when loading ethernet utilization data (step 2).');
         },
       });
     },
-    error: function() {
+    error: function () {
       initCells('eth', instanceList, table);
       alert('Error when loading ethernet utilization data (step 1).');
     },
@@ -428,7 +428,7 @@ const loadData = () => {
       '/api/v1/query?' +
       'query=node_uname_info&time=' +
       currentEpochTimeInSeconds,
-    success: function(data) {
+    success: function (data) {
       const hardwareHtml = hardwareComponent({
         breadcrumb: breadcrumbComponent,
         grafanaUri: webportalConfig.grafanaUri,
@@ -438,7 +438,10 @@ const loadData = () => {
       table = $('#hardware-table')
         .dataTable({
           scrollY: $(window).height() - 265 + 'px',
-          lengthMenu: [[20, 50, 100, -1], [20, 50, 100, 'All']],
+          lengthMenu: [
+            [20, 50, 100, -1],
+            [20, 50, 100, 'All'],
+          ],
           columnDefs: [
             { type: 'natural', targets: [0] },
             { type: 'ip-address', targets: [1] },
@@ -487,7 +490,7 @@ const loadData = () => {
         table,
       );
     },
-    error: function() {
+    error: function () {
       alert('Error when loading data.');
     },
   });
@@ -501,7 +504,7 @@ const resizeContentWrapper = () => {
 
 $(document).ready(() => {
   loadData();
-  window.onresize = function(envent) {
+  window.onresize = function (envent) {
     resizeContentWrapper();
   };
   resizeContentWrapper();