add pool tag to display for ops / assets

js_modules/dagster-ui/packages/ui-core/src/app/FeatureFlags.oss.tsx

@@ -6,6 +6,7 @@ export enum FeatureFlag {
   flagLegacyRunsPage = 'flagLegacyRunsPage',
   flagSelectionSyntax = 'flagSelectionSyntax',
   flagAssetSelectionWorker = 'flagAssetSelectionWorker',
+  flagPoolUI = 'flagPoolUI',
 
   // Flags for tests
   __TestFlagDefaultNone = '__TestFlagDefaultNone',

js_modules/dagster-ui/packages/ui-core/src/app/useVisibleFeatureFlagRows.oss.tsx

@@ -50,4 +50,8 @@ export const useVisibleFeatureFlagRows = () => [
       </>
     ),
   },
+  {
+    key: 'Enable pool concurrency UI',
+    flagType: FeatureFlag.flagPoolUI,
+  },
 ];

js_modules/dagster-ui/packages/ui-core/src/asset-graph/SidebarAssetInfo.tsx

@@ -274,6 +274,7 @@ const SIDEBAR_ASSET_FRAGMENT = gql`
     backfillPolicy {
       description
     }
+    pools
     partitionDefinition {
       description
     }

js_modules/dagster-ui/packages/ui-core/src/assets/AssetNodeDefinition.tsx

@@ -313,6 +313,7 @@ export const ASSET_NODE_DEFINITION_FRAGMENT = gql`
     jobNames
     isMaterializable
     isExecutable
