[ANMS UI] General UI usability improvements

[Lagejohn]

Several ideas/issues encountered while porting the old UI to angular in no particular order

• Make Builds to Agents page CBOR transfer functionality (select transcoder entry on Builds, then redirected to Agents where you select agents to send previously selected command to) could be made less ambiguous / Add UI hints/elements indicating what's happening on the Agents page
• Agents select dialog generated on Builds page when sending to agent?

[mfarina1]

Copied from David Edell's description on #264 (closed as a duplicate):

The current process to resend a previously encoded ARI:

1. Go to Build Tab
   

2. Select one or more entries then scroll down to 'Send Agents', OR click the CBOR Encoded String
   

3. Select checkbox on agent(s) you want to send it to
   

4. Press 'Manage'
   

5. Toggle 'ARI Builder'
   

6. ARI is pre-populated
   

A more intuitive process would simplify the above to:
3. Open a new popup dialog with the list of Agents to select and a preview of selected ARI.
4. Preview should show user BOTH the CBOR-Encoded HEX and ARI form if available
5. Button to (re)send selected, and a second button to 'Edit' that would open a pre-populated version of the 'ARI Builder' to edit

Related improvements:

• 'Send Agents' and pagination buttons shouldn't require scrolling to the bottom of the page. These should be pinned outside of the scrollable area
  

• Checkbox column on Agents view should NOT trigger 'Agent details' popup (this is too easy to accidentally click). We may want to add an info icon instead that is clickable
  

[DavidEdell]

On the UI home screen, currently only the icon on the right is clickable. Can we make the entire title row clickable?

Also see #362 for a suggestion on adding a "Reload default ADMs" button, primarily for usage as a workaround on startup issues, but also potentially useful if a user was experimenting and needs to easily revert to the original ADMs.

[nick-greenwald]

To speed up page loading we can implement lazy loading in the app routes, following the Angular docs: https://v17.angular.io/guide/lazy-loading-ngmodules

For example, in

anms/anms-ui/src/app/app.routes.ts

Lines 14 to 30 in 37d9533

	{
	path: 'dashboard',
	component: Dashboard,
	children: [
	{
	path: '',
	redirectTo: 'home',
	pathMatch: 'full'
	},
	{
	path: 'home',
	component: DashboardHome
	},
	{
	path: 'monitor',
	component: Monitor
	},

All the children would change from:

     { 
       path: 'home', 
       component: DashboardHome 
     },

to

{ path: 'home', loadChildren: () => import('./features/dashboard/dashboard-home.routes').then(m => m.DashboardHomeRoutes) }

And you would have a new file './features/dashboard/dashboard-home.routes' that would contain:

export const DashboardHomeRoutes: Routes = [
    {
      path: 'home',
      component: DashboardHome,
    }
];

This makes it so the child components are not loaded in when navigating to the home page, and are only loaded in when navigating to them. I have a rudimentary patch I can provide as a starting point and we should be able to see how much it reduces initial bundle sizes during ng build.

[mfarina1]

Investigation needed: @DavidEdell noticed that the Help page has a link to the documentation for the REST API but the link doesn't actually work because of the root URL and proxy behavior

[DavidEdell]

To add some details: The original version of the Help page redirected to the http://localhost:5555/docs url which works, and is acceptable for developers, but not for production systems. There is also a diffent version of the docs at http://localhost:5555/redoc - a related question is which of these two should be on the help page (and why we have 2 UIs for it deployed). Neither are happy running through the proxy and might need special handling in the proxy if their configuration can't be otherwise tweaked.