Bringing in Vue to ServicePulse

.github/workflows/ci.yml

@@ -11,7 +11,7 @@ env:
 jobs:
   build:
     name: Windows
-    runs-on: windows-2019
+    runs-on: windows-2022
     steps:
       - name: Checkout
         uses: actions/checkout@v3.1.0
@@ -23,11 +23,14 @@ jobs:
           dotnet-version: 5.0.x
       - name: Add msbuild to PATH
         uses: microsoft/setup-msbuild@v1.0.2
-      - name: Install Host npm packages
+      - name: AngularJs - Install Host npm packages
         run: npm run load
-        working-directory: src/ServicePulse.Host
-      - name: Run lint
+        working-directory: src/ServicePulse.Host/angular
+      - name: AngularJs - Run lint
         run: npm run lint
+        working-directory: src/ServicePulse.Host/angular
+      - name: Build AngularJS and Vue.js
+        run: PowerShell -File .\build.ps1
         working-directory: src/ServicePulse.Host
       - name: Build
         run: msbuild src -p:Configuration=Release -restore -m

.github/workflows/release.yml

@@ -60,7 +60,7 @@ jobs:
             nugets/*
           retention-days: 1
       - name: Install Octopus CLI
-        uses: OctopusDeploy/install-octopus-cli-action@v1.2.0
+        uses: OctopusDeploy/install-octopus-cli-action@v1.2.1
         with:
           version: latest
       - name: Deploy

.gitignore

@@ -98,3 +98,9 @@ src/scaffolding.config
 
 # Visual Studio Code
 .vscode
+
+# Vue build output
+src/ServicePulse.Host/vue/dist/
+
+# Combined output for Vue and AngularJs 
+src/ServicePulse.Host/app/

README.md

@@ -7,19 +7,36 @@ Keep track of the health of your system's endpoints, monitor for any processing
 
 ## Setting up the project for development
 
-### Connecting to ServiceControl and ServiceControl Monitoring
+ServicePulse is in the proces of migrating from AngularJS to Vue.js, during which both frameworks are used to serv parts of the application. In development environment process AngularJS and Vue.js http servers are run side-by-side behind a reverse proxy. This enables accessing both applications from the same domain i.e. `localhost:1331` where uri prefixed with `/a/` are served by AngularJS and rest is handled by Vue.js. This mimics the production deployment where the Vue.js application is deployed in the main folder and AngularJS in `/a/` subfolders. 
 
-ServicePulse mostly presents data provided by [ServiceControl](http://github.com/Particular/ServiceControl). Endpoint metrics data is provided by [ServiceControl Monitoring](https://github.com/Particular/ServiceControl.Monitoring).
+```mermaid
+graph LR
+  subgraph ServiceControl
+    ScMonitoring
+    ScError
+  end
 
-The URLs for both services can be set in `ServicePulse.Host/app/js/app.constants.js` under the constant `scConfig`.
+  subgraph ServicePulse
+    AngularJs
+    VueJs
+  end
 
-#### URL ACL Reservation
+  Browser --> Nginx[Nginx<br>Reverse Proxy]
+  Nginx -- http://host.docker.internal:5174/a/ --> AngularJs[AngularJS<br> Development Server]
+  Nginx -- http://host.docker.internal:5173 --> VueJs[Vue.js<br> Development Server]
 
-ServicePulse depends on a self-hosted webserver. In order to start the project a URL ACL reservation needs to be setup. Either run Visual Studio with Administrative privileges or run the following command to add the required URL ACL reservation:
+  AngularJs --> ScMonitoring[Monitoring Instance]
+  AngularJs --> ScError[Main Instance]
 
+  VueJs --> ScMonitoring
+  VueJs --> ScError
 ```
-netsh http add urlacl url=http://+:8081/ user=Everyone
-```
+### Setting up ServiceControl Main and ServiceControl Monitoring instances
+
+ServicePulse mostly presents data provided by [ServiceControl](http://github.com/Particular/ServiceControl) and [ServiceControl Monitoring](https://github.com/Particular/ServiceControl.Monitoring) instances.
+
+The URLs for both services can be set in `ServicePulse.Host/vue/public/app/js/app.constants.js` under the constant `scConfig`.
+
 
 ### Setting up package manager
 
@@ -31,21 +48,48 @@ Install the following dependencies if you don't have them installed yet
 
  - [Node.js](https://nodejs.org/en/download/)
  - [Git for Windows](https://git-for-windows.github.io/)
+ - [Docker](https://docs.docker.com/get-docker/)
  - Chutzpah
    - [Test Adapter for the Test Explorer](https://marketplace.visualstudio.com/items?itemName=vs-publisher-2795.ChutzpahTestAdapterfortheTestExplorer)
    - [Test Runner Context Menu Extension](https://marketplace.visualstudio.com/items?itemName=vs-publisher-2795.ChutzpahTestRunnerContextMenuExtension)
 
-#### Set development environment
+### Set development environment
 
- - Open cmd window and navigate into `ServicePulse\src\ServicePulse.Host` path
- - run `npm install` to install all the npm dependencies
- - run the following command `npm run dev`. This script will use webpack configuration to finish ServicePulse's required configuration, start watching root folder for changes, and it will host a dev server on port 8080
+#### Step 1 - run Nginx reverse proxy
+
+Open a command window and navigate into `ServicePulse\src\ServicePulse.Host` path (NOTE: ensure using cmd, not PowerShell). Run `nginx` that is a reverse proxy for AngularJS and Vue.js applications:
+```cmd
+> docker run -it --rm -p 1331:1331 -v %cd%/nginx.conf:/etc/nginx/nginx.conf:ro --name service-pulse-dev nginx
+```
+#### Step 2 - run AngularJS development server 
+
+Navigate to `ServicePulse\src\ServicePulse.Host\angular` and:
+  - run `npm install` to install all the npm dependencies
+  - run the following command `npm run dev`. This will host a dev server on port 5174 and start watching for changes in `/angular` directory
 
+#### Step 3 - run Vue.js development server 
+
+Navigate to `ServicePulse\src\ServicePulse.Host\vue` and:
+  - run `npm install` to install all the npm dependencies
+  - run the following command `npm run dev`. This will host a dev server on port 5173 and start watching for changes in `/vue` directory
+
 In case `npm run dev` fails with an error related to git submodule not properly configured, run the `npm install` command again to ensure all required dependencies are available, and then run `npm run dev`.
 
-After doing the above steps one can open Visual Studio or your IDE of choice and continue working on this project. The site will be served for debugging at `http://localhost:8080`.
+#### Step 4 - open the browser
+
+After doing the above steps one can open `http://localhost:1331` to see ServicePulse application.
+
+### Provided npm scripts 
+
+#### Vue.js
+
+ - `dev` - runs `vite` that starts development server doing hot reload over source files
+ - `build` - runs build script that outputs files to `..\app` folder
+ - `lint` - checks with eslint all js files
+ - `preview` - runs `build` and starts static http server that enables smoketesting production build
+
+#### AngularJS
 
-#### Provided npm scripts
  - `test` - runs js tests in ServicePulse.Host.Test project
  - `setup` - this command runs few commands
  	- installs the npm packages
@@ -62,11 +106,33 @@ After doing the above steps one can open Visual Studio or your IDE of choice and
 NOTE:
 Webpack observes files and updates the artifacts whenever they are changed, however at the moment not every bit of code is processed by webpack. Only monitoring and configuration is.
 
-
 ### Configuring automated tests
 
 For information how to run automated tests please follow [ServicePulse.Host.Tests/Readme](https://github.com/Particular/ServicePulse/blob/master/src/ServicePulse.Host.Tests/README.md).
 
+## Running from ServicePulse.Host.exe
+
+It is possible to run ServicePulse directly via `ServicePulse.Host.exe`.
+
+### Step 1 - reserve URL ACL
+
+ServicePulse.Host.exe depends on a self-hosted webserver. In order to start the project a URL ACL reservation needs to be setup. Either run Visual Studio with Administrative privileges or run the following command to add the required URL ACL reservation:
+
+### Step 2 - build ServicePulse site 
+
+Execute build script from commandline:
+
+```cmd
+> PowerShell -File .\build.ps1
+```
+
+NOTE: It might be necessary to change PowerShell execution policy using `Set-ExecutionPolicy Unrestricted`
+
+### Step 3 - run `ServicePulse.Host.exe`
+
+In the Ide, Build and run `ServicePulse.Host` project.
+
+
 ## Supported browser versions
 
 ServicePulse is supported on the following desktop browser versions:

src/.gitignore

@@ -4,7 +4,7 @@ src/scaffolding.config
 *.received.*
 
 # npm artifacts
-ServicePulse.Host/node_modules
+**/node_modules
 ServicePulse.Host.Tests/node_modules
 package-lock.json	
 

