Fix default behavior for surge tables

- Add event and country filter to all surge alerts
- Improve styling of readiness section in surge overview

Author: frozenhelium

src/components/Table/ColumnShortcuts/index.ts

@@ -244,7 +244,7 @@ export function createDateColumn<D, K>(
     } = {
         id,
         title,
-        columnClassName: options?.columnClassName,
+        columnClassName: _cs(options?.columnClassName, styles.dateColumn),
         headerCellRenderer: HeaderCell,
         headerCellRendererClassName: options?.headerCellRendererClassName,
         headerContainerClassName: options?.headerContainerClassName,

src/components/Table/ColumnShortcuts/styles.module.css

@@ -9,3 +9,8 @@
 .timeline-cell-container {
     position: relative;
 }
+
+.date-column {
+    width: 0%;
+    min-width: 7rem;
+}

src/views/AllSurgeAlerts/i18n.json

@@ -3,6 +3,9 @@
     "strings": {
         "allSurgeAlertsTitle": "All Surge Alerts",
         "allSurgeAlertsHeading": "All Surge Alerts ({numSurgeAlerts})",
+        "eventFilterLabel": "Emergency",
+        "countryFilterLabel": "Country",
+        "defaultPlaceholder": "All",
         "failedToCreateExport": "Failed to generate export.",
         "surgeAlertDate": "Alert Date",
         "surgeAlertDuration": "Duration",

src/views/AllSurgeAlerts/index.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useCallback } from 'react';
+import { useMemo, useCallback, useState } from 'react';
 import { isDefined, isNotDefined } from '@togglecorp/fujs';
 import Papa from 'papaparse';
 import { saveAs } from 'file-saver';
@@ -13,6 +13,8 @@ import {
     createDateColumn,
     createLinkColumn,
 } from '#components/Table/ColumnShortcuts';
+import NumberOutput from '#components/NumberOutput';
+import EventSearchSelectInput from '#components/domain/EventSearchSelectInput';
 import useTranslation from '#hooks/useTranslation';
 import useFilterState from '#hooks/useFilterState';
 import { useRequest, type GoApiResponse } from '#utils/restRequest';
@@ -21,15 +23,20 @@ import useAlert from '#hooks/useAlert';
 import useRecursiveCsvExport from '#hooks/useRecursiveCsvRequest';
 import { numericIdSelector } from '#utils/selectors';
 import { getDuration } from '#utils/common';
+import CountrySelectInput from '#components/domain/CountrySelectInput';
+import useUrlSearchState from '#hooks/useUrlSearchState';
 
 import i18n from './i18n.json';
 import styles from './styles.module.css';
 
 type SurgeResponse = GoApiResponse<'/api/v2/surge_alert/'>;
 type SurgeListItem = NonNullable<SurgeResponse['results']>[number];
 
+type GetEventResponse = GoApiResponse<'/api/v2/event/mini/'>;
+export type EventItem = Pick<NonNullable<GetEventResponse['results']>[number], 'id' | 'name' | 'dtype'>;
+
 type TableKey = number;
-const today = new Date().getTime();
+const nowTimestamp = new Date().getTime();
 
 function getPositionString(alert: SurgeListItem) {
     if (isNotDefined(alert.molnix_id)) {
@@ -60,6 +67,68 @@ export function Component() {
         pageSize: 15,
     });
 
+    const [countryFilter, setCountryFilter] = useUrlSearchState<number | undefined>(
+        'country',
+        (searchValue) => {
+            const potentialValue = isDefined(searchValue) ? Number(searchValue) : undefined;
+            return potentialValue;
+        },
+        (country) => country,
+    );
+
+    const [eventFilter, setEventFilter] = useUrlSearchState<number | undefined>(
+        'event',
+        (searchValue) => {
+            const potentialValue = isDefined(searchValue) ? Number(searchValue) : undefined;
+            return potentialValue;
+        },
+        (country) => country,
+    );
+
+    const [eventOptions, setEventOptions] = useState<
+        EventItem[] | undefined | null
+    >([]);
+
+    useRequest({
+        skip: isNotDefined(eventFilter)
+            || (!!eventOptions?.find((event) => event.id === eventFilter)),
+        url: '/api/v2/event/{id}/',
+        pathVariables: isDefined(eventFilter) ? {
+            id: eventFilter,
+        } : undefined,
+        onSuccess: (response) => {
+            if (isNotDefined(response)) {
+                return;
+            }
+
+            const {
+                id,
+                dtype,
+                name,
+            } = response;
+
+            if (isNotDefined(id) || isNotDefined(dtype) || isNotDefined(name)) {
+                return;
+            }
+
+            const newOption = {
+                id,
+                dtype: {
+                    id: dtype,
+                    translation_module_original_language: 'en' as const,
+                    name: undefined,
+                    summary: undefined,
+                },
+                name,
+            };
+
+            setEventOptions((prevOptions) => ([
+                ...prevOptions ?? [],
+                newOption,
+            ]));
+        },
+    });
+
     const {
         response: surgeResponse,
         pending: surgeResponsePending,
@@ -69,6 +138,8 @@ export function Component() {
         query: {
             limit,
             offset,
+            event: eventFilter,
+            country: countryFilter,
         },
     });
 
@@ -78,8 +149,14 @@ export function Component() {
             if (surgeAlert.is_stood_down) {
                 return strings.surgeAlertStoodDown;
             }
-            const closed = isDefined(surgeAlert.end)
-                ? new Date(surgeAlert.end).getTime() < today : undefined;
+            const endDate = isDefined(surgeAlert.end)
+                ? new Date(surgeAlert.end)
+                : undefined;
+
+            const closed = isDefined(endDate)
+                ? endDate.getTime() < nowTimestamp
+                : false;
+
             return closed ? strings.surgeAlertClosed : strings.surgeAlertOpen;
         },
         [
@@ -216,7 +293,7 @@ export function Component() {
 
     const heading = resolveToComponent(
         strings.allSurgeAlertsHeading,
-        { numSurgeAlerts: surgeResponse?.count ?? '--' },
+        { numSurgeAlerts: <NumberOutput value={surgeResponse?.count} invalidText="--" /> },
     );
 
     return (
@@ -226,6 +303,29 @@ export function Component() {
             heading={heading}
         >
             <Container
+                withHeaderBorder
+                withGridViewInFilter
+                filters={(
+                    <>
+                        <CountrySelectInput
+                            name="country"
+                            label={strings.countryFilterLabel}
+                            placeholder={strings.defaultPlaceholder}
+                            value={countryFilter}
+                            onChange={setCountryFilter}
+                        />
+                        <EventSearchSelectInput
+                            name="event"
+                            label={strings.eventFilterLabel}
+                            placeholder={strings.defaultPlaceholder}
+                            value={eventFilter}
+                            onChange={setEventFilter}
+                            options={eventOptions}
+                            onOptionsChange={setEventOptions}
+                            countryId={countryFilter}
+                        />
+                    </>
+                )}
                 footerActions={(
                     <Pager
                         activePage={page}

src/views/EmergencySurge/SurgeTable/i18n.json

@@ -13,7 +13,7 @@
         "surgeAlertOpen": "Open",
         "surgeAlertClosed": "Closed",
         "surgeAlertStoodDown": "Stood down",
-        "surgeAlertsViewAll": "View All Surge Alerts",
+        "surgeAlertsViewAllForCurrentEmergency": "View all Surge Alerts for this Emergency",
         "emergencySurgeImmediately": "Immediately"
     }
 }

src/views/EmergencySurge/SurgeTable/index.tsx

@@ -22,7 +22,8 @@ import i18n from './i18n.json';
 
 type SurgeResponse = GoApiResponse<'/api/v2/surge_alert/'>;
 type SurgeListItem = NonNullable<SurgeResponse['results']>[number];
-const today = new Date().getTime();
+const now = new Date();
+const nowTimestamp = now.getTime();
 
 function getPositionString(alert: SurgeListItem) {
     if (isNotDefined(alert.molnix_id)) {
@@ -66,6 +67,10 @@ export default function SurgeTable(props: Props) {
             event: Number(emergencyId),
             limit,
             offset,
+
+            // NOTE: following filters are required
+            is_active: true,
+            end__gte: now.toISOString(),
         },
     });
 
@@ -74,7 +79,9 @@ export default function SurgeTable(props: Props) {
             if (alert.is_stood_down) {
                 return strings.surgeAlertStoodDown;
             }
-            const closed = isDefined(alert.end) ? new Date(alert.end).getTime() < today : undefined;
+            const closed = isDefined(alert.end)
+                ? new Date(alert.end).getTime() < nowTimestamp
+                : undefined;
             return closed ? strings.surgeAlertClosed : strings.surgeAlertOpen;
         },
         [
@@ -188,8 +195,9 @@ export default function SurgeTable(props: Props) {
                     to="allSurgeAlerts"
                     withLinkIcon
                     withUnderline
+                    urlSearch={isDefined(emergencyId) ? `event=${emergencyId}` : undefined}
                 >
-                    {strings.surgeAlertsViewAll}
+                    {strings.surgeAlertsViewAllForCurrentEmergency}
                 </Link>
             )}
             footerActions={(

src/views/SurgeOverview/PersonnelByEventTable/index.tsx

@@ -32,7 +32,7 @@ function PersonnelByEventTable() {
         offset,
     } = useFilterState<object>({
         filter: {},
-        pageSize: 25,
+        pageSize: 6,
     });
 
     const strings = useTranslation(i18n);

src/views/SurgeOverview/Readiness/EmergencyResponseUnitOwnerCard/index.tsx

@@ -71,7 +71,7 @@ function EmergencyResponseUnitOwnerCard(props: Props) {
             className={_cs(styles.emergencyResponseUnitOwnerCard, className)}
             withInternalPadding
             withHeaderBorder
-            spacing="comfortable"
+            spacing="default"
             heading={(
                 <Link
                     to="countriesLayout"

src/views/SurgeOverview/Readiness/EmergencyResponseUnitOwnerCard/styles.module.css

@@ -13,8 +13,7 @@
 
         .separator {
             flex-shrink: 0;
-            background-color: var(--go-ui-color-separator);
-            width: var(--go-ui-width-separator-sm);
+            border-left: var(--go-ui-width-separator-sm) solid var(--go-ui-color-separator);
         }
 
         .figure {

src/views/SurgeOverview/Readiness/i18n.json

@@ -1,8 +1,7 @@
 {
     "namespace": "surgeOverview",
     "strings": {
-        "eruOwnersTableHeading": "National Societies",
-        "eruOwnersTableFilterReady": "Filter Ready ERUs",
+        "readinessTitle": "Ready ERUs by National Society ({count})",
         "eruOwnersTableFilterClear": "Reset Filters"
     }
 }