ClustersWidget.tsx 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. import React from 'react';
  2. import { chunk } from 'lodash';
  3. import { Cluster } from 'redux/interfaces';
  4. import MetricsWrapper from 'components/common/Dashboard/MetricsWrapper';
  5. import Indicator from 'components/common/Dashboard/Indicator';
  6. import ClusterWidget from './ClusterWidget';
  7. interface Props {
  8. clusters: Cluster[];
  9. onlineClusters: Cluster[];
  10. offlineClusters: Cluster[];
  11. }
  12. const ClustersWidget: React.FC<Props> = ({
  13. clusters,
  14. onlineClusters,
  15. offlineClusters,
  16. }) => {
  17. const [showOfflineOnly, setShowOfflineOnly] = React.useState<boolean>(false);
  18. const clusterList: Array<Cluster[]> = React.useMemo(() => {
  19. let list = clusters;
  20. if (showOfflineOnly) {
  21. list = offlineClusters;
  22. }
  23. return chunk(list, 2);
  24. },
  25. [clusters, offlineClusters, showOfflineOnly],
  26. );
  27. const handleSwitch = () => setShowOfflineOnly(!showOfflineOnly);
  28. return (
  29. <div>
  30. <h5 className="title is-5">
  31. Clusters
  32. </h5>
  33. <MetricsWrapper>
  34. <Indicator label="Online Clusters" >
  35. <span className="tag is-primary">
  36. {onlineClusters.length}
  37. </span>
  38. </Indicator>
  39. <Indicator label="Offline Clusters">
  40. <span className="tag is-danger">
  41. {offlineClusters.length}
  42. </span>
  43. </Indicator>
  44. <Indicator label="Hide online clusters">
  45. <input
  46. type="checkbox"
  47. className="switch is-rounded"
  48. name="switchRoundedDefault"
  49. id="switchRoundedDefault"
  50. checked={showOfflineOnly}
  51. onChange={handleSwitch}
  52. />
  53. <label htmlFor="switchRoundedDefault">
  54. </label>
  55. </Indicator>
  56. </MetricsWrapper>
  57. {clusterList.map((chunk, idx) => (
  58. <div className="columns" key={`dashboard-cluster-list-row-key-${idx}`}>
  59. {chunk.map((cluster, idx) => (
  60. <ClusterWidget {...cluster} key={`dashboard-cluster-list-item-key-${idx}`}/>
  61. ))}
  62. </div>
  63. ))}
  64. </div>
  65. )
  66. };
  67. export default ClustersWidget;