Skip to content

Commit

Permalink
adding export job tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@jgowdyelastic
jgowdyelastic committed Sep 2, 2021
1 parent 6d3ea41 commit 9ac5c09
Show file tree
Hide file tree
Showing 4 changed files with 501 additions and 58 deletions.
104 changes: 64 additions & 40 deletions ...ublic/application/components/import_export_jobs/export_jobs_flyout/export_jobs_flyout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ export const ExportJobsFlyout: FC<Props> = ({ isDisabled, currentTab }) => {
const [exporting, setExporting] = useState(false);
const [selectedJobType, setSelectedJobType] = useState<JobType>(currentTab);
const [switchTabConfirmVisible, setSwitchTabConfirmVisible] = useState(false);
const [switchTabNextTab, setSwitchTabNextTab] = useState<JobType>(currentTab);
const { displayErrorToast, displaySuccessToast } = useMemo(
() => toastNotificationServiceProvider(toasts),
[toasts]
Expand Down Expand Up @@ -170,26 +171,33 @@ export const ExportJobsFlyout: FC<Props> = ({ isDisabled, currentTab }) => {
}
}

const attemptTabSwitch = useCallback(() => {
// if the user has already selected some jobs, open a confirm modal
// rather than changing tabs
if (selectedJobIds.length > 0) {
setSwitchTabConfirmVisible(true);
return;
}
const attemptTabSwitch = useCallback(
(jobType: JobType) => {
if (jobType === selectedJobType) {
return;
}
// if the user has already selected some jobs, open a confirm modal
// rather than changing tabs
if (selectedJobIds.length > 0) {
setSwitchTabNextTab(jobType);
setSwitchTabConfirmVisible(true);
return;
}

switchTab();
}, [selectedJobIds]);
switchTab(jobType);
},
[selectedJobIds]
);

useEffect(() => {
setSelectedJobDependencies(
jobDependencies.filter(({ jobId }) => selectedJobIds.includes(jobId))
);
}, [selectedJobIds]);

function switchTab() {
const jobType =
selectedJobType === 'anomaly-detector' ? 'data-frame-analytics' : 'anomaly-detector';
function switchTab(jobType: JobType) {
// const jobType =
// selectedJobType === 'anomaly-detector' ? 'data-frame-analytics' : 'anomaly-detector';

setSwitchTabConfirmVisible(false);
setSelectedJobIds([]);
Expand Down Expand Up @@ -232,8 +240,9 @@ export const ExportJobsFlyout: FC<Props> = ({ isDisabled, currentTab }) => {
<EuiTabs size="s">
<EuiTab
isSelected={selectedJobType === 'anomaly-detector'}
onClick={attemptTabSwitch}
onClick={() => attemptTabSwitch('anomaly-detector')}
disabled={exporting}
data-test-subj="mlJobMgmtExportJobsADTab"
>
<FormattedMessage
id="xpack.ml.importExport.exportFlyout.adTab"
Expand All @@ -242,8 +251,9 @@ export const ExportJobsFlyout: FC<Props> = ({ isDisabled, currentTab }) => {
</EuiTab>
<EuiTab
isSelected={selectedJobType === 'data-frame-analytics'}
onClick={attemptTabSwitch}
onClick={() => attemptTabSwitch('data-frame-analytics')}
disabled={exporting}
data-test-subj="mlJobMgmtExportJobsDFATab"
>
<FormattedMessage
id="xpack.ml.importExport.exportFlyout.dfaTab"
Expand All @@ -259,7 +269,12 @@ export const ExportJobsFlyout: FC<Props> = ({ isDisabled, currentTab }) => {
<LoadingSpinner />
) : (
<>
<EuiButtonEmpty size="xs" onClick={onSelectAll} isDisabled={isDisabled}>
<EuiButtonEmpty
size="xs"
onClick={onSelectAll}
isDisabled={isDisabled}
data-test-subj="mlJobMgmtExportJobsSelectAllButton"
>
<FormattedMessage
id="xpack.ml.importExport.exportFlyout.adSelectAllButton"
defaultMessage="Select all"
Expand All @@ -268,17 +283,19 @@ export const ExportJobsFlyout: FC<Props> = ({ isDisabled, currentTab }) => {

<EuiSpacer size="xs" />

{adJobIds.map((id) => (
<div key={id}>
<EuiCheckbox
id={id}
label={id}
checked={selectedJobIds.includes(id)}
onChange={(e) => toggleSelectedJob(e.target.checked, id)}
/>
<EuiSpacer size="s" />
</div>
))}
<div data-test-subj="mlJobMgmtExportJobsADJobList">
{adJobIds.map((id) => (
<div key={id}>
<EuiCheckbox
id={id}
label={id}
checked={selectedJobIds.includes(id)}
onChange={(e) => toggleSelectedJob(e.target.checked, id)}
/>
<EuiSpacer size="s" />
</div>
))}
</div>
</>
)}
</>
Expand All @@ -289,26 +306,32 @@ export const ExportJobsFlyout: FC<Props> = ({ isDisabled, currentTab }) => {
<LoadingSpinner />
) : (
<>
<EuiButtonEmpty size="xs" onClick={onSelectAll} isDisabled={isDisabled}>
<EuiButtonEmpty
size="xs"
onClick={onSelectAll}
isDisabled={isDisabled}
data-test-subj="mlJobMgmtExportJobsSelectAllButton"
>
<FormattedMessage
id="xpack.ml.importExport.exportFlyout.dfaSelectAllButton"
defaultMessage="Select all"
/>
</EuiButtonEmpty>

<EuiSpacer size="xs" />

{dfaJobIds.map((id) => (
<div key={id}>
<EuiCheckbox
id={id}
label={id}
checked={selectedJobIds.includes(id)}
onChange={(e) => toggleSelectedJob(e.target.checked, id)}
/>
<EuiSpacer size="s" />
</div>
))}
<div data-test-subj="mlJobMgmtExportJobsDFAJobList">
{dfaJobIds.map((id) => (
<div key={id}>
<EuiCheckbox
id={id}
label={id}
checked={selectedJobIds.includes(id)}
onChange={(e) => toggleSelectedJob(e.target.checked, id)}
/>
<EuiSpacer size="s" />
</div>
))}
</div>
</>
)}
</>
Expand All @@ -334,6 +357,7 @@ export const ExportJobsFlyout: FC<Props> = ({ isDisabled, currentTab }) => {
disabled={selectedJobIds.length === 0 || exporting === true}
onClick={onExport}
fill
data-test-subj="mlJobMgmtExportExportButton"
>
<FormattedMessage
id="xpack.ml.importExport.exportFlyout.exportButton"
Expand All @@ -348,7 +372,7 @@ export const ExportJobsFlyout: FC<Props> = ({ isDisabled, currentTab }) => {
{switchTabConfirmVisible === true ? (
<SwitchTabsConfirm
onCancel={setSwitchTabConfirmVisible.bind(null, false)}
onConfirm={switchTab}
onConfirm={() => switchTab(switchTabNextTab)}
/>
) : null}
</>
Expand Down
Loading

0 comments on commit 9ac5c09

Please sign in to comment.