"Fossies" - the Fresh Open Source Software Archive

Member "graylog2-server-4.0.6/graylog2-web-interface/src/views/components/searchbar/AbsoluteTimeRangeSelector.jsx" (7 Apr 2021, 3414 Bytes) of package /linux/misc/graylog2-server-4.0.6.tar.gz:


As a special service "Fossies" has tried to format the requested source page into HTML format using (guessed) JSX source code syntax highlighting (style: standard) with prefixed line numbers. Alternatively you can here view or download the uninterpreted source code file. See also the last Fossies "Diffs" side-by-side code changes report for "AbsoluteTimeRangeSelector.jsx": 3.3.8_vs_4.0.0.

    1 /*
    2  * Copyright (C) 2020 Graylog, Inc.
    3  *
    4  * This program is free software: you can redistribute it and/or modify
    5  * it under the terms of the Server Side Public License, version 1,
    6  * as published by MongoDB, Inc.
    7  *
    8  * This program is distributed in the hope that it will be useful,
    9  * but WITHOUT ANY WARRANTY; without even the implied warranty of
   10  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
   11  * Server Side Public License for more details.
   12  *
   13  * You should have received a copy of the Server Side Public License
   14  * along with this program. If not, see
   15  * <http://www.mongodb.com/licensing/server-side-public-license>.
   16  */
   17 // @flow strict
   18 import * as React from 'react';
   19 import PropTypes from 'prop-types';
   20 import { Field } from 'formik';
   21 import styled, { css } from 'styled-components';
   22 import type { StyledComponent } from 'styled-components';
   23 
   24 import DateTime from 'logic/datetimes/DateTime';
   25 import { Icon } from 'components/common';
   26 import type { ThemeInterface } from 'theme';
   27 
   28 import TimerangeSelector from './TimerangeSelector';
   29 import DateInputWithPicker from './DateInputWithPicker';
   30 
   31 type Props = {
   32   disabled: boolean,
   33 };
   34 
   35 const StyledTimerangeSelector: StyledComponent<{}, void, *> = styled(TimerangeSelector)`
   36   display: flex;
   37 `;
   38 
   39 const InputWrap: StyledComponent<{}, void, HTMLDivElement> = styled.div`
   40   width: 200px;
   41 `;
   42 
   43 const Separator: StyledComponent<{}, ThemeInterface, HTMLParagraphElement> = styled.p(({ theme }) => css`
   44   margin: 0;
   45   line-height: 34px;
   46   font-size: ${theme.fonts.size.large};
   47   padding-left: 15px;
   48   padding-right: 15px;
   49 `);
   50 
   51 const _isValidDateString = (dateString: string) => {
   52   if (dateString === undefined) {
   53     return undefined;
   54   }
   55 
   56   return DateTime.isValidDateString(dateString)
   57     ? undefined
   58     : 'Format must be: YYYY-MM-DD [HH:mm:ss[.SSS]]';
   59 };
   60 
   61 const AbsoluteTimeRangeSelector = ({ disabled }: Props) => {
   62   return (
   63     <StyledTimerangeSelector className="absolute">
   64       <Field name="timerange.from" validate={_isValidDateString}>
   65         {({ field: { value, onChange, onBlur, name }, meta: { error } }) => (
   66           <InputWrap>
   67             <DateInputWithPicker disabled={disabled}
   68                                  onChange={onChange}
   69                                  onBlur={onBlur}
   70                                  value={value}
   71                                  name={name}
   72                                  title="Search start date"
   73                                  error={error} />
   74           </InputWrap>
   75         )}
   76       </Field>
   77 
   78       <Separator className="text-center">
   79         <Icon name="long-arrow-alt-right" />
   80       </Separator>
   81 
   82       <Field name="timerange.to" validate={_isValidDateString}>
   83         {({ field: { value, onChange, onBlur, name }, meta: { error } }) => (
   84           <InputWrap>
   85             <DateInputWithPicker disabled={disabled}
   86                                  onChange={onChange}
   87                                  onBlur={onBlur}
   88                                  value={value}
   89                                  name={name}
   90                                  title="Search end date"
   91                                  error={error} />
   92           </InputWrap>
   93         )}
   94       </Field>
   95     </StyledTimerangeSelector>
   96   );
   97 };
   98 
   99 AbsoluteTimeRangeSelector.propTypes = {
  100   disabled: PropTypes.bool,
  101 };
  102 
  103 AbsoluteTimeRangeSelector.defaultProps = {
  104   disabled: false,
  105 };
  106 
  107 export default AbsoluteTimeRangeSelector;