github.com/stampzilla/stampzilla-go@v2.0.0-rc9+incompatible/nodes/stampzilla-server/web/src/routes/automation/index.js (about)

     1  import React, { Component } from 'react';
     2  import { connect } from 'react-redux';
     3  
     4  import Card from '../../components/Card';
     5  
     6  const toStatusBadge = (n, state) => {
     7    if (n.get('enabled')) {
     8      if (!state) {
     9        return <div className="badge badge-info">Unknown</div>;
    10      }
    11  
    12      if (state.get('error')) {
    13        return <div className="badge badge-danger">Failed</div>;
    14      }
    15      if (state.get('active')) {
    16        return <div className="badge badge-success">Active</div>;
    17      }
    18      if (state.get('pending')) {
    19        return <div className="badge badge-warning">Pending</div>;
    20      }
    21  
    22      return <div className="badge badge-secondary">Standby</div>;
    23    }
    24  
    25    return <div className="badge badge-secondary">Disabled</div>;
    26  };
    27  
    28  class Automation extends Component {
    29    onClickNode = uuid => () => {
    30      const { history } = this.props;
    31      history.push(`/aut/${uuid}`);
    32    };
    33  
    34    render() {
    35      const {
    36        rules, schedules, rulesState, schedulesState,
    37      } = this.props;
    38  
    39      return (
    40        <React.Fragment>
    41          <div className="row">
    42            <div className="col-md-12">
    43              <Card
    44                title="Rules"
    45                bodyClassName="p-0"
    46                toolbar={[
    47                  {
    48                    icon: 'fa fa-plus',
    49                    className: 'btn-secondary',
    50                    onClick: this.onClickNode('rule/create'),
    51                  },
    52                ]}
    53              >
    54                <table className="table table-striped table-valign-middle">
    55                  <thead>
    56                    <tr>
    57                      <th style={{ width: 1 }}>Status</th>
    58                      <th>Name</th>
    59                    </tr>
    60                  </thead>
    61                  <tbody>
    62                    {rules &&
    63                      rules
    64                        .map(n => (
    65                          <tr
    66                            key={n.get('uuid')}
    67                            style={{ cursor: 'pointer' }}
    68                            onClick={this.onClickNode(`rule/${n.get('uuid')}`)}
    69                          >
    70                            <td className="text-center">{toStatusBadge(n, rulesState.get(n.get('uuid')))}</td>
    71                            <td>{n.get('name') || n.get('uuid')}</td>
    72                          </tr>
    73                        ))
    74                        .toArray()}
    75                  </tbody>
    76                </table>
    77              </Card>
    78  
    79              <Card
    80                title="Schedules"
    81                bodyClassName="p-0"
    82                toolbar={[
    83                  {
    84                    icon: 'fa fa-plus',
    85                    className: 'btn-secondary',
    86                    onClick: this.onClickNode('schedule/create'),
    87                  },
    88                ]}
    89              >
    90                <table className="table table-striped table-valign-middle">
    91                  <thead>
    92                    <tr>
    93                      <th>Name</th>
    94                      <th>Status</th>
    95                    </tr>
    96                  </thead>
    97                  <tbody>
    98                    {schedules &&
    99                      schedules
   100                        .map(n => (
   101                          <tr
   102                            key={n.get('uuid')}
   103                            style={{ cursor: 'pointer' }}
   104                            onClick={this.onClickNode(
   105                              `schedule/${n.get('uuid')}`,
   106                            )}
   107                          >
   108                            <td>{n.get('name')}</td>
   109                            <td>{JSON.stringify(schedulesState.get(n.get('uuid')))}</td>
   110                          </tr>
   111                        ))
   112                        .toArray()}
   113                  </tbody>
   114                </table>
   115              </Card>
   116            </div>
   117          </div>
   118        </React.Fragment>
   119      );
   120    }
   121  }
   122  
   123  const mapToProps = state => ({
   124    rules: state.getIn(['rules', 'list']),
   125    rulesState: state.getIn(['rules', 'state']),
   126    schedules: state.getIn(['schedules', 'list']),
   127    schedulesState: state.getIn(['schedules', 'state']),
   128  });
   129  
   130  export default connect(mapToProps)(Automation);