From 00e8b6621a7ddf13222144d4acf80421204a23cc Mon Sep 17 00:00:00 2001 From: George Goldberg Date: Tue, 1 Aug 2017 13:11:29 +0100 Subject: PLT-6595 (Client): Elasticsearch indexing system console UI (#6991) * PLT-6595: System Console for Elasticsearch Job Management. * Fixing UI issues * Fixing colors * ESLint Fixes. * Update test snapshots. * Fixing cancel button * Fix review comments. * Config capitalisation. * Review fixes. --- webapp/actions/admin_actions.jsx | 13 + webapp/actions/job_actions.jsx | 34 ++ .../admin_console/elasticsearch_settings.jsx | 63 +++- .../admin_console/elasticsearch_status/index.js | 28 ++ .../admin_console/elasticsearch_status/status.jsx | 361 +++++++++++++++++++++ .../request_button/request_button.jsx | 34 +- webapp/i18n/en.json | 29 +- webapp/sass/routes/_admin-console.scss | 20 +- webapp/sass/utils/_modifiers.scss | 33 ++ webapp/sass/utils/_module.scss | 1 + .../__snapshots__/request_button.test.jsx.snap | 10 +- webapp/utils/constants.jsx | 14 + 12 files changed, 622 insertions(+), 18 deletions(-) create mode 100644 webapp/actions/job_actions.jsx create mode 100644 webapp/components/admin_console/elasticsearch_status/index.js create mode 100644 webapp/components/admin_console/elasticsearch_status/status.jsx create mode 100644 webapp/sass/utils/_modifiers.scss (limited to 'webapp') diff --git a/webapp/actions/admin_actions.jsx b/webapp/actions/admin_actions.jsx index ac02ac058..85184a23a 100644 --- a/webapp/actions/admin_actions.jsx +++ b/webapp/actions/admin_actions.jsx @@ -396,3 +396,16 @@ export function elasticsearchTest(config, success, error) { } ); } + +export function elasticsearchPurgeIndexes(success, error) { + AdminActions.purgeElasticsearchIndexes()(dispatch, getState).then( + (data) => { + if (data && success) { + success(data); + } else if (data == null && error) { + const serverError = getState().requests.admin.purgeElasticsearchIndexes.error; + error({id: serverError.server_error_id, ...serverError}); + } + } + ); +} diff --git a/webapp/actions/job_actions.jsx b/webapp/actions/job_actions.jsx new file mode 100644 index 000000000..75d70faec --- /dev/null +++ b/webapp/actions/job_actions.jsx @@ -0,0 +1,34 @@ +// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import * as JobsActions from 'mattermost-redux/actions/jobs'; + +import store from 'stores/redux_store.jsx'; +const dispatch = store.dispatch; +const getState = store.getState; + +export function createJob(job, success, error) { + JobsActions.createJob(job)(dispatch, getState).then( + (data) => { + if (data && success) { + success(data); + } else if (data == null && error) { + const serverError = getState().requests.jobs.createJob.error; + error({id: serverError.server_error_id, ...serverError}); + } + } + ); +} + +export function cancelJob(jobId, success, error) { + JobsActions.cancelJob(jobId)(dispatch, getState).then( + (data) => { + if (data && success) { + success(data); + } else if (data == null && error) { + const serverError = getState().requests.jobs.cancelJob.error; + error({id: serverError.server_error_id, ...serverError}); + } + } + ); +} diff --git a/webapp/components/admin_console/elasticsearch_settings.jsx b/webapp/components/admin_console/elasticsearch_settings.jsx index 43a0baf37..b245ad0dc 100644 --- a/webapp/components/admin_console/elasticsearch_settings.jsx +++ b/webapp/components/admin_console/elasticsearch_settings.jsx @@ -6,12 +6,13 @@ import React from 'react'; import * as Utils from 'utils/utils.jsx'; import AdminSettings from './admin_settings.jsx'; -import {elasticsearchTest} from 'actions/admin_actions.jsx'; +import {elasticsearchTest, elasticsearchPurgeIndexes} from 'actions/admin_actions.jsx'; import BooleanSetting from './boolean_setting.jsx'; import {FormattedMessage} from 'react-intl'; import SettingsGroup from './settings_group.jsx'; import TextSetting from './text_setting.jsx'; import RequestButton from './request_button/request_button.jsx'; +import ElasticsearchStatus from './elasticsearch_status'; export default class ElasticsearchSettings extends AdminSettings { constructor(props) { @@ -21,6 +22,7 @@ export default class ElasticsearchSettings extends AdminSettings { this.doTestConfig = this.doTestConfig.bind(this); this.handleChange = this.handleChange.bind(this); + this.handleSaved = this.handleSaved.bind(this); this.renderSettings = this.renderSettings.bind(this); } @@ -45,7 +47,8 @@ export default class ElasticsearchSettings extends AdminSettings { enableIndexing: config.ElasticsearchSettings.EnableIndexing, enableSearching: config.ElasticsearchSettings.EnableSearching, configTested: true, - canSave: true + canSave: true, + canPurgeAndIndex: config.ElasticsearchSettings.EnableIndexing }; } @@ -70,9 +73,21 @@ export default class ElasticsearchSettings extends AdminSettings { }); } + if (id !== 'enableSearching') { + this.setState({ + canPurgeAndIndex: false + }); + } + super.handleChange(id, value); } + handleSaved() { + this.setState({ + canPurgeAndIndex: this.state.enableIndexing + }); + } + canSave() { return this.state.canSave; } @@ -89,6 +104,7 @@ export default class ElasticsearchSettings extends AdminSettings { canSave: true }); success(); + this.doSubmit(); }, (err) => { this.setState({ @@ -135,7 +151,7 @@ export default class ElasticsearchSettings extends AdminSettings { values={{ documentationLink: ( @@ -167,7 +183,7 @@ export default class ElasticsearchSettings extends AdminSettings { values={{ documentationLink: ( @@ -245,7 +261,7 @@ export default class ElasticsearchSettings extends AdminSettings { helpText={ } buttonText={ @@ -254,8 +270,45 @@ export default class ElasticsearchSettings extends AdminSettings { defaultMessage='Test Connection' /> } + successMessage={{ + id: 'admin.elasticsearch.testConfigSuccess', + defaultMessage: 'Test successful. Configuration saved.' + }} disabled={!this.state.enableIndexing} /> + + + } + buttonText={ + + } + successMessage={{ + id: 'admin.elasticsearch.purgeIndexesButton.success', + defaultMessage: 'Indexes purged successfully.' + }} + errorMessage={{ + id: 'admin.elasticsearch.purgeIndexesButton.error', + defaultMessage: 'Failed to purge indexes: {error}' + }} + disabled={!this.state.canPurgeAndIndex} + label={( + + )} + /> this.setState({loading: false}) + ); + } + + componentWillUnmount() { + if (this.interval) { + clearInterval(this.interval); + } + } + + reload = () => { + this.props.actions.getJobsByType(JobTypes.ELASTICSEARCH_POST_INDEXING).then( + () => { + this.setState({ + loading: false, + cancelInProgress: false + }); + } + ); + }; + + createIndexJob = (success, error) => { + const job = { + type: JobTypes.ELASTICSEARCH_POST_INDEXING + }; + + createJob( + job, + () => { + this.reload(); + success(); + }, + error + ); + }; + + cancelIndexJob = (e) => { + e.preventDefault(); + + const chosenJob = this.getChosenJob(); + if (!chosenJob) { + return; + } + + this.setState({ + cancelInProgress: true + }); + + cancelJob( + chosenJob.id, + () => { + this.reload(); + }, + () => { + this.reload(); + } + ); + }; + + getChosenJob = () => { + let chosenJob = null; + + if (this.props.jobs.length > 0) { + for (let i = 0; i < this.props.jobs.length; i++) { + const job = this.props.jobs[i]; + if (job.status === JobStatuses.CANCEL_REQUESTED || job.status === JobStatuses.IN_PROGRESS) { + chosenJob = job; + } else { + break; + } + } + + if (!chosenJob) { + for (let i = 0; i < this.props.jobs.length; i++) { + const job = this.props.jobs[i]; + if (job.status !== JobStatuses.PENDING && chosenJob) { + continue; + } else { + chosenJob = job; + break; + } + } + } + } + + return chosenJob; + }; + + render() { + const chosenJob = this.getChosenJob(); + + let indexButtonDisabled = !this.props.isConfigured; + let buttonText = ( + + ); + let cancelButton = null; + let indexButtonHelp = ( + + ); + + if (this.state.loading) { + indexButtonDisabled = true; + } else if (chosenJob) { + if (chosenJob.status === JobStatuses.PENDING || chosenJob.status === JobStatuses.IN_PROGRESS || chosenJob.status === JobStatuses.CANCEL_REQUESTED) { + indexButtonDisabled = true; + buttonText = ( + + + + + ); + } + + if (chosenJob.status === JobStatuses.PENDING || chosenJob.status === JobStatuses.IN_PROGRESS || chosenJob.status === JobStatuses.CANCEL_REQUESTED) { + indexButtonHelp = ( + + ); + } + + if (!this.state.cancelInProgress && (chosenJob.status === JobStatuses.PENDING || chosenJob.status === JobStatuses.IN_PROGRESS)) { + cancelButton = ( + + + + ); + } + } + + const indexButton = ( + + )} + /> + ); + + let status = null; + let statusHelp = null; + let statusClass = null; + if (!this.props.isConfigured) { + status = ( + + ); + } else if (this.state.loading) { + status = ( + + ); + statusClass = 'status-icon-unknown'; + } else if (chosenJob) { + if (chosenJob.status === JobStatuses.PENDING) { + status = ( + + ); + statusHelp = ( + + ); + statusClass = 'status-icon-warning'; + } else if (chosenJob.status === JobStatuses.IN_PROGRESS) { + status = ( + + ); + statusHelp = ( + + ); + statusClass = 'status-icon-warning'; + } else if (chosenJob.status === JobStatuses.SUCCESS) { + status = ( + + ); + statusHelp = ( + + ); + statusClass = 'status-icon-success'; + } else if (chosenJob.status === JobStatuses.ERROR) { + status = ( + + ); + statusHelp = ( + + ); + statusClass = 'status-icon-error'; + } else if (chosenJob.status === JobStatuses.CANCEL_REQUESTED) { + status = ( + + ); + statusClass = 'status-icon-warning'; + } else if (chosenJob.status === JobStatuses.CANCELED) { + status = ( + + ); + statusClass = 'status-icon-error'; + } + } else { + status = ( + + ); + statusClass = 'status-icon-unknown'; + } + + if (statusHelp !== null) { + statusHelp = ( +
+
+ {statusHelp} +
+
+ ); + } + + statusClass = 'fa fa-circle margin--right ' + statusClass; + + return ( +
+ {indexButton} +
+
+
+ + + {status} +
+
+ {statusHelp} +
+
+ ); + } +} diff --git a/webapp/components/admin_console/request_button/request_button.jsx b/webapp/components/admin_console/request_button/request_button.jsx index 4aad287d2..e78d0443d 100644 --- a/webapp/components/admin_console/request_button/request_button.jsx +++ b/webapp/components/admin_console/request_button/request_button.jsx @@ -35,6 +35,13 @@ export default class RequestButton extends React.Component { */ buttonText: PropTypes.element.isRequired, + /** + * The element to display as the field label. + * + * Typically, this will be a + */ + label: PropTypes.element, + /** * True if the button form control should be disabled, otherwise false. */ @@ -100,7 +107,12 @@ export default class RequestButton extends React.Component { * the `message` and `detailed_error` properties of the error returned from the server, * otherwise false to include only the `message` property. */ - includeDetailedError: PropTypes.bool + includeDetailedError: PropTypes.bool, + + /** + * An element to display adjacent to the request button. + */ + alternativeActionElement: PropTypes.element } static defaultProps = { @@ -211,9 +223,24 @@ export default class RequestButton extends React.Component { contents = this.props.buttonText; } + let widgetClassNames = 'col-sm-8'; + let label = null; + if (this.props.label) { + label = ( + + ); + } else { + widgetClassNames = 'col-sm-offset-4 ' + widgetClassNames; + } + return ( -
-
+
+ {label} +
+ {this.props.alternativeActionElement} {message}
diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json index 6414d1881..e2fdde1b0 100755 --- a/webapp/i18n/en.json +++ b/webapp/i18n/en.json @@ -233,6 +233,7 @@ "admin.customization.support": "Legal and Support", "admin.database.title": "Database Settings", "admin.developer.title": "Developer Settings", + "admin.elasticsearchStatus.bulkIndexLabel": "Bulk Indexing:", "admin.elasticsearch.title": "Elasticsearch Settings", "admin.elasticsearch.noteDescription": "Changing properties in this section will require a server restart before taking effect.", "admin.elasticsearch.enableIndexingTitle": "Enable Elasticsearch Indexing:", @@ -252,8 +253,34 @@ "admin.elasticsearch.connectionUrlExample": "E.g.: \"https://elasticsearch.example.org:9200\"", "admin.elasticsearch.usernameExample": "E.g.: \"elastic\"", "admin.elasticsearch.password": "E.g.: \"yourpassword\"", - "admin.elasticsearch.testHelpText": "Tests if the Mattermost server can connect to the Elasticsearch server specified. Testing the connection does not save the configuration. See log file for more detailed error messages.", + "admin.elasticsearch.testHelpText": "Tests if the Mattermost server can connect to the Elasticsearch server specified. Testing the connection only saves the configuration if the test is successful. See log file for more detailed error messages.", + "admin.elasticsearch.testConfigSuccess": "Test successful. Configuration saved.", "admin.elasticsearch.elasticsearch_test_button": "Test Connection", + "admin.elasticsearch.indexButton.ready": "Build Index", + "admin.elasticsearch.indexHelpText.buildIndex": "All posts in the database will be indexed from oldest to newest. Elasticsearch is available during indexing but search results may be incomplete until the indexing job is complete.", + "admin.elasticsearch.indexButton.inProgress": "Indexing in progress", + "admin.elasticsearch.indexHelpText.cancelIndexing": "Cancelling stops the indexing job and removes it from the queue. Posts that have already been indexed will not be deleted.", + "admin.elasticsearch.bulkIndexButton.error": "Failed to schedule Bulk Index Job: {error}", + "admin.elasticsearchStatus.statusLoading": "Loading...", + "admin.elasticsearchStatus.statusPending": "Job pending.", + "admin.elasticsearchStatus.statusPending.help": "Elasticsearch index job is queued on the job server. If Elasticsearch is enabled, search results may be incomplete until the job is finished.", + "admin.elasticsearchStatus.statusInProgress": "Job in progress. {percent}% complete.", + "admin.elasticsearchStatus.statusInProgress.help": "Indexing is in progress on the job server. If Elasticsearch is enabled, search results may be incomplete until the job is finished.", + "admin.elasticsearchStatus.statusSuccess": "Indexing complete.", + "admin.elasticsearchStatus.statusSuccess.help": "Indexing is complete and new posts are being automatically indexed.", + "admin.elasticsearchStatus.statusError": "Indexing error.", + "admin.elasticsearchStatus.statusError.help": "Mattermost encountered an error building the Elasticsearch index: {error}", + "admin.elasticsearchStatus.statusRequestCancel": "Canceling Job...", + "admin.elasticsearchStatus.statusCancelled": "Indexing job cancelled.", + "admin.elasticsearchStatus.statusNoJobs": "No indexing jobs queued.", + "admin.elasticsearchStatus.status": "Status: ", + "admin.elasticsearchStatus.cancelButton": "Cancel", + "admin.elasticsearchStatus.statusIndexingDisabled": "Indexing disabled.", + "admin.elasticsearch.purgeIndexesHelpText": "Purging will entirely remove the index on the Elasticsearch server. Search results may be incomplete until a bulk index of the existing post database is rebuilt.", + "admin.elasticsearch.purgeIndexesButton": "Purge Indexes", + "admin.elasticsearch.purgeIndexesButton.success": "Indexes purged successfully.", + "admin.elasticsearch.purgeIndexesButton.error": "Failed to purge indexes: {error}", + "admin.elasticsearch.purgeIndexesButton.label": "Purge Indexes:", "admin.email.agreeHPNS": " I understand and accept the Mattermost Hosted Push Notification Service Terms of Service and Privacy Policy.", "admin.email.allowEmailSignInDescription": "When true, Mattermost allows users to sign in using their email and password.", "admin.email.allowEmailSignInTitle": "Enable sign-in with email: ", diff --git a/webapp/sass/routes/_admin-console.scss b/webapp/sass/routes/_admin-console.scss index 9e8c74484..4fe45d9b8 100644 --- a/webapp/sass/routes/_admin-console.scss +++ b/webapp/sass/routes/_admin-console.scss @@ -289,6 +289,22 @@ .admin-console-header { border-bottom: 1px solid alpha-color($black, .1); } + + .status-icon-unknown { + color: gray; + } + + .status-icon-success { + color: #69c169; + } + + .status-icon-warning { + color: #eac262; + } + + .status-icon-error { + color: #ea6262; + } } .brand-img { @@ -476,10 +492,6 @@ margin-top: -15px; } -.reload-config { - margin-bottom: 50px !important; -} - .recycle-db { margin-top: 50px !important; } diff --git a/webapp/sass/utils/_modifiers.scss b/webapp/sass/utils/_modifiers.scss new file mode 100644 index 000000000..aa89fc107 --- /dev/null +++ b/webapp/sass/utils/_modifiers.scss @@ -0,0 +1,33 @@ +@charset 'UTF-8'; + +.margin--right { + margin-right: 5px; + + &.x2 { + margin-right: 10px; + } +} + +.margin--left { + margin-left: 5px; + + &.x2 { + margin-left: 10px; + } +} + +.padding--right { + padding-right: 5px; + + &.x2 { + padding-right: 10px; + } +} + +.padding--left { + padding-left: 5px; + + &.x2 { + padding-left: 10px; + } +} diff --git a/webapp/sass/utils/_module.scss b/webapp/sass/utils/_module.scss index 5dddcaef7..5cf2a85be 100644 --- a/webapp/sass/utils/_module.scss +++ b/webapp/sass/utils/_module.scss @@ -3,3 +3,4 @@ @import 'functions'; @import 'mixins'; @import 'animations'; +@import 'modifiers'; diff --git a/webapp/tests/components/admin_console/request_button/__snapshots__/request_button.test.jsx.snap b/webapp/tests/components/admin_console/request_button/__snapshots__/request_button.test.jsx.snap index 108384950..83e372564 100644 --- a/webapp/tests/components/admin_console/request_button/__snapshots__/request_button.test.jsx.snap +++ b/webapp/tests/components/admin_console/request_button/__snapshots__/request_button.test.jsx.snap @@ -2,7 +2,7 @@ exports[`components/admin_console/request_button/request_button.jsx should match snapshot 1`] = `