Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PMM-12930 Update status, log & clients #3039

Merged
merged 111 commits into from
Oct 21, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
111 commits
Select commit Hold shift + click to select a range
6a25374
PMM-11231 Setup PMM UI
matejkubinec Mar 15, 2024
0612fcb
PMM-11231 Update working directory for node setup
matejkubinec Mar 18, 2024
bcc34f2
PMM-11231 Adjust setup node step
matejkubinec Mar 18, 2024
b59a3d6
Merge branch 'v3' into PMM-11231-pmm-updates-ui
matejkubinec Mar 22, 2024
6c5c039
PMM-11231 Add build & cleanup makefile
matejkubinec Mar 22, 2024
4a302de
PMM-11231 Use correct UI directory
matejkubinec Mar 22, 2024
430cf5e
PMM-11231 Adjust pmm-ui build directory
matejkubinec Mar 25, 2024
1e0ec32
PMM-11231 Add install commands
matejkubinec Mar 25, 2024
b0039cc
PMM-11231 Add pmm ui directory to files section
matejkubinec Mar 25, 2024
d43c7ac
PMM-11231 Copy correct build files
matejkubinec Mar 25, 2024
9de6da9
Merge branch 'v3' into PMM-11231-pmm-updates-ui
matejkubinec Apr 9, 2024
056475d
PMM-11231 Handle token rotation
matejkubinec May 13, 2024
7891203
Merge branch 'v3' into PMM-11231-pmm-updates-ui
matejkubinec May 13, 2024
0fb9834
Merge branch 'v3' into PMM-11231-pmm-updates-ui
matejkubinec May 17, 2024
9b2e892
PMM-11231 Simplify spec file
matejkubinec May 20, 2024
5e65f0b
PMM-11231 Update dependencies
matejkubinec May 20, 2024
1ff025a
PMM-11231 Allow use of eslints non flat config
matejkubinec May 20, 2024
57a0760
PMM-11231 Align version fetch logic with previous
matejkubinec May 20, 2024
b5fe26a
PMM-11231 Refactor fetching icon
matejkubinec May 20, 2024
a420dc6
Merge branch 'v3' into PMM-11231-pmm-updates-ui
matejkubinec Jun 4, 2024
b96b1a9
PMM-11231 Update compose file
matejkubinec Jun 5, 2024
d1abfc5
Merge branch 'v3' into PMM-11231-pmm-updates-ui
matejkubinec Jun 5, 2024
d33922d
PMM-11231 Use /pmm-ui as path
matejkubinec Jun 7, 2024
a191887
PMM-11231 Allow specifying pmm server image through env variable
matejkubinec Jun 10, 2024
56b3329
PMM-12930 Show update status
matejkubinec Jun 18, 2024
a625613
PMM-11231 Switch to tanstack query
matejkubinec Jun 18, 2024
70ed847
Merge branch 'PMM-11231-pmm-updates-ui' into PMM-12930-update-status
matejkubinec Jun 18, 2024
57a647a
PMM-12930 Fix lint
matejkubinec Jun 18, 2024
732ae7b
Merge branch 'v3' into PMM-11231-pmm-updates-ui
matejkubinec Jun 25, 2024
6940ec1
Merge branch 'v3' into PMM-11231-pmm-updates-ui
matejkubinec Jun 26, 2024
0e98920
Merge branch 'PMM-11231-pmm-updates-ui' into PMM-12930-update-status
matejkubinec Jun 26, 2024
ff0388a
PMM-11231 Update dev configuration
matejkubinec Jun 28, 2024
ae5d5d8
PMM-11231 Use correct naming & switch to hooks
matejkubinec Jun 28, 2024
aad2a90
Merge branch 'v3' into PMM-11231-pmm-updates-ui
matejkubinec Jun 28, 2024
e7d1558
Merge branch 'PMM-11231-pmm-updates-ui'
matejkubinec Jun 28, 2024
d40c2ed
PMM-11231 Use different name for update image
matejkubinec Jun 28, 2024
47f513b
Merge branch 'PMM-11231-pmm-updates-ui' into PMM-12930-update-status
matejkubinec Jun 28, 2024
1400875
PMM-12930 Improve update process
matejkubinec Jun 28, 2024
15af0eb
Merge branch 'v3' into PMM-11231-pmm-updates-ui
matejkubinec Jul 4, 2024
e9a654f
PMM-11231 Disable auth_request for pmm-ui
matejkubinec Jul 4, 2024
a46f06f
PMM-11231 Rework redirect to login
matejkubinec Jul 4, 2024
b818c13
Merge branch 'PMM-11231-pmm-updates-ui' into PMM-12930-update-status
matejkubinec Jul 4, 2024
c6ff9f2
Merge branch 'v3' into PMM-11231-pmm-updates-ui
matejkubinec Jul 9, 2024
5eb4685
PMM-11231 Update api response
matejkubinec Jul 9, 2024
d1192fb
PMM-11231 Add link to support
matejkubinec Jul 9, 2024
9d8d66c
PMM-11231 Fix support url redirect
matejkubinec Jul 9, 2024
eb04dea
Merge branch 'PMM-11231-pmm-updates-ui' into PMM-12930-update-status
matejkubinec Jul 9, 2024
13783c1
PMM-11231 Fix lint
matejkubinec Jul 9, 2024
9d56ff5
Merge branch 'PMM-11231-pmm-updates-ui' into PMM-12930-update-status
matejkubinec Jul 9, 2024
b4d06f2
PMM-11231 Fix typings
matejkubinec Jul 9, 2024
24245d8
Merge branch 'PMM-11231-pmm-updates-ui' into PMM-12930-update-status
matejkubinec Jul 9, 2024
5a3558f
PMM-12930 Fix version typings
matejkubinec Jul 9, 2024
c43a199
PMM-11231 Add admin & auth check
matejkubinec Jul 9, 2024
c69e4e7
Merge branch 'PMM-11231-pmm-updates-ui' into PMM-12930-update-status
matejkubinec Jul 9, 2024
c6dc014
PMM-12930 Make page component responsive
matejkubinec Jul 9, 2024
e00aa07
PMM-12930 Add Page unit tests
matejkubinec Jul 9, 2024
d0e38c6
PMM-12930 Make page component responsive
matejkubinec Jul 9, 2024
f4a4278
PMM-12930 Add Page unit tests
matejkubinec Jul 9, 2024
2b30722
Merge branch 'v3' into PMM-11231-pmm-updates-ui
matejkubinec Jul 16, 2024
a9ca17f
Merge branch 'v3 into PMM-11231-pmm-updates-ui
matejkubinec Jul 23, 2024
7660144
PMM-11231 Update api endpoints
matejkubinec Jul 23, 2024
24419f7
Merge branch 'PMM-11231-pmm-updates-ui'
matejkubinec Jul 23, 2024
0e84db1
Merge branch 'v3' into PMM-12930-update-status
matejkubinec Jul 23, 2024
cd6b68f
PMM-12930 Add upgrade docs link
matejkubinec Jul 24, 2024
10a6027
PMM-12930 Update types & readyz url
matejkubinec Jul 24, 2024
1c9fbae
PMM-12930 Remove temporary error handling
matejkubinec Jul 24, 2024
1a0c169
Merge branch 'v3'
matejkubinec Jul 30, 2024
0ce8c1f
PMM-12930 Add footer
matejkubinec Jul 30, 2024
4b8741b
PMM-12930 Refactor footer
matejkubinec Jul 31, 2024
f4baa7f
PMM-12930 Refactor user context imports
matejkubinec Jul 31, 2024
af25a3c
Merge branch 'v3' into PMM-12930-update-status
matejkubinec Jul 31, 2024
042f4bc
PMM-12930 Add doc comnent
matejkubinec Jul 31, 2024
97e7bfa
PMM-12930 Update progress bar color
matejkubinec Jul 31, 2024
09c273d
PMM-12930 Update progress bar
matejkubinec Jul 31, 2024
a4dcc8b
PMM-12930 Bump packages
matejkubinec Aug 1, 2024
25885c2
PMM-12930 Fix updates check
matejkubinec Aug 1, 2024
d8160d8
PMM-12934 Add page for client updates
matejkubinec Aug 2, 2024
7913606
PMM-12934 Extend page & remove mocks
matejkubinec Aug 6, 2024
fa602e2
PMM-12934 Update table loading
matejkubinec Aug 6, 2024
5655e31
PMM-12934 Use custom filter component
matejkubinec Aug 7, 2024
e60be81
PMM-12933 Add update log modal
matejkubinec Aug 6, 2024
b863567
PMM-12934 Add next button
matejkubinec Aug 7, 2024
c1d48e0
Merge branch 'v3' into PMM-12930-update-status
matejkubinec Aug 7, 2024
7080cf3
PMM-12930 Add unit tests
matejkubinec Aug 7, 2024
5e479f1
PMM-12930 Downgrade eslint version
matejkubinec Aug 7, 2024
cd16eb2
PMM-12934 Add check for pending client update
matejkubinec Aug 8, 2024
2839ee4
PMM-12934 Adjust styling
matejkubinec Aug 8, 2024
f9bc558
Merge branch 'v3' into PMM-12930-update-status
matejkubinec Aug 8, 2024
61f9a34
PMM-12930 Fix before CR
matejkubinec Aug 8, 2024
8a0840b
PMM-12930 Remove empty file
matejkubinec Aug 8, 2024
834b3a9
PMM-12930 Simplify initial auth check
matejkubinec Aug 16, 2024
b23b13d
PMM-12930 Make appbar sticky
matejkubinec Aug 21, 2024
f8241f7
PMM-12930 Fix font loading
matejkubinec Aug 21, 2024
5b43f9c
PMM-12930 Adjust section spacing
matejkubinec Aug 22, 2024
7552580
Merge branch 'v3' into PMM-12930-update-status
matejkubinec Aug 22, 2024
3d58300
PMM-12930 Bump axios version
matejkubinec Aug 22, 2024
4d90b8f
PMM-7 fix proto validation error
ademidoff Aug 23, 2024
7c4467f
PMM-12930 Use table from ui-lib
matejkubinec Aug 23, 2024
3239011
Merge branch 'v3' into PMM-12930-update-status
matejkubinec Aug 23, 2024
44c560b
Merge branch 'v3' into PMM-12930-update-status
matejkubinec Sep 2, 2024
d58a4bf
Merge branch 'v3' into PMM-12930-update-status
matejkubinec Sep 11, 2024
c2bed19
PMM-12930 Update dev nginx file
matejkubinec Sep 12, 2024
e1f73fa
PMM-12930 Use shortened links
matejkubinec Sep 12, 2024
bd3342c
Merge branch 'v3' into PMM-12930-update-status
matejkubinec Sep 16, 2024
e812396
Merge branch 'v3' into PMM-12930-update-status
matejkubinec Sep 23, 2024
384d210
PMM-12930 Add pmm home button, rework dialog & add test
matejkubinec Oct 2, 2024
68e2870
Merge branch 'v3' into PMM-12930-update-status
matejkubinec Oct 2, 2024
89af059
PMM-12930 Improve clients update check
matejkubinec Oct 2, 2024
8605e39
PMM-12930 Highligh only Release Notes
matejkubinec Oct 8, 2024
7ac4b74
Merge branch 'v3' into PMM-12930-update-status
matejkubinec Oct 8, 2024
03dfd10
Merge branch 'v3' into PMM-12930-update-status
matejkubinec Oct 21, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 16 additions & 9 deletions ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"lint": "ESLINT_USE_FLAT_CONFIG=false eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"format": "prettier . --write",
"preview": "vite preview",
"test": "vitest run",
Expand All @@ -15,13 +15,16 @@
"dependencies": {
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
"@fontsource/poppins": "^5.0.15",
"@fontsource/roboto": "^5.0.14",
"@fontsource/roboto-mono": "^5.0.18",
"@mui/icons-material": "^5.15.18",
"@mui/material": "^5.15.18",
"@mui/x-date-pickers": "^7.5.0",
"@percona/design": "^1.0.0",
"@percona/ui-lib": "^1.0.0",
"@tanstack/react-query": "^5.45.1",
"axios": "^1.7.0",
"axios": "^1.7.4",
"axios-case-converter": "^1.1.1",
"date-fns": "^2.30.0",
"react": "^18.3.1",
Expand All @@ -32,23 +35,27 @@
"@percona/eslint-config-react": "^1.0.0",
"@percona/prettier-config": "^1.0.0",
"@percona/tsconfig": "^1.0.0",
"@testing-library/jest-dom": "^6.4.5",
"@testing-library/jest-dom": "^6.4.8",
"@testing-library/react": "^15.0.7",
"@types/react": "^18.3.2",
"@types/react-dom": "^18.3.0",
"@typescript-eslint/eslint-plugin": "^7.9.0",
"@typescript-eslint/parser": "^7.9.0",
"@vitejs/plugin-react-swc": "^3.6.0",
"eslint": "^9.3.0",
"@vitejs/plugin-react-swc": "^3.7.0",
"eslint": "^8.57.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-react-hooks": "^4.6.2",
"eslint-plugin-react-refresh": "^0.4.7",
"jsdom": "^24.0.0",
"jsdom": "^24.1.1",
"prettier": "^3.2.5",
"typescript": "^5.4.5",
"vite": "^5.2.11",
"vite": "^5.3.5",
"vite-tsconfig-paths": "^4.3.2",
"vitest": "^1.6.0"
"vitest": "^2.0.5"
},
"resolutions": {
"braces": "^3.0.3",
"vite": "^5.3.5"
},
"prettier": "@percona/prettier-config"
}
}
3 changes: 3 additions & 0 deletions ui/pmm-dev.conf
Original file line number Diff line number Diff line change
Expand Up @@ -16,5 +16,8 @@ server {
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";

# duplicate so http_host is correctly set
rewrite ^/$ $scheme://$http_host/graph/;
}
}
7 changes: 5 additions & 2 deletions ui/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ import { NotistackMuiSnackbar } from '@percona/ui-lib';
import { SnackbarProvider } from 'notistack';
import pmmThemeOptions from 'themes/PmmTheme';
import { AuthProvider } from 'contexts/auth';
import { UserProvider } from 'contexts/user/user.provider';
import { UserProvider } from 'contexts/user';
import { UpdatesProvider } from 'contexts/updates';

