Improve live tailing. (#1898)

* disable filter options when live tailing mode is enabled

* prevent seek direction change when stop loading is pressed on live mode

* disable submit button while tailing

* write tests for MultiSelect.styled component to achieve 100% coverage

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/Filters.tsx

@@ -129,18 +129,22 @@ const Filters: React.FC<FiltersProps> = ({
  : MessageFilterType.STRING_CONTAINS
  );
  const [query, setQuery] = React.useState<string>(searchParams.get('q') || '');
+ const [isTailing, setIsTailing] = React.useState<boolean>(isLive);
+
  const isSeekTypeControlVisible = React.useMemo(
  () => selectedPartitions.length > 0,
  [selectedPartitions]
  );
 
  const isSubmitDisabled = React.useMemo(() => {
  if (isSeekTypeControlVisible) {
- return currentSeekType === SeekType.TIMESTAMP && !timestamp;
+ return (
+ (currentSeekType === SeekType.TIMESTAMP && !timestamp) || isTailing
+ );
  }
 
  return false;
- }, [isSeekTypeControlVisible, currentSeekType, timestamp]);
+ }, [isSeekTypeControlVisible, currentSeekType, timestamp, isTailing]);
 
  const partitionMap = React.useMemo(
  () =>
@@ -345,13 +349,18 @@ const Filters: React.FC<FiltersProps> = ({
  handleFiltersSubmit(offset);
  }, [handleFiltersSubmit, seekDirection]);
 
+ React.useEffect(() => {
+ setIsTailing(isLive);
+ }, [isLive]);
+
  return (
  <S.FiltersWrapper>
  <div>
  <S.FilterInputs>
  <Search
  placeholder="Search"
  value={query}
+ disabled={isTailing}
  handleSearch={(value: string) => setQuery(value)}
  />
  <S.SeekTypeSelectorWrapper>
@@ -362,7 +371,7 @@ const Filters: React.FC<FiltersProps> = ({
  selectSize="M"
  minWidth="100px"
  options={SeekTypeOptions}
- disabled={isLive}
+ disabled={isTailing}
  />
  {currentSeekType === SeekType.OFFSET ? (
  <Input
@@ -373,7 +382,7 @@ const Filters: React.FC<FiltersProps> = ({
  className="offset-selector"
  placeholder="Offset"
  onChange={({ target: { value } }) => setOffset(value)}
- disabled={isLive}
+ disabled={isTailing}
  />
  ) : (
  <DatePicker
@@ -384,7 +393,7 @@ const Filters: React.FC<FiltersProps> = ({
  dateFormat="MMMM d, yyyy HH:mm"
  className="date-picker"
  placeholderText="Select timestamp"
- disabled={isLive}
+ disabled={isTailing}
  />
  )}
  </S.SeekTypeSelectorWrapper>
@@ -397,6 +406,7 @@ const Filters: React.FC<FiltersProps> = ({
  value={selectedPartitions}
  onChange={setSelectedPartitions}
  labelledBy="Select partitions"
+ disabled={isTailing}
  />
  <S.ClearAll onClick={handleClearAllFilters}>Clear all</S.ClearAll>
  {isFetching ? (
@@ -465,13 +475,13 @@ const Filters: React.FC<FiltersProps> = ({
  isFetching &&
  phaseMessage}
  </p>
- <S.MessageLoading isLive={isLive}>
+ <S.MessageLoading isLive={isTailing}>
  <S.MessageLoadingSpinner isFetching={isFetching} />
  Loading messages.
  <S.StopLoading
  onClick={() => {
- changeSeekDirection(SeekDirection.FORWARD);
- setIsFetching(false);
+ handleSSECancel();
+ setIsTailing(false);
  }}
  >
  Stop loading

kafka-ui-react-app/src/components/common/MultiSelect/MultiSelect.styled.ts

@@ -9,8 +9,14 @@ const MultiSelect = styled(ReactMultiSelect)<{ minWidth?: string }>`
  & > .dropdown-container {
  height: 32px;
 
+ * {
+ cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+ }
+
  & > .dropdown-heading {
  height: 32px;
+ color: ${({ disabled, theme }) =>
+ disabled ? theme.select.color.disabled : theme.select.color.active};
  }
  }
 `;

kafka-ui-react-app/src/components/common/MultiSelect/__test__/MultiSelect.styled.spec.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { render } from 'lib/testHelpers';
+import MultiSelect from 'components/common/MultiSelect/MultiSelect.styled';
+import { ISelectProps } from 'react-multi-select-component/dist/lib/interfaces';
+
+const Option1 = { value: 1, label: 'option 1' };
+const Option2 = { value: 2, label: 'option 2' };
+
+interface IMultiSelectProps extends ISelectProps {
+ minWidth?: string;
+}
+
+const DefaultProps: IMultiSelectProps = {
+ options: [Option1, Option2],
+ labelledBy: 'multi-select',
+ value: [Option1, Option2],
+};
+
+describe('MultiSelect.Styled', () => {
+ const setUpComponent = (props: IMultiSelectProps = DefaultProps) => {
+ const { container } = render(<MultiSelect {...props} />);
+ const multiSelect = container.firstChild;
+ const dropdownContainer = multiSelect?.firstChild?.firstChild;
+
+ return { container, multiSelect, dropdownContainer };
+ };
+
+ it('should have 200px minWidth by default', () => {
+ const { container } = setUpComponent();
+ const multiSelect = container.firstChild;
+
+ expect(multiSelect).toHaveStyle('min-width: 200px');
+ });
+
+ it('should have the provided minWidth in styles', () => {
+ const minWidth = '400px';
+ const { container } = setUpComponent({ ...DefaultProps, minWidth });
+ const multiSelect = container.firstChild;
+
+ expect(multiSelect).toHaveStyle(`min-width: ${minWidth}`);
+ });
+
+ describe('when not disabled', () => {
+ it('should have cursor pointer', () => {
+ const { dropdownContainer } = setUpComponent();
+
+ expect(dropdownContainer).toHaveStyle(`cursor: pointer`);
+ });
+ });
+
+ describe('when disabled', () => {
+ it('should have cursor not-allowed', () => {
+ const { dropdownContainer } = setUpComponent({
+ ...DefaultProps,
+ disabled: true,
+ });
+
+ expect(dropdownContainer).toHaveStyle(`cursor: not-allowed`);
+ });
+ });
+});

kafka-ui-react-app/src/components/common/Search/Search.tsx

@@ -6,12 +6,14 @@ interface SearchProps {
  handleSearch: (value: string) => void;
  placeholder?: string;
  value: string;
+ disabled?: boolean;
 }
 
 const Search: React.FC<SearchProps> = ({
  handleSearch,
  placeholder = 'Search',
  value,
+ disabled = false,
 }) => {
  const onChange = useDebouncedCallback(
  (e) => handleSearch(e.target.value),
@@ -26,6 +28,7 @@ const Search: React.FC<SearchProps> = ({
  defaultValue={value}
  leftIcon="fas fa-search"
  inputSize="M"
+ disabled={disabled}
  />
  );
 };