Skip to content

Commit

Permalink
chore(ui): added scan list (#58)
Browse files Browse the repository at this point in the history
* chore(ui): added scan list

* fix(ui): pipeline nodejs version

* fix(ui): pipeline nodejs version

* fix(ui): pipeline nodejs version

* fix(ui): ci pipeline
  • Loading branch information
stephane-segning authored Jul 24, 2024
1 parent afaa997 commit 8eaa773
Show file tree
Hide file tree
Showing 20 changed files with 684 additions and 127 deletions.
47 changes: 25 additions & 22 deletions .github/workflows/frontend-docs-generation.yml
Original file line number Diff line number Diff line change
@@ -1,31 +1,34 @@
name: Generate Documentation for the frontend

on:
push:
branches:
- '**'
pull_request:
branches:
- '**'
push:
branches:
- '**'

jobs:
generate-docs:
runs-on: ubuntu-latest
steps:
- name: Clone project
uses: actions/checkout@v3
generate-docs:
runs-on: ubuntu-latest
steps:
- name: Clone project
uses: actions/checkout@v4

- name: Install dependencies
run: yarn install
- name: Use Node.js 22.x
uses: actions/setup-node@v4
with:
node-version: 22.x
cache: 'yarn'

- name: Generate docs in markdown
run: yarn run typedoc
- name: Install dependencies
run: yarn install --frozen-lockfile --silent

- name: Convert md to pdf files
run: yarn run convert-md-to-pdf
- name: Generate docs in markdown
run: yarn run typedoc

- name: Upload PDF artifact
uses: actions/upload-artifact@v3
with:
name: documentations
path: ./docs/**/*.pdf
- name: Convert md to pdf files
run: yarn run convert-md-to-pdf

- name: Upload PDF artifact
uses: actions/upload-artifact@v4
with:
name: documentations
path: ./docs/**/*.pdf
30 changes: 13 additions & 17 deletions .github/workflows/node.js.yml
Original file line number Diff line number Diff line change
Expand Up @@ -8,26 +8,22 @@ on:
branches:
- '*'

pull_request:
branches:
- '*'

jobs:
build:
runs-on: ubuntu-latest

strategy:
matrix:
node-version: [18.x]
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/

steps:
- uses: actions/checkout@v3
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
- name: Checkout repository
uses: actions/checkout@v4

- name: Use Node.js 22.x
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}
cache: 'npm'
- run: yarn install --frozen-lockfile
- run: yarn stylelint:actions
- run: yarn build
node-version: 22.x
cache: 'yarn'

- name: Install dependencies
run: yarn install --frozen-lockfile --silent

- name: Build
run: yarn build
5 changes: 3 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -128,5 +128,6 @@ docs/gen
*.sln
*.sw?

#API codegen files
./src/store/LynxScannerApi.ts
# API codegen files
*.gen.*
gen
20 changes: 15 additions & 5 deletions openapi-config.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,22 @@
import type { ConfigFile } from '@rtk-query/codegen-openapi'
import type { ConfigFile } from '@rtk-query/codegen-openapi';

const baseDir = process.env.GEN_FOLDER!;

const config: ConfigFile = {
schemaFile: './openapi.yaml',
apiFile: './src/store/emptyApi.ts',
apiImport: 'emptySplitApi',
outputFile: './src/store/LynxScannerApi.ts',
exportName: 'LynxScannerApi',
hooks: true,
}
outputFiles: {
[`${baseDir}/scans.api.gen.ts`]: {
filterEndpoints: /scan/i,
exportName: 'ScansApi',
},
[`${baseDir}/files.api.gen.ts`]: {
filterEndpoints: [/file/i],
exportName: 'FilesApi',
},
},
};

export default config
export default config;
17 changes: 9 additions & 8 deletions openapi.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,13 @@ servers:

tags:
- name: file
- name: scan

