forked from cockroachdb/cockroach
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
ui: Alert Refactoring, remove most Banner Alerts
This is a significant refactoring of the systems previously used to display banner-type notifications. + All logic on whether or not to display alerts has been moved to a series of selectors in `redux/alerts.ts`. After many factoring attempts, using a selector for each alert seemed like the appropriate design based on current requirements. + A new sync service has been added in `alerts.ts`, which is responsible for loading data from the server which is needed to display alerts. This was chosen because loading this data using the same method as other components (e.g. how metric data is loaded) was proving tedious given the nature of alert-relevant information (only needs to be loaded once, a variety of different settings). + Most alerts have been moved from Banners into a dismissable panel which is displayed on the cluster page. This makes them significantly less disruptive. + Significant testing has been added for the alert display logic and the alert sync service. Not in this issue: + The "cluster disconnected" banner has not been modified, it still displays at its previous position. The styling of this banner will be changed in a subsequent pull request, but it will remain visible across all pages because it is relevant to all pages. Additional Refactoring changes: + Renamed `AdminUIState.ui` -> `AdminUIState.localSettings` to make its purpose more clear. Resolves cockroachdb#12890 Resolves cockroachdb#12590
- Loading branch information
Matt Tracy
committed
Apr 13, 2017
1 parent
f73bd7e
commit 1f9a1cc
Showing
28 changed files
with
919 additions
and
276 deletions.
There are no files selected for viewing
Empty file.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import * as React from "react"; | ||
| import classNames from "classnames"; | ||
|
|
||
| import { AlertInfo, AlertLevel } from "../redux/alerts"; | ||
| import { warningIcon, notificationIcon, criticalIcon } from "../components/icons"; | ||
| import { trustIcon } from "../util/trust"; | ||
|
|
||
| function alertIcon (level: AlertLevel) { | ||
| switch (level) { | ||
| case AlertLevel.CRITICAL: | ||
| return trustIcon(criticalIcon); | ||
| case AlertLevel.WARNING: | ||
| return trustIcon(warningIcon); | ||
| default: | ||
| return trustIcon(notificationIcon); | ||
| } | ||
| } | ||
|
|
||
| export interface AlertBoxProps extends AlertInfo { | ||
| dismiss(): void; | ||
| } | ||
|
|
||
| export class AlertBox extends React.Component<AlertBoxProps, {}> { | ||
| render() { | ||
| // build up content element, which has a wrapping anchor element that is | ||
| // conditionally present. | ||
| let content = <div> | ||
| <div className="alert-box__title">{this.props.title}</div> | ||
| <div className="alert-box__text">{this.props.text}</div> | ||
| </div>; | ||
|
|
||
| if (this.props.link) { | ||
| content = <a className="alert-box__link" href={this.props.link}> | ||
| { content } | ||
| </a>; | ||
| } | ||
|
|
||
| content = <div className="alert-box__content"> | ||
| { content } | ||
| </div>; | ||
|
|
||
| return <div className={classNames("alert-box", `alert-box--${AlertLevel[this.props.level].toLowerCase()}`)}> | ||
| <div className="alert-box__icon" dangerouslySetInnerHTML={alertIcon(this.props.level)} /> | ||
| { content } | ||
| <div className="alert-box__dismiss"> | ||
| <a className="alert-box__link" onClick={this.props.dismiss}>✕</a> | ||
| </div> | ||
| </div>; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import * as React from "react"; | ||
| import _ from "lodash"; | ||
| import { Dispatch, bindActionCreators } from "redux"; | ||
| import { connect } from "react-redux"; | ||
|
|
||
| import { AlertBox } from "../components/alertBox"; | ||
| import { AdminUIState } from "../redux/state"; | ||
| import { Alert, allAlertsSelector } from "../redux/alerts"; | ||
|
|
||
| interface AlertSectionProps { | ||
| /** | ||
| * List of alerts to display in the alert secion. | ||
| */ | ||
| alerts: Alert[]; | ||
| /** | ||
| * Raw dispatch method for the current store, will be used to dispatch | ||
| * alert dismissal callbacks. | ||
| */ | ||
| dispatch: Dispatch<AdminUIState>; | ||
| } | ||
|
|
||
| class AlertSection extends React.Component<AlertSectionProps, {}> { | ||
| render() { | ||
| let { alerts, dispatch } = this.props; | ||
| return <div> | ||
| { | ||
| _.map(alerts, (a, i) => { | ||
| const { dismiss, ...alertProps } = a; | ||
| const boundDismiss = bindActionCreators(() => a.dismiss, dispatch); | ||
| return <AlertBox key={i} dismiss={ boundDismiss } {...alertProps} />; | ||
| }) | ||
| } | ||
| </div>; | ||
| } | ||
| } | ||
|
|
||
| const alertSectionConnected = connect( | ||
| (state: AdminUIState) => { | ||
| return { | ||
| alerts: allAlertsSelector(state), | ||
| }; | ||
| }, | ||
| (dispatch) => { | ||
| return { | ||
| dispatch: dispatch, | ||
| }; | ||
| }, | ||
| )(AlertSection); | ||
|
|
||
| export default alertSectionConnected; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.