feat: Display label for unmanaged experiments (#7830)

determined-ai · Sep 12, 2023 · 3d0a56f · 3d0a56f
1 parent bb86bde
commit 3d0a56f
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 3 deletions.
diff --git a/master/internal/api_experiment.go b/master/internal/api_experiment.go
@@ -567,6 +567,7 @@ func getExperimentColumns(q *bun.SelectQuery) *bun.SelectQuery {
 		Column("e.config").
 		Column("e.checkpoint_size").
 		Column("e.checkpoint_count").
+		Column("e.unmanaged").
 		Column("e.external_experiment_id").
 		Column(`t.external_trial_id`).
 		Join("JOIN users u ON e.owner_id = u.id").

diff --git a/webui/react/src/components/Badge.module.scss b/webui/react/src/components/Badge.module.scss
@@ -19,6 +19,8 @@
 }
 .header {
   background-color: #132231;
+  border: 1px solid var(--theme-surface-border-strong);
+  color: #fff;
 }
 .state {
   text-transform: uppercase;

diff --git a/webui/react/src/components/Table/Table.tsx b/webui/react/src/components/Table/Table.tsx
@@ -210,7 +210,14 @@ export const experimentNameRenderer = (
   record: ExperimentItem,
 ): React.ReactNode => (
   <Typography.Text ellipsis={{ tooltip: true }}>
-    <Link path={paths.experimentDetails(record.id)}>{value === undefined ? '' : value}</Link>
+    <Link path={paths.experimentDetails(record.id)}>
+      {value === undefined ? '' : value}&nbsp;&nbsp;
+      {record.unmanaged && (
+        <Badge tooltip="Workload not managed by Determined" type="Header">
+          Unmanaged
+        </Badge>
+      )}
+    </Link>
   </Typography.Text>
 );
 

diff --git a/webui/react/src/pages/ExperimentDetails/ExperimentDetailsHeader.tsx b/webui/react/src/pages/ExperimentDetails/ExperimentDetailsHeader.tsx
@@ -1,6 +1,7 @@
 import { Button, Space, Typography } from 'antd';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
+import Badge from 'components/Badge';
 import ExperimentCreateModalComponent, {
   CreateExperimentType,
 } from 'components/ExperimentCreateModal';
@@ -517,6 +518,11 @@ const ExperimentDetailsHeader: React.FC<Props> = ({
             <div className={css.name} role="experimentName">
               {experiment.name}
             </div>
+            {experiment.unmanaged && (
+              <Badge tooltip="Workload not managed by Determined" type="Header">
+                Unmanaged
+              </Badge>
+            )}
             {trial ? (
               <>
                 <Icon name="arrow-right" size="tiny" title="Trial" />

diff --git a/webui/react/src/pages/F_ExpList/glide-table/columns.ts b/webui/react/src/pages/F_ExpList/glide-table/columns.ts
@@ -253,6 +253,7 @@ export const getColumnDefs = ({
         link: {
           href: paths.experimentDetails(record.experiment.id),
           title: String(record.experiment.name),
+          unmanaged: record.experiment.unmanaged,
         },
         navigateOn: 'click',
         underlineOffset: 6,

diff --git a/webui/react/src/pages/F_ExpList/glide-table/custom-renderers/cells/linkCell.tsx b/webui/react/src/pages/F_ExpList/glide-table/custom-renderers/cells/linkCell.tsx
@@ -7,6 +7,8 @@ import {
   measureTextCached,
 } from '@hpe.com/glide-data-grid';
 
+import { roundedRect } from 'pages/F_ExpList/glide-table/custom-renderers/utils';
+
 interface LinkCellProps {
   readonly kind: 'link-cell';
   /**
@@ -19,11 +21,15 @@ interface LinkCellProps {
   readonly link: {
     readonly title: string;
     readonly href: string;
+    readonly unmanaged?: boolean;
   };
 }
 
 export type LinkCell = CustomCell<LinkCellProps>;
 
+const TAG_HEIGHT = 18;
+const TAG_CONTENT = 'Unmanaged';
+
 function onClickSelect(e: Parameters<NonNullable<CustomRenderer<LinkCell>['onSelect']>>[0]) {
   const useCtrl = e.cell.data.navigateOn !== 'click';
   if (useCtrl !== e.ctrlKey) return undefined;
@@ -61,7 +67,7 @@ const renderer: CustomRenderer<LinkCell> = {
     const rectHoverX = rect.x + hoverX;
 
     const font = `${theme.baseFontStyle} ${theme.fontFamily}`;
-
+    ctx.font = font;
     const middleCenterBias = getMiddleCenterBias(ctx, font);
     const drawY = rect.y + rect.height / 2 + middleCenterBias;
 
@@ -87,7 +93,30 @@ const renderer: CustomRenderer<LinkCell> = {
     }
     ctx.fillStyle = theme.linkColor;
     ctx.fillText(link.title, drawX, drawY);
-
+    if (link.unmanaged) {
+      const x = drawX + commaMetrics.width + 8;
+      const y = drawY - TAG_HEIGHT / 2;
+      const tagFont = `600 11px ${theme.fontFamily}`;
+
+      ctx.fillStyle = '#132231';
+      ctx.lineWidth = 2;
+      ctx.strokeStyle = theme.textBubble;
+      ctx.beginPath();
+      ctx.font = tagFont;
+      roundedRect(
+        ctx,
+        x,
+        y,
+        measureTextCached(TAG_CONTENT, ctx, tagFont).width + 10,
+        TAG_HEIGHT,
+        4,
+      );
+      ctx.stroke();
+      ctx.fill();
+      ctx.fillStyle = '#fff';
+      ctx.fillText(TAG_CONTENT, x + 4, y + TAG_HEIGHT / 2 + getMiddleCenterBias(ctx, tagFont));
+    }
+    ctx.closePath();
     drawX += commaMetrics.width + 4;
 
     return true;

diff --git a/webui/react/src/services/decoder.ts b/webui/react/src/services/decoder.ts
@@ -501,6 +501,7 @@ export const mapV1Experiment = (
     startTime: data.startTime as unknown as string,
     state: decodeExperimentState(data.state),
     trialIds: data.trialIds || [],
+    unmanaged: data.unmanaged,
     userId: data.userId ?? 0,
     workspaceId: data.workspaceId,
     workspaceName: data.workspaceName,

diff --git a/webui/react/src/types.ts b/webui/react/src/types.ts
@@ -666,6 +666,7 @@ export interface ExperimentItem {
   userId: number;
   workspaceId?: number;
   workspaceName?: string;
+  unmanaged?: boolean;
 }
 
 export interface ExperimentWithTrial {