infratographer · tenyo · May 25, 2023 · May 26, 2023 · May 29, 2023 · May 29, 2023
diff --git a/.dockerignore b/.dockerignore
@@ -0,0 +1,6 @@
+node_modules/
+dist/
+.dockerignore
+.gitattributes
+Dockerfile
+README.md
diff --git a/.env.example b/.env.example
@@ -0,0 +1,6 @@
+# example settings for local dev
+# rename this file to .env.local and modify as needed
+VITE_OIDC_CLIENT_ID="393708490872-nh5n5g7qif7t4tbqkpf1uc28qlosgr24.apps.googleusercontent.com"
+
+VITE_TOKENXCHANGE_URL="https://iam.metalctrl.io"
+VITE_GRAPHQL_URL="http://localhost:4000"
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -0,0 +1,18 @@
+/* eslint-env node */
+require("@rushstack/eslint-patch/modern-module-resolution")
+
+module.exports = {
+  root: true,
+  extends: [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "@vue/eslint-config-typescript",
+    "@vue/eslint-config-prettier",
+  ],
+  parserOptions: {
+    ecmaVersion: "latest",
+  },
+  globals: {
+    baseconf: "readable",
+  },
+}
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,5 @@
+{
+    "semi": false,
+    "singleQuote": false,
+    "trailingComma": "es5"
+}
diff --git a/Dockerfile b/Dockerfile
@@ -0,0 +1,24 @@
+# base image
+FROM node:lts-alpine as base
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+
+# build stage
+FROM base as build-stage
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+# production stage
+FROM nginxinc/nginx-unprivileged:alpine as production-stage
+USER root
+RUN apk update && apk upgrade --no-cache
+USER 101:101
+COPY --from=build-stage /app/nginx/default.conf /etc/nginx/conf.d/default.conf
+COPY --from=build-stage /app/dist /usr/share/nginx/html
+EXPOSE 8080
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/README.md b/README.md
@@ -1,2 +1,58 @@
-# web-ui
-Infratographer web based ui
+# Infratographer web UI
+
+## Running locally
+
+Copy the provided example config and override the settings as needed:
+
+```
+cp .env.example .env.local
+```
+
+For example, you may need to use a different OIDC client id (currently this UI only supports Google oauth - you can configure your app by following the guide at https://developers.google.com/identity/gsi/web/guides/get-google-api-clientid).
+
+Also by default the UI will expect to find a local instance of the Infratographer Apollo federated API at `http://localhost:4000` - you can deploy that from https://github.com/nicolerenee/compose-stack.
+
+Now build the docker image (`docker compose up`) and head over to `http://localhost:8080`.
+
+## Local development
+
+To make changes to the UI it's easier to just run it with npm.
+If you don't have it yet, install npm (e.g. on Mac `brew install node`).
+
+Install npm packages for the UI:
+
+```
+npm install
+```
+
+Copy the provided example config, which should work when connecting the UI to a local Infratographer GraphQL API:
+
+```
+cp .env.example .env.local
+```
+
+Start locally (with hot reloading):
+
+```
+npm run dev
+```
+
+Some other useful commands are listed below.
+
+Run linter (will enforce style) - [ESLint](https://eslint.org/):
+
+```
+npm run lint
+```
+
+Compile and minify for production:
+
+```
+npm run build
+```
+
+Update all dependencies:
+
+```
+npm update
+```
diff --git a/docker-compose.yaml b/docker-compose.yaml
@@ -0,0 +1,9 @@
+version: "3.9"
+
+services:
+  ui:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - "8080:8080"
diff --git a/env.d.ts b/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/index.html b/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Infratographer Portal</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="manifest" href="/site.webmanifest">
+
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="/config/config.js"></script>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/nginx/default.conf b/nginx/default.conf
@@ -0,0 +1,15 @@
+server {
+    listen       8080;
+    server_name  localhost;
+
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html;
+        try_files $uri $uri/ /index.html;
+    }
+
+    location /nginx_status {
+        stub_status;
+        allow 127.0.0.1;
+    }
+}