diff options
Diffstat (limited to 'web/react/components/admin_console')
| -rw-r--r-- | web/react/components/admin_console/admin_controller.jsx | 46 | ||||
| -rw-r--r-- | web/react/components/admin_console/admin_navbar_dropdown.jsx | 102 | ||||
| -rw-r--r-- | web/react/components/admin_console/admin_sidebar.jsx | 147 | ||||
| -rw-r--r-- | web/react/components/admin_console/admin_sidebar_header.jsx | 60 | ||||
| -rw-r--r-- | web/react/components/admin_console/jobs_settings.jsx | 183 | ||||
| -rw-r--r-- | web/react/components/admin_console/log_settings.jsx | 261 | ||||
| -rw-r--r-- | web/react/components/admin_console/logs.jsx | 2 |
7 files changed, 470 insertions, 331 deletions
diff --git a/web/react/components/admin_console/admin_controller.jsx b/web/react/components/admin_console/admin_controller.jsx index 68984c9e0..e82fe1b76 100644 --- a/web/react/components/admin_console/admin_controller.jsx +++ b/web/react/components/admin_console/admin_controller.jsx @@ -2,35 +2,58 @@ // See License.txt for license information. var AdminSidebar = require('./admin_sidebar.jsx'); -var EmailTab = require('./email_settings.jsx'); -var JobsTab = require('./jobs_settings.jsx'); +var AdminStore = require('../../stores/admin_store.jsx'); +var AsyncClient = require('../../utils/async_client.jsx'); +var LoadingScreen = require('../loading_screen.jsx'); + +var EmailSettingsTab = require('./email_settings.jsx'); +var LogSettingsTab = require('./log_settings.jsx'); var LogsTab = require('./logs.jsx'); -var Navbar = require('../../components/navbar.jsx'); export default class AdminController extends React.Component { constructor(props) { super(props); this.selectTab = this.selectTab.bind(this); + this.onConfigListenerChange = this.onConfigListenerChange.bind(this); this.state = { + config: null, selected: 'email_settings' }; } + componentDidMount() { + AdminStore.addConfigChangeListener(this.onConfigListenerChange); + AsyncClient.getConfig(); + } + + componentWillUnmount() { + AdminStore.removeConfigChangeListener(this.onConfigListenerChange); + } + + onConfigListenerChange() { + this.setState({ + config: AdminStore.getConfig(), + selected: this.state.selected + }); + } + selectTab(tab) { this.setState({selected: tab}); } render() { - var tab = ''; - - if (this.state.selected === 'email_settings') { - tab = <EmailTab />; - } else if (this.state.selected === 'job_settings') { - tab = <JobsTab />; - } else if (this.state.selected === 'logs') { - tab = <LogsTab />; + var tab = <LoadingScreen />; + + if (this.state.config != null) { + if (this.state.selected === 'email_settings') { + tab = <EmailSettingsTab config={this.state.config} />; + } else if (this.state.selected === 'log_settings') { + tab = <LogSettingsTab config={this.state.config} />; + } else if (this.state.selected === 'logs') { + tab = <LogsTab />; + } } return ( @@ -45,7 +68,6 @@ export default class AdminController extends React.Component { /> <div className='inner__wrap channel__wrap'> <div className='row header'> - <Navbar teamDisplayName='Admin Console' /> </div> <div className='row main'> <div diff --git a/web/react/components/admin_console/admin_navbar_dropdown.jsx b/web/react/components/admin_console/admin_navbar_dropdown.jsx new file mode 100644 index 000000000..a3ab81079 --- /dev/null +++ b/web/react/components/admin_console/admin_navbar_dropdown.jsx @@ -0,0 +1,102 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var Utils = require('../../utils/utils.jsx'); +var Client = require('../../utils/client.jsx'); +var TeamStore = require('../../stores/team_store.jsx'); + +var Constants = require('../../utils/constants.jsx'); + +function getStateFromStores() { + return {currentTeam: TeamStore.getCurrent()}; +} + +export default class AdminNavbarDropdown extends React.Component { + constructor(props) { + super(props); + this.blockToggle = false; + + this.handleLogoutClick = this.handleLogoutClick.bind(this); + + this.state = getStateFromStores(); + } + + handleLogoutClick(e) { + e.preventDefault(); + Client.logout(); + } + + componentDidMount() { + $(React.findDOMNode(this.refs.dropdown)).on('hide.bs.dropdown', () => { + this.blockToggle = true; + setTimeout(() => { + this.blockToggle = false; + }, 100); + }); + } + + componentWillUnmount() { + $(React.findDOMNode(this.refs.dropdown)).off('hide.bs.dropdown'); + } + + render() { + return ( + <ul className='nav navbar-nav navbar-right'> + <li + ref='dropdown' + className='dropdown' + > + <a + href='#' + className='dropdown-toggle' + data-toggle='dropdown' + role='button' + aria-expanded='false' + > + <span + className='dropdown__icon' + dangerouslySetInnerHTML={{__html: Constants.MENU_ICON}} + /> + </a> + <ul + className='dropdown-menu' + role='menu' + > + <li> + <a + href={Utils.getWindowLocationOrigin() + '/' + this.state.currentTeam.name} + > + {'Switch to ' + this.state.currentTeam.display_name} + </a> + </li> + <li> + <a + href='#' + onClick={this.handleLogoutClick} + > + {'Logout'} + </a> + </li> + <li className='divider'></li> + <li> + <a + target='_blank' + href='/static/help/help.html' + > + {'Help'} + </a> + </li> + <li> + <a + target='_blank' + href='/static/help/report_problem.html' + > + {'Report a Problem'} + </a> + </li> + </ul> + </li> + </ul> + ); + } +}
\ No newline at end of file diff --git a/web/react/components/admin_console/admin_sidebar.jsx b/web/react/components/admin_console/admin_sidebar.jsx index a04bceef5..a6e689490 100644 --- a/web/react/components/admin_console/admin_sidebar.jsx +++ b/web/react/components/admin_console/admin_sidebar.jsx @@ -1,7 +1,7 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -var SidebarHeader = require('../sidebar_header.jsx'); +var AdminSidebarHeader = require('./admin_sidebar_header.jsx'); export default class AdminSidebar extends React.Component { constructor(props) { @@ -14,7 +14,8 @@ export default class AdminSidebar extends React.Component { }; } - handleClick(name) { + handleClick(name, e) { + e.preventDefault(); this.props.selectTab(name); } @@ -27,58 +28,21 @@ export default class AdminSidebar extends React.Component { } componentDidMount() { - $('.nav__menu-item').on('click', function clickme(e) { - e.preventDefault(); - $(this).closest('.sidebar--collapsable').find('.nav__menu-item').removeClass('active'); - $(this).addClass('active'); - $(this).closest('.sidebar--collapsable').find('.nav__sub-menu').addClass('hide'); - $(this).next('.nav__sub-menu').removeClass('hide'); - }); - - $('.nav__sub-menu a').on('click', function clickme(e) { - e.preventDefault(); - $(this).closest('.nav__sub-menu').find('a').removeClass('active'); - $(this).addClass('active'); - }); - - $('.nav__sub-menu-item').on('click', function clickme(e) { - e.preventDefault(); - $(this).closest('.sidebar--collapsable').find('.nav__inner-menu').addClass('hide'); - $(this).closest('li').next('li').find('.nav__inner-menu').removeClass('hide'); - $(this).closest('li').next('li').find('.nav__inner-menu li:first a').addClass('active'); - }); - - $('.nav__inner-menu a').on('click', function clickme() { - $(this).closest('.nav__inner-menu').closest('li').prev('li').find('a').addClass('active'); - }); - - $('.nav__sub-menu .menu__close').on('click', function close() { - var menuItem = $(this).closest('li'); - menuItem.next('li').remove(); - menuItem.remove(); - }); } render() { return ( <div className='sidebar--left sidebar--collapsable'> <div> - <SidebarHeader - teamDisplayName='Admin Console' - teamType='I' - /> + <AdminSidebarHeader /> <ul className='nav nav-pills nav-stacked'> <li> - <a href='#' - className='nav__menu-item active' - > - <span className='icon fa fa-gear'></span> <span>{'Basic Settings'}</span></a> <ul className='nav nav__sub-menu'> <li> <a href='#' className={this.isSelected('email_settings')} - onClick={this.handleClick.bind(null, 'email_settings')} + onClick={this.handleClick.bind(this, 'email_settings')} > {'Email Settings'} </a> @@ -86,110 +50,21 @@ export default class AdminSidebar extends React.Component { <li> <a href='#' - className={this.isSelected('logs')} - onClick={this.handleClick.bind(null, 'logs')} - > - {'Logs'} - </a> - </li> - </ul> - </li> - <li> - <a - href='#' - className='nav__menu-item' - > - <span className='icon fa fa-gear'></span> <span>{'Jobs'}</span> - </a> - <ul className='nav nav__sub-menu hide'> - <li> - <a - href='#' - className={this.isSelected('job_settings')} - onClick={this.handleClick.bind(null, 'job_settings')} + className={this.isSelected('log_settings')} + onClick={this.handleClick.bind(this, 'log_settings')} > - {'Job Settings'} + {'Log Settings'} </a> </li> - </ul> - </li> - <li> - <a - href='#' - className='nav__menu-item' - > - <span className='icon fa fa-gear'></span> - <span>{'Team Settings (306)'}</span> - <span className='menu-icon--right'> - <i className='fa fa-plus'></i> - </span> - </a> - <ul className='nav nav__sub-menu hide'> - <li> - <a - href='#' - className='nav__sub-menu-item active' - > - {'Adal '} - <span className='menu-icon--right menu__close'>{'x'}</span> - </a> - </li> - <li> - <ul className='nav nav__inner-menu'> - <li> - <a - href='#' - className='active' - > - {'- Users'} - </a> - </li> - <li><a href='#'>{'- View Statistics'}</a></li> - <li> - <a href='#'> - {'- View Audit Log'} - <span className='badge pull-right small'>{'1'}</span> - </a> - </li> - </ul> - </li> <li> <a href='#' - className='nav__sub-menu-item' + className={this.isSelected('logs')} + onClick={this.handleClick.bind(this, 'logs')} > - {'Boole '} - <span className='menu-icon--right menu__close'>{'x'}</span> + {'Logs'} </a> </li> - <li> - <ul className='nav nav__inner-menu hide'> - <li> - <a - href='#' - className='active' - > - {'- Users'} - </a> - </li> - <li><a href='#'>{'- View Statistics'}</a></li> - <li> - <a href='#'> - {'- View Audit Log'} - <span className='badge pull-right small'>{'1'}</span> - </a> - </li> - </ul> - </li> - <li> - <span - data-toggle='modal' - data-target='#select-team' - className='nav-more' - > - {'Select a team'} - </span> - </li> </ul> </li> </ul> diff --git a/web/react/components/admin_console/admin_sidebar_header.jsx b/web/react/components/admin_console/admin_sidebar_header.jsx new file mode 100644 index 000000000..81798da45 --- /dev/null +++ b/web/react/components/admin_console/admin_sidebar_header.jsx @@ -0,0 +1,60 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var AdminNavbarDropdown = require('./admin_navbar_dropdown.jsx'); +var UserStore = require('../../stores/user_store.jsx'); + +export default class SidebarHeader extends React.Component { + constructor(props) { + super(props); + + this.toggleDropdown = this.toggleDropdown.bind(this); + + this.state = {}; + } + + toggleDropdown(e) { + e.preventDefault(); + + if (this.refs.dropdown.blockToggle) { + this.refs.dropdown.blockToggle = false; + return; + } + + $('.team__header').find('.dropdown-toggle').dropdown('toggle'); + } + + render() { + var me = UserStore.getCurrentUser(); + var profilePicture = null; + + if (!me) { + return null; + } + + if (me.last_picture_update) { + profilePicture = ( + <img + className='user__picture' + src={'/api/v1/users/' + me.id + '/image?time=' + me.update_at} + /> + ); + } + + return ( + <div className='team__header theme'> + <a + href='#' + onClick={this.toggleDropdown} + > + {profilePicture} + <div className='header__info'> + <div className='user__name'>{'@' + me.username}</div> + <div className='team__name'>{'System Console'}</div> + </div> + </a> + <AdminNavbarDropdown ref='dropdown' /> + </div> + ); + } +}
\ No newline at end of file diff --git a/web/react/components/admin_console/jobs_settings.jsx b/web/react/components/admin_console/jobs_settings.jsx deleted file mode 100644 index 0b4fc4185..000000000 --- a/web/react/components/admin_console/jobs_settings.jsx +++ /dev/null @@ -1,183 +0,0 @@ -// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. -// See License.txt for license information. - -export default class Jobs extends React.Component { - constructor(props) { - super(props); - - this.state = { - }; - } - - render() { - return ( - <div className='wrapper--fixed'> - <h3>{' ************** JOB Settings'}</h3> - <form - className='form-horizontal' - role='form' - > - <div className='form-group'> - <label - className='control-label col-sm-4' - htmlFor='email' - > - {'Bypass Email: '} - <a - href='#' - data-trigger='hover click' - data-toggle='popover' - data-position='bottom' - data-content={'Here\'s some more help text inside a popover for the Bypass Email field just to show how popovers look.'} - > - {'(?)'} - </a> - </label> - <div className='col-sm-8'> - <label className='radio-inline'> - <input - type='radio' - name='byPassEmail' - value='option1' - /> - {'True'} - </label> - <label className='radio-inline'> - <input - type='radio' - name='byPassEmail' - value='option2' - /> - {'False'} - </label> - <p className='help-text'>{'This is some sample help text for the Bypass Email field'}</p> - </div> - </div> - <div className='form-group'> - <label - className='control-label col-sm-4' - htmlFor='smtpUsername' - > - {'SMTP Username:'} - </label> - <div className='col-sm-8'> - <input - type='email' - className='form-control' - id='smtpUsername' - placeholder='Enter your SMTP username' - value='' - /> - <div className='help-text'> - <div className='alert alert-warning'><i className='fa fa-warning'></i>{' This is some error text for the Bypass Email field'}</div> - </div> - <p className='help-text'>{'This is some sample help text for the SMTP username field'}</p> - </div> - </div> - <div - className='panel-group' - id='accordion' - role='tablist' - aria-multiselectable='true' - > - <div className='panel panel-default'> - <div - className='panel-heading' - role='tab' - id='headingOne' - > - <h3 className='panel-title'> - <a - className='collapsed' - role='button' - data-toggle='collapse' - data-parent='#accordion' - href='#collapseOne' - aria-expanded='true' - aria-controls='collapseOne' - > - {'Advanced Settings '} - <i className='fa fa-plus'></i> - <i className='fa fa-minus'></i> - </a> - </h3> - </div> - <div - id='collapseOne' - className='panel-collapse collapse' - role='tabpanel' - aria-labelledby='headingOne' - > - <div className='panel-body'> - <div className='form-group'> - <label - className='control-label col-sm-4' - htmlFor='feedbackUsername' - > - {'Apple push server:'} - </label> - <div className='col-sm-8'> - <input - type='text' - className='form-control' - id='feedbackUsername' - placeholder='Enter your Apple push server' - value='' - /> - <p className='help-text'>{'This is some sample help text for the Apple push server field'}</p> - </div> - </div> - <div className='form-group'> - <label - className='control-label col-sm-4' - htmlFor='feedbackUsername' - > - {'Apple push certificate public:'} - </label> - <div className='col-sm-8'> - <input - type='text' - className='form-control' - id='feedbackUsername' - placeholder='Enter your public apple push certificate' - value='' - /> - </div> - </div> - <div className='form-group'> - <label - className='control-label col-sm-4' - htmlFor='feedbackUsername' - > - {'Apple push certificate private:'} - </label> - <div className='col-sm-8'> - <input - type='text' - className='form-control' - id='feedbackUsername' - placeholder='Enter your private apple push certificate' - value='' - /> - </div> - </div> - </div> - </div> - </div> - </div> - - <div className='form-group'> - <div className='col-sm-12'> - <button - type='submit' - className='btn btn-primary' - > - {'Save'} - </button> - </div> - </div> - </form> - </div> - ); - } -}
\ No newline at end of file diff --git a/web/react/components/admin_console/log_settings.jsx b/web/react/components/admin_console/log_settings.jsx new file mode 100644 index 000000000..4e3db8f68 --- /dev/null +++ b/web/react/components/admin_console/log_settings.jsx @@ -0,0 +1,261 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var Client = require('../../utils/client.jsx'); +var AsyncClient = require('../../utils/async_client.jsx'); + +export default class LogSettings extends React.Component { + constructor(props) { + super(props); + + this.handleChange = this.handleChange.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + + this.state = { + saveNeeded: false, + serverError: null + }; + } + + handleChange() { + this.setState({saveNeeded: true, serverError: this.state.serverError}); + } + + handleSubmit(e) { + e.preventDefault(); + $('#save-button').button('loading'); + + var config = this.props.config; + config.LogSettings.ConsoleEnable = React.findDOMNode(this.refs.consoleEnable).checked; + config.LogSettings.ConsoleLevel = React.findDOMNode(this.refs.consoleLevel).value; + config.LogSettings.FileEnable = React.findDOMNode(this.refs.fileEnable).checked; + config.LogSettings.FileLevel = React.findDOMNode(this.refs.fileLevel).value; + config.LogSettings.FileLocation = React.findDOMNode(this.refs.fileLocation).value.trim(); + config.LogSettings.FileFormat = React.findDOMNode(this.refs.fileFormat).value.trim(); + + Client.saveConfig( + config, + () => { + AsyncClient.getConfig(); + this.setState({serverError: null, saveNeeded: false}); + $('#save-button').button('reset'); + }, + (err) => { + this.setState({serverError: err.message, saveNeeded: true}); + $('#save-button').button('reset'); + } + ); + } + + render() { + var serverError = ''; + if (this.state.serverError) { + serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>; + } + + var saveClass = 'btn'; + if (this.state.saveNeeded) { + saveClass = 'btn btn-primary'; + } + + return ( + <div className='wrapper--fixed'> + <h3>{'Log Settings'}</h3> + <form + className='form-horizontal' + role='form' + > + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='consoleEnable' + > + {'Log To the Console: '} + </label> + <div className='col-sm-8'> + <label className='radio-inline'> + <input + type='radio' + name='consoleEnable' + value='true' + ref='consoleEnable' + defaultChecked={this.props.config.LogSettings.ConsoleEnable} + onChange={this.handleChange} + /> + {'true'} + </label> + <label className='radio-inline'> + <input + type='radio' + name='consoleEnable' + value='false' + defaultChecked={!this.props.config.LogSettings.ConsoleEnable} + onChange={this.handleChange} + /> + {'false'} + </label> + <p className='help-text'>{'Typically set to false in production. Developers may set this field to true to output log messages to console based on the console level option. If true then the server will output messages to the standard output stream (stdout).'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='consoleLevel' + > + {'Console Log Level:'} + </label> + <div className='col-sm-8'> + <select + className='form-control' + id='consoleLevel' + ref='consoleLevel' + defaultValue={this.props.config.LogSettings.consoleLevel} + onChange={this.handleChange} + > + <option value='DEBUG'>{'DEBUG'}</option> + <option value='INFO'>{'INFO'}</option> + <option value='ERROR'>{'ERROR'}</option> + </select> + <p className='help-text'>{'This setting determines the level of detail at which log events are written to the console. ERROR: Outputs only error messages. INFO: Outputs error messages and information around startup and initialization. DEBUG: Prints high detail for developers debugging issues working on debugging issues.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + > + {'Log To File: '} + </label> + <div className='col-sm-8'> + <label className='radio-inline'> + <input + type='radio' + name='fileEnable' + ref='fileEnable' + value='true' + defaultChecked={this.props.config.LogSettings.FileEnable} + onChange={this.handleChange} + /> + {'true'} + </label> + <label className='radio-inline'> + <input + type='radio' + name='fileEnable' + value='false' + defaultChecked={!this.props.config.LogSettings.FileEnable} + onChange={this.handleChange} + /> + {'false'} + </label> + <p className='help-text'>{'Typically set to true in production. When true log files are written to the file specified in file location field below.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='fileLevel' + > + {'File Log Level:'} + </label> + <div className='col-sm-8'> + <select + className='form-control' + id='fileLevel' + ref='fileLevel' + defaultValue={this.props.config.LogSettings.FileLevel} + onChange={this.handleChange} + > + <option value='DEBUG'>{'DEBUG'}</option> + <option value='INFO'>{'INFO'}</option> + <option value='ERROR'>{'ERROR'}</option> + </select> + <p className='help-text'>{'This setting determines the level of detail at which log events are written to the file. ERROR: Outputs only error messages. INFO: Outputs error messages and information around startup and initialization. DEBUG: Prints high detail for developers debugging issues working on debugging issues.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='fileLocation' + > + {'File Location:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='fileLocation' + ref='fileLocation' + placeholder='Enter your file location' + defaultValue={this.props.config.LogSettings.FileLocation} + onChange={this.handleChange} + /> + <p className='help-text'>{'File to which log files are written. If blank, will be set to ./logs/mattermost.log. Log rotation is enabled and new files may be created in the same directory.'}</p> + </div> + </div> + + <div className='form-group'> + <label + className='control-label col-sm-4' + htmlFor='fileFormat' + > + {'File Format:'} + </label> + <div className='col-sm-8'> + <input + type='text' + className='form-control' + id='fileFormat' + ref='fileFormat' + placeholder='Enter your file format' + defaultValue={this.props.config.LogSettings.FileFormat} + onChange={this.handleChange} + /> + <p className='help-text'> + {'Format of log message output. If blank will be set to "[%D %T] [%L] %M", where:'} + <div className='help-text'> + <table + className='table-bordered' + cellPadding='5' + > + <tr><td className='help-text'>{'%T'}</td><td className='help-text'>{'Time (15:04:05 MST)'}</td></tr> + <tr><td className='help-text'>{'%D'}</td><td className='help-text'>{'Date (2006/01/02)'}</td></tr> + <tr><td className='help-text'>{'%d'}</td><td className='help-text'>{'Date (01/02/06)'}</td></tr> + <tr><td className='help-text'>{'%L'}</td><td className='help-text'>{'Level (DEBG, INFO, EROR)'}</td></tr> + <tr><td className='help-text'>{'%S'}</td><td className='help-text'>{'Source'}</td></tr> + <tr><td className='help-text'>{'%M'}</td><td className='help-text'>{'Message'}</td></tr> + </table> + </div> + </p> + </div> + </div> + + <div className='form-group'> + <div className='col-sm-12'> + {serverError} + <button + disabled={!this.state.saveNeeded} + type='submit' + className={saveClass} + onClick={this.handleSubmit} + id='save-button' + data-loading-text={'<span class=\'glyphicon glyphicon-refresh glyphicon-refresh-animate\'></span> Saving Config...'} + > + {'Save'} + </button> + </div> + </div> + + </form> + </div> + ); + } +} + +LogSettings.propTypes = { + config: React.PropTypes.object +}; diff --git a/web/react/components/admin_console/logs.jsx b/web/react/components/admin_console/logs.jsx index d7de76a94..0bb749bbd 100644 --- a/web/react/components/admin_console/logs.jsx +++ b/web/react/components/admin_console/logs.jsx @@ -21,9 +21,11 @@ export default class Logs extends React.Component { AdminStore.addLogChangeListener(this.onLogListenerChange); AsyncClient.getLogs(); } + componentWillUnmount() { AdminStore.removeLogChangeListener(this.onLogListenerChange); } + onLogListenerChange() { this.setState({ logs: AdminStore.getLogs() |