Electron update (#4811)

* Add supprot for no authentication

* Electron WIP

* Electron app WIP

* Add packaging

* Wait for backend to start

* Non-functional tidy ups

* Move desktop theme into desktop-extentions
- see run.sh for some enable/disable shinanigans

* Disable auto-log out when there's no auth
- need to tidy up how 'no auth' is determined

* Add Local flag

* Remove jetstream binary

* Allow SessionExpiry to be customised

* Add SESSION_STORE_EXPIRY customisation

* Re-enable loggin service
- should now be a no-op for no auth scenario (session never expires)

* Logging change

* Disable edit of local endpoints
- all the infomation is dynamically created

* Add local endpoint indication

* Allow packages to only supply routing module

* Split out profile settings into it's own component

* Add back in dark mode

* Add desktop settings page accessible via menu

* Fix SESSION_STORE_EXPIRY

* Add icon

* Add correct icon

* Add blank login page

* Add basic snackbar integration
- Send OS notification instead of snackbar (only covers snackbar service, not all snackbar ref uses)
- brings in ngx-electron to get easy isElectron test and access to ipcRenderer
- ignores 'return' type used to navigate to area of app

* Add a 'install' nav item into desktop-extensions
- this can be split out into a separate package

* Tweaks

* Tweak endpoint card

* Remove unused loadsh

* A fwe tweaks. Better about page

* Add file watch

* Add auto-update support

* Bug fixes for cf

* Only listen for endpointsChanged when running with eletron

* Mirror CF Disconnect/Unregister in config

* Add warning when disconnecting/unregistering local endpoints

* Improve look of DMG

* Tweak alert badge. Remove copyright icon

* Remove info logging that was debug

* Tweaks

* Persist last location, start from location

* Fix path

* Minor tweaks

* Tweaks

* Fix lint issues

* Fix compilation issues

* Fix backend test compilation

* Fix front-end unit tests

* Add test coverage file

* Fix build issue

* Fix merge issue

* Fix backend unit tests

* Fix setting bug and read version from file

* Exclude desktop extension by default

* More improvements

* Improvements for initial checkout

* Tweak to clean checkout experience

* Tidy up

* Bump version number to 4.4.0

* Fix bug that broke id on user menu button

* Fixes following merge

* Fix deploy app snack bar

* Ensure backend plugin is included

* Add kube desktop support

* Fix unit tests

* Fix backend build issue

* A few minor fixes

* Fix issue reading version file

Co-authored-by: Richard Cox <[email protected]>

.gitignore

@@ -91,12 +91,13 @@ build/dev_config.json
 e2e-reports/
 .stratos-git-metadata.json
 src/jetstream/jetstream
-src/jetstream/console-database.db
+console-database.db
 src/jetstream/config.properties
 src/jetstream/db/dbconf.yml
 src/jetstream/plugins/monocular/chart-repo/chartrepo
 src/jetstream/plugins/analysis/container/analyzers
 src/jetstream/.helm-cache
+src/jetstream/coverage.txt
 
 # Automatically generated OpenAPI docs
 src/jetstream/docs/
@@ -139,3 +140,11 @@ website/versions.json
 website/versions-repo
 
 /scan_tmp
+
+# Desktop app using Electron
+/electron/dist
+/electron/node_modules
+/electron/out
+/electron/dev-ssl
+/electron/jetstream
+/electron/version

angular.json

@@ -73,7 +73,23 @@
                 "replace": "src/frontend/packages/core/src/environments/environment.ts",
                 "with": "src/frontend/packages/core/src/environments/environment.prod.ts"
               }]
+            },
+            "desktop": {
+              "optimization": false,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": false,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": false,
+              "fileReplacements": [{
+                "replace": "src/frontend/packages/core/src/environments/environment.ts",
+                "with": "src/frontend/packages/core/src/environments/environment.desktop.ts"
+              }]
             }
+
           }
         },
         "serve": {
@@ -89,6 +105,9 @@
           "configurations": {
             "production": {
               "browserTarget": "stratos:build:production"
+            },
+            "desktop": {
+              "browserTarget": "stratos:build:desktop"
             }
           }
         },

electron/README.md

@@ -0,0 +1,27 @@
+# Stratos Desktop
+
+From the top-level Stratos folder:
+
+- Install dependencies with `npm install`
+- Change to the `electron folder` with `cd electron`
+- Install dependencies for the electron UI with `npm install`
+- Run the Electron app with `./run.sh all`
+
+> Note this builds both the frontend and backend and run the app
+
+- To build only the front end before running, use `./run.sh fe`
+- To build only the back end before running, use `./run.sh be`
+- To run without building either the the back end or front end, use `./run.sh`
+
+
+You can also run the UI with `ng serve` from the top-level folder and then start electron with:
+
+`./run.sh dev`
+
+to load the UI from `https://127.0.0.1:4200`
+
+# Packaging
+
+Packaging as a DMG file for Mac:
+
+`./package.sh all`