const queryClient = new QueryClient({
defaultOptions: {
Expand Down Expand Up @@ -39,7 +40,9 @@ const App = () => (
<QueryClientProvider client={queryClient}>
<AuthProvider>
<UserProvider>
<RouterProvider router={router} />
<UpdatesProvider>
<RouterProvider router={router} />
</UpdatesProvider>
</UserProvider>
</AuthProvider>
</QueryClientProvider>
Expand Down
10 changes: 10 additions & 0 deletions ui/src/api/__mocks__/agents.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { AgentUpdateSeverity, GetAgentVersionItem } from 'types/agent.types';

export const getAgentVersions = async (): Promise<GetAgentVersionItem[]> => [
{
agentId: 'pmm-server',
version: '3.0.0',
nodeName: 'pmm-server',
severity: AgentUpdateSeverity.UP_TO_DATE,
},
];
9 changes: 9 additions & 0 deletions ui/src/api/agents.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { GetAgentVersionsResponse } from 'types/agent.types';
import { api } from './api';

export const getAgentVersions = async () => {
const res = await api.get<GetAgentVersionsResponse>(
'/management/agents/versions'
);
return res.data.agentVersions;
};
6 changes: 6 additions & 0 deletions ui/src/api/ready.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { api } from './api';

export const getReadiness = async () => {
const res = await api.get<Record<string, never>>('/server/readyz');
return res.data;
};
11 changes: 6 additions & 5 deletions ui/src/api/updates.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {
GetUpdateStatusResponse,
GetUpdatesParams,
GetUpdatesResponse,
StartUpdateBody,
StartUpdateResponse,
} from 'types/updates.types';
import { api } from './api';
Expand All @@ -17,11 +18,11 @@ export const checkForUpdates = async (
return res.data;
};

export const startUpdate = async () => {
const res = await api.post<object, AxiosResponse<StartUpdateResponse>>(
'/server/updates:start',
{}
);
export const startUpdate = async (body: StartUpdateBody) => {
const res = await api.post<
StartUpdateBody,
AxiosResponse<StartUpdateResponse>
>('/server/updates:start', body);
return res.data;
};

Expand Down
16 changes: 8 additions & 8 deletions ui/src/components/app-bar/AppBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,26 +8,26 @@ import {
} from '@mui/material';
import { HelpFilledIcon, PmmRoundedIcon } from 'icons';
import { Breadcrumbs } from 'components/breadcrumbs';
import { PMM_HOME_URL, PMM_SUPPORT_URL } from 'constants';
import { PMM_SUPPORT_URL } from 'constants';
import { Messages } from './AppBar.messages';
import { HomeLink } from 'components/home-link';

export const AppBar = () => (
<MuiAppBar position="static" color="primary">
<MuiAppBar position="sticky" color="primary">
<Toolbar>
<Link
href={PMM_HOME_URL}
<HomeLink
color="inherit"
underline="hover"
sx={(theme) => ({
marginRight: theme.spacing(2),
})}
sx={{
mr: 2,
}}
data-testid="appbar-pmm-link"
>
<Stack gap={1} direction="row" alignItems="center">
<PmmRoundedIcon sx={{ height: '40px', width: 'auto' }} />
<Typography>{Messages.title}</Typography>
</Stack>
</Link>
</HomeLink>
<Breadcrumbs />
<Box sx={{ ml: 'auto' }}>
<Link
Expand Down
6 changes: 3 additions & 3 deletions ui/src/components/breadcrumbs/Breadcrumbs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ import {
} from '@mui/material';
import { Link as RouterLink } from 'react-router-dom';
import { KeyboardArrowRight } from '@mui/icons-material';
import { PMM_HOME_URL } from 'constants';
import { Messages } from './Breadcrumbs.messages';
import { HomeLink } from 'components/home-link';

export const Breadcrumbs: FC = () => {
const theme = useTheme();
Expand All @@ -19,9 +19,9 @@ export const Breadcrumbs: FC = () => {
color="text"
separator={<KeyboardArrowRight fontSize="small" />}
>
<Link underline="hover" color="inherit" href={PMM_HOME_URL}>
<HomeLink underline="hover" color="inherit">
{Messages.home}
</Link>
</HomeLink>
<Link
underline="hover"
component={RouterLink}
Expand Down
5 changes: 5 additions & 0 deletions ui/src/components/footer/Footer.messages.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export const Messages = {
version: (version: string) => `PMM ${version}`,
inProgress: 'Update in progress...',
checkedOn: (date: string) => `Checked on: ${date}`,
};
32 changes: 32 additions & 0 deletions ui/src/components/footer/Footer.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { screen, render } from '@testing-library/react';
import { Footer } from './Footer';
import { Messages } from './Footer.messages';
import { wrapWithUpdatesProvider } from 'utils/testUtils';

describe('Footer', () => {
it("doesnt't show when version info is not available", () => {
render(
wrapWithUpdatesProvider(<Footer />, {
versionInfo: undefined,
})
);

expect(screen.queryByTestId('pmm-footer')).toBeNull();
});

it('shows correct checked date', () => {
render(wrapWithUpdatesProvider(<Footer />));

expect('Checked on: 2024/07/30');
});

it('shows in progress message', () => {
render(
wrapWithUpdatesProvider(<Footer />, {
inProgress: true,
})
);

expect(screen.getByText(Messages.inProgress));
});
});
24 changes: 24 additions & 0 deletions ui/src/components/footer/Footer.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { Stack, Typography } from '@mui/material';
import { useUpdates } from 'contexts/updates';
import { FC } from 'react';
import { formatCheckDate } from './Footer.utils';
import { Messages } from './Footer.messages';

export const Footer: FC = () => {
const { inProgress, versionInfo } = useUpdates();

if (!versionInfo) return null;

return (
<Stack direction="row" gap={2} data-testid="pmm-footer">
<Typography variant="body2">
{Messages.version(versionInfo.installed.version)}
</Typography>
<Typography variant="body2" color="text.disabled">
{inProgress
? Messages.inProgress
: Messages.checkedOn(formatCheckDate(versionInfo.lastCheck))}
</Typography>
</Stack>
);
};
7 changes: 7 additions & 0 deletions ui/src/components/footer/Footer.utils.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
/**
* Formats date to YYYY/MM/DD
* @param date
* @returns formatted date
*/
export const formatCheckDate = (date: string) =>
new Date(date).toISOString().slice(0, 10).replace(/-/g, '/');
1 change: 1 addition & 0 deletions ui/src/components/footer/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './Footer';
66 changes: 66 additions & 0 deletions ui/src/components/home-link/HomeLink.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import { wrapWithUpdatesProvider } from 'utils/testUtils';
import { HomeLink } from './HomeLink';
import { fireEvent, render, screen } from '@testing-library/react';
import { UpdateStatus } from 'types/updates.types';
import { PMM_HOME_URL } from 'constants';
import { MemoryRouter } from 'react-router-dom';

describe('HomeLink', () => {
it('navigates to PMM Home if client update is not pending', () => {
render(
wrapWithUpdatesProvider(
<MemoryRouter initialEntries={[{ pathname: '/updates/clients' }]}>
<HomeLink data-testid="home-link" />
</MemoryRouter>,
{
status: UpdateStatus.UpToDate,
}
)
);

expect(screen.getByTestId('home-link')).toHaveAttribute(
'href',
PMM_HOME_URL
);
});

it('shows modal if client update is pending', () => {
render(
wrapWithUpdatesProvider(
<MemoryRouter initialEntries={[{ pathname: '/updates/clients' }]}>
<HomeLink data-testid="home-link" />
</MemoryRouter>,
{
status: UpdateStatus.UpdateClients,
areClientsUpToDate: false,
}
)
);
const homeLink = screen.getByTestId('home-link');

expect(homeLink).not.toHaveAttribute('href', PMM_HOME_URL);

fireEvent.click(homeLink);

expect(screen.getByTestId('modal-clients-update-pending')).toBeDefined();
});

it("doesn't propmt on pages other than client updates", () => {
render(
wrapWithUpdatesProvider(
<MemoryRouter initialEntries={[{ pathname: '/updates' }]}>
<HomeLink data-testid="home-link" />
</MemoryRouter>,
{
status: UpdateStatus.UpdateClients,
areClientsUpToDate: false,
}
)
);

expect(screen.getByTestId('home-link')).toHaveAttribute(
'href',
PMM_HOME_URL
);
});
});
39 changes: 39 additions & 0 deletions ui/src/components/home-link/HomeLink.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import { Link, LinkProps } from '@mui/material';
import { PMM_HOME_URL } from 'constants';
import { useUpdates } from 'contexts/updates';
import { FC, useMemo, useState } from 'react';
import { UpdateStatus } from 'types/updates.types';
import { ClientsModal } from './clients-modal';
import { useLocation } from 'react-router-dom';

export const HomeLink: FC<LinkProps> = ({ children, sx, ...props }) => {
const { status, areClientsUpToDate } = useUpdates();
const [modalOpen, setModalOpen] = useState(false);
const location = useLocation();
const isOnClientsPage = useMemo(
() => location.pathname.startsWith('/updates/clients'),
[location]
);
const homeLinkProps =
(status === UpdateStatus.UpdateClients || !areClientsUpToDate) &&
isOnClientsPage
? {
onClick: () => setModalOpen(true),
}
: {
href: PMM_HOME_URL,
};

return (
<>
<ClientsModal isOpen={modalOpen} onClose={() => setModalOpen(false)} />
<Link
{...props}
sx={[{ cursor: 'pointer ' }, ...(Array.isArray(sx) ? sx : [sx])]}
{...homeLinkProps}
>
{children}
</Link>
</>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
export const Messages = {
title: 'PMM has not finished updating',
description1:
'One or more PMM Client instances are not updated yet and will remain in an outdated version.',
description2:
'If you exit now you will not take advatages of the newest fixes, improvements and features.',
close: 'Close window',
home: 'Go to PMM Home',
};
Loading
Loading