From 60ab12b191e19911a8083d267aad1156e77236af Mon Sep 17 00:00:00 2001
From: s-r-x <strax1990@gmail.com>
Date: Wed, 21 Jul 2021 07:12:59 +0500
Subject: [PATCH] feat(ui): group queues by prefix

---
 .../ui/src/components/Drawer/Queues/hooks.ts  | 13 ++++-
 .../ui/src/components/Drawer/Queues/index.tsx | 50 ++++++++++++-------
 packages/ui/src/components/Drawer/index.tsx   |  2 +-
 .../components/Settings/Preferences/index.tsx | 24 +++++----
 packages/ui/src/network/queries/get-queues.ts |  1 +
 packages/ui/src/stores/preferences.ts         |  8 +++
 packages/ui/src/typings/gql.ts                |  3 +-
 7 files changed, 72 insertions(+), 29 deletions(-)

diff --git a/packages/ui/src/components/Drawer/Queues/hooks.ts b/packages/ui/src/components/Drawer/Queues/hooks.ts
index a13bc3b..9c7e1a0 100644
--- a/packages/ui/src/components/Drawer/Queues/hooks.ts
+++ b/packages/ui/src/components/Drawer/Queues/hooks.ts
@@ -1,5 +1,7 @@
-import type { JobStatus, QueueJobsCounts } from '@/typings/gql';
+import { usePreferencesStore } from '@/stores/preferences';
+import type { GetQueuesQuery, JobStatus, QueueJobsCounts } from '@/typings/gql';
 import { useMemo } from 'react';
