const NotFoundPage = () => { return ( <div> <h4> 404 Page Not Found </h4> <Link to="/"> Go back to homepage </Link> </div> ); }
// Component const H4 = (props) => { const { children, font, ...others } = props return ( <h4 {...others}> {children} {/* language=CSS */} <style jsx>{` h4 { font-family: ${ font === 'primary' ? primary : secondary }; font-size: 1.75em; } `}</style> </h4> ) }
render () { let errMsg if (this.state.message) { errMsg = (<ErrorMessage message={this.state.message} />) } let tabContent = React.createElement(tabs[this.state.tabIndex].component, {}) return ( <div className={classes.layout} style={{ opacity: this.state.isFetching ? 0.5 : 1 }}> <h4>Settings</h4> {errMsg} {this.renderTabs()} {tabContent} </div> ) }
render () { return ( <div className={classnames(classes.layout)}> <h4>404 page not found</h4> </div> ) }
this.state.explainResult.map(res => ( <div> <h4> Result from SQL{' '} <a href="https://www.postgresql.org/docs/current/sql-explain.html"> EXPLAIN </a>{' '} on executed query: </h4> <pre className="explain-plan"> <code>{res.plan}</code> </pre> <h4>Executed SQL query:</h4> <pre className="explain-sql"> <code>{formatSQL(res.query)}</code> </pre> </div> ))
render () { const region = userPoolId.match(/^[a-z0-9-]+/) if (!region) { console.warn('user pool id has unexpected format:', region) } const linkToUsersPage = `https://${region}.console.aws.amazon.com/cognito/users?region=${region}#/pool/${userPoolId}/users` return ( <div className={classnames(classes.layout, 'mdl-grid')}> <h4>Users</h4> <div className='mdl-cell mdl-cell--12-col'> Access <a href={linkToUsersPage} className={classes.link} target='_blank'> the Amazon Cognito Management Console </a> to manage the admin users. See <a href='https://lambstatus.github.io/create-a-new-admin-user' className={classes.link} target='_blank'> the document </a> to create a new admin. </div> </div> ) }
render () { return (<dialog className={classnames('mdl-dialog', classes.dialog)} ref='dialog'> <h4 className={classnames('mdl-dialog__title', classes.title)}> Delete <i>{this.props.name}</i> ? </h4> <div className='mdl-dialog__content'> <ErrorMessage message={this.state.message} /> This operation can not be undone. </div> <div className='mdl-dialog__actions'> <Button onClick={this.handleClickDeleteButton} name='Delete' class='mdl-button--accent' disabled={this.state.isUpdating} /> <Button onClick={this.handleHideDialog} name='Cancel' /> </div> </dialog>) }
function createModal(options, callback, gVarName) { var container = document.createElement('div'); document.body.appendChild(container); if (options.methods) { window[gVarName] = options.methods; } ReactDOM.render((<Dialog width={options.width} height={options.height} wclassName="w-dialog-for-plguin" customRef={function(d) { document.body.removeChild(container); initModal(d, options, gVarName); callback(d); }} onClose={options.onClose}> <div className="modal-header"> <h4></h4> <button type="button" className="close" data-dismiss="modal"> <span aria-hidden="true">×</span> </button> </div> <div className="modal-body"></div> <div className="modal-footer"> <button type="button" className="btn btn-default" data-dismiss="modal">Close</button> </div> </Dialog>), container); }
render () { const componentItems = this.props.components.map(this.renderListItem) const dialog = this.renderDialog() const addButton = (<span><i className='material-icons'>add</i>Add</span>) return ( <div className={classnames(classes.layout, 'mdl-grid')} style={{ opacity: this.state.isFetching ? 0.5 : 1 }}> <div className={classes.headline}> <h4>Components</h4> <span className={classes.showDialogButton}> <Button onClick={this.handleShowAddDialog()} name={addButton} class='mdl-button--accent' /> </span> </div> <ErrorMessage message={this.state.message} /> <ul className={classnames(classes.container, 'mdl-cell', 'mdl-cell--12-col')}> {componentItems} </ul> <div id={innerDialogID}> {dialog} </div> </div> ) }
render () { const { metrics } = this.props const metricItems = metrics.map(this.renderListItem) const dialog = this.renderDialog() const addButton = (<span><i className='material-icons'>add</i>Add</span>) return ( <div className={classnames(classes.layout, 'mdl-grid')} style={{ opacity: this.state.isFetching ? 0.5 : 1 }}> <div className={classes.headline}> <h4>Metrics</h4> <span className={classes.showDialogButton}> <Button onClick={this.handleShowAddDialog()} name={addButton} class='mdl-button--accent' /> </span> </div> <ErrorMessage message={this.state.message} /> <ul className={classnames(classes.container, 'mdl-cell', 'mdl-cell--12-col')}> {metricItems} </ul> <div id={innerDialogID}> {dialog} </div> </div> ) }
style={{ opacity: this.state.isFetching ? 0.5 : 1 }}> <div className={classes.headline}> <h4>Scheduled Maintenance</h4> <span className={classes.showDialogButton}> <Button onClick={this.handleShowAddDialog()} name={addButton} class='mdl-button--accent' />
{displayGroup ? <h4 className="sidebar__group">{group}</h4> : null}
style={{ opacity: this.state.isFetching ? 0.5 : 1 }}> <div className={classes.headline}> <h4>Incidents</h4> <span className={classes.showDialogButton}> <Button onClick={this.handleShowAddDialog()} name={addButton} class='mdl-button--accent' />
// Component const H4 = (props) => { const { children, font, ...others } = props return ( <h4 {...others}> {children} {/* language=CSS */} <style jsx>{` h4 { font-family: ${ font === 'primary' ? primary : secondary }; font-size: 1.75em; } `}</style> </h4> ) }
this.state.explainResult.map(res => ( <div> <h4> Result from SQL{' '} <a href="https://www.postgresql.org/docs/current/sql-explain.html"> EXPLAIN </a>{' '} on executed query: </h4> <pre className="explain-plan"> <code>{res.plan}</code> </pre> <h4>Executed SQL query:</h4> <pre className="explain-sql"> <code>{formatSQL(res.query)}</code> </pre> </div> ))