apache · rohityadavcloud · Jan 20, 2021 · Jul 8, 2020 · Jul 8, 2020 · Jul 8, 2020
diff --git a/.travis.yml b/.travis.yml
@@ -27,10 +27,14 @@ jdk:
 python:
   - "2.7"
 
+node_js:
+  - 12
+
 cache:
   directories:
     - $HOME/.m2
   timeout: 500
+  npm: false
 
 notifications:
   email: false

diff --git a/client/pom.xml b/client/pom.xml
@@ -606,7 +606,9 @@
                                     </fileset>
                                 </copy>
                                 <copy todir="${project.build.directory}/classes/META-INF/webapp">
-                                    <fileset dir="${basedir}/../ui" />
+                                    <fileset dir="${basedir}/../ui">
+                                        <exclude name=".*"/>
+                                    </fileset>
                                 </copy>
                                 <copy overwrite="true" todir="${basedir}/target/utilities/bin">
                                     <fileset dir="${basedir}/../setup/bindir">

diff --git a/pom.xml b/pom.xml
@@ -1005,33 +1005,11 @@
                             <exclude>tools/ngui/static/bootstrap/*</exclude>
                             <exclude>tools/ngui/static/js/lib/*</exclude>
                             <exclude>tools/transifex/.tx/config</exclude>
-                            <exclude>ui/legacy/css/src/scss/components/token-input-facebook.scss</exclude>
-                            <exclude>ui/l10n/*</exclude>
-                            <exclude>ui/legacy/lib/flot/jquery.colorhelpers.js</exclude>
-                            <exclude>ui/legacy/lib/flot/jquery.flot.crosshair.js</exclude>
-                            <exclude>ui/legacy/lib/flot/jquery.flot.fillbetween.js</exclude>
-                            <exclude>ui/legacy/lib/flot/jquery.flot.image.js</exclude>
-                            <exclude>ui/legacy/lib/flot/jquery.flot.js</exclude>
-                            <exclude>ui/legacy/lib/flot/jquery.flot.navigate.js</exclude>
-                            <exclude>ui/legacy/lib/flot/jquery.flot.pie.js</exclude>
-                            <exclude>ui/legacy/lib/flot/jquery.flot.resize.js</exclude>
-                            <exclude>ui/legacy/lib/flot/jquery.flot.selection.js</exclude>
-                            <exclude>ui/legacy/lib/flot/jquery.flot.stack.js</exclude>
-                            <exclude>ui/legacy/lib/flot/jquery.flot.symbol.js</exclude>
-                            <exclude>ui/legacy/lib/flot/jquery.flot.threshold.js</exclude>
-                            <exclude>ui/legacy/lib/jquery-ui/css/jquery-ui.css</exclude>
-                            <exclude>ui/legacy/lib/jquery-ui/index.html</exclude>
-                            <exclude>ui/legacy/lib/jquery-ui/js/jquery-ui.js</exclude>
-                            <exclude>ui/legacy/lib/jquery.cookies.js</exclude>
-                            <exclude>ui/legacy/lib/jquery.easing.js</exclude>
-                            <exclude>ui/legacy/lib/jquery.js</exclude>
-                            <exclude>ui/legacy/lib/jquery.md5.js</exclude>
-                            <exclude>ui/legacy/lib/jquery.validate.js</exclude>
-                            <exclude>ui/legacy/lib/jquery.tokeninput.js</exclude>
-                            <exclude>ui/legacy/lib/qunit/qunit.css</exclude>
-                            <exclude>ui/legacy/lib/qunit/qunit.js</exclude>
-                            <exclude>ui/legacy/lib/reset.css</exclude>
-                            <exclude>ui/legacy/lib/require.js</exclude>
+                            <exclude>ui/.*</exclude>
+                            <exclude>ui/.*/**</exclude>
+                            <exclude>ui/src/assets/**</exclude>
+                            <exclude>ui/public/**</exclude>
+                            <exclude>ui/legacy/**</exclude>
                             <exclude>utils/testsmallfileinactive</exclude>
                         </excludes>
                     </configuration>

diff --git a/tools/travis/install.sh b/tools/travis/install.sh
@@ -37,6 +37,9 @@ export JAVA_HOME=$(readlink -f /usr/lib/jvm/java-11-openjdk-amd64/bin/java | sed
 mvn -v
 
 if [ $TEST_SEQUENCE_NUMBER -eq 1 ]; then
+   # npm lint, test and build
+   cd ui && npm install && npm run lint && npm run test:unit && npm run build
+   cd $DIR
    # Pylint/pep8 systemvm python codebase
    cd systemvm/test && bash -x runtests.sh
    # Build noredist

diff --git a/ui/.babelrc b/ui/.babelrc
@@ -0,0 +1,7 @@
+{
+  "env": {
+    "test": {
+      "plugins": ["require-context-hook"]
+    }
+  }
+}
diff --git a/ui/.editorconfig b/ui/.editorconfig
@@ -0,0 +1,38 @@
+[*]
+charset=utf-8
+end_of_line=lf
+insert_final_newline=false
+indent_style=space
+indent_size=2
+
+[{*.ng,*.sht,*.html,*.shtm,*.shtml,*.htm}]
+indent_style=space
+indent_size=2
+
+[{*.jhm,*.xslt,*.xul,*.rng,*.xsl,*.xsd,*.ant,*.tld,*.fxml,*.jrxml,*.xml,*.jnlp,*.wsdl}]
+indent_style=space
+indent_size=2
+
+[{.babelrc,.stylelintrc,jest.config,.eslintrc,.prettierrc,*.json,*.jsb3,*.jsb2,*.bowerrc}]
+indent_style=space
+indent_size=2
+
+[*.svg]
+indent_style=space
+indent_size=2
+
+[*.js.map]
+indent_style=space
+indent_size=2
+
+[*.less]
+indent_style=space
+indent_size=2
+
+[*.vue]
+indent_style=space
+indent_size=2
+
+[{.analysis_options,*.yml,*.yaml}]
+indent_style=space
+indent_size=2
diff --git a/ui/.env.local.example b/ui/.env.local.example
@@ -0,0 +1 @@
+CS_URL=http://localhost:8080
diff --git a/ui/.env.local.https.example b/ui/.env.local.https.example
@@ -0,0 +1,7 @@
+CS_URL=http://localhost:8080
+PUBLIC_HOST=primate.example.com
+HTTPS_CERT=/etc/ssl/certs/primate.example.com.pem
+HTTPS_KEY=/etc/ssl/private/primate.example.com.key
+HTTPS_CA=/etc/ssl/certs/ca.pem
+HTTPS_DHPARAM=/etc/ssl/keys/dh2048.pem
+ALLOWED_HOSTS=["primate.example.com","cloud.example.com"]
diff --git a/ui/.env.primate-qa b/ui/.env.primate-qa
@@ -0,0 +1 @@
+CS_URL=http://primate-qa.cloudstack.cloud:8080
diff --git a/ui/.gitattributes b/ui/.gitattributes
@@ -0,0 +1 @@
+public/* linguist-vendored
diff --git a/ui/.gitignore b/ui/.gitignore
@@ -0,0 +1,39 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+
+.DS_Store
+node_modules
+coverage
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*
diff --git a/ui/.prettierrc b/ui/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "printWidth": 120,
+  "semi": false,
+  "singleQuote": true
+}
diff --git a/ui/CONTRIBUTING.md b/ui/CONTRIBUTING.md
@@ -0,0 +1,125 @@
+# Contributing to CloudStack UI
+
+## Summary
+
+This document covers how to contribute to the UI project. It uses Github PRs to manage code contributions.
+These instructions assume you have a GitHub.com account, so if you don't have one you will have to create one.
+Your proposed code changes will be published to your own fork of the project and you will submit a Pull Request for your changes to be added.
+
+Please refer to project [docs](docs) for reference on standard way of component
+configuration, development, usage, extension and testing.
+
+*Lets get started!!!*
+
+### Bug fixes
+
+It's very important that we can easily track bug fix commits, so their hashes should remain the same in all branches.
+Therefore, a pull request (PR) that fixes a bug, should be sent against a release branch.
+This can be either the "current release" or the "previous release", depending on which ones are maintained.
+Since the goal is a stable master, bug fixes should be "merged forward" to the next branch in order: "previous release" -> "current release" -> master (in other words: old to new)
+
+### New features
+
+Development should be done in a feature branch, branched off of master.
+Send a PR (steps below) to get it into master (at least 2x LGTM applies).
+PR will only be merged when master is open, will be held otherwise until master is open again.
+No back porting / cherry-picking features to existing branches!
+
+## Forking
+
+In your browser, navigate to: [https://github.com/apache/cloudstack](https://github.com/apache/cloudstack)
+
+Fork the repository by clicking on the 'Fork' button on the top right hand side.
+The fork will happen and you will be taken to your own fork of the repository.
+Copy the Git repository URL by clicking on the clipboard next to the URL on the right hand side of the page under '**HTTPS** clone URL'.  You will paste this URL when doing the following `git clone` command.
+
+On your workstation, follow these steps to setup a local repository for working on UI:
+
+``` bash
+$ git clone https://github.com/YOUR_ACCOUNT/cloudstack.git
+$ cd cloudstack/ui
+$ git remote add upstream https://github.com/apache/cloudstack.git
+$ git checkout master
+$ git fetch upstream
+$ git rebase upstream/master
+```
+
+## Making changes
+
+
+It is important that you create a new branch to make changes on and that you do not change the `master` branch (other than to rebase in changes from `upstream/master`). In this example I will assume you will be making your changes to a branch called `feature_x`.
+This `feature_x` branch will be created on your local repository and will be pushed to your forked repository on GitHub. Once this branch is on your fork you will create a Pull Request for the changes to be added to the UI project.
+
+It is best practice to create a new branch each time you want to contribute to the project and only track the changes for that pull request in this branch.
+
+``` bash
+$ git checkout -b feature_x
+   (make your changes)
+$ git status
+$ git add .
+$ git commit -a -m "descriptive commit message for your changes"
+```
+
+> The `-b` specifies that you want to create a new branch called `feature_x`.  You only specify `-b` the first time you checkout because you are creating a new branch.  Once the `feature_x` branch exists, you can later switch to it with only `git checkout feature_x`.
+
+
+### Updating your branch
+
+It is important that you maintain an up-to-date `master` branch in your local repository. You may do this by either rebasing against the upstream repository or merging the upstream branch.
+For example:
+
+1. Checkout your local `master` branch
+2. Synchronize your local `master` branch with the `upstream/master` so you have all the latest changes from the project
+3. Merge or Rebase the latest project code into your `feature_x` branch so it is up-to-date with the upstream code
+
+``` bash
+$ git checkout master
+$ git fetch upstream
+$ git rebase upstream/master
+$ git checkout feature_x
+$ git merge master
+```
+
+> Now your `feature_x` branch is up-to-date with all the code in `upstream/master`.
+
+
+## Sending a Pull Request
+
+When you are happy with your changes and you are ready to contribute them, you will create a Pull Request on GitHub to do so.
+This is done by pushing your local changes to your forked repository (default remote name is `origin`) and then initiating a pull request on GitHub.
+
+Please include relevant issue ids, links, detailed information about the bug/feature, what all tests are executed, how the reviewer can test this feature etc. A screenshot is preferred.
+
+> **IMPORTANT:** Make sure you have rebased your `feature_x` branch to include the latest code from `upstream/master` _before_ you do this.
+
+``` bash
+$ git push origin master
+$ git push origin feature_x
+```
+
+Now that the `feature_x` branch has been pushed to your GitHub repository, you can initiate the pull request.
+
+To initiate the pull request, do the following:
+
+1. In your browser, navigate to your forked repository: [https://github.com/YOUR_ACCOUNT/cloudstack](https://github.com/YOUR_ACCOUNT/cloudstack)
+2. Click the new button called '**Compare & pull request**' that showed up just above the main area in your forked repository
+3. Validate the pull request will be into the upstream `master` and will be from your `feature_x` branch
+4. Enter a detailed description of the work you have done and then click '**Send pull request**'
+
+If you are requested to make modifications to your proposed changes, make the changes locally on your `feature_x` branch, re-push the `feature_x` branch to your fork.  The existing pull request should automatically pick up the change and update accordingly.
+
+
+Cleaning up after a successful pull request
+-------------------------------------------
+
+Once the `feature_x` branch has been committed into the `upstream/master` branch, your local `feature_x` branch and the `origin/feature_x` branch are no longer needed.  If you want to make additional changes, restart the process with a new branch.
+
+> **IMPORTANT:** Make sure that your changes are in `upstream/master` before you delete your `feature_x` and `origin/feature_x` branches!
+
+You can delete these deprecated branches with the following:
+
+``` bash
+$ git checkout master
+$ git branch -D feature_x
+$ git push origin :feature_x
+``
diff --git a/ui/Dockerfile b/ui/Dockerfile
@@ -0,0 +1,48 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+
+# Build example: docker build -t <name> .
+
+FROM node:lts-stretch AS build
+
+MAINTAINER "Apache CloudStack" <dev@cloudstack.apache.org>
+LABEL Description="Apache CloudStack UI; Modern role-base progressive UI for Apache CloudStack"
+LABEL Vendor="Apache.org"
+LABEL License=ApacheV2
+LABEL Version=0.5.0
+
+WORKDIR /build
+
+RUN apt-get -y update && apt-get -y upgrade
+
+COPY . /build/
+RUN npm install
+RUN npm run build
+
+FROM nginx:alpine AS runtime
+
+LABEL org.opencontainers.image.title="Apache CloudStack UI" \
+	org.opencontainers.image.description="A modern role-based progressive CloudStack UI" \
+	org.opencontainers.image.authors="Apache CloudStack Contributors" \
+	org.opencontainers.image.url="https://github.com/apache/cloudstack" \
+	org.opencontainers.image.documentation="https://github.com/apache/cloudstack/blob/master/ui/README.md" \
+	org.opencontainers.image.source="https://github.com/apache/cloudstack" \
+	org.opencontainers.image.vendor="The Apache Software Foundation" \
+	org.opencontainers.image.licenses="Apache-2.0" \
+	org.opencontainers.image.ref.name="latest"
+
+COPY --from=build /build/dist/. /usr/share/nginx/html/