PMM-12930 Update status, log & clients

ui/package.json

@@ -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",
@@ -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",
@@ -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"
-}
+}

ui/src/App.tsx

@@ -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: {
@@ -39,7 +40,9 @@ const App = () => (
         <QueryClientProvider client={queryClient}>
           <AuthProvider>
             <UserProvider>
-              <RouterProvider router={router} />
+              <UpdatesProvider>
+                <RouterProvider router={router} />
+              </UpdatesProvider>
             </UserProvider>
           </AuthProvider>
         </QueryClientProvider>

ui/src/api/agents.ts

@@ -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;
+};

ui/src/api/ready.ts

@@ -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;
+};

ui/src/api/updates.ts

@@ -4,6 +4,7 @@ import {
   GetUpdateStatusResponse,
   GetUpdatesParams,
   GetUpdatesResponse,
+  StartUpdateBody,
   StartUpdateResponse,
 } from 'types/updates.types';
 import { api } from './api';
@@ -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;
 };
 

ui/src/components/app-bar/AppBar.tsx

@@ -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

ui/src/components/breadcrumbs/Breadcrumbs.tsx

@@ -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();
@@ -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}

ui/src/components/footer/Footer.messages.ts

@@ -0,0 +1,5 @@
+export const Messages = {
+  version: (version: string) => `PMM ${version}`,
+  inProgress: 'Update in progress...',
+  checkedOn: (date: string) => `Checked on: ${date}`,
+};

ui/src/components/footer/Footer.test.tsx

@@ -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));
+  });
+});

ui/src/components/footer/Footer.tsx

@@ -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>
+  );
+};

ui/src/components/footer/Footer.utils.ts

@@ -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, '/');

ui/src/components/footer/index.ts

@@ -0,0 +1 @@
+export * from './Footer';

ui/src/components/home-link/HomeLink.test.tsx

@@ -0,0 +1,35 @@
+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';
+
+describe('HomeLink', () => {
+  it('navigates to PMM Home if client update is not pending', () => {
+    render(
+      wrapWithUpdatesProvider(<HomeLink data-testid="home-link" />, {
+        status: UpdateStatus.UpToDate,
+      })
+    );
+
+    expect(screen.getByTestId('home-link')).toHaveAttribute(
+      'href',
+      PMM_HOME_URL
+    );
+  });
+
+  it('shows modal if client update is pending', () => {
+    render(
+      wrapWithUpdatesProvider(<HomeLink data-testid="home-link" />, {
+        status: UpdateStatus.UpdateClients,
+      })
+    );
+    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();
+  });
+});

ui/src/components/home-link/HomeLink.tsx

@@ -0,0 +1,32 @@
+import { Link, LinkProps } from '@mui/material';
+import { PMM_HOME_URL } from 'constants';
+import { useUpdates } from 'contexts/updates';
+import { FC, useState } from 'react';
+import { UpdateStatus } from 'types/updates.types';
+import { ClientsModal } from './clients-modal';
+
+export const HomeLink: FC<LinkProps> = ({ children, sx, ...props }) => {
+  const { status } = useUpdates();
+  const [modalOpen, setModalOpen] = useState(false);
+  const homeLinkProps =
+    status === UpdateStatus.UpdateClients
+      ? {
+          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>
+    </>
+  );
+};

ui/src/components/home-link/clients-modal/ClientsModal.messages.ts

@@ -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',
+};

ui/src/components/home-link/clients-modal/ClientsModal.test.tsx

@@ -0,0 +1,28 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { ClientsModal } from './ClientsModal';
+import { PMM_HOME_URL } from 'constants';
+
+const onCloseMock = vi.fn();
+
+describe('ClientsModal', () => {
+  beforeEach(() => {
+    onCloseMock.mockClear();
+  });
+
+  it('closes when close window button is clicked', () => {
+    render(<ClientsModal isOpen onClose={onCloseMock} />);
+
+    fireEvent.click(screen.getByTestId('modal-close-window-button'));
+
+    expect(onCloseMock).toHaveBeenCalled();
+  });
+
+  it('navigates home when "Go to PMM Home" is clicked', () => {
+    render(<ClientsModal isOpen onClose={onCloseMock} />);
+
+    expect(screen.getByTestId('modal-pmm-home-link')).toHaveAttribute(
+      'href',
+      PMM_HOME_URL
+    );
+  });
+});