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>
daeuniverse · Jul 3, 2023 · 6f9b1b8 · 6f9b1b8
1 parent 90f33d5
commit 6f9b1b8
Show file tree

Hide file tree

Showing 11 changed files with 146 additions and 82 deletions.
diff --git 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
diff --git 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 = () => {
     <RouterType>
       <Routes>
         <Route path="/" element={<MainLayout />}>
-          <Route index element={<HomePage />} />
-          <Route path="orchestrate" element={<OrchestratePage />} />
+          <Route index element={<OrchestratePage />} />
           <Route path="experiment" element={<ExperimentPage />} />
         </Route>
 

diff --git 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
@@ -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: <IconCloudComputing /> }]
+  const links = []
 
   if (import.meta.env.DEV) {
     links.push({ link: '/experiment', label: t('experiment'), icon: <IconTestPipe /> })
@@ -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 = () => {
     <header className={classes.header}>
       <Container className={classes.mainSection}>
         <Group position="apart">
-          <Anchor component={Link} to="/">
-            <Group>
-              <Image radius="sm" src={logo} width={32} height={32} />
-
-              <Title order={matchSmallScreen ? 5 : 2} color={theme.colorScheme === 'dark' ? theme.white : theme.black}>
-                daed
-              </Title>
-            </Group>
-          </Anchor>
+          <Group spacing="sm">
+            <Anchor component={Link} to="/">
+              <Group spacing="sm">
+                <Image radius="sm" src={logo} width={32} height={32} />
+
+                <Title
+                  order={matchSmallScreen ? 5 : 2}
+                  color={theme.colorScheme === 'dark' ? theme.white : theme.black}
+                >
+                  daed
+                </Title>
+              </Group>
+            </Anchor>
+
+            <Tooltip label={endpointURL} withArrow>
+              <Code fz="xs" fw={700}>
+                {generalQuery?.general.dae.version || import.meta.env.__VERSION__}
+              </Code>
+            </Tooltip>
+          </Group>
 
-          <Group>
+          <Group spacing={matchSmallScreen ? 'xs' : 'md'}>
             <Menu
               width={260}
               position="bottom-end"
@@ -252,41 +269,54 @@ export const HeaderWithActions = () => {
 
             <Tooltip label={t('actions.switchRunning')} withArrow>
               <Box>
-                <Switch
-                  size="md"
-                  onLabel={<IconCloudCheck />}
-                  offLabel={<IconCloudPause />}
-                  disabled={!generalQuery?.general.dae.running && runMutation.isLoading}
-                  checked={generalQuery?.general.dae.running}
-                  onChange={(e) => {
-                    runMutation.mutateAsync(!e.target.checked)
-                  }}
-                />
+                {matchSmallScreen ? (
+                  <Switch
+                    size="xs"
+                    disabled={!generalQuery?.general.dae.running && runMutation.isLoading}
+                    checked={generalQuery?.general.dae.running}
+                    onChange={(e) => {
+                      runMutation.mutateAsync(!e.target.checked)
+                    }}
+                  />
+                ) : (
+                  <Switch
+                    size="md"
+                    onLabel={<IconCloudCheck />}
+                    offLabel={<IconCloudPause />}
+                    disabled={!generalQuery?.general.dae.running && runMutation.isLoading}
+                    checked={generalQuery?.general.dae.running}
+                    onChange={(e) => {
+                      runMutation.mutateAsync(!e.target.checked)
+                    }}
+                  />
+                )}
               </Box>
             </Tooltip>
           </Group>
         </Group>
       </Container>
 
-      <Center>
-        <Tabs
-          variant="outline"
-          value={location.pathname}
-          onTabChange={(to) => navigate(`${to}`)}
-          classNames={{
-            tabsList: classes.tabsList,
-            tab: classes.tab,
-          }}
-        >
-          <Tabs.List>
-            {links.map(({ link, icon, label }) => (
-              <Tabs.Tab key={link} value={link} icon={icon}>
-                {label}
-              </Tabs.Tab>
-            ))}
-          </Tabs.List>
-        </Tabs>
-      </Center>
+      {links.length > 0 && (
+        <Center>
+          <Tabs
+            variant="outline"
+            value={location.pathname}
+            onTabChange={(to) => navigate(`${to}`)}
+            classNames={{
+              tabsList: classes.tabsList,
+              tab: classes.tab,
+            }}
+          >
+            <Tabs.List>
+              {links.map(({ link, icon, label }) => (
+                <Tabs.Tab key={link} value={link} icon={icon}>
+                  {label}
+                </Tabs.Tab>
+              ))}
+            </Tabs.List>
+          </Tabs>
+        </Center>
+      )}
 
       <Drawer opened={openedBurger} onClose={closeBurger} size="100%">
         <SimpleGrid cols={3}>

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
diff --git 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
@@ -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
@@ -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
@@ -1 +1,9 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly __VERSION__: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -126,6 +126,7 @@ export const useGeneralQuery = () => { @@
                   dae {
                     running
                     modified
+                    version
                   }
                   interfaces(up: $up) {
                     name
@@ Expand Down @@