style: add more React focused linting (#1178)

determined-ai · Aug 28, 2020 · 5730050 · 5730050
1 parent eab3549
commit 5730050
Show file tree

Hide file tree

Showing 24 changed files with 166 additions and 151 deletions.
diff --git a/webui/react/.eslintrc.js b/webui/react/.eslintrc.js
@@ -26,9 +26,10 @@ module.exports = {
   plugins: [ 'import', 'react', 'react-hooks', 'sort-keys-fix' ],
   root: true,
   rules: {
-    '@typescript-eslint/explicit-module-boundary-types': [ 'warn', {
-      allowArgumentsExplicitlyTypedAsAny: true,
-    } ],
+    '@typescript-eslint/explicit-module-boundary-types': [
+      'warn',
+      { allowArgumentsExplicitlyTypedAsAny: true },
+    ],
     '@typescript-eslint/indent': [ 'error', 2 ],
     '@typescript-eslint/no-unused-vars': 'error',
     'array-bracket-spacing': [ 'error', 'always' ],
@@ -50,10 +51,18 @@ module.exports = {
     'no-multi-spaces': [ 'error', { ignoreEOLComments: true } ],
     'no-multiple-empty-lines': [ 'error', { max: 1, maxBOF: 0, maxEOF: 0 } ],
     'no-trailing-spaces': [ 'error', {} ],
+    'object-curly-newline': [ 'error', {
+      ExportDeclaration: { consistent: true },
+      ImportDeclaration: { consistent: true },
+      ObjectExpression: { multiline: true },
+      ObjectPattern: { multiline: true },
+    } ],
     'object-curly-spacing': [ 'error', 'always' ],
     'object-property-newline': [ 'error', { allowAllPropertiesOnSameLine: true } ],
     'quote-props': [ 'error', 'consistent-as-needed' ],
     'quotes': [ 'error', 'single', { avoidEscape: true } ],
+    'react/jsx-first-prop-new-line': [ 'error', 'multiline-multiprop' ],
+    'react/jsx-max-props-per-line': [ 'error', { when: 'multiline' } ],
     'react/jsx-sort-props': [ 'error', {
       callbacksLast: true,
       ignoreCase: true,
@@ -82,9 +91,7 @@ module.exports = {
     } ],
   },
   settings: {
-    'import/resolver': {
-      typescript: {}, // This loads <rootdir>/tsconfig.json to eslint
-    },
+    'import/resolver': { typescript: {} }, // This loads <rootdir>/tsconfig.json to eslint
     'react': { version: 'detect' },
   },
 };
diff --git a/webui/react/src/components/AuthToken.tsx b/webui/react/src/components/AuthToken.tsx
@@ -30,8 +30,10 @@ const AuthToken: React.FC = () => {
     <Result
       className={css.base}
       extra={[
-        <Button icon={<CopyOutlined />}
-          key="copy" type="primary"
+        <Button
+          icon={<CopyOutlined />}
+          key="copy"
+          type="primary"
           onClick={handleCopyToClipboard}>
           Copy token to clipboard
         </Button>,

diff --git a/webui/react/src/components/CreateExperimentModal.tsx b/webui/react/src/components/CreateExperimentModal.tsx
@@ -53,14 +53,10 @@ const CreateExperimentModal: React.FC<Props> = (
     onVisibleChange(false);
   };
   return <Modal
-    bodyStyle={{
-      padding: 0,
-    }}
+    bodyStyle={{ padding: 0 }}
     className={css.configModal}
     okText={props.okText}
-    style={{
-      minWidth: '60rem',
-    }}
+    style={{ minWidth: '60rem' }}
     title={props.title}
     visible={visible}
     onCancel={handleCancel}

diff --git a/webui/react/src/components/DeterminedAuth.tsx b/webui/react/src/components/DeterminedAuth.tsx
@@ -63,9 +63,7 @@ const DeterminedAuth: React.FC = () => {
   const loginForm = (
     <Form
       className={css.form}
-      initialValues={{
-        username: storage.getWithDefault(STORAGE_KEY_LAST_USERNAME, ''),
-      }}
+      initialValues={{ username: storage.getWithDefault(STORAGE_KEY_LAST_USERNAME, '') }}
       name="login"
       onFinish={onFinish}
       onValuesChange={onValuesChange}>

diff --git a/webui/react/src/components/LogViewer.tsx b/webui/react/src/components/LogViewer.tsx
@@ -489,10 +489,14 @@ const LogViewer: React.FC<Props> = forwardRef((
           <div className={css.container} ref={container}>
             <div className={css.scrollSpacer} ref={spacer} style={spacerStyle}>
               {visibleLogs.map(log => (
-                <div className={css.line} id={`log-${log.id}`} key={log.id} style={{
-                  height: toRem(config.messageSizes[log.id]?.height),
-                  top: toRem(config.messageSizes[log.id]?.top),
-                }}>
+                <div
+                  className={css.line}
+                  id={`log-${log.id}`}
+                  key={log.id}
+                  style={{
+                    height: toRem(config.messageSizes[log.id]?.height),
+                    top: toRem(config.messageSizes[log.id]?.top),
+                  }}>
                   {!props.disableLineNumber &&
                   <div className={css.number} data-label={log.id + 1} style={lineNumberStyle} />}
                   {!props.disableLevel ? (

diff --git a/webui/react/src/components/ProgressBar.tsx b/webui/react/src/components/ProgressBar.tsx
@@ -13,9 +13,7 @@ interface Props {
   state: RunState | CommandState;
 }
 
-const defaultProps = {
-  percent: 0,
-};
+const defaultProps = { percent: 0 };
 
 const ProgressBar: React.FC<Props> = ({ barOnly, percent, state }: Props) => {
   const classes = [ css.base ];

diff --git a/webui/react/src/components/ResourceChart.stories.tsx b/webui/react/src/components/ResourceChart.stories.tsx
@@ -9,60 +9,70 @@ export default {
   title: 'ResourceChart',
 };
 
-export const Default = (): React.ReactNode => <ResourceChart resources={[
-  { container: undefined },
-  { container: { state: ResourceState.Assigned } },
-  { container: { state: ResourceState.Pulling } },
-  { container: { state: ResourceState.Pulling } },
-  { container: { state: ResourceState.Pulling } },
-  { container: { state: ResourceState.Terminated } },
-  { container: { state: ResourceState.Terminated } },
-  { container: { state: ResourceState.Terminated } },
-  { container: { state: ResourceState.Running } },
-  { container: { state: ResourceState.Running } },
-  { container: { state: ResourceState.Running } },
-  { container: { state: ResourceState.Running } },
-] as Resource[]} title="TPUs" />;
+export const Default = (): React.ReactNode => <ResourceChart
+  resources={[
+    { container: undefined },
+    { container: { state: ResourceState.Assigned } },
+    { container: { state: ResourceState.Pulling } },
+    { container: { state: ResourceState.Pulling } },
+    { container: { state: ResourceState.Pulling } },
+    { container: { state: ResourceState.Terminated } },
+    { container: { state: ResourceState.Terminated } },
+    { container: { state: ResourceState.Terminated } },
+    { container: { state: ResourceState.Running } },
+    { container: { state: ResourceState.Running } },
+    { container: { state: ResourceState.Running } },
+    { container: { state: ResourceState.Running } },
+  ] as Resource[]}
+  title="TPUs" />;
 
-export const AllSame = (): React.ReactNode => <ResourceChart resources={[
-  { container: undefined },
-  { container: undefined },
-  { container: undefined },
-  { container: undefined },
-  { container: undefined },
-  { container: undefined },
-  { container: undefined },
-] as Resource[]} title="TPUs" />;
+export const AllSame = (): React.ReactNode => <ResourceChart
+  resources={[
+    { container: undefined },
+    { container: undefined },
+    { container: undefined },
+    { container: undefined },
+    { container: undefined },
+    { container: undefined },
+    { container: undefined },
+  ] as Resource[]}
+  title="TPUs" />;
 
-export const HalfHalf = (): React.ReactNode => <ResourceChart resources={[
-  { container: undefined },
-  { container: undefined },
-  { container: undefined },
-  { container: undefined },
-  { container: { state: ResourceState.Running } },
-  { container: { state: ResourceState.Running } },
-  { container: { state: ResourceState.Running } },
-  { container: { state: ResourceState.Running } },
-] as Resource[]} title="GPUs" />;
+export const HalfHalf = (): React.ReactNode => <ResourceChart
+  resources={[
+    { container: undefined },
+    { container: undefined },
+    { container: undefined },
+    { container: undefined },
+    { container: { state: ResourceState.Running } },
+    { container: { state: ResourceState.Running } },
+    { container: { state: ResourceState.Running } },
+    { container: { state: ResourceState.Running } },
+  ] as Resource[]}
+  title="GPUs" />;
 
-export const MostlyStarting = (): React.ReactNode => <ResourceChart resources={[
-  { container: undefined },
-  { container: undefined },
-  { container: { state: ResourceState.Running } },
-  { container: { state: ResourceState.Starting } },
-  { container: { state: ResourceState.Starting } },
-  { container: { state: ResourceState.Starting } },
-  { container: { state: ResourceState.Starting } },
-] as Resource[]} title="GPUs" />;
+export const MostlyStarting = (): React.ReactNode => <ResourceChart
+  resources={[
+    { container: undefined },
+    { container: undefined },
+    { container: { state: ResourceState.Running } },
+    { container: { state: ResourceState.Starting } },
+    { container: { state: ResourceState.Starting } },
+    { container: { state: ResourceState.Starting } },
+    { container: { state: ResourceState.Starting } },
+  ] as Resource[]}
+  title="GPUs" />;
 
-export const MostlyRunning = (): React.ReactNode => <ResourceChart resources={[
-  { container: undefined },
-  { container: undefined },
-  { container: { state: ResourceState.Starting } },
-  { container: { state: ResourceState.Running } },
-  { container: { state: ResourceState.Running } },
-  { container: { state: ResourceState.Running } },
-  { container: { state: ResourceState.Running } },
-] as Resource[]} title="GPUs" />;
+export const MostlyRunning = (): React.ReactNode => <ResourceChart
+  resources={[
+    { container: undefined },
+    { container: undefined },
+    { container: { state: ResourceState.Starting } },
+    { container: { state: ResourceState.Running } },
+    { container: { state: ResourceState.Running } },
+    { container: { state: ResourceState.Running } },
+    { container: { state: ResourceState.Running } },
+  ] as Resource[]}
+  title="GPUs" />;
 
 export const Empty = (): React.ReactNode => <ResourceChart resources={[]} title="DPUs" />;
diff --git a/webui/react/src/components/ResourceChart.tsx b/webui/react/src/components/ResourceChart.tsx
@@ -49,9 +49,7 @@ const genPlotInfo = (title: string, resources: Resource[]): PlotInfo | null => {
     hole: 0.5,
     hoverinfo: 'skip',
     labels,
-    marker: {
-      colors,
-    },
+    marker: { colors },
     textinfo: 'label+value',
     type: 'pie',
     values,
@@ -61,21 +59,18 @@ const genPlotInfo = (title: string, resources: Resource[]): PlotInfo | null => {
     data[0] = {
       ...data[0],
       labels: [ `no ${title} available` ],
-      marker: {
-        colors: [ lightTheme.colors.monochrome[13] ],
-      },
+      marker: { colors: [ lightTheme.colors.monochrome[13] ] },
       textinfo: 'label',
       values: [ 1 ],
     };
   }
 
-  return { data,
+  return {
+    data,
     layout: {
       annotations: [
         {
-          font: {
-            size: 20,
-          },
+          font: { size: 20 },
           showarrow: false,
           text: `${title} (${resources.length})`,
           x: 0.5,
@@ -84,7 +79,8 @@ const genPlotInfo = (title: string, resources: Resource[]): PlotInfo | null => {
       ],
       hovermode: false,
       showlegend: false,
-    } };
+    },
+  };
 };
 
 const SlotChart: React.FC<Props> = ({ title, resources, ...rest }: Props) => {

diff --git a/webui/react/src/components/Section.tsx b/webui/react/src/components/Section.tsx
@@ -13,9 +13,7 @@ interface Props {
   bodyBorder?: boolean;
 }
 
-const defaultProps = {
-  divider: false,
-};
+const defaultProps = { divider: false };
 
 const Section: React.FC<Props> = (props: PropsWithChildren<Props>) => {
   const classes = [ css.base ];

diff --git a/webui/react/src/components/StateSelectFilter.tsx b/webui/react/src/components/StateSelectFilter.tsx
@@ -30,7 +30,10 @@ const experimentOptions = Object.values(RunState).map((value) => (
 ));
 
 const StateSelectFilter: React.FC<Props> = ({
-  onChange, showCommandStates, showExperimentStates, value,
+  onChange,
+  showCommandStates,
+  showExperimentStates,
+  value,
 }: Props) => {
   const options = useMemo(() => {
     if (showExperimentStates && showCommandStates) {

diff --git a/webui/react/src/components/TagList.tsx b/webui/react/src/components/TagList.tsx
@@ -18,7 +18,11 @@ interface Props {
 }
 
 const EditableTagList: React.FC<Props> = ({
-  className, tags, onChange, onCreate, onDelete,
+  className,
+  tags,
+  onChange,
+  onCreate,
+  onDelete,
 }: Props) => {
   const initialState = {
     editInputIndex: -1,

diff --git a/webui/react/src/components/TaskFilter.tsx b/webui/react/src/components/TaskFilter.tsx
@@ -33,7 +33,9 @@ const commandConfig = [
 const experimentConfig = [ { id: 'Experiment' } ];
 
 const TaskFilter: TaskFilterFC = <T extends TaskType = TaskType>({
-  filters, onChange, showExperiments = true, showLimit = true,
+  filters, onChange,
+  showExperiments = true,
+  showLimit = true,
 }: Props<T>) => {
   const allTypesOff = !Object.values(filters.types).reduce((acc, type) => (acc || type), false);
   const showCommandStates = allTypesOff ||

diff --git a/webui/react/src/ioTypes.ts b/webui/react/src/ioTypes.ts
@@ -109,9 +109,7 @@ const ioCommandMisc = io.partial({
   trial_ids: io.union([ io.array(io.number), ioNullOrUndefined ]),
 });
 
-const ioCommandConfig = io.exact(io.type({
-  description: io.string,
-}));
+const ioCommandConfig = io.exact(io.type({ description: io.string }));
 
 const commandStates: Record<string, null> = Object.values(CommandState)
   .reduce((acc, val) => ({ ...acc, [val]: null }), {});
@@ -243,9 +241,7 @@ const ioDataLayer = io.type({
   type: io.string,
 });
 
-const ioExpResources = io.type({
-  max_slots: io.union([ io.number, ioNullOrUndefined ]),
-});
+const ioExpResources = io.type({ max_slots: io.union([ io.number, ioNullOrUndefined ]) });
 
 const ioExperimentConfig = io.type({
   checkpoint_policy: io.string,
@@ -331,11 +327,7 @@ const ioTaskLog = io.type({
   scheduled_event: io.union([ io.string, ioNullOrUndefined ]),
   seq: io.number,
   service_ready_event: io.union([ io.type({}), ioNullOrUndefined ]),
-  snapshot: io.type({
-    config: io.type({
-      description: io.string,
-    }),
-  }),
+  snapshot: io.type({ config: io.type({ description: io.string }) }),
   terminate_request_event: io.union([ io.string, ioNullOrUndefined ]),
   time: io.string,
 });

diff --git a/webui/react/src/pages/Cluster.tsx b/webui/react/src/pages/Cluster.tsx
@@ -35,7 +35,8 @@ const Cluster: React.FC = () => {
     <Page id="cluster" title="Cluster">
       <Grid minItemWidth={50}>
         {Object.values(ResourceType).map((resourceType, idx) => (
-          <ResourceChart key={idx}
+          <ResourceChart
+            key={idx}
             resources={availableResources[resourceType]}
             title={resourceType + 's'} />
         ))}

diff --git a/webui/react/src/pages/Dashboard.tsx b/webui/react/src/pages/Dashboard.tsx
@@ -52,7 +52,8 @@ const Dashboard: React.FC = () => {
 
   const storage = useStorage('dashboard/tasks');
   const initFilters = storage.getWithDefault('filters', {
-    ...defaultFilters, username: getPath<string>(auth, 'user.username'),
+    ...defaultFilters,
+    username: getPath<string>(auth, 'user.username'),
   });
   const [ filters, setFilters ] = useState<TaskFilters>(initFilters);
 

diff --git a/webui/react/src/pages/ExperimentDetails.tsx b/webui/react/src/pages/ExperimentDetails.tsx
@@ -118,7 +118,9 @@ const ExperimentDetailsComp: React.FC = () => {
   }, [ setForkModalVisible ]);
 
   const handleTableRow = useCallback((record: TrialItem) => ({
-    onClick: (event: React.MouseEvent) => handlePath(event, { path: record.url }),
+    onClick: (event: React.MouseEvent) => {
+      return handlePath(event, { path: record.url });
+    },
   }), []);
 
   const handleCheckpointShow = (event: React.MouseEvent, checkpoint: CheckpointDetail) => {