PMM-12930 Add footer

ui/src/App.tsx

@@ -9,6 +9,7 @@ import { SnackbarProvider } from 'notistack';
 import pmmThemeOptions from 'themes/PmmTheme';
 import { AuthProvider } from 'contexts/auth';
 import { UserProvider } from 'contexts/user/user.provider';
+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/components/page/Page.tsx

@@ -12,7 +12,7 @@ import { useUser } from 'contexts/user/user.hooks';
 import { Messages } from './Page.messages';
 import { PMM_HOME_URL } from 'constants';
 
-export const Page: FC<PageProps> = ({ title, children }) => {
+export const Page: FC<PageProps> = ({ title, footer, children }) => {
   const { user } = useUser();
 
   return (
@@ -45,6 +45,7 @@ export const Page: FC<PageProps> = ({ title, children }) => {
           </CardActions>
         </Card>
       )}
+      {footer && <Stack>{footer}</Stack>}
     </Stack>
   );
 };

ui/src/components/page/Page.types.ts

@@ -1,5 +1,6 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, ReactNode } from 'react';
 
 export interface PageProps extends PropsWithChildren {
   title?: string;
+  footer?: ReactNode;
 }

ui/src/contexts/updates/index.ts

@@ -0,0 +1,4 @@
+export * from './updates.context';
+export * from './updates.provider';
+export * from './updates.context';
+export * from './updates.hooks';

ui/src/contexts/updates/updates.context.tsx

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+import { UpdatesContextProps } from './updates.context.types';
+import { UpdateStatus } from 'types/updates.types';
+
+export const UpdatesContext = createContext<UpdatesContextProps>({
+  isLoading: false,
+  inProgress: false,
+  status: UpdateStatus.Pending,
+  setStatus: () => {},
+  recheck: () => {},
+});

ui/src/contexts/updates/updates.context.types.ts

@@ -0,0 +1,10 @@
+import { GetUpdatesResponse, UpdateStatus } from 'types/updates.types';
+
+export interface UpdatesContextProps {
+  isLoading: boolean;
+  inProgress: boolean;
+  status: UpdateStatus;
+  setStatus: (status: UpdateStatus) => void;
+  versionInfo?: GetUpdatesResponse;
+  recheck: () => void;
+}

ui/src/contexts/updates/updates.hooks.ts

@@ -0,0 +1,4 @@
+import { useContext } from 'react';
+import { UpdatesContext } from './updates.context';
+
+export const useUpdates = () => useContext(UpdatesContext);

ui/src/contexts/updates/updates.provider.tsx

@@ -0,0 +1,41 @@
+import { FC, PropsWithChildren, useEffect, useMemo, useState } from 'react';
+import { UpdatesContext } from './updates.context';
+import { UpdateStatus } from 'types/updates.types';
+import { useCheckUpdates } from 'hooks/api/useUpdates';
+
+export const UpdatesProvider: FC<PropsWithChildren> = ({ children }) => {
+  const [status, setStatus] = useState(UpdateStatus.Pending);
+  const { isLoading, data, error, isRefetching, refetch } = useCheckUpdates();
+  const inProgress = useMemo(
+    () =>
+      status === UpdateStatus.Updating ||
+      status === UpdateStatus.Restarting ||
+      status === UpdateStatus.Completed,
+    [status]
+  );
+
+  useEffect(() => {
+    if (error) {
+      setStatus(UpdateStatus.Error);
+    } else if (isLoading) {
+      setStatus(UpdateStatus.Checking);
+    } else if (data && data?.installed.version === data?.latest?.version) {
+      setStatus(UpdateStatus.UpToDate);
+    }
+  }, [data, error, isLoading]);
+
+  return (
+    <UpdatesContext.Provider
+      value={{
+        isLoading: isLoading || isRefetching,
+        inProgress,
+        status,
+        setStatus,
+        versionInfo: data,
+        recheck: refetch,
+      }}
+    >
+      {children}
+    </UpdatesContext.Provider>
+  );
+};

ui/src/pages/updates/Updates.tsx

@@ -14,12 +14,13 @@ import { Messages } from './Updates.messages';
 import { Page } from 'components/page';
 import { useSettings } from 'hooks/api/useSettings';
 import { PMM_SETTINGS_URL } from 'constants';
