serverInfo: show server info at MenuFooter

packages/ui/src/App.tsx

@@ -7,7 +7,6 @@ import { HeaderActions } from './components/HeaderActions/HeaderActions';
 import { Loader } from './components/Loader/Loader';
 import { Menu } from './components/Menu/Menu';
 import { Title } from './components/Title/Title';
-import { useActiveQueue } from './hooks/useActiveQueue';
 import { useConfirm } from './hooks/useConfirm';
 import { useQueues } from './hooks/useQueues';
 import { useScrollTopOnNav } from './hooks/useScrollTopOnNav';
@@ -28,8 +27,7 @@ const OverviewPageLazy = React.lazy(() =>
 
 export const App = () => {
   useScrollTopOnNav();
-  const { queues, actions: queueActions } = useQueues();
-  const activeQueue = useActiveQueue({ queues });
+  const { actions: queueActions } = useQueues();
   const { confirmProps } = useConfirm();
 
   useEffect(() => {
@@ -39,7 +37,7 @@ export const App = () => {
   return (
     <>
       <Header>
-        <Title name={activeQueue?.name} description={activeQueue?.description} />
+        <Title />
         <HeaderActions />
       </Header>
       <main>
@@ -48,7 +46,7 @@ export const App = () => {
             <Switch>
               <Route
                 path="/queue/:name/:jobId"
-                render={() => <JobPageLazy queue={activeQueue || null} />}
+                render={() => <JobPageLazy />}
               />
               <Route path="/queue/:name" render={() => <QueuePageLazy />} />
 
@@ -58,7 +56,7 @@ export const App = () => {
           <ConfirmModal {...confirmProps} />
         </div>
       </main>
-      <Menu queues={queues} />
+      <Menu />
       <ToastContainer />
     </>
   );

packages/ui/src/components/Menu/Menu.tsx

@@ -1,15 +1,17 @@
-import { AppQueue } from '@bull-board/api/typings/app';
 import cn from 'clsx';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { NavLink } from 'react-router-dom';
 import { useSelectedStatuses } from '../../hooks/useSelectedStatuses';
+import { useQueues } from './../../hooks/useQueues';
 import { links } from '../../utils/links';
 import { SearchIcon } from '../Icons/Search';
 import s from './Menu.module.css';
 
-export const Menu = ({ queues }: { queues: AppQueue[] | null }) => {
+export const Menu = () => {
   const { t } = useTranslation();
+  const { queues } = useQueues();
+
   const selectedStatuses = useSelectedStatuses();
   const [searchTerm, setSearchTerm] = useState('');
 

packages/ui/src/components/Title/Title.tsx

@@ -1,18 +1,21 @@
 import React from 'react';
 import s from './Title.module.css';
+import { useActiveQueue } from '../../hooks/useActiveQueue';
 
-interface TitleProps {
-  name?: string;
-  description?: string;
-}
+export const Title = () => {
+  const queue = useActiveQueue();
 
-export const Title = ({ name, description }: TitleProps) => (
-  <div className={s.queueTitle}>
-    {!!name && (
-      <>
-        <h1 className={s.name}>{name}</h1>
-        {!!description && <p className={s.description}>{description}</p>}
-      </>
-    )}
-  </div>
-);
+  if (!queue)
+    return <div/>
+
+  return (
+    <div className={s.queueTitle}>
+      {queue.name && (
+        <>
+          <h1 className={s.name}>{queue.name}</h1>
+          {queue.description && <p className={s.description}>{queue.description}</p>}
+        </>
+      )}
+    </div>
+  )
+};

packages/ui/src/hooks/useActiveQueue.ts

@@ -1,15 +1,17 @@
 import { AppQueue } from '@bull-board/api/typings/app';
 import { useActiveQueueName } from './useActiveQueueName';
-import { QueuesState } from './useQueues';
+import { useQueues } from './useQueues';
 
-export function useActiveQueue(data: Pick<QueuesState, 'queues'>): AppQueue | null {
-  const activeQueueName = useActiveQueueName();
 
-  if (!data.queues) {
+export function useActiveQueue(): AppQueue | null {
+  const { queues } = useQueues();
+
+  if (!queues) {
     return null;
   }
 
-  const activeQueue = data.queues.find((q) => q.name === activeQueueName);
+  const activeQueueName = useActiveQueueName();
+  const activeQueue = queues.find((q) => q.name === activeQueueName);
 
   return activeQueue || null;
 }

packages/ui/src/pages/JobPage/JobPage.tsx

@@ -1,19 +1,22 @@
-import { AppQueue, JobRetryStatus } from '@bull-board/api/typings/app';
+import { JobRetryStatus } from '@bull-board/api/typings/app';
 import cn from 'clsx';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useHistory } from 'react-router-dom';
 import { ArrowLeftIcon } from '../../components/Icons/ArrowLeft';
 import { JobCard } from '../../components/JobCard/JobCard';
 import { StickyHeader } from '../../components/StickyHeader/StickyHeader';
+import { useActiveQueue } from '../../hooks/useActiveQueue';
 import { useJob } from '../../hooks/useJob';
 import { useSelectedStatuses } from '../../hooks/useSelectedStatuses';
 import { links } from '../../utils/links';
 import buttonS from '../../components/Button/Button.module.css';
 
-export const JobPage = ({ queue }: { queue: AppQueue | null }) => {
+export const JobPage = () => {
   const { t } = useTranslation();
   const history = useHistory();
+
+  const queue = useActiveQueue();
   const { job, status, actions } = useJob();
   const selectedStatuses = useSelectedStatuses();
 

packages/ui/src/pages/QueuePage/QueuePage.tsx

@@ -16,9 +16,9 @@ import { links } from '../../utils/links';
 export const QueuePage = () => {
   const { t } = useTranslation();
   const selectedStatus = useSelectedStatuses();
-  const { actions, queues } = useQueues();
+  const { actions } = useQueues();
   const { actions: jobActions } = useJob();
-  const queue = useActiveQueue({ queues });
+  const queue = useActiveQueue();
   actions.pollQueues();
 
   if (!queue) {