github.com/cockroachdb/cockroach@v20.2.0-alpha.1+incompatible/pkg/ui/src/views/shared/containers/alerts/index.tsx (about)

     1  // Copyright 2018 The Cockroach Authors.
     2  //
     3  // Use of this software is governed by the Business Source License
     4  // included in the file licenses/BSL.txt.
     5  //
     6  // As of the Change Date specified in that file, in accordance with
     7  // the Business Source License, use of this software will be governed
     8  // by the Apache License, Version 2.0, included in the file
     9  // licenses/APL.txt.
    10  
    11  import React from "react";
    12  import _ from "lodash";
    13  import { Dispatch, Action, bindActionCreators } from "redux";
    14  import { connect } from "react-redux";
    15  
    16  import { AlertBox } from "src/views/shared/components/alertBox";
    17  import { AdminUIState } from "src/redux/state";
    18  import { Alert, panelAlertsSelector } from "src/redux/alerts";
    19  
    20  interface AlertSectionProps {
    21    /**
    22     * List of alerts to display in the alert secion.
    23     */
    24    alerts: Alert[];
    25    /**
    26     * Raw dispatch method for the current store, will be used to dispatch
    27     * alert dismissal callbacks.
    28     */
    29    dispatch: Dispatch<Action, AdminUIState>;
    30  }
    31  
    32  class AlertSection extends React.Component<AlertSectionProps, {}> {
    33    render() {
    34      const { alerts, dispatch } = this.props;
    35      return <div>
    36        {
    37          _.map(alerts, (a, i) => {
    38            const { dismiss, ...alertProps } = a;
    39            const boundDismiss = bindActionCreators(() => a.dismiss, dispatch);
    40            return <AlertBox key={i} dismiss={ boundDismiss } {...alertProps} />;
    41          })
    42        }
    43      </div>;
    44    }
    45  }
    46  
    47  const alertSectionConnected = connect(
    48    (state: AdminUIState) => {
    49      return {
    50        alerts: panelAlertsSelector(state),
    51      };
    52    },
    53    (dispatch) => {
    54      return {
    55        dispatch: dispatch,
    56      };
    57    },
    58  )(AlertSection);
    59  
    60  export default alertSectionConnected;