Skip to content

Commit

Permalink
[ML] move page title, prettier formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
@darnautov
darnautov committed Nov 12, 2019
1 parent c4603cd commit 7bd5ad5
Show file tree
Hide file tree
Showing 2 changed files with 97 additions and 89 deletions.
170 changes: 94 additions & 76 deletions x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/jobs_list_view/jobs_list_view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@

import React, { Component } from 'react';
import { timefilter } from 'ui/timefilter';
import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui';

import { ml } from 'plugins/ml/services/ml_api_service';
import { checkForAutoStartDatafeed, filterJobs, loadFullJob } from '../utils';
Expand All @@ -31,8 +32,7 @@ import {
MINIMUM_REFRESH_INTERVAL_MS,
} from '../../../../../common/constants/jobs_list';


let jobsRefreshInterval = null;
let jobsRefreshInterval = null;
let deletingJobsRefreshTimeout = null;

// 'isManagementTable' bool prop to determine when to configure table for use in Kibana management page
Expand Down Expand Up @@ -67,8 +67,8 @@ export class JobsListView extends Component {
if (this.props.isManagementTable === true) {
this.refreshJobSummaryList(true);
} else {
// The advanced job wizard is still angularjs based and triggers
// broadcast events which it expects the jobs list to be subscribed to.
// The advanced job wizard is still angularjs based and triggers
// broadcast events which it expects the jobs list to be subscribed to.
this.props.angularWrapperScope.$on('jobsUpdated', () => {
this.refreshJobSummaryList(true);
});
Expand Down Expand Up @@ -105,7 +105,7 @@ export class JobsListView extends Component {
// so switch it on and set the interval to 30s
timefilter.setRefreshInterval({
pause: false,
value: DEFAULT_REFRESH_INTERVAL_MS
value: DEFAULT_REFRESH_INTERVAL_MS,
});
}

Expand All @@ -115,7 +115,7 @@ export class JobsListView extends Component {
initAutoRefreshUpdate() {
// update the interval if it changes
this.refreshIntervalSubscription = timefilter.getRefreshIntervalUpdate$().subscribe({
next: () => this.setAutoRefresh()
next: () => this.setAutoRefresh(),
});
}

Expand All @@ -134,7 +134,7 @@ export class JobsListView extends Component {
this.clearRefreshInterval();
if (interval >= MINIMUM_REFRESH_INTERVAL_MS) {
this.blockRefresh = false;
jobsRefreshInterval = setInterval(() => (this.refreshJobSummaryList()), interval);
jobsRefreshInterval = setInterval(() => this.refreshJobSummaryList(), interval);
}
}

Expand All @@ -150,13 +150,12 @@ export class JobsListView extends Component {
}
}

toggleRow = (jobId) => {
toggleRow = jobId => {
if (this.state.itemIdToExpandedRowMap[jobId]) {
const itemIdToExpandedRowMap = { ...this.state.itemIdToExpandedRowMap };
delete itemIdToExpandedRowMap[jobId];
this.setState({ itemIdToExpandedRowMap });
} else {

let itemIdToExpandedRowMap = { ...this.state.itemIdToExpandedRowMap };

if (this.state.fullJobsList[jobId] !== undefined) {
Expand All @@ -182,7 +181,7 @@ export class JobsListView extends Component {

this.setState({ itemIdToExpandedRowMap }, () => {
loadFullJob(jobId)
.then((job) => {
.then(job => {
const fullJobsList = { ...this.state.fullJobsList };
fullJobsList[jobId] = job;
this.setState({ fullJobsList }, () => {
Expand All @@ -204,54 +203,54 @@ export class JobsListView extends Component {
this.setState({ itemIdToExpandedRowMap });
});
})
.catch((error) => {
.catch(error => {
console.error(error);
});
});
}
}
};

addUpdateFunction = (id, f) => {
this.updateFunctions[id] = f;
}
removeUpdateFunction = (id) => {
};
removeUpdateFunction = id => {
delete this.updateFunctions[id];
}
};

setShowEditJobFlyoutFunction = (func) => {
setShowEditJobFlyoutFunction = func => {
this.showEditJobFlyout = func;
}
};
unsetShowEditJobFlyoutFunction = () => {
this.showEditJobFlyout = () => {};
}
};

setShowDeleteJobModalFunction = (func) => {
setShowDeleteJobModalFunction = func => {
this.showDeleteJobModal = func;
}
};
unsetShowDeleteJobModalFunction = () => {
this.showDeleteJobModal = () => {};
}
};

setShowStartDatafeedModalFunction = (func) => {
setShowStartDatafeedModalFunction = func => {
this.showStartDatafeedModal = func;
}
};
unsetShowStartDatafeedModalFunction = () => {
this.showStartDatafeedModal = () => {};
}
};

setShowCreateWatchFlyoutFunction = (func) => {
setShowCreateWatchFlyoutFunction = func => {
this.showCreateWatchFlyout = func;
}
};
unsetShowCreateWatchFlyoutFunction = () => {
this.showCreateWatchFlyout = () => {};
}
};
getShowCreateWatchFlyoutFunction = () => {
return this.showCreateWatchFlyout;
}
};

selectJobChange = (selectedJobs) => {
selectJobChange = selectedJobs => {
this.setState({ selectedJobs });
}
};

refreshSelectedJobs() {
const selectedJobsIds = this.state.selectedJobs.map(j => j.id);
Expand All @@ -266,24 +265,23 @@ export class JobsListView extends Component {
this.setState({ selectedJobs });
}

setFilters = (filterClauses) => {
setFilters = filterClauses => {
const filteredJobsSummaryList = filterJobs(this.state.jobsSummaryList, filterClauses);
this.setState({ filteredJobsSummaryList, filterClauses }, () => {
this.refreshSelectedJobs();
});
}
};

onRefreshClick = () => {
this.setState({ isRefreshing: true });
this.refreshJobSummaryList(true);
}
};
isDoneRefreshing = () => {
this.setState({ isRefreshing: false });
}
};

async refreshJobSummaryList(forceRefresh = false) {
if (forceRefresh === true || this.blockRefresh === false) {

// Set loading to true for jobs_list table for initial job loading
if (this.state.loading === null) {
this.setState({ loading: true });
Expand All @@ -293,24 +291,27 @@ export class JobsListView extends Component {
try {
const jobs = await ml.jobs.jobsSummary(expandedJobsIds);
const fullJobsList = {};
const jobsSummaryList = jobs.map((job) => {
const jobsSummaryList = jobs.map(job => {
if (job.fullJob !== undefined) {
fullJobsList[job.id] = job.fullJob;
delete job.fullJob;
}
job.latestTimestampSortValue = (job.latestTimestampMs || 0);
job.latestTimestampSortValue = job.latestTimestampMs || 0;
return job;
});
const filteredJobsSummaryList = filterJobs(jobsSummaryList, this.state.filterClauses);
this.setState({ jobsSummaryList, filteredJobsSummaryList, fullJobsList, loading: false }, () => {
this.refreshSelectedJobs();
});
this.setState(
{ jobsSummaryList, filteredJobsSummaryList, fullJobsList, loading: false },
() => {
this.refreshSelectedJobs();
}
);

Object.keys(this.updateFunctions).forEach((j) => {
Object.keys(this.updateFunctions).forEach(j => {
this.updateFunctions[j].setState({ job: fullJobsList[j] });
});

jobs.forEach((job) => {
jobs.forEach(job => {
if (job.deleting && this.state.itemIdToExpandedRowMap[job.id]) {
this.toggleRow(job.id);
}
Expand All @@ -333,7 +334,8 @@ export class JobsListView extends Component {
async checkDeletingJobTasks(forceRefresh = false) {
const { jobIds: taskJobIds } = await ml.jobs.deletingJobTasks();

const taskListHasChanged = (isEqual(taskJobIds.sort(), this.state.deletingJobIds.sort()) === false);
const taskListHasChanged =
isEqual(taskJobIds.sort(), this.state.deletingJobIds.sort()) === false;

this.setState({
deletingJobIds: taskJobIds,
Expand All @@ -354,7 +356,13 @@ export class JobsListView extends Component {
}

renderManagementJobsListComponents() {
const { loading, itemIdToExpandedRowMap, filteredJobsSummaryList, fullJobsList, selectedJobs } = this.state;
const {
loading,
itemIdToExpandedRowMap,
filteredJobsSummaryList,
fullJobsList,
selectedJobs,
} = this.state;
return (
<div className="managementJobsList">
<div>
Expand Down Expand Up @@ -433,41 +441,51 @@ export class JobsListView extends Component {
const { isManagementTable } = this.props;

return (
<React.Fragment>
<div className="job-management" data-test-subj="ml-jobs-list">

<NodeAvailableWarning />

<UpgradeWarning />

<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<JobStatsBar
jobsSummaryList={jobsSummaryList}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFlexGroup alignItems="center" gutterSize="s">
<EuiFlexItem grow={false}>
<RefreshJobsListButton
onRefreshClick={this.onRefreshClick}
isRefreshing={isRefreshing}
/>
</EuiFlexItem>
{!isManagementTable &&
<div className="job-management" data-test-subj="ml-jobs-list">
{!isManagementTable && (
<>
<EuiTitle>
<h1>
<FormattedMessage
id="xpack.ml.jobsList.title"
defaultMessage="Anomaly detection jobs"
/>
</h1>
</EuiTitle>
<EuiSpacer size="m" />
</>
)}

<NodeAvailableWarning />

<UpgradeWarning />

<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<JobStatsBar jobsSummaryList={jobsSummaryList} />
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFlexGroup alignItems="center" gutterSize="s">
<EuiFlexItem grow={false}>
<RefreshJobsListButton
onRefreshClick={this.onRefreshClick}
isRefreshing={isRefreshing}
/>
</EuiFlexItem>
{!isManagementTable && (
<EuiFlexItem grow={false}>
<NewJobButton />
</EuiFlexItem>}
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
)}
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>

<EuiSpacer size="s" />
<EuiSpacer size="s" />

{ !isManagementTable && this.renderJobsListComponents() }
{ isManagementTable && this.renderManagementJobsListComponents() }
</ div>
</React.Fragment>
{!isManagementTable && this.renderJobsListComponents()}
{isManagementTable && this.renderManagementJobsListComponents()}
</div>
);
}
}
16 changes: 3 additions & 13 deletions x-pack/legacy/plugins/ml/public/jobs/jobs_list/jobs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,25 +4,15 @@
* you may not use this file except in compliance with the Elastic License.
*/

import React, { Fragment } from 'react';
import { EuiTitle } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import React from 'react';

import { NavigationMenu } from '../../components/navigation_menu';

import { JobsListView } from './components/jobs_list_view';

export const JobsPage = (props) => (
<Fragment>
<>
<NavigationMenu tabId="jobs" />
<EuiTitle style={{ padding: '16px 16px 0 16px' }}>
<h1>
<FormattedMessage
id="xpack.ml.jobsList.title"
defaultMessage="Anomaly detection jobs"
/>
</h1>
</EuiTitle>
<JobsListView {...props} />
</Fragment>
</>
);

0 comments on commit 7bd5ad5

Please sign in to comment.