From dc1328ab8ce722608673be177c98aad2ab4f7056 Mon Sep 17 00:00:00 2001 From: MytsV Date: Wed, 9 Oct 2024 17:43:23 +0300 Subject: [PATCH 1/2] Make some components serverside and add titles to all the renovated pages --- src/app/(rucio)/dashboard/page.tsx | 6 ++- src/app/(rucio)/did/list/page.tsx | 18 +++---- src/app/(rucio)/rse/list/page.tsx | 17 ++++--- src/app/(rucio)/rule/create/page.tsx | 6 ++- src/app/(rucio)/rule/list/page.tsx | 6 ++- src/app/auth/login/page.tsx | 4 ++ .../pages/DID/list/ListDID.tsx | 2 + .../pages/Dashboard/Dashboard.tsx | 48 ++++++++++--------- .../pages/RSE/list/ListRSE.tsx | 2 + .../pages/Rule/list/ListRule.tsx | 2 + 10 files changed, 70 insertions(+), 41 deletions(-) diff --git a/src/app/(rucio)/dashboard/page.tsx b/src/app/(rucio)/dashboard/page.tsx index eaaf686f7..df5b1c083 100644 --- a/src/app/(rucio)/dashboard/page.tsx +++ b/src/app/(rucio)/dashboard/page.tsx @@ -1,5 +1,9 @@ -'use client'; import { Dashboard } from '@/component-library/pages/Dashboard/Dashboard'; + export default function Page() { return ; } + +export const metadata = { + title: 'Dashboard - Rucio', +}; diff --git a/src/app/(rucio)/did/list/page.tsx b/src/app/(rucio)/did/list/page.tsx index 9f9bf219b..8dbdd0e1b 100644 --- a/src/app/(rucio)/did/list/page.tsx +++ b/src/app/(rucio)/did/list/page.tsx @@ -1,14 +1,16 @@ -'use client'; - import { ListDID } from '@/component-library/pages/DID/list/ListDID'; -import { didMetaQueryBase } from '../queries'; -import { useSearchParams } from 'next/navigation'; -export default function Page() { - const searchParams = useSearchParams(); - const firstPattern = searchParams?.get('pattern'); +export default function Page({ searchParams }: { searchParams?: { [key: string]: string | string[] | undefined } }) { + let firstPattern: string | undefined = undefined; + const searchPattern = searchParams?.['pattern']; + if (typeof searchPattern === 'string') { + firstPattern = searchPattern; + } // TODO: fetch initial data - return ; } + +export const metadata = { + title: 'DIDs List - Rucio', +}; diff --git a/src/app/(rucio)/rse/list/page.tsx b/src/app/(rucio)/rse/list/page.tsx index 83bd3567b..87fcc5ff7 100644 --- a/src/app/(rucio)/rse/list/page.tsx +++ b/src/app/(rucio)/rse/list/page.tsx @@ -1,12 +1,17 @@ -'use client'; - import { ListRSE } from '@/component-library/pages/RSE/list/ListRSE'; -import { useSearchParams } from 'next/navigation'; -export default function Page() { - const searchParams = useSearchParams(); - const firstExpression = searchParams?.get('expression'); +export default function Page({ searchParams }: { searchParams?: { [key: string]: string | string[] | undefined } }) { + let firstExpression: string | undefined = undefined; + const searchExpression = searchParams?.['expression']; + + if (typeof searchExpression === 'string') { + firstExpression = searchExpression; + } // TODO: fetch initial data return ; } + +export const metadata = { + title: 'RSEs List - Rucio', +}; diff --git a/src/app/(rucio)/rule/create/page.tsx b/src/app/(rucio)/rule/create/page.tsx index cbe2d9b43..db0cba917 100644 --- a/src/app/(rucio)/rule/create/page.tsx +++ b/src/app/(rucio)/rule/create/page.tsx @@ -1,12 +1,16 @@ 'use client'; import { CreateRule } from '@/component-library/pages/Rule/create/CreateRule'; -import { parameters } from '../../../../../.storybook/preview'; import { CreateRuleParameters } from '@/lib/infrastructure/data/view-model/rule'; +import { useEffect } from 'react'; const PARAMS_KEY = 'create_rule_parameters'; const ACTIVE_KEY = 'create_rule_active'; export default function Page() { + useEffect(() => { + document.title = 'Create Rule - Rucio'; + }, []); + const getSavedParameters = () => { const initialParametersString = localStorage.getItem(PARAMS_KEY); // TODO: check with zod diff --git a/src/app/(rucio)/rule/list/page.tsx b/src/app/(rucio)/rule/list/page.tsx index 9a5fc55dc..957885785 100644 --- a/src/app/(rucio)/rule/list/page.tsx +++ b/src/app/(rucio)/rule/list/page.tsx @@ -1,7 +1,9 @@ -'use client'; - import { ListRule } from '@/component-library/pages/Rule/list/ListRule'; export default function Page() { return ; } + +export const metadata = { + title: 'Rules List - Rucio', +}; diff --git a/src/app/auth/login/page.tsx b/src/app/auth/login/page.tsx index a45c71952..fd98d67d0 100644 --- a/src/app/auth/login/page.tsx +++ b/src/app/auth/login/page.tsx @@ -7,6 +7,10 @@ import { Login as LoginStory } from '@/component-library/pages/legacy/Login/Logi import { AuthType, Role, VO } from '@/lib/core/entity/auth-models'; export default function Login() { + useEffect(() => { + document.title = 'Login - Rucio'; + }, []); + const [redirectURL, setRedirectURL] = useState('/dashboard' as string); const [viewModel, setViewModel] = useState(); const [authViewModel, setAuthViewModel] = useState(); diff --git a/src/component-library/pages/DID/list/ListDID.tsx b/src/component-library/pages/DID/list/ListDID.tsx index 70b26496f..890c2814c 100644 --- a/src/component-library/pages/DID/list/ListDID.tsx +++ b/src/component-library/pages/DID/list/ListDID.tsx @@ -1,3 +1,5 @@ +'use client'; + import { DIDMetaViewModel, DIDViewModel } from '@/lib/infrastructure/data/view-model/did'; import React, { useEffect, useState } from 'react'; import { StreamingStatus } from '@/lib/infrastructure/hooks/useStreamReader'; diff --git a/src/component-library/pages/Dashboard/Dashboard.tsx b/src/component-library/pages/Dashboard/Dashboard.tsx index 8b3f6040c..5f102ab7d 100644 --- a/src/component-library/pages/Dashboard/Dashboard.tsx +++ b/src/component-library/pages/Dashboard/Dashboard.tsx @@ -1,16 +1,18 @@ -import {useQuery} from '@tanstack/react-query'; -import {SiteHeaderViewModel} from '@/lib/infrastructure/data/view-model/site-header'; -import {getSiteHeader} from '@/app/(rucio)/queries'; -import {LoadingSpinner} from '@/component-library/atoms/loading/LoadingSpinner'; -import {Heading} from '@/component-library/atoms/misc/Heading'; -import {WarningField} from '@/component-library/features/fields/WarningField'; -import {AccountRoleBadge} from '@/component-library/features/badges/account/AccountRoleBadge'; -import {TopRulesWidget} from '@/component-library/pages/Dashboard/widgets/TopRulesWidget'; -import {useEffect, useRef, useState} from 'react'; -import {RuleViewModel} from '@/lib/infrastructure/data/view-model/rule'; -import useStreamReader, {StreamingStatus} from '@/lib/infrastructure/hooks/useStreamReader'; -import {RSEAccountUsageViewModel} from '@/lib/infrastructure/data/view-model/rse'; -import {TopStorageUsageWidget} from '@/component-library/pages/Dashboard/widgets/TopStorageUsageWidget'; +'use client'; + +import { useQuery } from '@tanstack/react-query'; +import { SiteHeaderViewModel } from '@/lib/infrastructure/data/view-model/site-header'; +import { getSiteHeader } from '@/app/(rucio)/queries'; +import { LoadingSpinner } from '@/component-library/atoms/loading/LoadingSpinner'; +import { Heading } from '@/component-library/atoms/misc/Heading'; +import { WarningField } from '@/component-library/features/fields/WarningField'; +import { AccountRoleBadge } from '@/component-library/features/badges/account/AccountRoleBadge'; +import { TopRulesWidget } from '@/component-library/pages/Dashboard/widgets/TopRulesWidget'; +import { useEffect, useRef, useState } from 'react'; +import { RuleViewModel } from '@/lib/infrastructure/data/view-model/rule'; +import useStreamReader, { StreamingStatus } from '@/lib/infrastructure/hooks/useStreamReader'; +import { RSEAccountUsageViewModel } from '@/lib/infrastructure/data/view-model/rse'; +import { TopStorageUsageWidget } from '@/component-library/pages/Dashboard/widgets/TopStorageUsageWidget'; const AccountHeading = () => { const querySiteHeader = async () => { @@ -34,7 +36,7 @@ const AccountHeading = () => { retry: false, }); - if (isHeaderFetching) return ; + if (isHeaderFetching) return ; if (headerError || !header?.activeAccount) { return ( @@ -46,8 +48,8 @@ const AccountHeading = () => { return (
- - + +
); }; @@ -55,7 +57,7 @@ const AccountHeading = () => { const UsageView = () => { const usageBuffer = useRef([]); const [usages, setUsages] = useState(); - const {start, stop, error, status} = useStreamReader(); + const { start, stop, error, status } = useStreamReader(); useEffect(() => { // TODO: handle error view models @@ -80,13 +82,13 @@ const UsageView = () => { const isLoading = (!usages && !error) || status === StreamingStatus.RUNNING; - return ; + return ; }; const RulesView = () => { const rulesBuffer = useRef([]); const [rules, setRules] = useState(); - const {start, stop, error, status} = useStreamReader(); + const { start, stop, error, status } = useStreamReader(); const getCreatedAfterDate = () => { // Only the rules that were created less than 15 days ago should get loaded @@ -122,17 +124,17 @@ const RulesView = () => { const isLoading = (!rules && !error) || status === StreamingStatus.RUNNING; - return ; + return ; }; export const Dashboard = () => { return (
- +
- - + +
); }; diff --git a/src/component-library/pages/RSE/list/ListRSE.tsx b/src/component-library/pages/RSE/list/ListRSE.tsx index 5530b1c32..c96a4f123 100644 --- a/src/component-library/pages/RSE/list/ListRSE.tsx +++ b/src/component-library/pages/RSE/list/ListRSE.tsx @@ -1,3 +1,5 @@ +'use client'; + import { RSEViewModel } from '@/lib/infrastructure/data/view-model/rse'; import { StreamingStatus } from '@/lib/infrastructure/hooks/useStreamReader'; import { ListRSETable } from '@/component-library/pages/RSE/list/ListRSETable'; diff --git a/src/component-library/pages/Rule/list/ListRule.tsx b/src/component-library/pages/Rule/list/ListRule.tsx index 53a2f5838..bcb741d5e 100644 --- a/src/component-library/pages/Rule/list/ListRule.tsx +++ b/src/component-library/pages/Rule/list/ListRule.tsx @@ -1,3 +1,5 @@ +'use client'; + import { ChangeEvent, useState } from 'react'; import { RuleViewModel } from '@/lib/infrastructure/data/view-model/rule'; import { StreamingStatus } from '@/lib/infrastructure/hooks/useStreamReader'; From 156923aef69335bcf41f64e802da0903011a65ea Mon Sep 17 00:00:00 2001 From: MytsV Date: Wed, 9 Oct 2024 17:54:12 +0300 Subject: [PATCH 2/2] Add a favicon --- src/app/layout.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index fda6ff540..bd90f2f08 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -9,7 +9,9 @@ export default function RootLayout({ children }: { children: React.ReactNode }) will contain the components returned by the nearest parent head.tsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head */} - + + + {children} );