Improve AlertViewer UI/UX

src/firefly/js/apps/alertviewer/AlertUploadPanel.jsx

@@ -37,6 +37,7 @@ export const UploadPanel = ({}) => {
             return;
         }
 
+        addToRecentAlertIDs(trimmedId);
         setIsLoading(true);
         try {
             const request = new ServerRequest(ALERT_LOAD_REQUEST);
@@ -47,7 +48,6 @@ export const UploadPanel = ({}) => {
                 showInfoPopup(result?.message || 'Unable to load alert data.', 'Load Error');
                 return;
             }
-            addToRecentAlertIDs(trimmedId);
             clearAlertProducts(); //todo: keep this?
             loadFromEntries(result, trimmedId);
         } catch (error) {

src/firefly/js/apps/alertviewer/alertviewer.js

@@ -1,10 +1,15 @@
 import React from 'react';
+import QueryStats from '@mui/icons-material/QueryStats';
+import {Sheet, Stack, Typography} from '@mui/joy';
 
 import {createRouter} from 'firefly/templates/router/RoutedApp.jsx';
 import {FormWatcher} from 'firefly/templates/router/RouteHelper';
+import {LandingPage} from 'firefly/templates/fireflyviewer/LandingPage.jsx';
 import {UploadPanel} from 'firefly/apps/alertviewer/AlertUploadPanel';
 import {AlertResultView} from 'firefly/apps/alertviewer/AlertResultView';
 import {getAlertViewerCommands} from 'firefly/api/webApiCommands/AlertViewerCommands';
+import {dispatchShowDropDown} from 'firefly/core/LayoutCntlr';
+import {dispatchOnAppReady} from 'firefly/core/AppDataCntlr';
 
 function getBasename() {
     const p = window.location.pathname || '';
@@ -27,19 +32,54 @@ const routes = [
     },
 ];
 
+function AlertViewerBottomSection() {
+    return (
+        <Sheet variant='soft' sx={{pt: 8, pb: 4, px: 2}}>
+            <Stack spacing={10} alignItems='center'>
+                <Stack spacing={3}>
+                    <Stack spacing={2} alignItems='center'>
+                        <QueryStats sx={{ width: '6rem', height: '6rem' }} />
+                        <Stack spacing={1} alignItems='center'>
+                            <Typography level='h2' fontWeight='md'>Getting Started</Typography>
+                        </Stack>
+                    </Stack>
+                    <Stack direction='row' spacing={6}>
+                        <Stack spacing={.5} alignItems='center'>
+                            <Typography level='title-lg' color='primary'>Navigate to the Alert tab</Typography>
+                            <Typography level='body-md'>Search for results via Alert IDs</Typography>
+                        </Stack>
+                    </Stack>
+                </Stack>
+                <Stack spacing={2} alignItems='center'>
+                    <Typography level='body-lg'>Visualizations of the results will appear in this tab</Typography>
+                </Stack>
+            </Stack>
+        </Sheet>
+    );
+}
+
+function AlertViewerLanding() {
+    return (
+        <LandingPage slotProps={{
+            topSection: {title: 'Welcome to AlertViewer'},
+            bottomSection: {
+                component: AlertViewerBottomSection
+            }
+        }}/>
+    );
+}
+
 
 export const alertviewer = {
     init,
     props: {
         appTitle: 'Alert Viewer',
+        backgroundMonitor: false,
         getRouter: createRouter(basename, routes),
         appIcon: 'n/a',
         slotProps: {
             drawer: { drawerWidth:'24rem'},
-            landing: {
-                desc: 'Some information about the alert viewer here. This is the landing page. This text will be changed to something more useful in the future.',
-                bgImage: null,
-            }
+            landing: {component: AlertViewerLanding},
         }
     },
     menu: [
@@ -50,4 +90,11 @@ export const alertviewer = {
 };
 
 
-function init() {}
+function init() {
+    const {pathname, search} = window.location;
+    const params = new URLSearchParams(search);
+    const hasUrlApi = params.has('api');
+    if (!hasUrlApi && (pathname === basename || pathname === `${basename}/`)) {
+        dispatchOnAppReady(() => dispatchShowDropDown({view: 'AlertUpload'}));
+    }
+}

src/firefly/js/templates/router/RoutedApp.jsx

@@ -62,7 +62,8 @@ export  default function RoutedApp({slotProps, menu, mainPanel, children, dropdo
 
     useEffect(() => {
         startTTFeatureWatchers(getAllStartIds());
-        dispatchSetMenu({menuItems: menu});
+        const {backgroundMonitor = true} = props;
+        dispatchSetMenu({menuItems: menu, showBgMonitor: backgroundMonitor});
         dispatchOnAppReady(() => {
             dispatchNotifyRemoteAppReady();
         });
@@ -114,4 +115,4 @@ export function createRouter(basename, routes=[]) {
         ];
         return createBrowserRouter(allRoutes, {basename});
     };
-}
+}