[SCB-935] Saga transaction management console UI initial commit

saga-demo/saga-servicecomb-demo/docker-compose.yaml

@@ -36,6 +36,8 @@ services:
     hostname: alpha-server
     links:
       - "database:postgresql.servicecomb.io"
+    ports:
+      - "8090:8090"
     environment:
       - JAVA_OPTS=-Dspring.profiles.active=prd
     healthcheck:

saga-web/src/main/resources/saga-frontend/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 akveo.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, 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.

saga-web/src/main/resources/saga-frontend/README.md

@@ -0,0 +1,32 @@
+# Saga Web UI -  A Transaction viewer dashboard
+This project is using [ngx-admin](https://github.com/akveo/ngx-admin), [here you can find documentation and other useful articles](https://akveo.github.io/nebular/docs/getting-started/what-is-nebular).
+
+### How to run the UI
+To install saga-frontend on your machine you need to have the following tools installed:
+
+- Git - https://git-scm.com
+- Node.js - https://nodejs.org. Please note the version should be >=8
+- Npm - Node.js package manager, comes with Node.js. Please make sure npm version is >=5
+- You might also need some specific native packages depending on your operating system like build-essential on Ubuntu
+- Clone the repository
+
+```
+git clone https://github.com/apache/servicecomb-pack
+```  
+
+- Navigate to the frontend folder  
+
+```
+cd servicecomb-pack/saga-web/src/main/resources/saga-frontend && npm i
+```  
+- To run a local copy
+```
+npm start  
+```  
+Go to http://0.0.0.0:4200 or http://localhost:4200 in your browser.  
+- To create a bundle in production mode
+```
+npm run build:prod
+```  
+This will clear up your **dist** folder (where release files are located) and generate a release build. Now you can copy the sources from the **dist** folder and simply put it under the **static** folder or under a web server.
+

saga-web/src/main/resources/saga-frontend/angular.json

@@ -0,0 +1,94 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "saga-frontend": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "preserveSymlinks": true,
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "polyfills": "src/polyfills.ts",
+            "assets": [
+              "src/assets",
+              "src/favicon.ico",
+              "src/favicon.png"
+            ],
+            "styles": [
+              "node_modules/bootstrap/dist/css/bootstrap.css",
+              "node_modules/typeface-exo/index.css",
+              "node_modules/roboto-fontface/css/roboto/roboto-fontface.css",
+              "node_modules/ionicons/scss/ionicons.scss",
+              "node_modules/@fortawesome/fontawesome-free/css/all.css",
+              "node_modules/socicon/css/socicon.css",
+              "node_modules/nebular-icons/scss/nebular-icons.scss",
+              "node_modules/angular-tree-component/dist/angular-tree-component.css",
+              "node_modules/pace-js/templates/pace-theme-flash.tmpl.css",
+              "src/app/@theme/styles/styles.scss"
+            ],
+            "scripts": [
+              "node_modules/pace-js/pace.min.js",
+              "node_modules/echarts/dist/echarts.min.js",
+              "node_modules/echarts/dist/extension/bmap.min.js",
+              "node_modules/chart.js/dist/Chart.min.js"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "saga-frontend:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "saga-frontend:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "saga-frontend:build"
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "saga-frontend",
+  "schematics": {
+    "@schematics/angular:component": {
+      "prefix": "ngx",
+      "styleext": "scss"
+    },
+    "@schematics/angular:directive": {
+      "prefix": "ngx"
+    }
+  }
+}

saga-web/src/main/resources/saga-frontend/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "saga-frontend",
+  "version": "0.2.0",
+  "license": "Apache 2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/apache/incubator-servicecomb-saga.git"
+  },
+  "bugs": {
+    "url": "https://github.com/apache/incubator-servicecomb-saga/issues"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "IE 11"
+  ],
+  "scripts": {
+    "ng": "ng",
+    "conventional-changelog": "conventional-changelog",
+    "start": "ng serve --port 5200",
+    "build": "ng build",
+    "build:prod": "npm run build -- --prod --aot",
+    "prepush": "npm run lint:ci",
+    "release:changelog": "npm run conventional-changelog -- -p angular -i CHANGELOG.md -s"
+  },
+  "dependencies": {
+    "@agm/core": "1.0.0-beta.2",
+    "@angular/animations": "6.0.0",
+    "@angular/common": "6.0.0",
+    "@angular/compiler": "6.0.0",
+    "@angular/core": "6.0.0",
+    "@angular/forms": "6.0.0",
+    "@angular/http": "6.0.0",
+    "@angular/platform-browser": "6.0.0",
+    "@angular/platform-browser-dynamic": "6.0.0",
+    "@angular/router": "6.0.0",
+    "@nebular/auth": "2.0.0-rc.10",
+    "@nebular/security": "2.0.0-rc.10",
+    "@nebular/theme": "2.0.0-rc.10",
+    "@ng-bootstrap/ng-bootstrap": "1.0.0",
+    "@swimlane/ngx-charts": "7.0.1",
+    "angular2-toaster": "6.0.0",
+    "bootstrap": "4.0.0",
+    "classlist.js": "1.1.20150312",
+    "core-js": "2.5.1",
+    "intl": "1.2.5",
+    "ionicons": "2.0.1",
+    "nebular-icons": "1.0.9",
+    "ng2-completer": "2.0.8",
+    "ng2-smart-table": "1.3.5",
+    "normalize.css": "6.0.0",
+    "pace-js": "1.0.2",
+    "roboto-fontface": "0.8.0",
+    "rxjs": "^6.1.0",
+    "rxjs-compat": "^6.1.0",
+    "socicon": "3.0.5",
+    "typeface-exo": "0.0.22",
+    "underscore": "^1.9.1",
+    "web-animations-js": "2.2.5",
+    "zone.js": "^0.8.26"
+  },
+  "devDependencies": {
+    "@angular/cli": "6.0.0",
+    "@angular/compiler-cli": "6.0.0",
+    "@angular/language-service": "6.0.0",
+    "@compodoc/compodoc": "1.0.1",
+    "@fortawesome/fontawesome-free": "^5.2.0",
+    "@types/d3-color": "1.0.5",
+    "@types/node": "6.0.90",
+    "codelyzer": "4.0.2",
+    "conventional-changelog-cli": "1.3.4",
+    "husky": "0.13.3",
+    "npm-run-all": "4.0.2",
+    "rimraf": "2.6.1",
+    "ts-node": "3.2.2",
+    "typescript": "2.7.2",
+    "@angular-devkit/build-angular": "~0.6.0"
+  }
+}