src/ServicePulse.Host.Tests/Owin/StaticMiddlewareTests.cs

@@ -55,7 +55,7 @@ public async Task Should_handle_get_and_head(string method)
             {
                 Request =
                 {
-                    Path = new PathString("/js/app.js"),
+                    Path = new PathString("/a/js/app.js"),
                     Method = method
                 },
                 Response =
@@ -76,7 +76,7 @@ public async Task Should_find_file_embedded_in_assembly()
             {
                 Request =
                 {
-                    Path = new PathString("/NoIE.html"),
+                    Path = new PathString("/a/NoIE.html"),
                     Method = "GET"
                 },
                 Response =
@@ -98,7 +98,7 @@ public async Task Should_find_file_embedded_in_assembly_is_case_insensitive()
             {
                 Request =
                 {
-                    Path = new PathString("/nOie.html"),
+                    Path = new PathString("/a/nOie.html"),
                     Method = "GET"
                 },
                 Response =
@@ -121,7 +121,7 @@ public async Task Should_find_deep_linking_file_embedded_in_assembly()
             {
                 Request =
                 {
-                    Path = new PathString("/js/views/message/editor/messageEditorModal.controller.js"),
+                    Path = new PathString("/a/js/views/message/editor/messageEditorModal.controller.js"),
                     Method = "GET"
                 },
                 Response =

src/ServicePulse.Host.Tests/Owin/IndexUrlRewriterMiddlewareTests.cs → src/ServicePulse.Host.Tests/Owin/UrlRewriterMiddlewareTests.cs

@@ -6,12 +6,12 @@
     using ServicePulse.Host.Owin;
 
     [TestFixture]
-    public class IndexUrlRewriterMiddlewareTests
+    public class UrlRewriterMiddlewareTests
     {
         [Test]
         public async Task Should_rewrite_slash_url()
         {
-            var middleware = new IndexUrlRewriterMiddleware(new DummyNext());
+            var middleware = new UrlRewriterMiddleware(new DummyNext());
             var context = new OwinContext
             {
                 Request =
@@ -25,9 +25,25 @@ public async Task Should_rewrite_slash_url()
         }
 
         [Test]
-        public async Task Should_not_rewrite_other_urls()
+        public async Task Should_rewrite_angular_app_constants_js_url()
         {
-            var middleware = new IndexUrlRewriterMiddleware(new DummyNext());
+            var middleware = new UrlRewriterMiddleware(new DummyNext());
+            var context = new OwinContext
+            {
+                Request =
+                {
+                    Path = new PathString("/a/js/app.constants.js"),
+                    Method = "GET"
+                }
+            };
+            await middleware.Invoke(context);
+            Assert.AreEqual("/js/app.constants.js", context.Request.Path.Value);
+        }
+
+        [Test]
+        public async Task Should_rewrite_other_urls_to_vue_index()
+        {
+            var middleware = new UrlRewriterMiddleware(new DummyNext());
             var context = new OwinContext
             {
                 Request =
@@ -37,7 +53,7 @@ public async Task Should_not_rewrite_other_urls()
                 }
             };
             await middleware.Invoke(context);
-            Assert.AreEqual("/something", context.Request.Path.Value);
+            Assert.AreEqual("/index.html", context.Request.Path.Value);
         }
 
         public class DummyNext : OwinMiddleware

src/ServicePulse.Host.Tests/ServicePulse.Host.Tests.csproj

@@ -18,7 +18,7 @@
   </ItemGroup>
 
   <ItemGroup>
-    <Content Include="..\ServicePulse.Host\app\js\app.constants.js" CopyToOutputDirectory="PreserveNewest" />
+    <Content Include="..\ServicePulse.Host\vue\public\js\app.constants.js" CopyToOutputDirectory="PreserveNewest" />
   </ItemGroup>
 
   <ItemGroup>

src/ServicePulse.Host.Tests/karma.conf.js

@@ -1,8 +1,8 @@
 // karma.conf.js
-module.exports = function(config) {
+module.exports = function (config) {
     config.set({
         browsers: ['PhantomJS', 'PhantomJS_custom', 'Chrome'],
-        basePath: '../ServicePulse.Host/app',
+        basePath: '../ServicePulse.Host/angular/app',
         preprocessors: {
             '**/*.js': ['eslint']
         },
@@ -11,9 +11,9 @@ module.exports = function(config) {
         },
         files: [
             './modules/dist/shell.dist.js',
-            '../../ServicePulse.Host.Tests/tests/js/angular-mocks.js',
+            '../../../ServicePulse.Host.Tests/tests/js/angular-mocks.js',
             './js/**/*.html',
-            './js/app.constants.js',
+            '../../vue/public/js/app.constants.js',
             './modules/dist/configuration.dist.js',
             './js/app.js',
             './js/app.bootstrap.js',
@@ -24,7 +24,7 @@ module.exports = function(config) {
             './js/services/**/*.js',
             './js/views/**/*.js',
             './modules/dist/monitoring.dist.js',
-            '../../ServicePulse.Host.Tests/tests/**/*.spec.js'
+            '../../../ServicePulse.Host.Tests/tests/**/*.spec.js'
         ],
         frameworks: ['jasmine'],
         // you can define custom flags

src/ServicePulse.Host/Hosting/HostArguments.cs

@@ -29,12 +29,6 @@ public HostArguments(string[] args)
             Password = string.Empty;
             OutputPath = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "app");
 
-#if DEBUG
-            if (Debugger.IsAttached)
-            {
-                OutputPath = Path.GetFullPath(Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "..\\..\\app"));
-            }
-#endif
             var runOptions = new CaseLessOptionSet
             {
                 {

src/ServicePulse.Host/Hosting/Options.cs

@@ -889,10 +889,7 @@ public List<string> Parse(IEnumerable<string> arguments)
                 }
             }
 
-            if (c.Option != null)
-            {
-                c.Option.Invoke(c);
-            }
+            c.Option?.Invoke(c);
 
             return unprocessed;
         }

src/ServicePulse.Host/Owin/StaticFileMiddleware.cs

@@ -1,4 +1,4 @@
-namespace ServicePulse.Host.Owin
+namespace ServicePulse.Host.Owin
 {
     using System;
     using System.IO;