github.com/argoproj/argo-cd/v3@v3.2.1/ui/src/app/applications/components/pod-logs-viewer/pod-logs-highlight-button.tsx (about)

     1  import * as React from 'react';
     2  import {useState, useRef, useEffect} from 'react';
     3  import {ToggleButton} from '../../../shared/components/toggle-button';
     4  
     5  // PodHighlightButton is a component that renders a toggle button that toggles pod highlighting.
     6  export const PodHighlightButton = ({
     7      selectedPod,
     8      setSelectedPod,
     9      pods,
    10      darkMode
    11  }: {
    12      selectedPod: string | null;
    13      setSelectedPod: (value: string | null) => void;
    14      pods: string[];
    15      darkMode: boolean;
    16  }) => {
    17      const [isOpen, setIsOpen] = useState(false);
    18      const dropdownRef = useRef<HTMLDivElement>(null);
    19  
    20      useEffect(() => {
    21          const handleClickOutside = (event: MouseEvent) => {
    22              if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
    23                  setIsOpen(false);
    24              }
    25          };
    26  
    27          document.addEventListener('mousedown', handleClickOutside);
    28          return () => document.removeEventListener('mousedown', handleClickOutside);
    29      }, []);
    30  
    31      return (
    32          <div ref={dropdownRef} style={{position: 'relative'}}>
    33              <ToggleButton title='Select a pod to highlight its logs' onToggle={() => setIsOpen(!isOpen)} icon='highlighter' toggled={selectedPod !== null} />
    34              {isOpen && (
    35                  <div className={`select-container ${darkMode ? 'dark-mode' : ''}`} style={{position: 'absolute', top: '100%', left: 0, zIndex: 1}}>
    36                      <div className='select-options'>
    37                          {pods.map(pod => (
    38                              <div
    39                                  key={pod}
    40                                  className={`select-option ${selectedPod === pod ? 'selected' : ''} ${darkMode ? 'dark-mode' : ''}`}
    41                                  onClick={() => {
    42                                      setSelectedPod(pod);
    43                                      setIsOpen(false);
    44                                  }}>
    45                                  {pod}
    46                              </div>
    47                          ))}
    48                      </div>
    49                      <div
    50                          className={`select-option clear-highlight ${darkMode ? 'dark-mode' : ''}`}
    51                          onClick={() => {
    52                              setSelectedPod(null);
    53                              setIsOpen(false);
    54                          }}>
    55                          Clear highlight
    56                      </div>
    57                  </div>
    58              )}
    59          </div>
    60      );
    61  };