Web UI initial import

.github/workflows/webui.yml

@@ -0,0 +1,96 @@
+name: Deploy WebUI to github pages
+
+env:
+  NEXT_PUBLIC_MUIX_PRO_KEY: ${{ secrets.MUIX_PRO_KEY }}
+
+on:
+  push:
+    paths:
+      - ".github/workflows/webui.yml"
+      - "web-ui/yarn.lock"
+      - "web-ui/package.json"
+      - "web-ui/tsconfig.json"
+      - "web-ui/**.[jt]s"
+      - "web-ui/**.[jt]sx"
+      - "web-ui/public/**"
+      - "web-ui/styles/**"
+  pull_request:
+    paths:
+      - ".github/workflows/webui.yml"
+      - "web-ui/yarn.lock"
+      - "web-ui/package.json"
+      - "web-ui/tsconfig.json"
+      - "web-ui/**.[jt]s"
+      - "web-ui/**.[jt]sx"
+      - "web-ui/public/**"
+      - "web-ui/styles/**"
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build_webui:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: "web-ui"
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: "16"
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+        with:
+          static_site_generator: next
+          generator_config_file: ./web-ui/next.config.js
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: |
+            .next/cache
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
+      - name: Install dependencies
+        run: yarn install
+      - name: Check format
+        run: yarn format:check
+      - name: Check eslint
+        run: yarn lint
+      - name: Build with Next.js
+        run: yarn next build
+      - name: Static HTML export with Next.js
+        run: yarn next export
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: ./web-ui/out
+
+  # Deployment job
+  deploy_webui:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build_webui
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2

web-ui/.editorconfig

@@ -0,0 +1,14 @@
+root = true
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = space
+indent_size = 2
+insert_final_newline = false
+trim_trailing_whitespace = true
+[*.md]
+max_line_length = 100
+trim_trailing_whitespace = true
+[*.yml]
+[*.{yml,yaml}]
+indent_size = 2

web-ui/.eslintrc.json

@@ -0,0 +1,45 @@
+{
+    "extends": [
+      "next/core-web-vitals",
+      "plugin:@typescript-eslint/recommended",
+      "prettier"
+    ],
+    "rules": {
+      "react/display-name": "off",
+      "@next/next/no-img-element": "off",
+      "react/no-unescaped-entities": "off",
+      "import/no-anonymous-default-export": "off",
+      "@typescript-eslint/no-unused-vars": "error",
+      "@typescript-eslint/ban-ts-comment": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/ban-types": [
+        "error",
+        {
+          "extendDefaults": true,
+          "types": {
+            "{}": false
+          }
+        }
+      ]
+    },
+    "plugins": [
+      "import"
+    ],
+    "settings": {
+      "import/parsers": {
+        "@typescript-eslint/parser": [
+          ".ts",
+          ".tsx"
+        ]
+      },
+      "import/resolver": {
+        "typescript": {
+          "alwaysTryTypes": true,
+          "project": [
+            "./tsconfig.json"
+          ]
+        }
+      }
+    }
+  }

web-ui/.gitignore

@@ -0,0 +1,26 @@
+# dependencies
+/node_modules
+
+# next.js
+/.next/
+/out/
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env
+.env.local
+.env.development
+.env.test
+.env.production
+
+# typescript
+*.tsbuildinfo

web-ui/.prettierrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+    arrowParens: 'avoid',
+    bracketSpacing: true,
+    htmlWhitespaceSensitivity: 'css',
+    insertPragma: false,
+    bracketSameLine: false,
+    jsxSingleQuote: true,
+    printWidth: 120,
+    proseWrap: 'preserve',
+    quoteProps: 'as-needed',
+    requirePragma: false,
+    semi: false,
+    singleQuote: true,
+    tabWidth: 2,
+    trailingComma: 'none',
+    useTabs: false
+  }

web-ui/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2023 VMware, Inc.
+Copyright (c) 2022 ThemeSelection
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

web-ui/README.md

@@ -0,0 +1,85 @@
+# DBSP Web UI
+
+This is the web UI for the DBSP project.
+
+## Setup
+
+```bash
+sudo apt-get update
+sudo apt-get install git sudo curl
+curl -fsSL https://deb.nodesource.com/setup_19.x | sudo -E bash - &&\
+sudo apt-get install -y nodejs
+npm install --global yarn
+npm install --global openapi-typescript-codegen
+
+git clone https://github.com/vmware/database-stream-processor.git
+cd database-stream-processor/web-ui
+```
+
+If you don't run ubuntu: [other binary distributions for node.js](https://github.com/nodesource/distributions)
+
+## Development
+
+Install dependencies (needs to be done whenever package.json depencies change):
+
+```bash
+yarn install
+```
+
+Start the development server:
+
+```bash
+yarn dev
+```
+
+Build & export static website:
+
+```bash
+yarn build
+yarn export
+```
+
+Format the code & linting:
+
+```bash
+yarn format
+yarn lint
+```
+
+If `yarn audit` fails for a transitive dependency you can try to update it:
+
+```bash
+yarn up --recursive loader-utils
+```
+
+For direct dependencies, you can adjust the version in `package.json`
+and run `yarn install`.
+
+## OpenAPI bindings
+
+The bindings for OpenAPI (under src/types/manager) are generated using
+[openapi typescript codegen](https://www.npmjs.com/package/openapi-typescript-codegen).
+
+If you change the API, execute the following steps to update the bindings:
+
+```bash
+yarn generate-openapi
+```
+
+Note sometimes strange caching errors may warrant deleting `node_modules` after
+regenerating the API bindings.
+
+## File Organization
+
+- `@core`: Settings, style and overrides.
+- `analytics`: Logic to handle projects (SQL editor, programs).
+- `components`: contains reusable React components.
+- `configs`: Theme configuration (see also Material UI themes).
+- `data`: Logic for handling connectors (Add, Update, Delete).
+- `home`: Home page.
+- `layouts`: General layout components.
+- `navigation`: Side-bar Menu.
+- `pages`: accessible website pages (e.g. `pages/index.tsx` is the homepage)
+- `streaming`: Logic for building, managing Pipelines.
+- `types`: Types used throughout the app, OpenAPI generated types.
+- `utils`: contains utility functions.

web-ui/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

web-ui/next.config.js

@@ -0,0 +1,19 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const path = require('path')
+
+module.exports = {
+  trailingSlash: true,
+  reactStrictMode: false,
+  images: { unoptimized: true },
+  experimental: {
+    esmExternals: false
+  },
+  webpack: config => {
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      apexcharts: path.resolve(__dirname, './node_modules/apexcharts-clevision')
+    }
+
+    return config
+  }
+}

web-ui/next.d.ts

@@ -0,0 +1,8 @@
+import type { ReactElement, ReactNode } from 'react'
+import type { NextComponentType, NextPageContext } from 'next/dist/shared/lib/utils'
+
+declare module 'next' {
+  export declare type NextPage<P = {}, IP = P> = NextComponentType<NextPageContext, IP, P> & {
+    getLayout?: (page: ReactElement) => ReactNode
+  }
+}