saga-web/src/main/resources/saga-frontend/src/app/@core/core.module.ts

@@ -0,0 +1,80 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NbAuthModule, NbDummyAuthStrategy } from '@nebular/auth';
+import { NbSecurityModule, NbRoleProvider } from '@nebular/security';
+import { of as observableOf } from 'rxjs';
+
+import { throwIfAlreadyLoaded } from './module-import-guard';
+import { DataModule } from './data/data.module';
+import { AnalyticsService } from './utils/analytics.service';
+import { UtilService } from './utils/util.service';
+
+
+export class NbSimpleRoleProvider extends NbRoleProvider {
+  getRole() {
+    // here you could provide any role based on any auth flow
+    return observableOf('guest');
+  }
+}
+
+export const NB_CORE_PROVIDERS = [
+  ...DataModule.forRoot().providers,
+  ...NbAuthModule.forRoot({
+
+    strategies: [
+      NbDummyAuthStrategy.setup({
+        name: 'email',
+        delay: 3000,
+      }),
+    ],
+  }).providers,
+
+  NbSecurityModule.forRoot({
+    accessControl: {
+      guest: {
+        view: '*',
+      },
+      user: {
+        parent: 'guest',
+        create: '*',
+        edit: '*',
+        remove: '*',
+      },
+    },
+  }).providers,
+
+  {
+    provide: NbRoleProvider, useClass: NbSimpleRoleProvider,
+  },
+  AnalyticsService,
+  UtilService,
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+  ],
+  exports: [
+    NbAuthModule,
+  ],
+  declarations: [],
+})
+export class CoreModule {
+  constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
+    throwIfAlreadyLoaded(parentModule, 'CoreModule');
+  }
+
+  static forRoot(): ModuleWithProviders {
+    return <ModuleWithProviders>{
+      ngModule: CoreModule,
+      providers: [
+        ...NB_CORE_PROVIDERS,
+      ],
+    };
+  }
+}

saga-web/src/main/resources/saga-frontend/src/app/@core/data/data.module.ts

@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+import { NgModule, ModuleWithProviders } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { SagaeventsService } from './saga-events.service';
+import { StateService } from './state.service';
+
+const SERVICES = [
+  SagaeventsService,
+  StateService,
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+  ],
+  providers: [
+    ...SERVICES,
+  ],
+})
+export class DataModule {
+  static forRoot(): ModuleWithProviders {
+    return <ModuleWithProviders>{
+      ngModule: DataModule,
+      providers: [
+        ...SERVICES,
+      ],
+    };
+  }
+}