[dagster-airlift][jobs 6/n] jobs UI

Author: dpeng817

Diff for: js_modules/dagster-ui/packages/ui-components/src/components/Icon.tsx

@@ -10,6 +10,7 @@ import add_circle from '../icon-svgs/add_circle.svg';
 import agent from '../icon-svgs/agent.svg';
 import alert from '../icon-svgs/alert.svg';
 import alternate_email from '../icon-svgs/alternate_email.svg';
+import airflow from '../icon-svgs/airflow.svg';
 import and from '../icon-svgs/and.svg';
 import approved from '../icon-svgs/approved.svg';
 import arrow_back from '../icon-svgs/arrow_back.svg';
@@ -428,6 +429,7 @@ export const Icons = {
   agent,
   alert,
   alternate_email,
+  airflow,
   and,
   approved,
   arrow_back,

Diff for: js_modules/dagster-ui/packages/ui-components/src/icon-svgs/airflow.svg

@@ -37,6 +37,7 @@ interface OpGraphProps {
   onEnterSubgraph?: (arg: OpNameOrPath) => void;
   onLeaveSubgraph?: () => void;
   onClickBackground?: () => void;
+  isExternal?: boolean;
 }
 
 interface OpGraphContentsProps extends OpGraphProps {
@@ -122,6 +123,7 @@ const OpGraphContents = React.memo((props: OpGraphContentsProps) => {
                 isOpHighlighted(highlighted, op.name) ? highlighted : EmptyHighlightedArray
               }
               dim={highlightedOps.length > 0 && highlightedOps.indexOf(op) === -1}
+              isExternal={props.isExternal}
             />
           ))}
       </foreignObject>

Diff for: js_modules/dagster-ui/packages/ui-core/client.json

@@ -27,6 +27,7 @@ interface IOpNodeProps {
   onDoubleClick: () => void;
   onEnterComposite: () => void;
   onHighlightEdges: (edges: Edge[]) => void;
+  isExternal?: boolean;
 }
 
 const TOOLTIP_STYLE = JSON.stringify({
@@ -87,7 +88,8 @@ export class OpNode extends React.Component<IOpNodeProps> {
   };
 
   public render() {
-    const {definition, invocation, layout, dim, focused, selected, minified} = this.props;
+    const {definition, invocation, layout, dim, focused, selected, minified, isExternal} =
+      this.props;
     const {metadata} = definition;
     if (!layout) {
       throw new Error(`Layout is missing for ${definition.name}`);
@@ -137,18 +139,20 @@ export class OpNode extends React.Component<IOpNodeProps> {
             {minified ? 'C' : 'Config'}
           </div>
         )}
-        <div>
-          {definition.inputDefinitions.map((item, idx) => (
-            <OpIOBox
-              {...this.props}
-              {...metadataForIO(item, invocation)}
-              key={idx}
-              item={item}
-              layoutInfo={layout.inputs[item.name]}
-              colorKey="input"
-            />
-          ))}
-        </div>
+        {!isExternal && (
+          <div>
+            {definition.inputDefinitions.map((item, idx) => (
+              <OpIOBox
+                {...this.props}
+                {...metadataForIO(item, invocation)}
+                key={idx}
+                item={item}
+                layoutInfo={layout.inputs[item.name]}
+                colorKey="input"
+              />
+            ))}
+          </div>
+        )}
         <div className="node-box" style={{...position(layout.op)}}>
           <div className="name">
             {!minified && <Icon name="op" size={16} />}
@@ -174,18 +178,20 @@ export class OpNode extends React.Component<IOpNodeProps> {
             }}
           />
         )}
-        <div>
-          {definition.outputDefinitions.map((item, idx) => (
-            <OpIOBox
-              {...this.props}
-              {...metadataForIO(item, invocation)}
-              key={idx}
-              item={item}
-              layoutInfo={layout.outputs[item.name]}
-              colorKey="output"
-            />
-          ))}
-        </div>
+        {!isExternal && (
+          <div>
+            {definition.outputDefinitions.map((item, idx) => (
+              <OpIOBox
+                {...this.props}
+                {...metadataForIO(item, invocation)}
+                key={idx}
+                item={item}
+                layoutInfo={layout.outputs[item.name]}
+                colorKey="output"
+              />
+            ))}
+          </div>
+        )}
       </NodeContainer>
     );
   }

