New user interface and features. (GoogleCloudPlatform#287)

* New user interface and features.

* ignore node modules and  others

* create a copy of web package and name it webv2
add a new flag 'webv2' to launch apis from the new package

* session management, summary, code organization

* add file path variable

* add new ui codes

* Squashed commit of the following changes:
-Instruction display change to sidenav
-remove test values from forms
-Added spanner config link in session-listing

* update gitignore and remove static content hosting of old ui

Includes
* remove config file and add to gitignore
* remove hosting of static frontend directory (old ui)

Co-authored-by: lyazii22 <[email protected]>

* Dev schema assistant v2 (GoogleCloudPlatform#50)

* update column and field  CreatedOn to CreateTimestamp
* update column header Created On to Created At

* Dev schema assistant v2 (GoogleCloudPlatform#51)

* remove console.log and commented code

Co-authored-by: lyazii22 <[email protected]>

* Dev schema assistant v2 (GoogleCloudPlatform#52)

Summary empty messages added

* Dev schema assistant v2 (GoogleCloudPlatform#53)

* copyright year update
* update flag in readme
* correct spelling
* warning msg update
* remove commented code

Co-authored-by: lyazii22 <[email protected]>

* spelling correction, warning message update and remove
unused imports

* show ellipsis button only when the notes exceeds certain length 

* show ellipsis button only when the notes exceeds certain length

* Readme update (GoogleCloudPlatform#55)

* update readme

* Includes changes
-Rules input clear and sidenav close on adding rule
-remove 'change one table data type' rule option
-Sidenav rules input validation

* -session file name update
-link name dismiss to close
-show readable error message on save session exception

* Object explorer style update (GoogleCloudPlatform#56)

Object explorer style update

Co-authored-by: lyazii22 <[email protected]>

* Code review feedback implementation

* Drop button Object detail made sticky
Add index style

* Squashed commit of the following:
Index count updated on adding index
Style update

* code review feedback implementation -
remove unused imports
correct interface names
correct alert message text

* code review feedback implementation
update save session ui design

* Squashed commit of the following:
UI update - spanner setting
snackbar duration added

* index ui update

* drop index dialog box

* fix snackbar issue

* file name issue with new session

* show server error msg

* remove unused properties and import, add comment

* code review feedback implementation

* make database name dynamic in obj explorer

* code review feedback implement

* fix comments, add copyright, update validation

* Err msg update, unused imports removed

* Code review feedback implement

* code review comment implement

* general issue fix, code refactoring,
code review feedback implement.

* add character counter and
remove db name placeholder

* update create database message

* rename file, remove commented code, update test values

* rename model files and update the imports

* rename file

* Delete Conv.ts

* Delete Rule.ts

* Delete Session.ts

* Delete Summary.ts

Co-authored-by: lyazii22 <[email protected]>

Author: anupam-searce

.gitignore

@@ -3,4 +3,12 @@ main
 web/harbour_bridge_output/
 harbour_bridge_output/
 *__debug_bin*
-*.code-workspace
+*.code-workspace
+
+# angular ui development
+ui/.angular
+ui/dist
+ui/node_modules
+
+# webv2 config
+webv2/config.json

.vscode/launch.json

@@ -16,6 +16,26 @@
                 "-v=true",
                 "-dump-file="
             ]
+        },
+        {
+            "name": "webv1",
+            "type": "go",
+            "request": "launch",
+            "mode": "debug",
+            "program": "${workspaceRoot}/main.go",
+            "args": [
+                "-web",
+            ]
+        },
+        {
+            "name": "webv2",
+            "type": "go",
+            "request": "launch",
+            "mode": "debug",
+            "program": "${workspaceRoot}/main.go",
+            "args": [
+                "-webv2",
+            ]
         }
     ]
 }

frontend/js/services/Action.service.js

@@ -335,7 +335,7 @@ const Actions = (() => {
                 let result = await res.json();
                 Store.setGlobalDataTypeList(result)
             } else {
-                showSnackbar('Not able to fetch global datatype list !')
+                showSnackbar('Unable to fetch global datatype list !')
             }
         },
 

main.go

@@ -35,6 +35,7 @@ import (
 	"github.com/cloudspannerecosystem/harbourbridge/common/utils"
 	"github.com/cloudspannerecosystem/harbourbridge/internal"
 	"github.com/cloudspannerecosystem/harbourbridge/web"
+	"github.com/cloudspannerecosystem/harbourbridge/webv2"
 	"github.com/google/subcommands"
 )
 
@@ -50,6 +51,7 @@ var (
 	skipForeignKeys  bool
 	sessionJSON      string
 	webapi           bool
+	webapiv2         bool
 	dumpFilePath     string
 	targetDb         = constants.TargetSpanner
 )
@@ -67,6 +69,7 @@ func setupGlobalFlags() {
 	flag.BoolVar(&skipForeignKeys, "skip-foreign-keys", false, "skip-foreign-keys: if true, skip creating foreign keys after data migration is complete (ddl statements for foreign keys can still be found in the downloaded schema.ddl.txt file and the same can be applied separately)")
 	flag.StringVar(&sessionJSON, "session", "", "session: specifies the file we restore session state from (used in data-only to provide schema and data mapping)")
 	flag.BoolVar(&webapi, "web", false, "web: run the web interface (experimental)")
+	flag.BoolVar(&webapiv2, "webv2", false, "web: run the web interface (experimental)")
 	flag.StringVar(&dumpFilePath, "dump-file", "", "dump-file: location of dump file to process")
 	flag.StringVar(&targetDb, "target-db", constants.TargetSpanner, "target-db: Specifies the target DB. Defaults to spanner")
 }
@@ -127,6 +130,12 @@ func main() {
 		return
 	}
 
+	// Note: the web interface does not use any commandline flags.
+	if webapiv2 {
+		webv2.App()
+		return
+	}
+
 	if didSetVerboseTwice() {
 		panic(fmt.Errorf("cannot set both -v and -verbose flags"))
 	}

ui/.browserslistrc

@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR

ui/.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

ui/.gitignore

@@ -0,0 +1,42 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db

ui/.prettierrc

@@ -0,0 +1,8 @@
+{
+    "tabWidth": 2,
+    "useTabs": false,
+    "semi": false,
+    "singleQuote": true,
+    "printWidth": 100,
+    "arrayExpand": true
+}

ui/README.md

@@ -0,0 +1,27 @@
+# Ui
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.2.3.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

ui/angular.json

@@ -0,0 +1,116 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "cli": {
+    "analytics": false
+  },
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "ui": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        },
+        "@schematics/angular:application": {
+          "strict": true
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/ui",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "ui:build:production"
+            },
+            "development": {
+              "browserTarget": "ui:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "ui:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
+              "src/styles.scss"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "ui"
+}