feat(ui): drawer. replace statuses pie with inline indicator

packages/ui/src/components/Drawer/Queues/JobsCount.tsx

@@ -2,9 +2,13 @@ import React from 'react';
 import type { JobStatus } from '@/typings/gql';
 import JobStatusChip from '@/components/JobStatusChip';
 import { makeStyles } from '@material-ui/core/styles';
+import StatusesIndicator from './QueueStatusesIndicator';
 
 const useStyles = makeStyles({
   root: {
+    position: 'relative',
+  },
+  list: {
     display: 'flex',
     flexWrap: 'wrap',
     alignItems: 'center',
@@ -24,12 +28,15 @@ type TProps = {
 export default function QueueJobsCount(props: TProps) {
   const cls = useStyles();
   return (
-    <ul className={cls.root}>
-      {props.count.map(({ status, count }, idx) => (
-        <li key={idx} title={status}>
-          <JobStatusChip size="small" status={status} label={count} />
-        </li>
-      ))}
-    </ul>
+    <div className={cls.root}>
+      <ul className={cls.list}>
+        {props.count.map(({ status, count }, idx) => (
+          <li key={idx} title={status}>
+            <JobStatusChip size="small" status={status} label={count} />
+          </li>
+        ))}
+      </ul>
+      <StatusesIndicator count={props.count} />
+    </div>
   );
 }

packages/ui/src/components/Drawer/Queues/Queue.tsx

@@ -8,15 +8,11 @@ import PauseIcon from '@material-ui/icons/Pause';
 import { makeStyles } from '@material-ui/core/styles';
 import Badge from '@material-ui/core/Badge';
 import Typography from '@material-ui/core/Typography';
-import {
-  useJobsCountArray,
-  useQueueWorkspaceLabel,
-  useShouldRenderStatusesPie,
-} from './hooks';
-import StatusesPie from './QueueStatusesPie';
+import { useJobsCountArray, useQueueWorkspaceLabel } from './hooks';
 
 const useStyles = makeStyles((theme) => ({
   listItem: {
+    position: 'relative',
     paddingRight: theme.spacing(1),
     '& .MuiListItemIcon-root': {
       minWidth: 32,
@@ -38,8 +34,6 @@ const DrawerQueue = (props: TProps) => {
     props.onSelect(id, workspaceLabel);
   }, [id, workspaceLabel]);
   const countArray = useJobsCountArray(props.queue.jobsCounts);
-  const shouldRenderStatusesPie = useShouldRenderStatusesPie(props.queue);
-  const shouldRenderListIcon = isPaused || shouldRenderStatusesPie;
   return (
     <ListItem
       onClick={onSelect}
@@ -48,16 +42,13 @@ const DrawerQueue = (props: TProps) => {
       dense
       button
     >
-      {shouldRenderListIcon && (
+      {isPaused && (
         <ListItemIcon>
-          {isPaused && (
-            <ListItemIcon>
-              <Badge color="secondary" showZero>
-                <PauseIcon />
-              </Badge>
-            </ListItemIcon>
-          )}
-          {shouldRenderStatusesPie && <StatusesPie count={countArray} />}
+          <ListItemIcon>
+            <Badge color="secondary" showZero>
+              <PauseIcon />
+            </Badge>
+          </ListItemIcon>
         </ListItemIcon>
       )}
       <ListItemText

packages/ui/src/components/Drawer/Queues/QueueStatusesIndicator.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import type { JobStatus } from '@/typings/gql';
+import { useJobStatusesPalette } from '@/components/JobStatusChip/hooks';
+import { MathUtils } from '@/services/math-utils';
+import sum from 'lodash/sum';
+import { useMemo } from 'react';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: 'flex',
+    height: 3,
+    overflow: 'hidden',
+    marginTop: theme.spacing(0.5),
+  },
+}));
+
+type TProps = {
+  count: { status: JobStatus; count: number }[];
+};
+export default function QueueStatusesIndicator({ count }: TProps) {
+  const cls = useStyles();
+  const palette = useJobStatusesPalette();
+  const mapped = useMemo(() => {
+    const allJobsCount = sum(count.map(({ count }) => count));
+    return count.map(({ count, status }) => ({
+      width: MathUtils.mapNumberToPercent(count, 0, allJobsCount) + '%',
+      color: palette[status],
+    }));
+  }, [palette, count]);
+  return (
+    <div className={cls.root}>
+      {mapped.map(({ width, color }, idx) => (
+        <div style={{ width, backgroundColor: color }} key={idx} />
+      ))}
+    </div>
+  );
+}

packages/ui/src/components/Drawer/Queues/hooks.ts

@@ -25,15 +25,3 @@ export const useMaybeGroupQueuesByPrefix = (queues: QueueFromQuery[]) => {
   }
   return groupBy(queues, 'keyPrefix');
 };
-
-export const useShouldRenderStatusesPie = (queue: QueueFromQuery): boolean => {
-  const pref = usePreferencesStore((state) => state.showStatusesPieInDrawer);
-  return useMemo(() => {
-    if (!pref || queue.isPaused) return false;
-    // show pie only if there are at least two different non zero statuses
-    const [firstCount, secondCount] = Object.values(queue.jobsCounts).sort(
-      (a, b) => b - a
-    );
-    return firstCount > 0 && secondCount > 0;
-  }, [pref, queue.isPaused, queue.jobsCounts]);
-};