PSP-9900 : PIMS service availability notifications

source/backend/api/Startup.cs

@@ -304,7 +304,7 @@ public void ConfigureServices(IServiceCollection services)
                     "PmbcExternalApi",
                     sp => new PimsExternalApiHealthcheck(this.Configuration.GetSection("HealthChecks:PmbcExternalApi")),
                     null,
-                    new string[] { "services", "external" })
+                    new string[] { "services", "external", "system-check" })
                 { Period = TimeSpan.FromMinutes(allHealthCheckOptions.PmbcExternalApi.Period) });
             }
 
@@ -314,7 +314,7 @@ public void ConfigureServices(IServiceCollection services)
                     "Geoserver",
                     sp => new PimsGeoserverHealthCheck(this.Configuration),
                     null,
-                    new string[] { "services" })
+                    new string[] { "services", "system", "system-check" })
                 { Period = TimeSpan.FromMinutes(allHealthCheckOptions.Geoserver.Period) });
             }
 
@@ -324,7 +324,7 @@ public void ConfigureServices(IServiceCollection services)
                     "Mayan",
                     sp => new PimsMayanHealthcheck(sp.GetService<IEdmsDocumentRepository>()),
                     null,
-                    new string[] { "services" })
+                    new string[] { "services", "system-check" })
                 { Period = TimeSpan.FromMinutes(allHealthCheckOptions.Mayan.Period) });
             }
 
@@ -334,7 +334,7 @@ public void ConfigureServices(IServiceCollection services)
                     "Ltsa",
                     sp => new PimsLtsaHealthcheck(allHealthCheckOptions.Ltsa, sp.GetService<ILtsaService>()),
                     null,
-                    new string[] { "services", "external" })
+                    new string[] { "services", "external", "system-check" })
                 { Period = TimeSpan.FromMinutes(allHealthCheckOptions.Ltsa.Period) });
             }
 
@@ -344,7 +344,7 @@ public void ConfigureServices(IServiceCollection services)
                     "Geocoder",
                     sp => new PimsGeocoderHealthcheck(this.Configuration, sp.GetService<IGeocoderService>()),
                     null,
-                    new string[] { "services", "external" })
+                    new string[] { "services", "external", "system-check" })
                 { Period = TimeSpan.FromMinutes(allHealthCheckOptions.Geocoder.Period) });
             }
 
@@ -354,7 +354,7 @@ public void ConfigureServices(IServiceCollection services)
                     "Cdogs",
                     sp => new PimsCdogsHealthcheck(sp.GetService<IDocumentGenerationRepository>()),
                     null,
-                    new string[] { "services", "external" })
+                    new string[] { "services", "external", "system-check" })
                 { Period = TimeSpan.FromMinutes(allHealthCheckOptions.Cdogs.Period) });
             }
 
