Skip to content

Commit

Permalink
Migrate Lookout UI to Vite (#4097)
Browse files Browse the repository at this point in the history
It's faster, and create-react-app seems to be quietly deprecated (it is no longer referred to by the main React docs).
mauriceyap authored Dec 17, 2024
1 parent 0d3e5bc commit a8fd9f1
Showing 56 changed files with 4,732 additions and 10,415 deletions.
26 changes: 13 additions & 13 deletions .github/workflows/lint.yml
Original file line number Diff line number Diff line change
@@ -32,19 +32,19 @@ jobs:
- name: Generating TypeScript lint results as summary
working-directory: ./internal/lookout/ui
run: |
yarn run lint &> lint_results.txt || true
lint_results=$(cat lint_results.txt)
echo -e "## 🪧 Typescript Lint Results\n" >> $GITHUB_STEP_SUMMARY
if [[ $lint_results =~ "problem" ]]; then
echo -e "### List of Lint Issues \n" >> $GITHUB_STEP_SUMMARY
echo -e "${lint_results}" >> $GITHUB_STEP_SUMMARY
echo -e "${lint_results}"
exit 1
else
echo -e "### No Lint issues found.\n" >> $GITHUB_STEP_SUMMARY
echo -e "No Lint issues found."
exit 0
fi
yarn lint &> lint_results.txt || true
lint_results=$(cat lint_results.txt)
echo -e "## 🪧 Typescript Lint Results\n" >> $GITHUB_STEP_SUMMARY
if [[ $lint_results =~ "problem" ]]; then
echo -e "### List of Lint Issues \n" >> $GITHUB_STEP_SUMMARY
echo -e "${lint_results}" >> $GITHUB_STEP_SUMMARY
echo -e "${lint_results}"
exit 1
else
echo -e "### No Lint issues found.\n" >> $GITHUB_STEP_SUMMARY
echo -e "No Lint issues found."
exit 0
fi
go-lint:
name: Lint Go
4 changes: 2 additions & 2 deletions .github/workflows/test.yml
Original file line number Diff line number Diff line change
@@ -25,7 +25,7 @@ jobs:

- name: Install Dependencies And Run Unit Tests
run: |
yarn install --frozen-lockfile && yarn run openapi && CI=true yarn run test --reporters=jest-junit
yarn install --frozen-lockfile && yarn openapi && CI=true yarn test --reporter=junit
working-directory: ./internal/lookout/ui

- name: Publish JUnit Report
@@ -201,7 +201,7 @@ jobs:
- name: Install Protoc
uses: arduino/setup-protoc@v3
with:
version: '23.3'
version: "23.3"
repo-token: ${{ secrets.GITHUB_TOKEN }}

- name: Setup Go
2 changes: 1 addition & 1 deletion build/bundles/full/Dockerfile
Original file line number Diff line number Diff line change
@@ -15,7 +15,7 @@ FROM ${NODE_BUILD_IMAGE} AS NODE
COPY --from=OPENAPI /project/internal/lookout/ui /ui/
WORKDIR /ui
RUN yarn install --immutable
RUN yarn run build
RUN yarn build

FROM ${BASE_IMAGE}
RUN addgroup -S -g 2000 armada && adduser -S -u 1000 armada -G armada
2 changes: 1 addition & 1 deletion build/lookoutv2/Dockerfile
Original file line number Diff line number Diff line change
@@ -13,7 +13,7 @@ FROM ${NODE_BUILD_IMAGE} AS NODE
COPY --from=OPENAPI /project/internal/lookout/ui /ui/
WORKDIR /ui
RUN yarn install --immutable
RUN yarn run build
RUN yarn build

FROM ${BASE_IMAGE}
RUN addgroup -S -g 2000 armada && adduser -S -u 1000 armada -G armada
14 changes: 8 additions & 6 deletions docs/developer/ui.md
Original file line number Diff line number Diff line change
@@ -4,22 +4,22 @@ Armada bundles a web UI referred to as Lookout. To understand its components see

In short, Lookout is made of two components:

* Lookout API: a Go service that provides an API to the Armada backend
* Lookout UI: a React application that provides a web interface to the Lookout API
- Lookout API: a Go service that provides an API to the Armada backend
- Lookout UI: a React application that provides a web interface to the Lookout API

After running `mage localdev full` and `mage ui`, the Lookout UI should be accessible through your browser at `http://localhost:8089`

You can also re-build a production build of the UI by running `mage ui` in the root of the repo.

## Local Development

To quickly get started developing on the UI locally without having to build, ensure you have Docker, NPM and Yarn installed for your platform, then run:
To quickly get started developing on the UI locally without having to build, ensure you have Docker, Node and Yarn installed for your platform, then run:

```bash
cd ./internal/lookout/ui
yarn install
yarn run openapi
yarn start
yarn
yarn openapi
yarn dev
```

This will start a live development server on [http://localhost:3000](http://localhost:3000).
@@ -37,3 +37,5 @@ This displays the TanStack table state as a JSON string, at the bottom of the pa
Make sure you scroll at the bottom to see it.

Note that you can have both `fakeData` and `debug` query parameters enabled at the same time: [http://localhost:3000/v2?fakeData=&debug=](http://localhost:3000/v2?fakeData=&debug=)

See [the README for the Lookout UI](../../internal/lookout/ui/README.md) for more information about UI development.
1 change: 0 additions & 1 deletion internal/lookout/ui/.eslintignore

This file was deleted.

57 changes: 0 additions & 57 deletions internal/lookout/ui/.eslintrc.js

This file was deleted.

84 changes: 55 additions & 29 deletions internal/lookout/ui/README.md
Original file line number Diff line number Diff line change
@@ -1,52 +1,78 @@
# Getting Started with Create React App
# Lookout UI

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
The Lookout UI is a single-page web application written in
[TypeScript](https://www.typescriptlang.org/) with [React](https://react.dev/),
and is built using [Vite](https://vitejs.dev/).

## Available Scripts
## Development

In the project directory, you can run:
### Pre-requisites

### `yarn openapi`
Developing the Lookout UI requires the following to be installed on your
machine:

This step requires Docker.
1. [Node.js](https://nodejs.org/en/download/package-manager)
1. [Yarn](https://yarnpkg.com/getting-started/install) - this should usually
just involve running `corepack enable`
1. [Docker](https://www.docker.com/)

Generate the OpenAPI client code from the OpenAPI specification. This step is required to be run before the first time the application is run, and any time the OpenAPI specification is updated.
### Installing dependencies and generating OpenAPI client code

### `yarn start`
First, install all packages depended on by this web app using Yarn. In this
directory, run:

Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
```bash
yarn
```

The page will reload if you make edits.\
You will also see any lint errors in the console.
Generate the OpenAPI client code from the OpenAPI specification. This step is
required to be run before the first time the application is run, and any time
the OpenAPI specification is updated.

### `yarn test`
```bash
yarn openapi
```

Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### Live development server

### `yarn run build`
You can run a Vite development server to see your changes in the browser in
real-time. This serves the web app on
[http://localhost:3000](http://localhost:3000), and proxies API requests to a
locally-running instance of the Lookout API. Please see
[the main developer docs](../../../docs/developer/ui.md) for details of how to
set this up.

Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
```bash
yarn dev
```

The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
### Run unit tests

See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
Unit tests are run using [Vitest](https://vitest.dev/).

### `yarn run eject`
```bash
yarn test --watch=false
```

**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
If you are actively changing unit tests or code covered by unit tests, you may
find it useful to omit `--watch=false` to continuously run affected tests.

If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
### Lint

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
Formatting and linting is done using [Prettier](https://prettier.io/) and
[ESLint](https://eslint.org/).

You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
```bash
yarn lint
```

## Learn More
You can add the flag, `--fix` to automatically fix issues where possible.

You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
## Building the application for production

To learn React, check out the [React documentation](https://reactjs.org/).
```bash
yarn build
```

This builds the app for production to the `build` folder. It correctly bundles
React in production mode and optimizes the build for the best performance.
2 changes: 1 addition & 1 deletion internal/lookout/ui/development-setup-and-start.sh
Original file line number Diff line number Diff line change
@@ -15,4 +15,4 @@ fi

yarn openapi

DANGEROUSLY_DISABLE_HOST_CHECK=true yarn start
yarn dev
79 changes: 79 additions & 0 deletions internal/lookout/ui/eslint.config.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
import prettier from "eslint-plugin-prettier";
import _import from "eslint-plugin-import";
import { fixupPluginRules } from "@eslint/compat";
import tsParser from "@typescript-eslint/parser";
import path from "node:path";
import { fileURLToPath } from "node:url";
import js from "@eslint/js";
import { FlatCompat } from "@eslint/eslintrc";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const compat = new FlatCompat({
baseDirectory: __dirname,
recommendedConfig: js.configs.recommended,
allConfig: js.configs.all
});

export default [{
ignores: ["src/openapi/"],
}, ...compat.extends("plugin:@typescript-eslint/recommended", "prettier"), {
plugins: {
prettier,
import: fixupPluginRules(_import),
},

languageOptions: {
parser: tsParser,
ecmaVersion: 2020,
sourceType: "module",

parserOptions: {
ecmaFeatures: {
jsx: true,
},
},
},

settings: {
react: {
version: "detect",
},
},

rules: {
"prettier/prettier": ["warn", {
endOfLine: "auto",
}],

"import/order": ["warn", {
groups: ["builtin", "external", "internal"],

pathGroups: [{
pattern: "react",
group: "external",
position: "before",
}],

pathGroupsExcludedImportTypes: ["react"],
"newlines-between": "always",

alphabetize: {
order: "asc",
caseInsensitive: false,
},
}],

"@typescript-eslint/no-unused-vars": ["warn", {
argsIgnorePattern: "^_",
varsIgnorePattern: "^_",
caughtErrorsIgnorePattern: "^_",
}],

"@typescript-eslint/no-empty-function": "warn",
"@typescript-eslint/no-explicit-any": "off",
"@typescript-eslint/explicit-module-boundary-types": "off",
"react/display-name": "off",
"react/react-in-jsx-scope": "off",
},
}];
20 changes: 20 additions & 0 deletions internal/lookout/ui/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Armada Lookout"
/>
<link rel="apple-touch-icon" href="/logo192.png" />
<title>Armada Lookout</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="module" src="/src/index.tsx"></script>
</body>
</html>
Loading
Oops, something went wrong.

0 comments on commit a8fd9f1

Please sign in to comment.