From 6f9b1b834ea02b4a97159faf73a356be348f748a Mon Sep 17 00:00:00 2001 From: kunish <17328586+kunish@users.noreply.github.com> Date: Mon, 3 Jul 2023 09:44:47 +0800 Subject: [PATCH] feat: display daed version in header (#132) * feat: display daed version in header * feat: use orchestrate as homepage --------- Co-authored-by: dae-bot[bot] <136105375+dae-bot[bot]@users.noreply.github.com> --- package.json | 3 + pnpm-lock.yaml | 39 +++++++++++++ src/Router.tsx | 5 +- src/apis/query.ts | 1 + src/components/Header.tsx | 114 +++++++++++++++++++++++-------------- src/pages/Home.tsx | 25 -------- src/pages/index.ts | 1 - src/schemas/gql/gql.ts | 6 +- src/schemas/gql/graphql.ts | 3 +- src/vite-env.d.ts | 8 +++ vite.config.ts | 23 +++++--- 11 files changed, 146 insertions(+), 82 deletions(-) delete mode 100644 src/pages/Home.tsx diff --git a/package.json b/package.json index 9e9eafe9..ebd1ee04 100644 --- a/package.json +++ b/package.json @@ -69,6 +69,7 @@ "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-react": "^7.32.2", "eslint-plugin-react-hooks": "^4.6.0", + "execa": "^7.1.1", "framer-motion": "^10.12.17", "graphiql": "^3.0.0", "graphql": "^16.7.1", @@ -90,9 +91,11 @@ "react-i18next": "^13.0.1", "react-router": "^6.14.0", "react-router-dom": "^6.14.0", + "simple-git": "^3.19.1", "typescript": "^5.1.6", "urijs": "^1.19.11", "vite": "^4.3.9", + "vite-plugin-environment": "^1.1.3", "zod": "^3.21.4" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6f4c0c6c..1f8b7176 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -167,6 +167,9 @@ dependencies: eslint-plugin-react-hooks: specifier: ^4.6.0 version: 4.6.0(eslint@8.43.0) + execa: + specifier: ^7.1.1 + version: 7.1.1 framer-motion: specifier: ^10.12.17 version: 10.12.17(react-dom@18.2.0)(react@18.2.0) @@ -230,6 +233,9 @@ dependencies: react-router-dom: specifier: ^6.14.0 version: 6.14.0(react-dom@18.2.0)(react@18.2.0) + simple-git: + specifier: ^3.19.1 + version: 3.19.1 typescript: specifier: ^5.1.6 version: 5.1.6 @@ -239,6 +245,9 @@ dependencies: vite: specifier: ^4.3.9 version: 4.3.9(@types/node@20.3.2) + vite-plugin-environment: + specifier: ^1.1.3 + version: 1.1.3(vite@4.3.9) zod: specifier: ^3.21.4 version: 3.21.4 @@ -2285,6 +2294,18 @@ packages: '@jridgewell/sourcemap-codec': 1.4.15 dev: false + /@kwsites/file-exists@1.1.1: + resolution: {integrity: sha512-m9/5YGR18lIwxSFDwfE3oA7bWuq9kdau6ugN4H2rJeyhFQZcG9AgSHkQtSD15a8WvTgfz9aikZMrKPHvbpqFiw==} + dependencies: + debug: 4.3.4 + transitivePeerDependencies: + - supports-color + dev: false + + /@kwsites/promise-deferred@1.1.1: + resolution: {integrity: sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==} + dev: false + /@lezer/common@1.0.3: resolution: {integrity: sha512-JH4wAXCgUOcCGNekQPLhVeUtIqjH0yPBs7vvUdSjyQama9618IOKFJwkv2kcqdhF0my8hQEgCTEJU0GIgnahvA==} dev: false @@ -8110,6 +8131,16 @@ packages: resolution: {integrity: sha512-6+eerH9fEnNmi/hyM1DXcRK3pWdoMQtlkQ+ns0ntzunjKqp5i3sKCc80ym8Fib3iaYhdJUOPdhlJWj1tvge2Ww==} dev: false + /simple-git@3.19.1: + resolution: {integrity: sha512-Ck+rcjVaE1HotraRAS8u/+xgTvToTuoMkT9/l9lvuP5jftwnYUp6DwuJzsKErHgfyRk8IB8pqGHWEbM3tLgV1w==} + dependencies: + '@kwsites/file-exists': 1.1.1 + '@kwsites/promise-deferred': 1.1.1 + debug: 4.3.4 + transitivePeerDependencies: + - supports-color + dev: false + /slash@3.0.0: resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==} engines: {node: '>=8'} @@ -8746,6 +8777,14 @@ packages: engines: {node: '>=12'} dev: false + /vite-plugin-environment@1.1.3(vite@4.3.9): + resolution: {integrity: sha512-9LBhB0lx+2lXVBEWxFZC+WO7PKEyE/ykJ7EPWCq95NEcCpblxamTbs5Dm3DLBGzwODpJMEnzQywJU8fw6XGGGA==} + peerDependencies: + vite: '>= 2.7' + dependencies: + vite: 4.3.9(@types/node@20.3.2) + dev: false + /vite@4.3.9(@types/node@20.3.2): resolution: {integrity: sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==} engines: {node: ^14.18.0 || >=16.0.0} diff --git a/src/Router.tsx b/src/Router.tsx index 6c73aa02..1ff776db 100644 --- a/src/Router.tsx +++ b/src/Router.tsx @@ -3,7 +3,7 @@ import { useStore } from '@nanostores/react' import { GraphiQL } from 'graphiql' import { BrowserRouter, HashRouter, Route, Routes } from 'react-router-dom' -import { ExperimentPage, HomePage, MainLayout, OrchestratePage, SetupPage } from '~/pages' +import { ExperimentPage, MainLayout, OrchestratePage, SetupPage } from '~/pages' import { endpointURLAtom } from '~/store' export const Router = () => { @@ -14,8 +14,7 @@ export const Router = () => { }> - } /> - } /> + } /> } /> diff --git a/src/apis/query.ts b/src/apis/query.ts index 463350e2..b2f7dafb 100644 --- a/src/apis/query.ts +++ b/src/apis/query.ts @@ -126,6 +126,7 @@ export const useGeneralQuery = () => { dae { running modified + version } interfaces(up: $up) { name diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 5786ef87..316b0141 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -6,6 +6,7 @@ import { Burger, Button, Center, + Code, Container, Drawer, FileButton, @@ -28,11 +29,11 @@ import { } from '@mantine/core' import { useForm, zodResolver } from '@mantine/form' import { useDisclosure, useMediaQuery } from '@mantine/hooks' +import { useStore } from '@nanostores/react' import { IconBrandGithub, IconChevronDown, IconCloudCheck, - IconCloudComputing, IconCloudPause, IconLanguage, IconLogout, @@ -51,7 +52,7 @@ import { z } from 'zod' import { useGeneralQuery, useRunMutation, useUpdateAvatarMutation, useUpdateNameMutation, useUserQuery } from '~/apis' import logo from '~/assets/logo.svg' import { i18n } from '~/i18n' -import { tokenAtom } from '~/store' +import { endpointURLAtom, tokenAtom } from '~/store' import { fileToBase64 } from '~/utils' import { FormActions } from './FormActions' @@ -76,6 +77,10 @@ const useStyles = createStyles((theme) => ({ '&:hover': { backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white, }, + + [theme.fn.smallerThan('sm')]: { + padding: 0, + }, }, userActive: { @@ -107,7 +112,7 @@ const accountSettingsSchema = z.object({ }) const getLinks = (t: TFunction) => { - const links = [{ link: '/orchestrate', label: t('orchestrate'), icon: }] + const links = [] if (import.meta.env.DEV) { links.push({ link: '/experiment', label: t('experiment'), icon: }) @@ -118,6 +123,7 @@ const getLinks = (t: TFunction) => { export const HeaderWithActions = () => { const { t } = useTranslation() + const endpointURL = useStore(endpointURLAtom) const location = useLocation() const navigate = useNavigate() const { colorScheme, toggleColorScheme } = useMantineColorScheme() @@ -149,17 +155,28 @@ export const HeaderWithActions = () => {
- - - - - - daed - - - + + + + + + + daed + + + + + + + {generalQuery?.general.dae.version || import.meta.env.__VERSION__} + + + - + { - } - offLabel={} - disabled={!generalQuery?.general.dae.running && runMutation.isLoading} - checked={generalQuery?.general.dae.running} - onChange={(e) => { - runMutation.mutateAsync(!e.target.checked) - }} - /> + {matchSmallScreen ? ( + { + runMutation.mutateAsync(!e.target.checked) + }} + /> + ) : ( + } + offLabel={} + disabled={!generalQuery?.general.dae.running && runMutation.isLoading} + checked={generalQuery?.general.dae.running} + onChange={(e) => { + runMutation.mutateAsync(!e.target.checked) + }} + /> + )} -
- navigate(`${to}`)} - classNames={{ - tabsList: classes.tabsList, - tab: classes.tab, - }} - > - - {links.map(({ link, icon, label }) => ( - - {label} - - ))} - - -
+ {links.length > 0 && ( +
+ navigate(`${to}`)} + classNames={{ + tabsList: classes.tabsList, + tab: classes.tab, + }} + > + + {links.map(({ link, icon, label }) => ( + + {label} + + ))} + + +
+ )} diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx deleted file mode 100644 index 644ade10..00000000 --- a/src/pages/Home.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { Anchor, Card, Container, Group, Image, Stack, Text, Title } from '@mantine/core' - -import logo from '~/assets/logo.svg' - -export const HomePage = () => { - return ( - - - - - - - - daed - daed, A Modern Dashboard For dae - - https://github.com/daeuniverse/daed - - - - - - - ) -} diff --git a/src/pages/index.ts b/src/pages/index.ts index 090f4171..2ece5b96 100644 --- a/src/pages/index.ts +++ b/src/pages/index.ts @@ -1,5 +1,4 @@ export * from './Experiment' -export * from './Home' export * from './MainLayout' export * from './Orchestrate' export * from './Setup' diff --git a/src/schemas/gql/gql.ts b/src/schemas/gql/gql.ts index e58deae1..621378a0 100644 --- a/src/schemas/gql/gql.ts +++ b/src/schemas/gql/gql.ts @@ -86,7 +86,7 @@ const documents = { types.InterfacesDocument, '\n query JsonStorage($paths: [String!]) {\n jsonStorage(paths: $paths)\n }\n ': types.JsonStorageDocument, - '\n query General($up: Boolean) {\n general {\n dae {\n running\n modified\n }\n interfaces(up: $up) {\n name\n ifindex\n ip\n flag {\n default {\n gateway\n }\n }\n }\n }\n }\n ': + '\n query General($up: Boolean) {\n general {\n dae {\n running\n modified\n version\n }\n interfaces(up: $up) {\n name\n ifindex\n ip\n flag {\n default {\n gateway\n }\n }\n }\n }\n }\n ': types.GeneralDocument, '\n query Nodes {\n nodes {\n edges {\n id\n name\n link\n address\n protocol\n tag\n }\n }\n }\n ': types.NodesDocument, @@ -349,8 +349,8 @@ export function graphql( * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ export function graphql( - source: '\n query General($up: Boolean) {\n general {\n dae {\n running\n modified\n }\n interfaces(up: $up) {\n name\n ifindex\n ip\n flag {\n default {\n gateway\n }\n }\n }\n }\n }\n ' -): (typeof documents)['\n query General($up: Boolean) {\n general {\n dae {\n running\n modified\n }\n interfaces(up: $up) {\n name\n ifindex\n ip\n flag {\n default {\n gateway\n }\n }\n }\n }\n }\n '] + source: '\n query General($up: Boolean) {\n general {\n dae {\n running\n modified\n version\n }\n interfaces(up: $up) {\n name\n ifindex\n ip\n flag {\n default {\n gateway\n }\n }\n }\n }\n }\n ' +): (typeof documents)['\n query General($up: Boolean) {\n general {\n dae {\n running\n modified\n version\n }\n interfaces(up: $up) {\n name\n ifindex\n ip\n flag {\n default {\n gateway\n }\n }\n }\n }\n }\n '] /** * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ diff --git a/src/schemas/gql/graphql.ts b/src/schemas/gql/graphql.ts index 3aff3a14..9c7a6cde 100644 --- a/src/schemas/gql/graphql.ts +++ b/src/schemas/gql/graphql.ts @@ -908,7 +908,7 @@ export type GeneralQuery = { __typename?: 'Query' general: { __typename?: 'General' - dae: { __typename?: 'Dae'; running: boolean; modified: boolean } + dae: { __typename?: 'Dae'; running: boolean; modified: boolean; version: string } interfaces: Array<{ __typename?: 'Interface' name: string @@ -2763,6 +2763,7 @@ export const GeneralDocument = { selections: [ { kind: 'Field', name: { kind: 'Name', value: 'running' } }, { kind: 'Field', name: { kind: 'Name', value: 'modified' } }, + { kind: 'Field', name: { kind: 'Name', value: 'version' } }, ], }, }, diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts index 11f02fe2..4fac5e73 100644 --- a/src/vite-env.d.ts +++ b/src/vite-env.d.ts @@ -1 +1,9 @@ /// + +interface ImportMetaEnv { + readonly __VERSION__: string +} + +interface ImportMeta { + readonly env: ImportMetaEnv +} diff --git a/vite.config.ts b/vite.config.ts index 74c83479..b0d4df31 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -2,14 +2,23 @@ import path from 'path' import react from '@vitejs/plugin-react-swc' import { defineConfig } from 'vite' +import EnvironmentPlugin from 'vite-plugin-environment' // eslint-disable-next-line import/no-default-export -export default defineConfig({ - base: './', - resolve: { - alias: { - '~': path.resolve('src'), +export default defineConfig(async ({ mode }) => { + const { $ } = await import('execa') + const { stdout: hash } = await $`git rev-parse --short HEAD` + + return { + base: './', + resolve: { + alias: { + '~': path.resolve('src'), + }, }, - }, - plugins: [react()], + plugins: [ + react(), + EnvironmentPlugin({ __VERSION__: mode === 'development' ? 'dev' : hash }, { defineOn: 'import.meta.env' }), + ], + } })