From 6f15deea24d3544e08ba6c5681d2a2a11de40971 Mon Sep 17 00:00:00 2001
From: Stephen Smith <stephen@curii.com>
Date: Tue, 19 Dec 2023 15:29:58 -0500
Subject: [PATCH] 19675: Add instance types info box with panel description.

Arvados-DCO-1.1-Signed-off-by: Stephen Smith <stephen@curii.com>
---
 .../components/code-snippet/code-snippet.tsx  |  22 ++-
 .../instance-types-panel.tsx                  | 156 ++++++++++--------
 2 files changed, 104 insertions(+), 74 deletions(-)

diff --git a/services/workbench2/src/components/code-snippet/code-snippet.tsx b/services/workbench2/src/components/code-snippet/code-snippet.tsx
index 5a5a7041d8..209dbc44b5 100644
--- a/services/workbench2/src/components/code-snippet/code-snippet.tsx
+++ b/services/workbench2/src/components/code-snippet/code-snippet.tsx
@@ -12,17 +12,24 @@ import { FederationConfig, getNavUrl } from 'routes/routes';
 import { Dispatch } from 'redux';
 import { navigationNotAvailable } from 'store/navigation/navigation-action';
 
-type CssRules = 'root' | 'space';
+type CssRules = 'root' | 'inlineRoot' | 'space' | 'inline';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     root: {
         boxSizing: 'border-box',
         overflow: 'auto',
-        padding: theme.spacing.unit
+        padding: theme.spacing.unit,
+    },
+    inlineRoot: {
+        padding: "3px",
+        display: "inline",
     },
     space: {
-        marginLeft: '15px'
-    }
+        marginLeft: '15px',
+    },
+    inline: {
+        display: 'inline',
+    },
 });
 
 export interface CodeSnippetDataProps {
@@ -31,6 +38,7 @@ export interface CodeSnippetDataProps {
     apiResponse?: boolean;
     linked?: boolean;
     children?: JSX.Element;
+    inline?: boolean;
 }
 
 interface CodeSnippetAuthProps {
@@ -44,11 +52,11 @@ const mapStateToProps = (state: RootState): CodeSnippetAuthProps => ({
 });
 
 export const CodeSnippet = withStyles(styles)(connect(mapStateToProps)(
-    ({ classes, lines, linked, className, apiResponse, dispatch, auth, children }: CodeSnippetProps & CodeSnippetAuthProps & DispatchProp) =>
+    ({ classes, lines, linked, className, apiResponse, dispatch, auth, children, inline }: CodeSnippetProps & CodeSnippetAuthProps & DispatchProp) =>
         <Typography
         component="div"
-        className={classNames(classes.root, className)}>
-            <Typography className={apiResponse ? classes.space : className} component="pre">
+        className={classNames([classes.root, className, inline ? classes.inlineRoot: undefined])}>
+            <Typography className={apiResponse ? classes.space : classNames([className, inline ? classes.inline : undefined])} component="pre">
                 {children}
                 {linked ?
                     lines.map((line, index) => <React.Fragment key={index}>{renderLinks(auth, dispatch)(line)}{`\n`}</React.Fragment>) :
diff --git a/services/workbench2/src/views/instance-types-panel/instance-types-panel.tsx b/services/workbench2/src/views/instance-types-panel/instance-types-panel.tsx
index 5afdd6296e..22617d8c86 100644
--- a/services/workbench2/src/views/instance-types-panel/instance-types-panel.tsx
+++ b/services/workbench2/src/views/instance-types-panel/instance-types-panel.tsx
@@ -12,14 +12,19 @@ import { ClusterConfigJSON } from 'common/config';
 import { NotFoundView } from 'views/not-found-panel/not-found-panel';
 import { formatCWLResourceSize, formatCost, formatFileSize } from 'common/formatters';
 import { DetailsAttribute } from 'components/details-attribute/details-attribute';
+import { DefaultCodeSnippet } from 'components/default-code-snippet/default-code-snippet';
 
-type CssRules = 'root' | 'instanceType';
+type CssRules = 'root' | 'infoBox' | 'instanceType';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     root: {
-       width: '100%',
+       width: "calc(100% + 20px)",
+       margin: "0 -10px",
        overflow: 'auto'
     },
+    infoBox: {
+        padding: "0 10px 10px",
+    },
     instanceType: {
         padding: "10px",
     },
@@ -38,72 +43,89 @@ export const InstanceTypesPanel = withStyles(styles)(connect(mapStateToProps)(
 
         const instances = config.InstanceTypes || {};
 
-        return <Card className={classes.root}>
-            <CardContent>
-                <Grid container direction="row">
-                    {Object.keys(instances).length > 0 ?
-                        Object.keys(instances).sort((a, b) => {
-                            const typeA = instances[a];
-                            const typeB = instances[b];
+        return <Grid className={classes.root} container direction="row">
+            <Grid className={classes.infoBox} item xs={12}>
+                <Card>
+                    <CardContent>
+                        <Typography variant="body2">
+                            These are the cloud compute instance types
+                            configured for this cluster. The core count and
+                            maximum RAM request correspond to the greatest
+                            values you can put in the CWL Workflow
+                            ResourceRequest{" "}
+                            <DefaultCodeSnippet
+                                inline
+                                lines={["minCores"]}
+                            />{" "}
+                            and{" "}
+                            <DefaultCodeSnippet inline lines={["minRAM"]} />{" "}
+                            and still be scheduled on that instance type.
+                        </Typography>
+                    </CardContent>
+                </Card>
+            </Grid>
+            {Object.keys(instances).length > 0 ?
+                Object.keys(instances)
+                    .sort((a, b) => {
+                        const typeA = instances[a];
+                        const typeB = instances[b];
 
-                            if (typeA.Price !== typeB.Price) {
-                                return typeA.Price - typeB.Price;
-                            } else {
-                                return typeA.ProviderType.localeCompare(typeB.ProviderType);
-                            }
-                        }).map((instanceKey) => {
-                            const instanceType = instances[instanceKey];
-                            const diskRequest = instanceType.IncludedScratch;
-                            const ramRequest = instanceType.RAM - config.Containers.ReserveExtraRAM;
+                        if (typeA.Price !== typeB.Price) {
+                            return typeA.Price - typeB.Price;
+                        } else {
+                            return typeA.ProviderType.localeCompare(typeB.ProviderType);
+                        }
+                    }).map((instanceKey) => {
+                        const instanceType = instances[instanceKey];
+                        const diskRequest = instanceType.IncludedScratch;
+                        const ramRequest = instanceType.RAM - config.Containers.ReserveExtraRAM;
 
-                            return <Grid data-cy={instanceKey} className={classes.instanceType} item sm={6} xs={12} key={instanceKey}>
-                                <Card>
-                                    <CardContent>
-                                        <Typography variant="h6">
-                                            {instanceKey}
-                                        </Typography>
-                                        <Grid item xs={12}>
-                                            <DetailsAttribute label="Provider type" value={instanceType.ProviderType} />
-                                        </Grid>
-                                        <Grid item xs={12}>
-                                            <DetailsAttribute label="Price" value={instanceType.Price} />
-                                        </Grid>
-                                        <Grid item xs={12}>
-                                            <DetailsAttribute label="Cores" value={instanceType.VCPUs} />
-                                        </Grid>
-                                        <Grid item xs={12}>
-                                            <DetailsAttribute label="Max RAM request" value={`${formatCWLResourceSize(ramRequest)} (${formatFileSize(ramRequest)})`} />
-                                        </Grid>
-                                        <Grid item xs={12}>
-                                            <DetailsAttribute label="Max disk request" value={`${formatCWLResourceSize(diskRequest)} (${formatFileSize(diskRequest)})`} />
-                                        </Grid>
-                                        <Grid item xs={12}>
-                                            <DetailsAttribute label="Preemptible" value={instanceType.Preemptible.toString()} />
-                                        </Grid>
-                                        {instanceType.CUDA && instanceType.CUDA.DeviceCount > 0 ?
-                                            <>
-                                                <Grid item xs={12}>
-                                                    <DetailsAttribute label="CUDA GPUs" value={instanceType.CUDA.DeviceCount} />
-                                                </Grid>
-                                                <Grid item xs={12}>
-                                                    <DetailsAttribute label="Hardware capability" value={instanceType.CUDA.HardwareCapability} />
-                                                </Grid>
-                                                <Grid item xs={12}>
-                                                    <DetailsAttribute label="Driver version" value={instanceType.CUDA.DriverVersion} />
-                                                </Grid>
-                                            </> : <></>
-                                        }
-                                    </CardContent>
-                                </Card>
-                            </Grid>
-                        }) :
-                        <NotFoundView
-                            icon={ResourceIcon}
-                            messages={["No instances found"]}
-                        />
-                    }
-                </Grid>
-            </CardContent>
-        </Card>
+                        return <Grid data-cy={instanceKey} className={classes.instanceType} item sm={6} xs={12} key={instanceKey}>
+                            <Card>
+                                <CardContent>
+                                    <Typography variant="h6">
+                                        {instanceKey}
+                                    </Typography>
+                                    <Grid item xs={12}>
+                                        <DetailsAttribute label="Provider type" value={instanceType.ProviderType} />
+                                    </Grid>
+                                    <Grid item xs={12}>
+                                        <DetailsAttribute label="Price" value={instanceType.Price} />
+                                    </Grid>
+                                    <Grid item xs={12}>
+                                        <DetailsAttribute label="Cores" value={instanceType.VCPUs} />
+                                    </Grid>
+                                    <Grid item xs={12}>
+                                        <DetailsAttribute label="Max RAM request" value={`${formatCWLResourceSize(ramRequest)} (${formatFileSize(ramRequest)})`} />
+                                    </Grid>
+                                    <Grid item xs={12}>
+                                        <DetailsAttribute label="Max disk request" value={`${formatCWLResourceSize(diskRequest)} (${formatFileSize(diskRequest)})`} />
+                                    </Grid>
+                                    <Grid item xs={12}>
+                                        <DetailsAttribute label="Preemptible" value={instanceType.Preemptible.toString()} />
+                                    </Grid>
+                                    {instanceType.CUDA && instanceType.CUDA.DeviceCount > 0 ?
+                                        <>
+                                            <Grid item xs={12}>
+                                                <DetailsAttribute label="CUDA GPUs" value={instanceType.CUDA.DeviceCount} />
+                                            </Grid>
+                                            <Grid item xs={12}>
+                                                <DetailsAttribute label="Hardware capability" value={instanceType.CUDA.HardwareCapability} />
+                                            </Grid>
+                                            <Grid item xs={12}>
+                                                <DetailsAttribute label="Driver version" value={instanceType.CUDA.DriverVersion} />
+                                            </Grid>
+                                        </> : <></>
+                                    }
+                                </CardContent>
+                            </Card>
+                        </Grid>;
+                    }) :
+                <NotFoundView
+                    icon={ResourceIcon}
+                    messages={["No instances found"]}
+                />
+            }
+        </Grid>;
     }
 ));
-- 
2.39.5