@@ -489,6 +489,11 @@ public void Configure(IApplicationBuilder app, IWebHostEnvironment env, IApiVers
             app.UseEndpoints(config =>
             {
                 config.MapControllers();
+                config.MapHealthChecks("health/system", new HealthCheckOptions()
+                {
+                    Predicate = r => r.Tags.Contains("system-check"),
+                    ResponseWriter = UIResponseWriter.WriteHealthCheckUIResponse,
+                });
 
                 // Enable the /metrics page to export Prometheus metrics
                 config.MapMetrics();

source/frontend/src/assets/scss/_variables.module.scss

@@ -2,6 +2,7 @@
 @import './variables';
 
 :export {
+  healthcheckHeight: $healthcheck-height;
   mapfilterHeight: $mapfilter-height;
   footerHeight: $footer-height;
   headerHeight: $header-height;

source/frontend/src/assets/scss/_variables.scss

@@ -1,5 +1,6 @@
 @import './colors.scss';
 
+$healthcheck-height: 4.5rem;
 $header-height: 7.2rem;
 $mapfilter-height: 6rem;
 $footer-height: 4.4rem;

source/frontend/src/components/common/ApiVersionInfo.test.tsx

@@ -3,6 +3,8 @@ import { useApiHealth } from '@/hooks/pims-api/useApiHealth';
 import { render, RenderOptions, waitForEffects } from '@/utils/test-utils';
 
 import { ApiVersionInfo } from './ApiVersionInfo';
+import ISystemCheck from '@/hooks/pims-api/interfaces/ISystemCheck';
+import { AxiosResponse } from 'axios';
 
 const defaultVersion: IApiVersion = {
   environment: 'test',
@@ -15,12 +17,14 @@ const defaultVersion: IApiVersion = {
 const mockGetVersionApi = vi.fn();
 const mockGetLiveApi = vi.fn();
 const mockGetReady = vi.fn();
+const mockGetSystemCheckApi = vi.fn();
 
 vi.mock('@/hooks/pims-api/useApiHealth');
 vi.mocked(useApiHealth).mockReturnValue({
   getVersion: mockGetVersionApi,
   getLive: mockGetLiveApi,
   getReady: mockGetReady,
+  getSystemCheck: mockGetSystemCheckApi,
 });
 
 describe('ApiVersionInfo suite', () => {

source/frontend/src/components/layout/Healthcheck/HealthcheckView.test.tsx

@@ -0,0 +1,53 @@
+import HealthcheckView, { IHealthCheckIssue, IHealthCheckViewProps } from './HealthcheckView';
+import { act, render, RenderOptions, userEvent, screen } from '@/utils/test-utils';
+
+const mockHealthcheckIssues: IHealthCheckIssue[] = [
+  {
+    key: 'PimsApi',
+    msg: 'The PIMS server is currently unavailable, PIMS will not be useable until this is resolved.',
+  },
+];
+
+describe('Healthcheck View component', () => {
+  const setup = async (
+    renderOptions: RenderOptions & { props?: Partial<IHealthCheckViewProps> } = {},
+  ) => {
+    const utils = render(
+      <HealthcheckView
+        {...renderOptions.props}
+        systemChecks={renderOptions.props?.systemChecks ?? mockHealthcheckIssues}
+      />,
+      {
+        ...renderOptions,
+      },
+    );
+
+    return {
+      ...utils,
+    };
+  };
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders as expected', async () => {
+    const { asFragment } = await setup({});
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it(`renders 'See the full list here' link`, async () => {
+    const { getByTestId } = await setup({
+      props: {
+        systemChecks: [
+          {
+            key: 'Mayan',
+            msg: 'The PIMS Document server is experiencing service degradation, you will be unable to view, download or upload documents until resolved.',
+          },
+          ...mockHealthcheckIssues,
+        ],
+      },
+    });
+    expect(getByTestId('healthcheck-full-list-lnk')).toBeVisible();
+  });
+});

source/frontend/src/components/layout/Healthcheck/HealthcheckView.tsx

@@ -0,0 +1,130 @@
+import { FaBan } from 'react-icons/fa';
+import styled from 'styled-components';
+
+import { LinkButton } from '@/components/common/buttons/LinkButton';
+import { ModalSize } from '@/components/common/GenericModal';
+import { useModalContext } from '@/hooks/useModalContext';
+
+export interface IHealthCheckIssue {
+  key: string;
+  msg: string;
+}
+
+export interface IHealthCheckViewProps {
+  systemChecks: IHealthCheckIssue[];
+}
+
+const HealthcheckView: React.FunctionComponent<IHealthCheckViewProps> = ({ systemChecks }) => {
+  const { setModalContent, setDisplayModal } = useModalContext();
+
+  return (
+    systemChecks.length && (
+      <StyledWrapperDiv>
+        <StyledIconDiv>
+          <FaBan size={24} />
+        </StyledIconDiv>
+        <StyledContainer>
+          <label>
+            <span>{systemChecks[0].key}: </span>
+            {systemChecks[0].msg}
+          </label>
+          {systemChecks.length > 1 && (
+            <LinkButton
+              data-testid="healthcheck-full-list-lnk"
+              onClick={() => {
+                setModalContent({
+                  variant: 'error',
+                  title: 'Error',
+                  modalSize: ModalSize.LARGE,
+                  message: (
+                    <StyledList>
+                      {systemChecks.map(x => {
+                        return (
+                          <label key={x.key}>
+                            <span>{x.key}: </span>
+                            {x.msg}
+                          </label>
+                        );
+                      })}
+                    </StyledList>
+                  ),
+                  okButtonText: 'Close',
+                  handleOk: async () => {
+                    setDisplayModal(false);
+                  },
+                });
+                setDisplayModal(true);
+              }}
+            >
+              See the full list here...
+            </LinkButton>
+          )}
+        </StyledContainer>
+      </StyledWrapperDiv>
+    )
+  );
+};
+
+const StyledWrapperDiv = styled.div`
+  display: flex;
+  height: 100%;
+  background-color: ${props => props.theme.css.dangerBackgroundColor};
+`;
+
+const StyledIconDiv = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: auto;
+  min-width: 6rem;
+  height: 100%;
+  background-color: ${props => props.theme.bcTokens.typographyColorDanger};
+
+  svg {
+    color: ${props => props.theme.css.pimsWhite};
+  }
+`;
+
+const StyledContainer = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  flex-grow: 1;
+  justify-content: flex-start;
+  padding-left: 6rem;
+  background-color: ${props => props.theme.css.dangerBackgroundColor};
+
+  label {
+    display: list-item;
+    margin-bottom: 0;
+
+    span {
+      text-transform: uppercase;
+      font-weight: bolder;
+    }
+  }
+
+  button {
+    margin-left: 6rem;
+  }
+`;
+
+const StyledList = styled.div`
+  padding: 1rem 2rem;
+
+  label {
+    display: list-item;
+    margin-bottom: 0;
+
+    span {
+      text-transform: uppercase;
+      font-weight: bolder;
+    }
+  }
+
+  button {
+    margin-left: 6rem;
+  }
+`;
+
+export default HealthcheckView;