+    pools
     tags {
       key
       value

js_modules/dagster-ui/packages/ui-core/src/assets/AssetSidebarActivitySummary.tsx

@@ -13,8 +13,10 @@ import {ExecuteChecksButton} from './asset-checks/ExecuteChecksButton';
 import {assetDetailsPathForAssetCheck, assetDetailsPathForKey} from './assetDetailsPathForKey';
 import {useGroupedEvents} from './groupByPartition';
 import {RecentAssetEvents} from './useRecentAssetEvents';
+import {useFeatureFlags} from '../app/Flags';
 import {LiveDataForNodeWithStaleData} from '../asset-graph/Utils';
 import {SidebarAssetFragment} from '../asset-graph/types/SidebarAssetInfo.types';
+import {PoolTag} from '../instance/PoolTag';
 import {SidebarSection} from '../pipelines/SidebarComponents';
 
 interface Props {
@@ -42,6 +44,8 @@ export const AssetSidebarActivitySummary = ({
 
   const grouped = useGroupedEvents(xAxis, materializations, observations, loadedPartitionKeys);
   const displayedEvent = isObservable ? observations[0] : materializations[0];
+  const pools = asset.pools || [];
+  const {flagPoolUI} = useFeatureFlags();
 
   useEffect(() => {
     refetch();
@@ -60,6 +64,16 @@ export const AssetSidebarActivitySummary = ({
         </>
       )}
 
+      {flagPoolUI && pools.length ? (
+        <SidebarSection title={pools.length === 1 ? 'Pool' : 'Pools'}>
+          <Box margin={{horizontal: 24, vertical: 12}} flex={{gap: 4}}>
+            {pools.map((pool, idx) => (
+              <PoolTag key={idx} pool={pool} />
+            ))}
+          </Box>
+        </SidebarSection>
+      ) : null}
+
       {asset.freshnessPolicy && (
         <SidebarSection title="Freshness policy">
           <Box margin={{horizontal: 24, vertical: 12}} flex={{gap: 12, alignItems: 'flex-start'}}>

js_modules/dagster-ui/packages/ui-core/src/assets/AssetTableFragment.tsx

@@ -40,6 +40,7 @@ export const ASSET_TABLE_DEFINITION_FRAGMENT = gql`
       key
       value
     }
+    pools
     jobNames
     kinds
     repository {

js_modules/dagster-ui/packages/ui-core/src/assets/overview/ComputeDetailsSection.tsx

@@ -5,8 +5,10 @@ import {Link} from 'react-router-dom';
 import {metadataForAssetNode} from '../AssetMetadata';
 import {AttributeAndValue, SectionSkeleton} from './Common';
 import {showCustomAlert} from '../../app/CustomAlertProvider';
+import {useFeatureFlags} from '../../app/Flags';
 import {COMMON_COLLATOR} from '../../app/Util';
 import {DagsterTypeSummary} from '../../dagstertype/DagsterType';
+import {PoolTag} from '../../instance/PoolTag';
 import {RepoAddress} from '../../workspace/types';
 import {workspacePathFromAddress} from '../../workspace/workspacePath';
 import {UnderlyingOpsOrGraph} from '../UnderlyingOpsOrGraph';
@@ -19,12 +21,14 @@ export const ComputeDetailsSection = ({
   repoAddress: RepoAddress | null;
   assetNode: AssetNodeDefinitionFragment | null | undefined;
 }) => {
+  const {flagPoolUI} = useFeatureFlags();
   if (!assetNode) {
     return <SectionSkeleton />;
   }
   const {assetType} = metadataForAssetNode(assetNode);
   const configType = assetNode?.configField?.configType;
   const assetConfigSchema = configType && configType.key !== 'Any' ? configType : null;
+  const pools = assetNode.pools || [];
 
   return (
     <Box flex={{direction: 'column', gap: 12}}>
@@ -38,6 +42,16 @@ export const ComputeDetailsSection = ({
         </Tag>
       </AttributeAndValue>
 
+      <AttributeAndValue label={pools.length > 1 ? 'Pools' : 'Pool'}>
+        {flagPoolUI && pools.length > 0 ? (
+          <Box flex={{gap: 4}}>
+            {pools.map((pool, idx) => (
+              <PoolTag key={idx} pool={pool} />
+            ))}
+          </Box>
+        ) : null}
+      </AttributeAndValue>
+
       <AttributeAndValue label="Code version">{assetNode.opVersion}</AttributeAndValue>
 
       <AttributeAndValue label="Resources">

js_modules/dagster-ui/packages/ui-core/src/instance/InstanceConcurrency.tsx

@@ -963,6 +963,7 @@ const CONCURRENCY_LIMIT_FRAGMENT = gql`
   fragment ConcurrencyLimitFragment on ConcurrencyKeyInfo {
     concurrencyKey
     slotCount
+    limit
     claimedSlots {
       runId
       stepKey
@@ -1019,7 +1020,7 @@ export const FREE_CONCURRENCY_SLOTS_MUTATION = gql`
   }
 `;
 
-const CONCURRENCY_KEY_DETAILS_QUERY = gql`
+export const CONCURRENCY_KEY_DETAILS_QUERY = gql`
   query ConcurrencyKeyDetailsQuery($concurrencyKey: String!) {
     instance {
       id

js_modules/dagster-ui/packages/ui-core/src/instance/PoolTag.tsx

@@ -0,0 +1,39 @@
+import {Box, Icon, Tag, Tooltip} from '@dagster-io/ui-components';
+import {Link} from 'react-router-dom';
+
+import {CONCURRENCY_KEY_DETAILS_QUERY} from './InstanceConcurrency';
+import {useQuery} from '../apollo-client';
+import {
+  ConcurrencyKeyDetailsQuery,
+  ConcurrencyKeyDetailsQueryVariables,
+} from './types/InstanceConcurrency.types';
+
+export const PoolTag = ({pool}: {pool: string}) => {
+  const path = `/deployment/concurrency/${pool}`;
+  const {data} = useQuery<ConcurrencyKeyDetailsQuery, ConcurrencyKeyDetailsQueryVariables>(
+    CONCURRENCY_KEY_DETAILS_QUERY,
+    {
+      variables: {
+        concurrencyKey: pool,
+      },
+    },
+  );
+
+  const concurrencyLimit = data?.instance.concurrencyLimit;
+  return (
+    <Tag intent={concurrencyLimit && concurrencyLimit.limit === null ? 'warning' : 'none'}>
+      <Box flex={{gap: 4, alignItems: 'center'}}>
+        <Icon name="dynamic_feed" />
+        <Link to={path}>{pool}</Link>
+        {concurrencyLimit && concurrencyLimit.limit === null ? (
+          <Tooltip
+            placement="top"
+            content="This pool currently does not have any slots configured."
+          >
+            <Icon name="warning_outline" />
+          </Tooltip>
+        ) : null}
+      </Box>
+    </Tag>
+  );
+};