Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

style: add more React focused linting #1178

Merged
merged 2 commits into from
Aug 28, 2020
Merged

style: add more React focused linting #1178

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c941e6f
chore: add more react linting
Aug 26, 2020
937ce05
chore: update files to conform to new linting
Aug 26, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 13 additions & 6 deletions webui/react/.eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' ],
Expand All @@ -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 },
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

changed this to consistent instead of multiline for import and export so we can still support something like this:

import {
  Checkpoint, CheckpointDetail, CheckpointState, ExperimentDetails,
  RunState, Step, TrialDetails, ValidationMetrics,
} from 'types';

otherwise each of those imports will be on its own line

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,
Expand Down Expand Up @@ -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' },
},
};
6 changes: 4 additions & 2 deletions webui/react/src/components/AuthToken.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,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>,
Expand Down
8 changes: 2 additions & 6 deletions webui/react/src/components/CreateExperimentModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
4 changes: 1 addition & 3 deletions webui/react/src/components/DeterminedAuth.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand Down
12 changes: 8 additions & 4 deletions webui/react/src/components/LogViewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ? (
Expand Down
4 changes: 1 addition & 3 deletions webui/react/src/components/ProgressBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ];
Expand Down
112 changes: 61 additions & 51 deletions webui/react/src/components/ResourceChart.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />;
18 changes: 7 additions & 11 deletions webui/react/src/components/ResourceChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -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) => {
Expand Down
4 changes: 1 addition & 3 deletions webui/react/src/components/Section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ];
Expand Down
5 changes: 4 additions & 1 deletion webui/react/src/components/StateSelectFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 handleSelect = useCallback((newValue: SelectValue) => {
const singleValue = Array.isArray(newValue) ? newValue[0] : newValue;
Expand Down
6 changes: 5 additions & 1 deletion webui/react/src/components/TagList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
4 changes: 3 additions & 1 deletion webui/react/src/components/TaskFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ||
Expand Down
14 changes: 3 additions & 11 deletions webui/react/src/ioTypes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }), {});
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
});
Expand Down
3 changes: 2 additions & 1 deletion webui/react/src/pages/Cluster.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'} />
))}
Expand Down
3 changes: 2 additions & 1 deletion webui/react/src/pages/Dashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down
4 changes: 3 additions & 1 deletion webui/react/src/pages/ExperimentDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down
Loading