electron/about.html

@@ -0,0 +1,76 @@
+<html>
+<body>
+  <head>
+    <style>
+      body {
+        font-family: "Lato", "Helvetica", "Arial";
+        margin: 0;
+      }
+      .about {
+        padding: 10px;
+        text-align: right;
+      }
+      .panel {
+        align-items: center;
+        color: white;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        margin: 10px;
+      }
+      .title {
+        align-items: center;
+        display: flex;
+        font-family: "Lato", "Helvetica", "Arial";
+      }
+      img {
+        height: 64px;
+        width: 64px;
+      }
+      h1 {
+        margin: 0;
+        padding-left: 10px;
+      }
+      h2 {
+        font-size: 16px;
+        margin-top: 20px;
+        text-align: center;
+      }
+      P {
+        margin-top: 40px;
+      }
+      button {
+        position: absolute;
+        right: 10px;
+        bottom: 10px;
+      }
+    </style>
+  </head>
+</body>
+<div class="about">
+  <div class="panel">
+    <div class="title">
+      <img src="logo.png" />
+      <h1>STRATOS</h1>
+    </div>
+    <div>
+      <h2>Version: <span id="version"></span></h2>
+      <p>Lovingly designed & created in Bristol</p>
+    </div>
+  </div>
+  <button id="cancel-btn">Close</button>
+</div>
+<script>
+  const electron = require('electron');
+  const remote = electron.remote;
+  document.getElementById("cancel-btn").addEventListener("click", function (e) {
+    var window = remote.getCurrentWindow();
+    window.close();
+  });
+
+  // Set version number
+  const version = remote.getCurrentWindow().stratosVersion || 'dev';
+  const elm = document.getElementById('version');
+  elm.innerText = version;
+</script> 
+</html>

electron/build.sh

@@ -0,0 +1,66 @@
+#!/usr/bin/env bash
+
+# Script folder
+DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null && pwd )"
+STRATOS="`cd "${DIR}/..";pwd`"
+
+BUILD_FRONTEND=false
+BUILD_BACKEND=false
+ARGS=""
+
+if [ "$1" == "fe" ]; then
+  BUILD_FRONTEND=true
+  shift
+elif [ "$1" == "be" ]; then
+  BUILD_BACKEND=true
+  shift
+elif [ "$1" == "all" ]; then
+  BUILD_FRONTEND=true
+  BUILD_BACKEND=true
+  shift
+fi
+
+if [ "$1" == "dev" ]; then
+  ARGS="dev"
+fi
+
+pushd ${DIR} > /dev/null
+# Checks for fresh run on checkout
+if [ ! -d "./node_modules" ]; then
+  echo "Installing node modules ..."
+  npm install
+fi
+popd > /dev/null
+
+pushd ${STRATOS} > /dev/null
+
+cat ./package.json | jq -r .version > ${DIR}/version
+
+if [ ! -d "./node_modules" ]; then
+  echo "Installing node modules in top-level folder ..."
+  npm install
+fi
+
+if [ "$1" != "be" ] && [ ! -d "./dist" ]; then
+  BUILD_FRONTEND=true
+  echo "Frontend has not been built - will build"
+fi
+
+if [ ! -f "./src/jetstream/jetstream" ]; then
+  BUILD_BACKEND=true
+  echo "Backend has not been built - will build"
+fi
+
+if [ "$BUILD_FRONTEND" == "true" ]; then
+  # Ensure the desktop-extendsions are included
+  STRATOS_YAML=./electron/stratos.yaml ng build --configuration=desktop
+fi
+if [ "$BUILD_BACKEND" == "true" ]; then
+  # Ensure we include the desktop backend plugin
+  STRATOS_YAML=./electron/stratos.yaml npm run prepare-backend
+  npm run build-backend
+fi
+cp ./src/jetstream/jetstream ./electron
+cp -R ${STRATOS}/dist ${DIR}
+cp -R ${STRATOS}/dev-ssl ${DIR}
+popd > /dev/null

electron/config.properties

