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

refactor(ui): migrate Reports to functional component and split files #11794

Merged
merged 3 commits into from
Sep 21, 2023
Merged

refactor(ui): migrate Reports to functional component and split files #11794

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d23031d
refactor(ui): migrate reports to functional component
agilgur5 Sep 10, 2023
a1f9b0e
refactor(ui): split `reports` into more files
agilgur5 Sep 10, 2023
1972369
fix leftover this.state usage
agilgur5 Sep 10, 2023
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
2 changes: 1 addition & 1 deletion ui/src/app/cron-workflows/components/cron-workflow-filters/cron-workflow-filters.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,4 +25,4 @@
font-size: 15px;
background-color: transparent;
border: 0;
}
}
4 changes: 2 additions & 2 deletions ui/src/app/cron-workflows/components/cron-workflow-filters/cron-workflow-filters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ interface WorkflowFilterProps {
onChange: (namespace: string, labels: string[], states: string[]) => void;
}

export const CronWorkflowFilters = ({cronWorkflows, namespace, labels, states, onChange}: WorkflowFilterProps) => {
export function CronWorkflowFilters({cronWorkflows, namespace, labels, states, onChange}: WorkflowFilterProps) {
const [labelSuggestion, setLabelSuggestion] = useState([]);

useEffect(() => {
Expand Down Expand Up @@ -74,4 +74,4 @@ export const CronWorkflowFilters = ({cronWorkflows, namespace, labels, states, o
</div>
</div>
);
};
}
32 changes: 17 additions & 15 deletions ui/src/app/cron-workflows/components/cron-workflow-list/cron-workflow-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,12 @@ require('./cron-workflow-list.scss');

const learnMore = <a href='https://argoproj.github.io/argo-workflows/cron-workflows/'>Learn more</a>;

export const CronWorkflowList = ({match, location, history}: RouteComponentProps<any>) => {
// boiler-plate
export function CronWorkflowList({match, location, history}: RouteComponentProps<any>) {
const queryParams = new URLSearchParams(location.search);
const {navigation} = useContext(Context);

// state for URL, query and label parameters
const [namespace, setNamespace] = useState(Utils.getNamespace(match.params.namespace) || '');
// state for URL, query, and label parameters
const [namespace, setNamespace] = useState<string>(Utils.getNamespace(match.params.namespace) || '');
const [sidePanel, setSidePanel] = useState(queryParams.get('sidePanel') === 'true');
const [labels, setLabels] = useState([]);
const [states, setStates] = useState(['Running', 'Suspended']); // check all by default
Expand All @@ -44,6 +43,7 @@ export const CronWorkflowList = ({match, location, history}: RouteComponentProps
[history]
);

// save history
useEffect(
() =>
history.push(
Expand All @@ -60,21 +60,23 @@ export const CronWorkflowList = ({match, location, history}: RouteComponentProps
const [cronWorkflows, setCronWorkflows] = useState<CronWorkflow[]>();

useEffect(() => {
services.cronWorkflows
.list(namespace, labels)
.then(l => {
(async () => {
try {
const list = await services.cronWorkflows.list(namespace, labels);
if (states.length === 1) {
if (states.includes('Suspended')) {
return l.filter(el => el.spec.suspend === true);
setCronWorkflows(list.filter(el => el.spec.suspend === true));
} else {
return l.filter(el => el.spec.suspend !== true);
setCronWorkflows(list.filter(el => el.spec.suspend !== true));
}
} else {
setCronWorkflows(list);
}
return l;
})
.then(setCronWorkflows)
.then(() => setError(null))
.catch(setError);
setError(null);
} catch (newError) {
setError(newError);
}
})();
}, [namespace, labels, states]);

useCollectEvent('openedCronWorkflowList');
Expand Down Expand Up @@ -176,4 +178,4 @@ export const CronWorkflowList = ({match, location, history}: RouteComponentProps
</SlidingPanel>
</Page>
);
};
}
28 changes: 28 additions & 0 deletions ui/src/app/reports/components/reports-filters.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
@import 'node_modules/argo-ui/src/styles/config';

.wf-filters-container {
overflow: visible;
position: relative;
border-radius: 5px;
box-shadow: 1px 1px 3px #8fa4b1;
padding: 0 1em 0.75em 1em;
margin: 12px 0;
background-color: white;
}

.wf-filters-container p {
margin: 0;
margin-top: 1em;
color: #6d7f8b;
text-transform: uppercase;
}

.wf-filters-container__title {
position: relative;
width: 100%;
max-width: 100%;
padding: 8px 0;
font-size: 15px;
background-color: transparent;
border: 0;
}
95 changes: 95 additions & 0 deletions ui/src/app/reports/components/reports-filters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
import * as React from 'react';
import {NODE_PHASE} from '../../../models';
import {DataLoaderDropdown} from '../../shared/components/data-loader-dropdown';
import {NamespaceFilter} from '../../shared/components/namespace-filter';
import {TagsInput} from '../../shared/components/tags-input/tags-input';
import {services} from '../../shared/services';

require('./reports-filters.scss');

const labelKeyPhase = 'workflows.argoproj.io/phase';
const labelKeyWorkflowTemplate = 'workflows.argoproj.io/workflow-template';
const labelKeyCronWorkflow = 'workflows.argoproj.io/cron-workflow';

interface ReportFiltersProps {
namespace: string;
labels: string[];
onChange: (newNamespace: string, newLabels: string[]) => void;
}

export function ReportFilters({namespace, labels, onChange}: ReportFiltersProps) {
function getLabel(name: string) {
return (labels.find(label => label.startsWith(name)) || '').replace(name + '=', '');
}

function setLabel(name: string, value: string) {
onChange(namespace, labels.filter(label => !label.startsWith(name)).concat(name + '=' + value));
}

function getPhase() {
return getLabel(labelKeyPhase);
}

function setPhase(value: string) {
setLabel(labelKeyPhase, value);
}

function setWorkflowTemplate(value: string) {
setLabel(labelKeyWorkflowTemplate, value);
}

function setCronWorkflow(value: string) {
setLabel(labelKeyCronWorkflow, value);
}
Comment on lines +21 to +43
Copy link
Contributor Author

Choose a reason for hiding this comment

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

potential useCallback optimizations


return (
<div className='wf-filters-container'>
<div className='row'>
<div className=' columns small-12 xlarge-12'>
<p className='wf-filters-container__title'>Namespace</p>
<NamespaceFilter
value={namespace}
onChange={newNamespace => {
onChange(newNamespace, labels);
}}
/>
</div>
<div className=' columns small-12 xlarge-12'>
<p className='wf-filters-container__title'>Labels</p>
<TagsInput placeholder='Labels' tags={labels} onChange={newLabels => onChange(namespace, newLabels)} />
agilgur5 marked this conversation as resolved.
Show resolved Hide resolved
</div>
<div className=' columns small-12 xlarge-12'>
<p className='wf-filters-container__title'>Workflow Template</p>
<DataLoaderDropdown
load={async () => {
const list = await services.workflowTemplate.list(namespace, []);
return (list.items || []).map(x => x.metadata.name);
}}
onChange={value => setWorkflowTemplate(value)}
/>
</div>
<div className=' columns small-12 xlarge-12'>
<p className='wf-filters-container__title'>Cron Workflow</p>
<DataLoaderDropdown
load={async () => {
const list = await services.cronWorkflows.list(namespace);
return list.map(x => x.metadata.name);
}}
onChange={value => setCronWorkflow(value)}
/>
</div>
<div className=' columns small-12 xlarge-12'>
<p className='wf-filters-container__title'>Phase</p>
{[NODE_PHASE.SUCCEEDED, NODE_PHASE.ERROR, NODE_PHASE.FAILED].map(phase => (
<div key={phase}>
<label style={{marginRight: 10}}>
<input type='radio' checked={phase === getPhase()} onChange={() => setPhase(phase)} style={{marginRight: 5}} />
{phase}
</label>
</div>
))}
</div>
</div>
</div>
);
}
Loading