Diff for: js_modules/dagster-ui/packages/ui-core/src/asset-graph/types/AssetGraphJobSidebar.types.ts

@@ -13,6 +13,7 @@ import {
   InstigationStatesQuery,
   InstigationStatesQueryVariables,
 } from './types/InstigationStatesQuery.types';
+import {TagIcon} from '../graph/OpTags';
 import {InstigationStatus} from '../graphql/types';
 import {INSTIGATION_STATE_BASE_FRAGMENT} from '../instigation/InstigationStateBaseFragment';
 import {InstigationStateFragment} from '../instigation/types/InstigationUtils.types';
@@ -29,7 +30,6 @@ export const LeftNavItem = React.forwardRef(
   (props: LeftNavItemProps, ref: React.ForwardedRef<HTMLDivElement>) => {
     const {active, item} = props;
     const {label, leftIcon, path, repoAddress, schedules, sensors} = item;
-
     const [showDialog, setShowDialog] = React.useState(false);
     const repositoryId = useRepository(repoAddress)?.repository.id;
 
@@ -187,7 +187,11 @@ export const LeftNavItem = React.forwardRef(
         {sensorFragmentSubscriptions}
         {scheduleFragmentSubscriptions}
         <Item $active={active} to={path}>
-          <Icon name={leftIcon} color={active ? Colors.accentBlue() : Colors.textDefault()} />
+          {leftIcon === 'airflow' ? (
+            <TagIcon label="airflow" />
+          ) : (
+            <Icon name={leftIcon} color={active ? Colors.accentBlue() : Colors.textDefault()} />
+          )}
           {label}
         </Item>
         {rightIcon}

Diff for: js_modules/dagster-ui/packages/ui-core/src/graph/OpGraph.tsx

@@ -9,7 +9,7 @@ import {RepoAddress} from '../workspace/types';
 export type LeftNavItemType = {
   name: string;
   isJob: boolean;
-  leftIcon: IconName;
+  leftIcon: IconName | 'airflow';
   label: React.ReactNode;
   path: string;
   repoAddress: RepoAddress;

Diff for: js_modules/dagster-ui/packages/ui-core/src/graph/OpNode.tsx

@@ -37,7 +37,7 @@ export const PipelineNav = (props: Props) => {
   // If using pipeline:mode tuple (crag flag), check for partition sets that are for this specific
   // pipeline:mode tuple. Otherwise, just check for a pipeline name match.
   const partitionSets = repo?.repository.partitionSets || [];
-  const hasLaunchpad = !isAssetJob;
+  const hasLaunchpad = !isAssetJob && !repoJobEntry?.externalJobSource;
   const hasPartitionSet = partitionSets.some(
     (partitionSet) => partitionSet.pipelineName === pipelineName,
   );

Diff for: js_modules/dagster-ui/packages/ui-core/src/graphql/schema.graphql

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 
 import {LeftNavItemType} from './LeftNavItemType';
 import {isHiddenAssetGroupJob} from '../asset-graph/Utils';
+import {ExternalJobSource} from '../graphql/types';
 import {LegacyPipelineTag} from '../pipelines/LegacyPipelineTag';
 import {DagsterRepoOption} from '../workspace/WorkspaceContext/util';
 import {buildRepoAddress} from '../workspace/buildRepoAddress';
@@ -79,16 +80,17 @@ export const getJobItemsForOption = (option: DagsterRepoOption) => {
       continue;
     }
 
-    const {isJob, name} = pipeline;
+    const {isJob, name, externalJobSource} = pipeline;
     const schedulesForJob = schedules.filter((schedule) => schedule.pipelineName === name);
     const sensorsForJob = sensors.filter((sensor) =>
       sensor.targets?.map((target) => target.pipelineName).includes(name),
     );
+    const isAirflowJob = externalJobSource === ExternalJobSource.AIRFLOW;
 
     items.push({
       name,
       isJob,
-      leftIcon: 'job',
+      leftIcon: isAirflowJob ? 'airflow' : 'job',
       label: (
         <Label $hasIcon={someInRepoHasIcon}>
           <TruncatedTextWithFullTextOnHover text={name} />