@@ -0,0 +1,71 @@
+# Database connectivity environment variables
+DATABASE_PROVIDER=sqlite
+HTTP_CONNECTION_TIMEOUT_IN_SECS=10
+HTTP_CLIENT_TIMEOUT_IN_SECS=30
+HTTP_CLIENT_TIMEOUT_MUTATING_IN_SECS=120
+HTTP_CLIENT_TIMEOUT_LONGRUNNING_IN_SECS=600
+SKIP_SSL_VALIDATION=true
+CONSOLE_PROXY_TLS_ADDRESS=:5443
+CONSOLE_CLIENT=console
+CF_CLIENT=cf
+UAA_ENDPOINT=
+CONSOLE_ADMIN_SCOPE=stratos.admin
+CF_ADMIN_ROLE=cloud_controller.admin
+ALLOWED_ORIGINS=http://nginx
+SESSION_STORE_SECRET=wheeee!
+CONSOLE_PROXY_CERT_PATH=./dev-ssl/server.crt
+CONSOLE_PROXY_CERT_KEY_PATH=./dev-ssl/server.key
+ENCRYPTION_KEY=B374A26A71490437AA024E4FADD5B497FDFF1A8EA6FF12F6FB65AF2720B59CCF
+#VCAP_APPLICATION={"cf_api": "https://api.10.4.21.240.nip.io:8443"}
+# Keep the sql lite database file
+SQLITE_KEEP_DB=true
+
+# UI code in the parent folder
+UI_PATH=./dist
+
+LOG_TO_JSON=false
+LOG_API_REQUESTS=true
+
+SSO_LOGIN=false
+# Whitelist for the SSO redirect url. Paths can contain wildcard `*`
+SSO_WHITELIST=
+
+# Enable feature in tech preview
+ENABLE_TECH_PREVIEW=true
+# Override the default max list size. When hit we won't fetch all results for the given list
+#UI_LIST_MAX_SIZE=600
+# If the max list size is hit allow the user to load all results anyway. Defaults to false
+#UI_LIST_ALLOW_LOAD_MAXED=false
+
+# User Invites
+SMTP_FROM_ADDRESS=Stratos<[email protected]>
+SMTP_HOST=127.0.0.1
+SMTP_PASSWORD=
+SMTP_PORT=1025
+SMTP_USER=
+TEMPLATE_DIR=./templates
+INVITE_USER_CLIENT_ID=
+INVITE_USER_CLIENT_SECRET=
+
+# Use local admin user rather than UAA users
+AUTH_ENDPOINT_TYPE=none
+LOCAL_USER=admin
+LOCAL_USER_PASSWORD=admin
+LOCAL_USER_SCOPE=stratos.admin
+
+# MariaDB database for local dev
+# DATABASE_PROVIDER=mysql
+# DB_HOST=127.0.0.1
+# DB_PORT=3306
+# DB_USER=stratos
+# DB_PASSWORD=strat0s
+# DB_DATABASE_NAME=stratosdb
+
+# Postgresql database for local dev
+# DATABASE_PROVIDER=pgsql
+# DB_HOST=127.0.0.1
+# DB_PORT=5432
+# DB_USER=stratos
+# DB_PASSWORD=strat0s
+# DB_DATABASE_NAME=stratosdb
+# DB_SSL_MODE=disable

electron/electron-store.js

@@ -0,0 +1,48 @@
+// const electron = require('electron');
+const path = require('path');
+const fs = require('fs');
+const homeDir = require('os').homedir();
+
+class ElectronStore {
+  constructor(opts) {
+    // Renderer process has to get `app` module via `remote`, whereas the main process can get it directly
+    // app.getPath('userData') will return a string of the user's app data directory path.
+    // Causes `EISDIR: illegal operation on a directory, open '/Users/<user>/Library/Application Support/Stratos/settings.json'`
+    // this.path = (electron.app || electron.remote.app).getPath('userData');
+    this.path = path.join(homeDir, '.config', 'stratos');
+
+    // We'll use the `configName` property to set the file name and path.join to bring it all together as a string
+    this.filePath = path.join(this.path, opts.configName + '.json');
+
+    this.data = parseDataFile(this.filePath, opts.defaults);
+  }
+
+  // This will just return the property on the `data` object
+  get(key) {
+    return this.data[key];
+  }
+
+  // ...and this will set it
+  set(key, val) {
+    this.data[key] = val;
+    // Wait, I thought using the node.js' synchronous APIs was bad form?
+    // We're not writing a server so there's not nearly the same IO demand on the process
+    // Also if we used an async API and our app was quit before the asynchronous write had a chance to complete,
+    // we might lose that data. Note that in a real app, we would try/catch this.
+    fs.writeFileSync(this.filePath, JSON.stringify(this.data));
+  }
+}
+
+function parseDataFile(filePath, defaults) {
+  // We'll try/catch it in case the file doesn't exist yet, which will be the case on the first application run.
+  // `fs.readFileSync` will return a JSON string which we then parse into a Javascript object
+  try {
+    return JSON.parse(fs.readFileSync(filePath));
+  } catch (error) {
+    // if there was some kind of error, return the passed in defaults instead.
+    return defaults;
+  }
+}
+
+// expose the class
+module.exports = ElectronStore;