paths:
'/api/files/upload':
post:
summary: Upload a file
tags: [ file ]
tags: [file]
operationId: uploadFile
responses:
'200':
Expand All @@ -42,7 +43,7 @@ paths:
'/api/files/download/{file_id}':
get:
summary: Get a file
tags: [ file ]
tags: [file]
operationId: getFile
parameters:
- name: file_id
Expand All @@ -66,7 +67,7 @@ paths:
'/api/scans':
get:
summary: Get all scans
tags: [ scan ]
tags: [scan]
operationId: getScans
description: Get all scans
parameters:
Expand Down Expand Up @@ -95,7 +96,7 @@ paths:
description: 'Internal server error'
post:
summary: Create a scan
tags: [ scan ]
tags: [scan]
operationId: createScan
description: Create a scan
requestBody:
Expand All @@ -117,7 +118,7 @@ paths:
'/api/scans/{scan_id}':
get:
summary: Get a scan
tags: [ scan ]
tags: [scan]
operationId: getScan
description: Get a scan
parameters:
Expand All @@ -140,7 +141,7 @@ paths:
description: 'Internal server error'
put:
summary: Update a scan
tags: [ scan ]
tags: [scan]
operationId: updateScan
description: Update a scan
parameters:
Expand Down Expand Up @@ -170,7 +171,7 @@ paths:
description: 'Internal server error'
delete:
summary: Delete a scan
tags: [ scan ]
tags: [scan]
operationId: deleteScan
description: Delete a scan
parameters:
Expand Down Expand Up @@ -213,4 +214,4 @@ components:
type: object
properties:
file_id:
type: string
type: string
16 changes: 10 additions & 6 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,9 @@
"eslint": "eslint --fix .",
"prettier": "prettier --write .",
"stylelint:actions": "stylelint --fix \"src/**/*.{css,scss}\"",
"convert-md-to-pdf": "yarn run md-to-pdf ./docs/*.md ./docs/**/*.md"
"convert-md-to-pdf": "yarn run md-to-pdf ./docs/*.md ./docs/**/*.md",
"rtk:gen": "export GEN_FOLDER=./src/store/gen && rimraf $GEN_FOLDER && mkdir $GEN_FOLDER && rtk-query-codegen-openapi openapi-config.ts && prettier -w $GEN_FOLDER",
"postinstall": "yarn run rtk:gen"
},
"dependencies": {
"@reduxjs/toolkit": "^2.2.6",
Expand All @@ -26,8 +28,9 @@
"react": "^18.3.1",
"react-daisyui": "^5.0.0",
"react-dom": "^18.2.0",
"react-redux": "^9.1.2",
"react-feather": "^2.0.10",
"react-i18next": "^14.1.1",
"react-redux": "^9.1.2",
"react-router-dom": "^6.23.0",
"redux": "^5.0.1",
"redux-toolkit": "^1.1.2",
Expand All @@ -39,13 +42,15 @@
"@commitlint/config-conventional": "^19.2.2",
"@commitlint/format": "^19.3.0",
"@eslint/eslintrc": "^3.0.2",
"@rtk-query/codegen-openapi": "^1.2.0",
"@types/i18next-browser-languagedetector": "^3.0.0",
"@types/react": "^18.2.66",
"@types/react-dom": "^18.2.22",
"@typescript-eslint/eslint-plugin": "^7.7.1",
"@typescript-eslint/parser": "^7.7.1",
"@vitejs/plugin-react": "^4.2.1",
"daisyui": "^4.10.5",
"esbuild-runner": "^2.2.2",
"eslint": "8",
"eslint-config-prettier": "^9.1.0",
"eslint-config-react-app": "^7.0.1",
Expand All @@ -56,6 +61,7 @@
"husky": "^9.0.11",
"lint-staged": "^15.2.2",
"prettier": "^3.2.5",
"rimraf": "^6.0.1",
"sass": "^1.75.0",
"stylelint": "^16.4.0",
"stylelint-actions-formatters": "^16.3.1",
Expand All @@ -67,12 +73,10 @@
"typedoc-plugin-mdn-links": "^3.1.22",
"typescript": "^5.4.5",
"vite": "^5.2.0",
"vite-plugin-eslint": "^1.8.1"
"vite-plugin-eslint": "^1.8.1",
"vite-tsconfig-paths": "^4.3.2"
},
"lint-staged": {
"*.{json}": [
"prettier --write"
],
"*.{css,scss}": [
"stylelint --fix",
"prettier --write"
Expand Down
4 changes: 2 additions & 2 deletions src/app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ import { FloatingConfig } from './components/floating-config.tsx';
*/
export function App(): JSX.Element {
return (
<>
<div className="mx-auto max-w-screen-lg">
<FloatingConfig />
<RouterProvider router={router} />
</>
</div>
);
}
28 changes: 28 additions & 0 deletions src/components/error.dump.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { useEffect, useMemo } from 'react';
import { Alert } from 'react-daisyui';

export interface ErrorDumpProps {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
error: any;
}

export function ErrorDump({ error }: ErrorDumpProps) {
useEffect(() => {
console.error(error);
}, [error]);

const errorMessage = useMemo(() => {
if (error?.response?.data?.message) {
return error.response.data.message;
}
if (typeof error === 'string') {
return error;
}
if ('error' in error) {
return error.error;
}
return JSON.stringify(error);
}, [error]);

return <Alert status="error">{errorMessage}</Alert>;
}
22 changes: 14 additions & 8 deletions src/components/floating-config.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Divider, Dropdown } from 'react-daisyui';
import { useCallback, useEffect } from 'react';
import { themeChange } from 'theme-change';
import { Button, Divider, Dropdown } from 'react-daisyui';
import { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { Menu } from 'react-feather';

interface ThemeButtonProps {
themeName: 'valantine' | 'light' | 'dark';
Expand Down Expand Up @@ -29,14 +29,16 @@ export function FloatingConfig() {
},
[i18n]
);
useEffect(() => {
themeChange(true);
});

return (
<div className="fixed bottom-4 right-4 z-50">
<Dropdown end horizontal="left" vertical="top">
<Dropdown.Toggle className="btn-circle">Menu</Dropdown.Toggle>
<Dropdown.Menu className="w-52 bg-base-200">
<Dropdown.Toggle button={false}>
<Button color="primary" shape="circle">
<Menu />
</Button>
</Dropdown.Toggle>
<Dropdown.Menu className="w-52 bg-base-100">
<Dropdown.Item anchor={false}>
<ThemeButton themeName="light" />
</Dropdown.Item>
Expand All @@ -53,6 +55,10 @@ export function FloatingConfig() {
<Dropdown.Item anchor={false}>
<button onClick={() => changeLanguageHandler('de')}>Deutsch</button>
</Dropdown.Item>
<Divider />
<Dropdown.Item anchor={false}>
<a href="/config">Config</a>
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
Expand Down
38 changes: 38 additions & 0 deletions src/components/scan-list.dump.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import type { Scan } from '@api/scans.api.gen.ts';
import { Button, Pagination } from 'react-daisyui';
import { ArrowLeft, ArrowRight } from 'react-feather';

export interface ScanListDumpProps {
scans: Scan[];
page: number;
onNext: () => void;
onPrev: () => void;
}

export function ScanListDump({
scans,
onPrev,
onNext,
page,
}: ScanListDumpProps) {
return (
<div>
{scans.map((scan) => (
<div key={scan.id} className="p-4 border border-gray-300 rounded-md">
<h3 className="font-bold">{scan.title}</h3>
<pre>{JSON.stringify(scan.meta_data, null, 4)}</pre>
</div>
))}

<Pagination>
<Button onClick={onPrev} className="join-item">
<ArrowLeft />
</Button>
<Button className="join-item">Page {page}</Button>
<Button onClick={onNext} className="join-item">
<ArrowRight />
</Button>
</Pagination>
</div>
);
}
Loading

0 comments on commit 8eaa773

Please sign in to comment.