runs ui

js_modules/dagster-ui/packages/ui-core/src/runs/RunFragments.tsx

@@ -14,6 +14,7 @@ export const RUN_FRAGMENT = gql`
       repositoryName
       repositoryLocationName
     }
+    allPools
     hasReExecutePermission
     hasTerminatePermission
     hasDeletePermission

js_modules/dagster-ui/packages/ui-core/src/runs/RunHeaderActions.tsx

@@ -6,13 +6,15 @@ import {RunMetricsDialog} from 'shared/runs/RunMetricsDialog.oss';
 import {DeletionDialog} from './DeletionDialog';
 import {QueuedRunCriteriaDialog} from './QueuedRunCriteriaDialog';
 import {RunConfigDialog} from './RunConfigDialog';
+import {RunPoolsDialog} from './RunPoolsDialog';
 import {doneStatuses} from './RunStatuses';
 import {RunsQueryRefetchContext} from './RunUtils';
 import {TerminationDialog} from './TerminationDialog';
 import {useMutation} from '../apollo-client';
 import {RunFragment} from './types/RunFragments.types';
 import {AppContext} from '../app/AppContext';
 import {showSharedToaster} from '../app/DomUtils';
+import {useFeatureFlags} from '../app/Flags';
 import {useCopyToClipboard} from '../app/browser';
 import {RunStatus} from '../graphql/types';
 import {FREE_CONCURRENCY_SLOTS_MUTATION} from '../instance/InstanceConcurrency';
@@ -30,6 +32,7 @@ type VisibleDialog =
   | 'queue-criteria'
   | 'free_slots'
   | 'metrics'
+  | 'pools'
   | null;
 
 export const RunHeaderActions = ({run, isJob}: {run: RunFragment; isJob: boolean}) => {
@@ -44,6 +47,7 @@ export const RunHeaderActions = ({run, isJob}: {run: RunFragment; isJob: boolean
   const copy = useCopyToClipboard();
   const history = useHistory();
 
+  const {flagPoolUI} = useFeatureFlags();
   const [freeSlots] = useMutation<
     FreeConcurrencySlotsMutation,
     FreeConcurrencySlotsMutationVariables
@@ -93,6 +97,11 @@ export const RunHeaderActions = ({run, isJob}: {run: RunFragment; isJob: boolean
         <Button icon={<Icon name="tag" />} onClick={() => setVisibleDialog('config')}>
           View tags and config
         </Button>
+        {run.allPools && run.allPools.length ? (
+          <Tooltip content="View pools" position="top" targetTagName="div">
+            <Button icon={<Icon name="concurrency" />} onClick={() => setVisibleDialog('pools')} />
+          </Tooltip>
+        ) : null}
         <Popover
           position="bottom-right"
           content={
@@ -204,6 +213,13 @@ export const RunHeaderActions = ({run, isJob}: {run: RunFragment; isJob: boolean
           selectedRuns={{[run.id]: run.canTerminate}}
         />
       ) : null}
+      {flagPoolUI && run.allPools && run.allPools.length ? (
+        <RunPoolsDialog
+          isOpen={visibleDialog === 'pools'}
+          pools={run.allPools}
+          onClose={() => setVisibleDialog(null)}
+        />
+      ) : null}
     </div>
   );
 };

js_modules/dagster-ui/packages/ui-core/src/runs/RunPoolsDialog.tsx

@@ -0,0 +1,28 @@
+import {Box, Button, Dialog, DialogFooter} from '@dagster-io/ui-components';
+
+import {PoolTag} from '../instance/PoolTag';
+
+export const RunPoolsDialog = ({
+  isOpen,
+  onClose,
+  pools,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+  pools: string[];
+}) => {
+  return (
+    <Dialog isOpen={isOpen} onClose={onClose} canOutsideClickClose canEscapeKeyClose title="Pools">
+      <Box margin={{horizontal: 24, vertical: 12}} flex={{gap: 12}}>
+        {pools.map((pool) => (
+          <PoolTag key={pool} pool={pool} />
+        ))}
+      </Box>
+      <DialogFooter topBorder>
+        <Button onClick={onClose} intent="primary">
+          Close
+        </Button>
+      </DialogFooter>
+    </Dialog>
+  );
+};