[arvados-workbench2] updated: 2.4.0-451-g42ac4ffe

git repository hosting git at public.arvados.org
Mon Dec 19 20:46:36 UTC 2022


Summary of changes:
 src/common/formatters.ts                          | 176 ++++++++---------
 src/models/runtime-constraints.ts                 |   8 +
 src/store/process-panel/process-panel-actions.ts  |  35 +++-
 src/store/process-panel/process-panel-reducer.ts  |   4 +
 src/store/process-panel/process-panel.ts          |  24 +++
 src/views/process-panel/process-panel-root.tsx    | 184 +++++++++--------
 src/views/process-panel/process-panel.tsx         |   7 +-
 src/views/process-panel/process-resource-card.tsx | 229 ++++++++++++++++++++++
 8 files changed, 490 insertions(+), 177 deletions(-)
 create mode 100644 src/views/process-panel/process-resource-card.tsx

       via  42ac4ffe736764214d86bc261c322115fe861217 (commit)
       via  fd24fbe43ef6f898f31804aff16ea6911a014ff8 (commit)
       via  6c2c5829a465db7638008c69a93db07c15e67cee (commit)
       via  21d7f6cb32902073193db810b4dfad85d9cdff7e (commit)
       via  914c0bbb748c9dc98245a58e7352e2eb21146a62 (commit)
       via  ed4389e99b60c9e2316312829ed5f105dd1cf3b7 (commit)
       via  1d0297e01e0196d63b4fb42573e5bd6d1e1a31b9 (commit)
      from  5005f810d8c5e8c9e8c94c5981b014e41d2a40b3 (commit)

Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.


commit 42ac4ffe736764214d86bc261c322115fe861217
Merge: 5005f810 fd24fbe4
Author: Peter Amstutz <peter.amstutz at curii.com>
Date:   Mon Dec 19 15:46:25 2022 -0500

    Merge branch '19438-resource-panel' refs #19438
    
    Arvados-DCO-1.1-Signed-off-by: Peter Amstutz <peter.amstutz at curii.com>


commit fd24fbe43ef6f898f31804aff16ea6911a014ff8
Merge: 6c2c5829 5005f810
Author: Peter Amstutz <peter.amstutz at curii.com>
Date:   Mon Dec 19 15:42:43 2022 -0500

    Merge branch 'main' into 19438-resource-panel refs #19438
    
    Arvados-DCO-1.1-Signed-off-by: Peter Amstutz <peter.amstutz at curii.com>


commit 6c2c5829a465db7638008c69a93db07c15e67cee
Author: Peter Amstutz <peter.amstutz at curii.com>
Date:   Mon Dec 19 15:25:01 2022 -0500

    19438: Make heading match tab heading
    
    Arvados-DCO-1.1-Signed-off-by: Peter Amstutz <peter.amstutz at curii.com>

diff --git a/src/views/process-panel/process-resource-card.tsx b/src/views/process-panel/process-resource-card.tsx
index 4ab8d860..c76838fc 100644
--- a/src/views/process-panel/process-resource-card.tsx
+++ b/src/views/process-panel/process-resource-card.tsx
@@ -64,7 +64,9 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     },
     sectionH3: {
         margin: "0.5em",
-        color: theme.customs.colors.grey700
+        color: theme.customs.colors.purple,
+        fontSize: "0.8125rem",
+        textTransform: "uppercase",
     }
 });
 

commit 21d7f6cb32902073193db810b4dfad85d9cdff7e
Merge: 914c0bbb cf895a44
Author: Peter Amstutz <peter.amstutz at curii.com>
Date:   Mon Dec 19 15:14:17 2022 -0500

    Merge branch 'main' into 19438-resource-panel refs #19438
    
    Arvados-DCO-1.1-Signed-off-by: Peter Amstutz <peter.amstutz at curii.com>


commit 914c0bbb748c9dc98245a58e7352e2eb21146a62
Author: Peter Amstutz <peter.amstutz at curii.com>
Date:   Mon Dec 19 15:06:58 2022 -0500

    19438: Styling adjustments
    
    Arvados-DCO-1.1-Signed-off-by: Peter Amstutz <peter.amstutz at curii.com>

