Commit 5e0aa96b authored by Joram Wilander's avatar Joram Wilander Committed by Harrison Healey

PLT-6657 Move system console to use v4 endpoints and redux (#6572)

* Move system console to use v4 endpoints and redux

* Rename logs dir to get past gitignore

* Fix test email

* Update brand unit test

* Updates per feedback
parent 75984393
This diff is collapsed.
...@@ -6,46 +6,37 @@ import PropTypes from 'prop-types'; ...@@ -6,46 +6,37 @@ import PropTypes from 'prop-types';
import 'bootstrap'; import 'bootstrap';
import AnnouncementBar from 'components/announcement_bar'; import AnnouncementBar from 'components/announcement_bar';
import AdminStore from 'stores/admin_store.jsx';
import * as AsyncClient from 'utils/async_client.jsx';
import AdminSidebar from './admin_sidebar.jsx'; import AdminSidebar from './admin_sidebar.jsx';
export default class AdminConsole extends React.Component { export default class AdminConsole extends React.Component {
static get propTypes() { static propTypes = {
return {
children: PropTypes.node.isRequired
};
}
constructor(props) { /*
super(props); * Children components to render
*/
children: PropTypes.node.isRequired,
this.handleConfigChange = this.handleConfigChange.bind(this); /*
* Object representing the config file
this.state = { */
config: AdminStore.getConfig() config: PropTypes.object.isRequired,
};
}
componentWillMount() { actions: PropTypes.shape({
AdminStore.addConfigChangeListener(this.handleConfigChange);
AsyncClient.getConfig();
}
componentWillUnmount() { /*
AdminStore.removeConfigChangeListener(this.handleConfigChange); * Function to get the config file
*/
getConfig: PropTypes.func.isRequired
}).isRequired
} }
handleConfigChange() { componentWillMount() {
this.setState({ this.props.actions.getConfig();
config: AdminStore.getConfig()
});
} }
render() { render() {
const config = this.state.config; const config = this.props.config;
if (!config) { if (Object.keys(config).length === 0) {
return <div/>; return <div/>;
} }
if (config && Object.keys(config).length === 0 && config.constructor === 'Object') { if (config && Object.keys(config).length === 0 && config.constructor === 'Object') {
...@@ -59,7 +50,7 @@ export default class AdminConsole extends React.Component { ...@@ -59,7 +50,7 @@ export default class AdminConsole extends React.Component {
// not every page in the system console will need the config, but the vast majority will // not every page in the system console will need the config, but the vast majority will
const children = React.cloneElement(this.props.children, { const children = React.cloneElement(this.props.children, {
config: this.state.config config
}); });
return ( return (
<div className='admin-console__wrapper'> <div className='admin-console__wrapper'>
......
import PropTypes from 'prop-types';
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information. // See License.txt for license information.
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types';
import * as AsyncClient from 'utils/async_client.jsx';
import FormError from 'components/form_error.jsx'; import FormError from 'components/form_error.jsx';
import SaveButton from 'components/admin_console/save_button.jsx'; import SaveButton from 'components/admin_console/save_button.jsx';
...@@ -13,10 +10,12 @@ import SaveButton from 'components/admin_console/save_button.jsx'; ...@@ -13,10 +10,12 @@ import SaveButton from 'components/admin_console/save_button.jsx';
import {saveConfig} from 'actions/admin_actions.jsx'; import {saveConfig} from 'actions/admin_actions.jsx';
export default class AdminSettings extends React.Component { export default class AdminSettings extends React.Component {
static get propTypes() { static propTypes = {
return {
config: PropTypes.object /*
}; * Object representing the config file
*/
config: PropTypes.object
} }
constructor(props) { constructor(props) {
...@@ -58,10 +57,8 @@ export default class AdminSettings extends React.Component { ...@@ -58,10 +57,8 @@ export default class AdminSettings extends React.Component {
saveConfig( saveConfig(
config, config,
() => { (savedConfig) => {
AsyncClient.getConfig((savedConfig) => { this.setState(this.getStateFromConfig(savedConfig));
this.setState(this.getStateFromConfig(savedConfig));
});
this.setState({ this.setState({
saveNeeded: false, saveNeeded: false,
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
import $ from 'jquery'; import $ from 'jquery';
import AdminNavbarDropdown from './admin_navbar_dropdown.jsx'; import AdminNavbarDropdown from './admin_navbar_dropdown.jsx';
import UserStore from 'stores/user_store.jsx'; import UserStore from 'stores/user_store.jsx';
import Client from 'client/web_client.jsx'; import {Client4} from 'mattermost-redux/client';
import {FormattedMessage} from 'react-intl'; import {FormattedMessage} from 'react-intl';
...@@ -14,12 +14,10 @@ export default class SidebarHeader extends React.Component { ...@@ -14,12 +14,10 @@ export default class SidebarHeader extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.toggleDropdown = this.toggleDropdown.bind(this);
this.state = {}; this.state = {};
} }
toggleDropdown(e) { toggleDropdown = (e) => {
e.preventDefault(); e.preventDefault();
if (this.refs.dropdown.blockToggle) { if (this.refs.dropdown.blockToggle) {
...@@ -42,7 +40,7 @@ export default class SidebarHeader extends React.Component { ...@@ -42,7 +40,7 @@ export default class SidebarHeader extends React.Component {
profilePicture = ( profilePicture = (
<img <img
className='user__picture' className='user__picture'
src={Client.getUsersRoute() + '/' + me.id + '/image?time=' + me.last_picture_update} src={Client4.getProfilePictureUrl(me.id, me.last_picture_update)}
/> />
); );
} }
......
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved. // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information. // See License.txt for license information.
import LoadingScreen from '../loading_screen.jsx'; import LoadingScreen from 'components/loading_screen.jsx';
import AuditTable from '../audit_table.jsx'; import AuditTable from 'components/audit_table.jsx';
import ComplianceReports from './compliance_reports.jsx'; import ComplianceReports from 'components/admin_console/compliance_reports';
import AdminStore from 'stores/admin_store.jsx'; import React from 'react';
import PropTypes from 'prop-types';
import {FormattedMessage} from 'react-intl';
import * as AsyncClient from 'utils/async_client.jsx'; export default class Audits extends React.PureComponent {
static propTypes = {
import {FormattedMessage} from 'react-intl'; /*
* Array of audits to render
*/
audits: PropTypes.arrayOf(PropTypes.object).isRequired,
import React from 'react'; actions: PropTypes.shape({
/*
* Function to fetch audits
*/
getAudits: PropTypes.func.isRequired
}).isRequired
}
export default class Audits extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.onAuditListenerChange = this.onAuditListenerChange.bind(this);
this.reload = this.reload.bind(this);
this.state = { this.state = {
audits: AdminStore.getAudits() loadingAudits: true
}; };
} }
componentDidMount() { componentDidMount() {
AdminStore.addAuditChangeListener(this.onAuditListenerChange); this.props.actions.getAudits().then(
AsyncClient.getServerAudits(); () => this.setState({loadingAudits: false})
} );
componentWillUnmount() {
AdminStore.removeAuditChangeListener(this.onAuditListenerChange);
}
onAuditListenerChange() {
this.setState({
audits: AdminStore.getAudits()
});
} }
reload() { reload = () => {
AdminStore.saveAudits(null); this.setState({loadingAudits: true});
this.setState({ this.props.actions.getAudits().then(
audits: null () => this.setState({loadingAudits: false})
}); );
AsyncClient.getServerAudits();
} }
render() { render() {
var content = null; let content = null;
if (global.window.mm_license.IsLicensed !== 'true') { if (global.window.mm_license.IsLicensed !== 'true') {
return <div/>; return <div/>;
} }
if (this.state.audits === null) { if (this.state.loadingAudits) {
content = <LoadingScreen/>; content = <LoadingScreen/>;
} else { } else {
content = ( content = (
<div style={{margin: '10px'}}> <div style={{margin: '10px'}}>
<AuditTable <AuditTable
audits={this.state.audits} audits={this.props.audits}
showUserId={true} showUserId={true}
showIp={true} showIp={true}
showSession={true} showSession={true}
......
// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {getAudits} from 'mattermost-redux/actions/admin';
import * as Selectors from 'mattermost-redux/selectors/entities/admin';
import Audits from './audits.jsx';
function mapStateToProps(state, ownProps) {
return {
...ownProps,
audits: Object.values(Selectors.getAudits(state))
};
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators({
getAudits
}, dispatch)
};
}
export default connect(mapStateToProps, mapDispatchToProps)(Audits);
...@@ -4,20 +4,23 @@ ...@@ -4,20 +4,23 @@
import $ from 'jquery'; import $ from 'jquery';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom';
import Client from 'client/web_client.jsx'; import {Client4} from 'mattermost-redux/client';
import * as Utils from 'utils/utils.jsx'; import * as Utils from 'utils/utils.jsx';
import {uploadBrandImage} from 'actions/admin_actions.jsx'; import {uploadBrandImage} from 'actions/admin_actions.jsx';
import FormError from 'components/form_error.jsx'; import FormError from 'components/form_error.jsx';
import {FormattedHTMLMessage, FormattedMessage} from 'react-intl'; import {FormattedHTMLMessage, FormattedMessage} from 'react-intl';
export default class BrandImageSetting extends React.Component { const HTTP_STATUS_OK = 200;
static get propTypes() {
return { export default class BrandImageSetting extends React.PureComponent {
disabled: PropTypes.bool.isRequired static propTypes = {
};
/*
* Set to disable the setting
*/
disabled: PropTypes.bool.isRequired
} }
constructor(props) { constructor(props) {
...@@ -37,9 +40,15 @@ export default class BrandImageSetting extends React.Component { ...@@ -37,9 +40,15 @@ export default class BrandImageSetting extends React.Component {
} }
componentWillMount() { componentWillMount() {
$.get(Client.getAdminRoute() + '/get_brand_image?t=' + this.state.brandImageTimestamp).done(() => { fetch(Client4.getBrandImageUrl(this.state.brandImageTimestamp)).then(
this.setState({brandImageExists: true}); (resp) => {
}); if (resp.status === HTTP_STATUS_OK) {
this.setState({brandImageExists: true});
} else {
this.setState({brandImageExists: false});
}
}
);
} }
componentDidUpdate() { componentDidUpdate() {
...@@ -76,7 +85,7 @@ export default class BrandImageSetting extends React.Component { ...@@ -76,7 +85,7 @@ export default class BrandImageSetting extends React.Component {
return; return;
} }
$(ReactDOM.findDOMNode(this.refs.upload)).button('loading'); $(this.refs.upload).button('loading');
this.setState({ this.setState({
uploading: true, uploading: true,
...@@ -86,7 +95,7 @@ export default class BrandImageSetting extends React.Component { ...@@ -86,7 +95,7 @@ export default class BrandImageSetting extends React.Component {
uploadBrandImage( uploadBrandImage(
this.state.brandImage, this.state.brandImage,
() => { () => {
$(ReactDOM.findDOMNode(this.refs.upload)).button('complete'); $(this.refs.upload).button('complete');
this.setState({ this.setState({
brandImageExists: true, brandImageExists: true,
...@@ -96,7 +105,7 @@ export default class BrandImageSetting extends React.Component { ...@@ -96,7 +105,7 @@ export default class BrandImageSetting extends React.Component {
}); });
}, },
(err) => { (err) => {
$(ReactDOM.findDOMNode(this.refs.upload)).button('reset'); $(this.refs.upload).button('reset');
this.setState({ this.setState({
uploading: false, uploading: false,
...@@ -130,7 +139,7 @@ export default class BrandImageSetting extends React.Component { ...@@ -130,7 +139,7 @@ export default class BrandImageSetting extends React.Component {
img = ( img = (
<img <img
className='brand-img' className='brand-img'
src={Client.getAdminRoute() + '/get_brand_image?t=' + this.state.brandImageTimestamp} src={Client4.getBrandImageUrl(this.state.brandImageTimestamp)}
/> />
); );
} else { } else {
...@@ -180,6 +189,7 @@ export default class BrandImageSetting extends React.Component { ...@@ -180,6 +189,7 @@ export default class BrandImageSetting extends React.Component {
disabled={this.props.disabled || !this.state.brandImage} disabled={this.props.disabled || !this.state.brandImage}
onClick={this.handleImageSubmit} onClick={this.handleImageSubmit}
id='upload-button' id='upload-button'
ref='upload'
data-loading-text={'<span class=\'fa fa-refresh fa-rotate\'></span> ' + Utils.localizeMessage('admin.team.uploading', 'Uploading..')} data-loading-text={'<span class=\'fa fa-refresh fa-rotate\'></span> ' + Utils.localizeMessage('admin.team.uploading', 'Uploading..')}
data-complete-text={'<span class=\'fa fa-check\'></span> ' + Utils.localizeMessage('admin.team.uploaded', 'Uploaded!')} data-complete-text={'<span class=\'fa fa-check\'></span> ' + Utils.localizeMessage('admin.team.uploaded', 'Uploaded!')}
> >
......
...@@ -11,9 +11,10 @@ import {FormattedMessage, FormattedHTMLMessage} from 'react-intl'; ...@@ -11,9 +11,10 @@ import {FormattedMessage, FormattedHTMLMessage} from 'react-intl';
import SettingsGroup from './settings_group.jsx'; import SettingsGroup from './settings_group.jsx';
import ClusterTableContainer from './cluster_table_container.jsx'; import ClusterTableContainer from './cluster_table_container.jsx';
import AdminStore from 'stores/admin_store.jsx';
import * as Utils from 'utils/utils.jsx'; import * as Utils from 'utils/utils.jsx';
import {Client4} from 'mattermost-redux/client';
export default class ClusterSettings extends AdminSettings { export default class ClusterSettings extends AdminSettings {
constructor(props) { constructor(props) {
super(props); super(props);
...@@ -74,7 +75,7 @@ export default class ClusterSettings extends AdminSettings { ...@@ -74,7 +75,7 @@ export default class ClusterSettings extends AdminSettings {
var configLoadedFromCluster = null; var configLoadedFromCluster = null;
if (AdminStore.getClusterId()) { if (Client4.clusterId) {
configLoadedFromCluster = ( configLoadedFromCluster = (
<div <div
style={{marginBottom: '10px'}} style={{marginBottom: '10px'}}
...@@ -85,7 +86,7 @@ export default class ClusterSettings extends AdminSettings { ...@@ -85,7 +86,7 @@ export default class ClusterSettings extends AdminSettings {
id='admin.cluster.loadedFrom' id='admin.cluster.loadedFrom'
defaultMessage='This configuration file was loaded from Node ID {clusterId}. Please see the Troubleshooting Guide in our <a href="http://docs.mattermost.com/deployment/cluster.html" target="_blank">documentation</a> if you are accessing the System Console through a load balancer and experiencing issues.' defaultMessage='This configuration file was loaded from Node ID {clusterId}. Please see the Troubleshooting Guide in our <a href="http://docs.mattermost.com/deployment/cluster.html" target="_blank">documentation</a> if you are accessing the System Console through a load balancer and experiencing issues.'
values={{ values={{
clusterId: AdminStore.getClusterId() clusterId: Client4.clusterId
}} }}
/> />
</div> </div>
......
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved. // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information. // See License.txt for license information.
import $ from 'jquery'; import LoadingScreen from 'components/loading_screen.jsx';
import LoadingScreen from '../loading_screen.jsx';
import * as Utils from '../../utils/utils.jsx';
import AdminStore from '../../stores/admin_store.jsx';
import UserStore from '../../stores/user_store.jsx';
import Client from 'client/web_client.jsx'; import * as Utils from 'utils/utils.jsx';
import * as AsyncClient from '../../utils/async_client.jsx'; import UserStore from 'stores/user_store.jsx';
import {saveComplianceReports} from 'actions/admin_actions.jsx'; import {Client4} from 'mattermost-redux/client';
import React from 'react';
import PropTypes from 'prop-types';
import {FormattedMessage, FormattedDate, FormattedTime} from 'react-intl'; import {FormattedMessage, FormattedDate, FormattedTime} from 'react-intl';
import React from 'react'; export default class ComplianceReports extends React.PureComponent {
import ReactDOM from 'react-dom'; static propTypes = {
/*
* Set if compliance reports are enabled in the config
*/
enabled: PropTypes.bool.isRequired,
/*
* Array of reports to render
*/
reports: PropTypes.arrayOf(PropTypes.object).isRequired,
/*
* Error message to display
*/
serverError: PropTypes.string,
actions: PropTypes.shape({
/*
* Function to get compliance reports
*/
getComplianceReports: PropTypes.func.isRequired,
/*
* Function to save compliance reports
*/
createComplianceReport: PropTypes.func.isRequired
}).isRequired
}
export default class ComplianceReports extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.onComplianceReportsListenerChange = this.onComplianceReportsListenerChange.bind(this);
this.reload = this.reload.bind(this);
this.runReport = this.runReport.bind(this);
this.getDateTime = this.getDateTime.bind(this);
this.state = { this.state = {
enabled: AdminStore.getConfig().ComplianceSettings.Enable, loadingReports: true
reports: AdminStore.getComplianceReports(),
serverError: null
}; };
} }
componentDidMount() { componentDidMount() {
AdminStore.addComplianceReportsChangeListener(this.onComplianceReportsListenerChange); if (global.window.mm_license.IsLicensed !== 'true' || !this.props.enabled) {
if (global.window.mm_license.IsLicensed !== 'true' || !this.state.enabled) {
return; return;
} }
AsyncClient.getComplianceReports(); this.props.actions.getComplianceReports().then(
() => this.setState({loadingReports: false})
);
} }
componentWillUnmount() { reload = () => {
AdminStore.removeComplianceReportsChangeListener(this.onComplianceReportsListenerChange); this.setState({loadingReports: true});
}
onComplianceReportsListenerChange() { this.props.actions.getComplianceReports().then(
this.setState({ () => this.setState({loadingReports: false})
reports: AdminStore.getComplianceReports() );
});
} }
reload() { runReport = (e) => {
AdminStore.saveComplianceReports(null); e.preventDefault();
this.setState({
reports: null, this.setState({runningReport: true});
serverError: null
});
AsyncClient.getComplianceReports(); const job = {};
} job.desc = this.refs.desc.value;
job.emails = this.refs.emails.value;