Details.tsx 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. import React from 'react';
  2. import { ClusterName } from 'redux/interfaces';
  3. import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
  4. import {
  5. clusterConsumerGroupResetOffsetsPath,
  6. clusterConsumerGroupsPath,
  7. } from 'lib/paths';
  8. import { ConsumerGroupID } from 'redux/interfaces/consumerGroup';
  9. import {
  10. ConsumerGroup,
  11. ConsumerGroupDetails,
  12. ConsumerGroupTopicPartition,
  13. } from 'generated-sources';
  14. import PageLoader from 'components/common/PageLoader/PageLoader';
  15. import ConfirmationModal from 'components/common/ConfirmationModal/ConfirmationModal';
  16. import { useHistory } from 'react-router';
  17. import ClusterContext from 'components/contexts/ClusterContext';
  18. import ListItem from './ListItem';
  19. export interface Props extends ConsumerGroup, ConsumerGroupDetails {
  20. clusterName: ClusterName;
  21. partitions?: ConsumerGroupTopicPartition[];
  22. isFetched: boolean;
  23. isDeleted: boolean;
  24. fetchConsumerGroupDetails: (
  25. clusterName: ClusterName,
  26. consumerGroupID: ConsumerGroupID
  27. ) => void;
  28. deleteConsumerGroup: (clusterName: string, id: ConsumerGroupID) => void;
  29. }
  30. const Details: React.FC<Props> = ({
  31. clusterName,
  32. groupId,
  33. partitions,
  34. isFetched,
  35. isDeleted,
  36. fetchConsumerGroupDetails,
  37. deleteConsumerGroup,
  38. }) => {
  39. React.useEffect(() => {
  40. fetchConsumerGroupDetails(clusterName, groupId);
  41. }, [fetchConsumerGroupDetails, clusterName, groupId]);
  42. const items = partitions || [];
  43. const [isConfirmationModelVisible, setIsConfirmationModelVisible] =
  44. React.useState<boolean>(false);
  45. const history = useHistory();
  46. const { isReadOnly } = React.useContext(ClusterContext);
  47. const onDelete = () => {
  48. setIsConfirmationModelVisible(false);
  49. deleteConsumerGroup(clusterName, groupId);
  50. };
  51. React.useEffect(() => {
  52. if (isDeleted) {
  53. history.push(clusterConsumerGroupsPath(clusterName));
  54. }
  55. }, [isDeleted]);
  56. const onResetOffsets = () => {
  57. history.push(clusterConsumerGroupResetOffsetsPath(clusterName, groupId));
  58. };
  59. return (
  60. <div className="section">
  61. <div className="level">
  62. <div className="level-item level-left">
  63. <Breadcrumb
  64. links={[
  65. {
  66. href: clusterConsumerGroupsPath(clusterName),
  67. label: 'All Consumer Groups',
  68. },
  69. ]}
  70. >
  71. {groupId}
  72. </Breadcrumb>
  73. </div>
  74. </div>
  75. {isFetched ? (
  76. <div className="box">
  77. {!isReadOnly && (
  78. <div className="level">
  79. <div className="level-item level-right buttons">
  80. <button
  81. type="button"
  82. className="button"
  83. onClick={onResetOffsets}
  84. >
  85. Reset offsets
  86. </button>
  87. <button
  88. type="button"
  89. className="button is-danger"
  90. onClick={() => setIsConfirmationModelVisible(true)}
  91. >
  92. Delete consumer group
  93. </button>
  94. </div>
  95. </div>
  96. )}
  97. <table className="table is-striped is-fullwidth">
  98. <thead>
  99. <tr>
  100. <th>Consumer ID</th>
  101. <th>Host</th>
  102. <th>Topic</th>
  103. <th>Partition</th>
  104. <th>Messages behind</th>
  105. <th>Current offset</th>
  106. <th>End offset</th>
  107. </tr>
  108. </thead>
  109. <tbody>
  110. {items.length === 0 && (
  111. <tr>
  112. <td colSpan={10}>No active consumer groups</td>
  113. </tr>
  114. )}
  115. {items.map((consumer) => (
  116. <ListItem
  117. key={consumer.consumerId}
  118. clusterName={clusterName}
  119. consumer={consumer}
  120. />
  121. ))}
  122. </tbody>
  123. </table>
  124. </div>
  125. ) : (
  126. <PageLoader />
  127. )}
  128. <ConfirmationModal
  129. isOpen={isConfirmationModelVisible}
  130. onCancel={() => setIsConfirmationModelVisible(false)}
  131. onConfirm={onDelete}
  132. >
  133. Are you sure you want to delete this consumer group?
  134. </ConfirmationModal>
  135. </div>
  136. );
  137. };
  138. export default Details;