adminRelays.tsx 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. import {Component} from 'react';
  2. import {RouteComponentProps} from 'react-router';
  3. import moment from 'moment';
  4. import {Client} from 'sentry/api';
  5. import LinkWithConfirmation from 'sentry/components/links/linkWithConfirmation';
  6. import ResultGrid from 'sentry/components/resultGrid';
  7. import {t} from 'sentry/locale';
  8. import withApi from 'sentry/utils/withApi';
  9. const prettyDate = (x: string) => moment(x).format('ll LTS');
  10. type Props = RouteComponentProps<{}, {}> & {api: Client};
  11. type State = {
  12. loading: boolean;
  13. };
  14. type RelayRow = {
  15. firstSeen: string;
  16. id: string;
  17. lastSeen: string;
  18. publicKey: string;
  19. relayId: string;
  20. };
  21. class AdminRelays extends Component<Props, State> {
  22. state: State = {
  23. loading: false,
  24. };
  25. onDelete(key: string) {
  26. this.setState({loading: true});
  27. this.props.api.request(`/relays/${key}/`, {
  28. method: 'DELETE',
  29. success: () => this.setState({loading: false}),
  30. error: () => this.setState({loading: false}),
  31. });
  32. }
  33. getRow(row: RelayRow) {
  34. return [
  35. <td key="id">
  36. <strong>{row.relayId}</strong>
  37. </td>,
  38. <td key="key">{row.publicKey}</td>,
  39. <td key="firstSeen" style={{textAlign: 'right'}}>
  40. {prettyDate(row.firstSeen)}
  41. </td>,
  42. <td key="lastSeen" style={{textAlign: 'right'}}>
  43. {prettyDate(row.lastSeen)}
  44. </td>,
  45. <td key="tools" style={{textAlign: 'right'}}>
  46. <span className="editor-tools">
  47. <LinkWithConfirmation
  48. className="danger"
  49. title="Remove"
  50. message={t('Are you sure you wish to delete this relay?')}
  51. onConfirm={() => this.onDelete(row.id)}
  52. >
  53. {t('Remove')}
  54. </LinkWithConfirmation>
  55. </span>
  56. </td>,
  57. ];
  58. }
  59. render() {
  60. const columns = [
  61. <th key="id" style={{width: 350, textAlign: 'left'}}>
  62. Relay
  63. </th>,
  64. <th key="key">Public Key</th>,
  65. <th key="firstSeen" style={{width: 150, textAlign: 'right'}}>
  66. First seen
  67. </th>,
  68. <th key="lastSeen" style={{width: 150, textAlign: 'right'}}>
  69. Last seen
  70. </th>,
  71. <th key="tools" />,
  72. ];
  73. return (
  74. <div>
  75. <h3>{t('Relays')}</h3>
  76. <ResultGrid
  77. path="/manage/relays/"
  78. endpoint="/relays/"
  79. method="GET"
  80. columns={columns}
  81. columnsForRow={this.getRow}
  82. hasSearch={false}
  83. sortOptions={[
  84. ['firstSeen', 'First seen'],
  85. ['lastSeen', 'Last seen'],
  86. ['relayId', 'Relay ID'],
  87. ]}
  88. defaultSort="firstSeen"
  89. {...this.props}
  90. />
  91. </div>
  92. );
  93. }
  94. }
  95. export {AdminRelays};
  96. export default withApi(AdminRelays);