Separate the example apps UI from their backend API (#312)

* Seperate ui from apis

* Update nodejs app to seperate ui

* Some cleanup of Node and Vue apps.

* Update the Java example app.

* Dockerise frontend app

* Consistent Functions

* Update readme to include docker compose file and other code consistency updates

* Update ports. F:4000 B:4001

* Refactor: ports and click method

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

* Fix: Java json request

* Make the design a bit nicer.

* Add version and clean up UI

* Update README.md

* Update README.md

* Update README.md

Co-authored-by: Ariful Haque <[email protected]>
Co-authored-by: samiwelthomasHO <[email protected]>

example-apps/README.md

@@ -0,0 +1,53 @@
+# example-apps
+
+This directory is here to provide example apps to showcase how custom metrics can be shown within the MaC framework.
+
+There are currently three apps.
+
+1. Frontend VueJS app
+1. Backend NodeJS app
+1. Backend Java app
+
+## Building the apps
+
+First you must build apps before you can run them using the docker-compose file in the root of the directory.
+
+```sh
+docker-compose --profile nodejs --profile java build 
+```
+
+You may omit `--profile` if you are targeting a specific app to build.
+
+## Running the backend service
+
+Once you have built the apps you may run them using the commands below.
+
+The NodeJS and Java backend API services both share the same port number by default and so it is intended that only one of the backend services be run at a time.
+
+Both a Java and NodeJS backend service have been included in this directory for reference purposes.
+
+**Run either...**
+
+For the node backend
+```sh
+docker-compose --profile nodejs up
+```
+
+**..or..**
+
+For the java backend
+```sh
+docker-compose --profile java up
+```
+
+## Frontend
+
+The apps will be hosted on localhost:
+
+VueJS Frontend will be on http://localhost:4000 where you may interact with the custom metrics.
+
+Whichever backend profile you selected will be available at http://localhost:4001. However the metrics endpoint of both implementations are slightly different.
+The NodeJS metrics will be available at http://localhost:4001/metrics
+The Java metrics will be available at http://localhost:4001/actuator/prometheus
+
+

example-apps/docker-compose.yml

@@ -1,16 +1,25 @@
 version: '3'
 
 services:
+  frontend:
+    image: sre-demo-frontend-app
+    build: ./sre-demo-frontend-app
+    ports: 
+      - 4000:4000
+    restart: on-failure
+
   nodejs:
     profiles: ["nodejs"]
-    build: sre-demo-nodejs-app
+    image: sre-demo-nodejs-app
+    build: ./sre-demo-nodejs-app
     ports:
-        - 8081:8081
+        - 4001:4001
     restart: on-failure
 
   java:
     profiles: ["java"]
-    build: sre-demo-java-app
+    image: sre-demo-java-app
+    build: ./sre-demo-java-app
     ports:
-        - 8080:8080
+        - 4001:4001
     restart: on-failure

example-apps/sre-demo-frontend-app/.eslintrc.cjs

@@ -0,0 +1,14 @@
+/* eslint-env node */
+require("@rushstack/eslint-patch/modern-module-resolution");
+
+module.exports = {
+  root: true,
+  extends: [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "@vue/eslint-config-prettier",
+  ],
+  parserOptions: {
+    ecmaVersion: "latest",
+  },
+};

example-apps/sre-demo-frontend-app/.gitignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

example-apps/sre-demo-frontend-app/.prettierrc.json

@@ -0,0 +1 @@
+{}

example-apps/sre-demo-frontend-app/Dockerfile

@@ -0,0 +1,15 @@
+FROM node:18-alpine
+
+WORKDIR /app
+
+COPY package.json package.json
+COPY package-lock.json package-lock.json
+
+
+RUN npm install
+
+COPY . .
+
+EXPOSE 5173
+
+ENTRYPOINT [ "npm", "run", "dev" ]

example-apps/sre-demo-frontend-app/README.md

@@ -0,0 +1,35 @@
+# sre-demo-frontend-app
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```

example-apps/sre-demo-frontend-app/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Halfmoon/1.1.1/css/halfmoon.min.css" integrity="sha512-Kaju/JzlErKhC47smofkXAdSkvILovmvh2nnok6rgN79oB3Co/T7Pm7Ns8dcpNEN3VTVZDw2ilrUDByzInEabg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Halfmoon/1.1.1/css/halfmoon-variables.min.css" integrity="sha512-lMs4YSTMNB+xexEzimOkuruKEzyVZl4ZOp1iqjlNQDiW0anM1/SrR6OHnAQM0WwjozjBXz63JRxORWm6OI1ZLw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body class="dark-mode">
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Halfmoon/1.1.1/js/halfmoon.min.js" integrity="sha512-8fN/MQrHBCMmkx2t4QwGODGHwQf8VxCeNwNkJz0gjt5JrlUfJ5zNlMr9lrzhnl7DSN+5E16YmMHnfomnQmvSoA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  </body>
+</html>