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

     1  import React, { Component } from 'react';
     2  import { connect } from 'react-redux';
     3  
     4  import { write } from '../../components/Websocket';
     5  import Card from '../../components/Card';
     6  
     7  class Debug extends Component {
     8      onClickTestButton = () => () => {
     9        write({
    10          type: 'update-node',
    11          body: {
    12            uuid: '123',
    13            version: '1',
    14            name: 'web client',
    15            config: 'trasig json;',
    16          },
    17        });
    18      }
    19  
    20      render() {
    21        const { messages, connections, nodes } = this.props;
    22  
    23        return (
    24          <React.Fragment>
    25            <div className="row">
    26              <div className="col-md-4">
    27                <Card
    28                  title="Send message"
    29                >
    30                  <button onClick={this.onClickTestButton()} className="btn btn-primary" disabled>Test send message</button>
    31                </Card>
    32  
    33              </div>
    34              <div className="col-md-8">
    35                <Card
    36                  title="Active connections"
    37                  bodyClassName="p-0"
    38                >
    39                  <table className="table table-striped table-valign-middle">
    40                    <thead>
    41                      <tr>
    42                        <th />
    43                        <th>Identity</th>
    44                        <th>Address</th>
    45                        <th>Type</th>
    46                        <th>Subscriptions</th>
    47                      </tr>
    48                    </thead>
    49                    <tbody>
    50                      {connections
    51                        .sort((a, b) => {
    52                          if (a.getIn(['attributes', 'secure']) !== b.getIn(['attributes', 'secure'])) {
    53                            return a.getIn(['attributes', 'secure']) ? -1 : 1;
    54                          }
    55  
    56                          const t = b.get('type').localeCompare(a.get('type'));
    57                          if (t !== 0) {
    58                            return t;
    59                          }
    60  
    61                          return (a.getIn(['attributes', 'identity']) || '').localeCompare(b.getIn(['attributes', 'identity']));
    62                        })
    63                        .map(c => (
    64                          <tr key={c.getIn(['attributes', 'ID'])}>
    65                            <td>
    66                              {c.getIn(['attributes', 'secure']) &&
    67                              <React.Fragment>
    68                                {c.getIn(['attributes', 'identity']) &&
    69                                  <i className="nav-icon fa fa-lock text-success" />
    70                                }
    71                                {!c.getIn(['attributes', 'identity']) &&
    72                                  <i className="nav-icon fa fa-lock" />
    73                                }
    74                              </React.Fragment>
    75                              }
    76                            </td>
    77                            <td>{nodes.getIn([c.getIn(['attributes', 'identity']), 'name']) || c.getIn(['attributes', 'ID'])}</td>
    78                            <td>{c.get('remoteAddr')}</td>
    79                            <td>{c.get('type')}</td>
    80                            <td>{c.getIn(['attributes', 'subscriptions']) && c.getIn(['attributes', 'subscriptions']).sort().join(', ')}</td>
    81                          </tr>
    82                      )).toArray()}
    83                    </tbody>
    84                  </table>
    85                </Card>
    86              </div>
    87            </div>
    88            <Card
    89              title="Received messages"
    90              bodyClassName="p-0"
    91            >
    92              <table className="table table-striped table-valign-middle">
    93                <thead>
    94                  <tr>
    95                    <th>Count</th>
    96                    <th>Type</th>
    97                    <th>Body</th>
    98                  </tr>
    99                </thead>
   100                <tbody>
   101                  {messages.reverse().map(message => (
   102                    <tr key={message.id}>
   103                      <td>{message.id}</td>
   104                      <td>{message.type}</td>
   105                      <td>{JSON.stringify(message.body)}</td>
   106                    </tr>
   107                  ))}
   108                </tbody>
   109              </table>
   110            </Card>
   111          </React.Fragment>
   112        );
   113      }
   114  }
   115  
   116  const mapToProps = state => ({
   117    messages: state.getIn(['connection', 'messages']),
   118    connections: state.getIn(['connections', 'list']),
   119    nodes: state.getIn(['nodes', 'list']),
   120  });
   121  
   122  export default connect(mapToProps)(Debug);