diff --git a/src/common/custom-theme.ts b/src/common/custom-theme.ts
index df848642..e819ab3a 100644
--- a/src/common/custom-theme.ts
+++ b/src/common/custom-theme.ts
@@ -12,26 +12,27 @@ import red from '@material-ui/core/colors/red';
 import teal from '@material-ui/core/colors/teal';
 
 export interface ArvadosThemeOptions extends ThemeOptions {
-  customs: any;
+    customs: any;
 }
 
 export interface ArvadosTheme extends Theme {
-  customs: {
-    colors: Colors;
-  };
+    customs: {
+        colors: Colors;
+    };
 }
 
 interface Colors {
-  green700: string;
-  yellow100: string;
-  yellow700: string;
-  yellow900: string;
-  red100: string;
-  red900: string;
-  blue500: string;
-  grey500: string;
-  purple: string;
-  orange: string;
+    green700: string;
+    yellow100: string;
+    yellow700: string;
+    yellow900: string;
+    red100: string;
+    red900: string;
+    blue500: string;
+    grey500: string;
+    grey700: string;
+    purple: string;
+    orange: string;
 }
 
 const arvadosPurple = '#361336';
@@ -41,148 +42,148 @@ const grey700 = grey['700'];
 const grey900 = grey['900'];
 
 export const themeOptions: ArvadosThemeOptions = {
-  typography: {
-    useNextVariants: true,
-  },
-  customs: {
-    colors: {
-      green700: green['700'],
-      yellow100: yellow['100'],
-      yellow700: yellow['700'],
-      yellow900: yellow['900'],
-      red100: red['100'],
-      red900: red['900'],
-      blue500: blue['500'],
-      grey500: grey500,
-      purple: arvadosPurple,
-      orange: '#f0ad4e',
-    },
-  },
-  overrides: {
-    MuiTypography: {
-      body1: {
-        fontSize: '0.8125rem',
-      },
-    },
-    MuiAppBar: {
-      colorPrimary: {
-        backgroundColor: arvadosPurple,
-      },
-    },
-    MuiTabs: {
-      root: {
-        color: grey600,
-      },
-      indicator: {
-        backgroundColor: arvadosPurple,
-      },
-    },
-    MuiTab: {
-      root: {
-        '&$selected': {
-          fontWeight: 700,
-          color: arvadosPurple,
+    typography: {
+        useNextVariants: true,
+    },
+    customs: {
+        colors: {
+            green700: green['700'],
+            yellow100: yellow['100'],
+            yellow700: yellow['700'],
+            yellow900: yellow['900'],
+            red100: red['100'],
+            red900: red['900'],
+            blue500: blue['500'],
+            grey500: grey500,
+            purple: arvadosPurple,
+            orange: '#f0ad4e',
         },
-      },
-    },
-    MuiList: {
-      root: {
-        color: grey900,
-      },
-    },
-    MuiListItemText: {
-      root: {
-        padding: 0,
-      },
-    },
-    MuiListItemIcon: {
-      root: {
-        fontSize: '1.25rem',
-      },
-    },
-    MuiCardHeader: {
-      avatar: {
-        display: 'flex',
-        alignItems: 'center',
-      },
-      title: {
-        color: grey700,
-        fontSize: '1.25rem',
-      },
     },
-    MuiExpansionPanel: {
-      expanded: {
-        marginTop: '8px',
-      },
-    },
-    MuiExpansionPanelDetails: {
-      root: {
-        marginBottom: 0,
-        paddingBottom: '4px',
-      },
-    },
-    MuiExpansionPanelSummary: {
-      content: {
-        '&$expanded': {
-          margin: 0,
-        },
-        color: grey700,
-        fontSize: '1.25rem',
-        margin: 0,
-      },
-      expanded: {},
-    },
-    MuiMenuItem: {
-      root: {
-        padding: '8px 16px',
-      },
-    },
-    MuiInput: {
-      root: {
-        fontSize: '0.875rem',
-      },
-      underline: {
-        '&:after': {
-          borderBottomColor: arvadosPurple,
-        },
-        '&:hover:not($disabled):not($focused):not($error):before': {
-          borderBottom: '1px solid inherit',
-        },
-      },
-    },
-    MuiFormLabel: {
-      root: {
-        fontSize: '0.875rem',
-        '&$focused': {
-          '&$focused:not($error)': {
-            color: arvadosPurple,
-          },
-        },
-      },
-    },
-    MuiStepIcon: {
-      root: {
-        '&$active': {
-          color: arvadosPurple,
+    overrides: {
+        MuiTypography: {
+            body1: {
+                fontSize: '0.8125rem',
+            },
+        },
+        MuiAppBar: {
+            colorPrimary: {
+                backgroundColor: arvadosPurple,
+            },
         },
-        '&$completed': {
-          color: 'inherited',
+        MuiTabs: {
+            root: {
+                color: grey600,
+            },
+            indicator: {
+                backgroundColor: arvadosPurple,
+            },
+        },
+        MuiTab: {
+            root: {
+                '&$selected': {
+                    fontWeight: 700,
+                    color: arvadosPurple,
+                },
+            },
+        },
+        MuiList: {
+            root: {
+                color: grey900,
+            },
+        },
+        MuiListItemText: {
+            root: {
+                padding: 0,
+            },
+        },
+        MuiListItemIcon: {
+            root: {
+                fontSize: '1.25rem',
+            },
+        },
+        MuiCardHeader: {
+            avatar: {
+                display: 'flex',
+                alignItems: 'center',
+            },
+            title: {
+                color: grey700,
+                fontSize: '1.25rem',
+            },
+        },
+        MuiExpansionPanel: {
+            expanded: {
+                marginTop: '8px',
+            },
+        },
+        MuiExpansionPanelDetails: {
+            root: {
+                marginBottom: 0,
+                paddingBottom: '4px',
+            },
+        },
+        MuiExpansionPanelSummary: {
+            content: {
+                '&$expanded': {
+                    margin: 0,
+                },
+                color: grey700,
+                fontSize: '1.25rem',
+                margin: 0,
+            },
+            expanded: {},
+        },
+        MuiMenuItem: {
+            root: {
+                padding: '8px 16px',
+            },
+        },
+        MuiInput: {
+            root: {
+                fontSize: '0.875rem',
+            },
+            underline: {
+                '&:after': {
+                    borderBottomColor: arvadosPurple,
+                },
+                '&:hover:not($disabled):not($focused):not($error):before': {
+                    borderBottom: '1px solid inherit',
+                },
+            },
+        },
+        MuiFormLabel: {
+            root: {
+                fontSize: '0.875rem',
+                '&$focused': {
+                    '&$focused:not($error)': {
+                        color: arvadosPurple,
+                    },
+                },
+            },
+        },
+        MuiStepIcon: {
+            root: {
+                '&$active': {
+                    color: arvadosPurple,
+                },
+                '&$completed': {
+                    color: 'inherited',
+                },
+            },
         },
-      },
     },
-  },
-  mixins: {
-    toolbar: {
-      minHeight: '48px',
+    mixins: {
+        toolbar: {
+            minHeight: '48px',
+        },
     },
-  },
-  palette: {
-    primary: {
-      main: teal.A700,
-      dark: teal.A400,
-      contrastText: '#fff',
+    palette: {
+        primary: {
+            main: teal.A700,
+            dark: teal.A400,
+            contrastText: '#fff',
+        },
     },
-  },
 };
 
 export const CustomTheme = createMuiTheme(themeOptions);
diff --git a/src/views/process-panel/process-resource-card.tsx b/src/views/process-panel/process-resource-card.tsx
index 88b8155b..4ab8d860 100644
--- a/src/views/process-panel/process-resource-card.tsx
+++ b/src/views/process-panel/process-resource-card.tsx
@@ -47,16 +47,24 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     header: {
         paddingBottom: "0px"
     },
-    title: {},
-    avatar: {},
-    iconHeader: {},
+    title: {
+        paddingTop: theme.spacing.unit * 0.5
+    },
+    avatar: {
+        paddingTop: theme.spacing.unit * 0.5
+    },
+    iconHeader: {
+        fontSize: '1.875rem',
+        color: theme.customs.colors.green700,
+    },
     content: {
         paddingTop: "0px",
         maxHeight: `calc(100% - ${theme.spacing.unit * 4.5}px)`,
         overflow: "auto"
     },
     sectionH3: {
-        margin: "0.5em"
+        margin: "0.5em",
+        color: theme.customs.colors.grey700
     }
 });
 
@@ -109,10 +117,10 @@ export const ProcessResourceCard = withStyles(styles)(connect()(
             <CardContent className={classes.content}>
                 <Grid container>
                     <Grid item xs={4}>
-                        <h3 className={classes.sectionH3}>Requested resources</h3>
+                        <h3 className={classes.sectionH3}>Requested Resources</h3>
                         <Grid container>
                             <Grid item xs={12}>
-                                <DetailsAttribute label="cores" value={process.container?.runtimeConstraints.vcpus} />
+                                <DetailsAttribute label="Cores" value={process.container?.runtimeConstraints.vcpus} />
                             </Grid>
                             <Grid item xs={12}>
                                 <DetailsAttribute label="RAM" value={formatFileSize(process.container?.runtimeConstraints.ram)} />
@@ -120,9 +128,6 @@ export const ProcessResourceCard = withStyles(styles)(connect()(
                             <Grid item xs={12}>
                                 <DetailsAttribute label="Disk" value={formatFileSize(diskRequest)} />
                             </Grid>
-                            <Grid item xs={12}>
-                                <DetailsAttribute label="API access" value={process.container?.runtimeConstraints.API.toString()} />
-                            </Grid>
 
                             {process.container?.runtimeConstraints.keep_cache_ram &&
                                 process.container?.runtimeConstraints.keep_cache_ram > 0 ?
@@ -136,6 +141,10 @@ export const ProcessResourceCard = withStyles(styles)(connect()(
                                     <DetailsAttribute label="Keep cache (disk)" value={formatFileSize(process.container?.runtimeConstraints.keep_cache_disk)} />
                                 </Grid> : null}
 
+                            {process.container?.runtimeConstraints.API ? <Grid item xs={12}>
+                                <DetailsAttribute label="API access" value={process.container?.runtimeConstraints.API.toString()} />
+                            </Grid> : null}
+
                             {process.container?.runtimeConstraints.cuda &&
                                 process.container?.runtimeConstraints.cuda.device_count > 0 ?
                                 <>
@@ -154,14 +163,14 @@ export const ProcessResourceCard = withStyles(styles)(connect()(
 
 
                     <Grid item xs={8}>
-                        <h3 className={classes.sectionH3}>Assigned instance type</h3>
+                        <h3 className={classes.sectionH3}>Assigned Instance Type</h3>
                         {nodeInfo === null ? <Grid item xs={8}>
                             No instance type recorded
                         </Grid>
                             :
                             <Grid container>
                                 <Grid item xs={6}>
-                                    <DetailsAttribute label="cores" value={nodeInfo.VCPUs} />
+                                    <DetailsAttribute label="Cores" value={nodeInfo.VCPUs} />
                                 </Grid>
 
                                 <Grid item xs={6}>
@@ -193,9 +202,17 @@ export const ProcessResourceCard = withStyles(styles)(connect()(
                                         <Grid item xs={6}>
                                             <DetailsAttribute label="CUDA devices" value={formatFileSize(nodeInfo.CUDA.DeviceCount)} />
                                         </Grid>
+
+                                        <Grid item xs={6}>
+                                        </Grid>
+
                                         <Grid item xs={6}>
                                             <DetailsAttribute label="CUDA driver version" value={formatFileSize(nodeInfo.CUDA.DriverVersion)} />
                                         </Grid>
+
+                                        <Grid item xs={6}>
+                                        </Grid>
+
                                         <Grid item xs={6}>
                                             <DetailsAttribute label="CUDA hardware capability" value={formatFileSize(nodeInfo.CUDA.HardwareCapability)} />
                                         </Grid>

-----------------------------------------------------------------------


hooks/post-receive
-- 




More information about the arvados-commits mailing list