+import groupBy from 'lodash/groupBy';
 
 export const useJobsCountArray = (count: QueueJobsCounts) => {
   return useMemo(() => {
@@ -12,3 +14,12 @@ export const useJobsCountArray = (count: QueueJobsCounts) => {
 export const useAliveJobsCount = (count: QueueJobsCounts) => {
   return count.active + count.delayed + count.waiting;
 };
+export const useMaybeGroupQueuesByPrefix = (
+  queues: NonNullable<GetQueuesQuery['queues']>,
+) => {
+  const shouldGroup = usePreferencesStore((state) => state.groupQueuesByPrefix);
+  if (!shouldGroup) {
+    return null;
+  }
+  return groupBy(queues, 'keyPrefix');
+};
diff --git a/packages/ui/src/components/Drawer/Queues/index.tsx b/packages/ui/src/components/Drawer/Queues/index.tsx
index ee0f230..6357ed3 100644
--- a/packages/ui/src/components/Drawer/Queues/index.tsx
+++ b/packages/ui/src/components/Drawer/Queues/index.tsx
@@ -1,17 +1,20 @@
 import React, { useCallback } from 'react';
 import type { GetQueuesQuery, JobStatus } from '@/typings/gql';
 import List from '@material-ui/core/List';
+import ListSubheader from '@material-ui/core/ListSubheader';
 import { useDrawerState } from '@/stores/drawer';
 import shallow from 'zustand/shallow';
 import Queue from './Queue';
 import { useQueuesCollapseStore } from '@/stores/queues-collapse';
 import { useAtom } from 'jotai';
 import { activeQueueAtom, activeStatusAtom } from '@/atoms/workspaces';
+import { useMaybeGroupQueuesByPrefix } from './hooks';
 
 type TProps = {
-  queues?: GetQueuesQuery['queues'];
+  queues: NonNullable<GetQueuesQuery['queues']>;
 };
 export default function DrawerQueuesList({ queues }: TProps) {
+  const groupedQueues = useMaybeGroupQueuesByPrefix(queues);
   const [activeQueue, changeActiveQueue] = useAtom(activeQueueAtom);
   const [collapseMap, toggleCollapse] = useQueuesCollapseStore(
     (state) => [state.queues, state.toggle],
@@ -28,20 +31,33 @@ export default function DrawerQueuesList({ queues }: TProps) {
     changeActiveStatus(status);
     closeDrawer();
   }, []);
-  return (
-    <List>
-      {queues?.map((queue) => (
-        <Queue
-          isExpanded={Boolean(collapseMap[queue.name])}
-          activeStatus={activeStatus}
-          onSelect={onSelect}
-          onStatusSelect={onStatusSelect}
-          toggleCollapse={toggleCollapse}
-          isSelected={activeQueue === queue.name}
-          key={queue.name}
-          queue={queue}
-        />
-      ))}
-    </List>
-  );
+  const renderQueue = (queue: TProps['queues'][0]) => {
+    return (
+      <Queue
+        isExpanded={Boolean(collapseMap[queue.name])}
+        activeStatus={activeStatus}
+        onSelect={onSelect}
+        onStatusSelect={onStatusSelect}
+        toggleCollapse={toggleCollapse}
+        isSelected={activeQueue === queue.name}
+        key={queue.name}
+        queue={queue}
+      />
+    );
+  };
+  if (groupedQueues) {
+    return (
+      <List>
+        {Object.entries(groupedQueues).map(([prefix, queues]) => (
+          <List
+            key={prefix}
+            subheader={<ListSubheader>{prefix}</ListSubheader>}
+          >
+            {queues.map(renderQueue)}
+          </List>
+        ))}
+      </List>
+    );
+  }
+  return <List>{queues.map(renderQueue)}</List>;
 }
diff --git a/packages/ui/src/components/Drawer/index.tsx b/packages/ui/src/components/Drawer/index.tsx
index fb593a8..5791611 100755
--- a/packages/ui/src/components/Drawer/index.tsx
+++ b/packages/ui/src/components/Drawer/index.tsx
@@ -92,7 +92,7 @@ export default function Drawer() {
           ) : (
             <>
               <QueuesFilter className={cls.filter} />
-              <QueuesList queues={filteredQueues} />
+              {filteredQueues && <QueuesList queues={filteredQueues} />}
               {queues && <Footer queues={queues} className={cls.footer} />}
             </>
           )}
diff --git a/packages/ui/src/components/Settings/Preferences/index.tsx b/packages/ui/src/components/Settings/Preferences/index.tsx
index c68a19e..14b91db 100644
--- a/packages/ui/src/components/Settings/Preferences/index.tsx
+++ b/packages/ui/src/components/Settings/Preferences/index.tsx
@@ -1,21 +1,16 @@
 import React from 'react';
-import shallow from 'zustand/shallow';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Switch from '@material-ui/core/Switch';
 import FormControl from '@material-ui/core/FormControl';
 import { usePreferencesStore } from '@/stores/preferences';
 
 export default function Preferences() {
-  const [
+  const {
     confirmDangerousActions,
     toggleConfirmDangerousActions,
-  ] = usePreferencesStore(
-    (state) => [
-      state.confirmDangerousActions,
-      state.toggleConfirmDangerousActions,
-    ],
-    shallow,
-  );
+    groupQueuesByPrefix,
+    toggleGroupQueuesByPrefix,
+  } = usePreferencesStore();
   return (
     <div>
       <FormControl margin="dense">
@@ -29,6 +24,17 @@ export default function Preferences() {
           label="Confirm dangerous actions"
         />
       </FormControl>
+      <FormControl margin="dense">
+        <FormControlLabel
+          control={
+            <Switch
+              checked={groupQueuesByPrefix}
+              onChange={toggleGroupQueuesByPrefix}
+            />
+          }
+          label="Group queues by prefix"
+        />
+      </FormControl>
     </div>
   );
 }
diff --git a/packages/ui/src/network/queries/get-queues.ts b/packages/ui/src/network/queries/get-queues.ts
index 63266a9..2865c09 100644
--- a/packages/ui/src/network/queries/get-queues.ts
+++ b/packages/ui/src/network/queries/get-queues.ts
@@ -8,6 +8,7 @@ export const getQueues = (): Promise<GetQueuesQuery> =>
       query GetQueues {
         queues {
           name
+          keyPrefix
           isPaused
           jobsCounts {
             waiting
diff --git a/packages/ui/src/stores/preferences.ts b/packages/ui/src/stores/preferences.ts
index 512b954..2f74d68 100644
--- a/packages/ui/src/stores/preferences.ts
+++ b/packages/ui/src/stores/preferences.ts
@@ -4,14 +4,17 @@ import { StorageConfig } from '@/config/storage';
 
 type TState = {
   confirmDangerousActions: boolean;
+  groupQueuesByPrefix: boolean;
 
   changeConfirmDangerousActions: (value: boolean) => void;
   toggleConfirmDangerousActions: () => void;
+  toggleGroupQueuesByPrefix: () => void;
 };
 export const usePreferencesStore = createStore<TState>(
   persist(
     (set) => ({
       confirmDangerousActions: true,
+      groupQueuesByPrefix: false,
 
       changeConfirmDangerousActions: (confirmDangerousActions) =>
         set({ confirmDangerousActions }),
@@ -19,9 +22,14 @@ export const usePreferencesStore = createStore<TState>(
         set((state) => ({
           confirmDangerousActions: !state.confirmDangerousActions,
         })),
+      toggleGroupQueuesByPrefix: () =>
+        set((state) => ({
+          groupQueuesByPrefix: !state.groupQueuesByPrefix,
+        })),
     }),
     {
       name: `${StorageConfig.persistNs}prefs`,
+      version: 2,
     },
   ),
 );
diff --git a/packages/ui/src/typings/gql.ts b/packages/ui/src/typings/gql.ts
index 068a91e..fac7c4f 100644
--- a/packages/ui/src/typings/gql.ts
+++ b/packages/ui/src/typings/gql.ts
@@ -270,6 +270,7 @@ export type QueryJobArgs = {
 
 export type Queue = {
   name: Scalars['String'];
+  keyPrefix?: Maybe<Scalars['String']>;
   /** https://github.com/OptimalBits/bull/blob/develop/REFERENCE.md#queuecount */
   count: Scalars['Int'];
   /** https://github.com/OptimalBits/bull/blob/develop/REFERENCE.md#queuegetjobcounts */
@@ -547,7 +548,7 @@ export type GetQueuesQueryVariables = Exact<{ [key: string]: never; }>;
 
 
 export type GetQueuesQuery = { queues?: Maybe<Array<(
-    Pick<Queue, 'name' | 'isPaused'>
+    Pick<Queue, 'name' | 'keyPrefix' | 'isPaused'>
     & { jobsCounts: Pick<QueueJobsCounts, 'waiting' | 'active' | 'completed' | 'failed' | 'delayed' | 'paused'> }
   )>> };