+import { UpdateFooter } from './update-footer';
 
 export const Updates: FC = () => {
   const { data: settings } = useSettings();
 
   return (
-    <Page title={Messages.title}>
+    <Page title={Messages.title} footer={<UpdateFooter />}>
       <Card>
         <CardMedia sx={{ height: 140 }} image={Welcome} title="green iguana" />
         <CardContent sx={{ p: 3 }}>

ui/src/pages/updates/update-card/UpdateCard.tsx

@@ -9,7 +9,7 @@ import {
   Skeleton,
   Alert,
 } from '@mui/material';
-import { FC, useMemo, useState } from 'react';
+import { FC } from 'react';
 import { formatTimestamp } from 'utils/formatTimestamp';
 import { PMM_HOME_URL } from 'constants';
 import { Messages } from './UpdateCard.messages';
@@ -22,23 +22,13 @@ import { UpdateStatus } from 'types/updates.types';
 import { KeyboardDoubleArrowUp } from '@mui/icons-material';
 import { UpdateInfo } from '../update-info';
 import { UpdateInProgressCard } from '../update-in-progress-card';
+import { useUpdates } from 'contexts/updates';
 
 export const UpdateCard: FC = () => {
+  const { inProgress, status, setStatus } = useUpdates();
   const { isLoading, data, error, isRefetching, refetch } = useCheckUpdates();
   const { mutate: startUpdate } = useStartUpdate();
   const { waitForReadiness } = useWaitForReadiness();
-  const [status, setStatus] = useState<UpdateStatus>(UpdateStatus.Pending);
-  const isUpToDate = useMemo(
-    () => data?.installed.version === data?.latest?.version,
-    [data]
-  );
-  const updateInProgress = useMemo(
-    () =>
-      status === UpdateStatus.Updating ||
-      status === UpdateStatus.Restarting ||
-      status === UpdateStatus.Completed,
-    [status]
-  );
 
   const handleStartUpdate = async () => {
     setStatus(UpdateStatus.Updating);
@@ -84,14 +74,14 @@ export const UpdateCard: FC = () => {
     );
   }
 
-  if (updateInProgress && data.latest) {
+  if (inProgress && data.latest) {
     return <UpdateInProgressCard versionInfo={data.latest} status={status} />;
   }
 
   return (
     <Card sx={{ p: 1 }}>
       <CardContent>
-        {isUpToDate && (
+        {status === UpdateStatus.UpToDate && (
           <Alert
             severity="success"
             sx={{

ui/src/pages/updates/update-footer/UpdateFooter.messages.ts

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

ui/src/pages/updates/update-footer/UpdateFooter.tsx

@@ -0,0 +1,30 @@
+import { Link, Stack, Typography } from '@mui/material';
+import { useUpdates } from 'contexts/updates';
+import { FC } from 'react';
+import { formatCheckDate } from './UpdateFooter.utils';
+import { Messages } from './UpdateFooter.messages';
+
+export const UpdateFooter: FC = () => {
+  const { inProgress, versionInfo, recheck } = useUpdates();
+
+  console.log({ versionInfo });
+  if (!versionInfo) return null;
+
+  return (
+    <Stack direction="row" gap={2}>
+      <Typography variant="body2">
+        {Messages.version(versionInfo.installed.version)}
+      </Typography>
+      <Typography variant="body2" color="text.disabled">
+        {inProgress
+          ? Messages.inProgress
+          : Messages.checkedOn(formatCheckDate(versionInfo.lastCheck))}
+      </Typography>
+      {!inProgress && (
+        <Typography variant="body2">
+          <Link onClick={recheck}>{Messages.checkNow}</Link>
+        </Typography>
+      )}
+    </Stack>
+  );
+};

ui/src/pages/updates/update-footer/UpdateFooter.utils.ts

@@ -0,0 +1,2 @@
+export const formatCheckDate = (date: string) =>
+  new Date(date).toLocaleDateString('en-US');

ui/src/pages/updates/update-footer/index.ts

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

ui/src/types/updates.types.ts

@@ -5,7 +5,7 @@ export interface GetUpdatesParams {
 
 export interface CurrentInfo {
   version: string;
-  full_version: string;
+  fullVersion: string;
   timestamp: string | null;
 }
 
@@ -49,4 +49,6 @@ export enum UpdateStatus {
   Restarting = 'restarting',
   Completed = 'completed',
   Error = 'error',
+  Checking = 'checking',
+  UpToDate = 'up-to-date',
 }