947088195

pending completion

Build # 947088195

Build Type

Pull #2661

gitlab-ci

Committed by

mzedel

Commit Message

chore: improved device filter scrolling behaviour

Signed-off-by: Manuel Zedel <manuel.zedel@northern.tech>

Pull Request Pull Request #2661: chore: added lint rules for hooks usage

Run Details

4411 of 6415 branches covered (68.76%)

297 of 440 new or added lines in 62 files covered. (67.5%)

1617 existing lines in 163 files now uncovered.

8311 of 10087 relevant lines covered (82.39%)

192.12 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

90.91

/src/js/components/common/timerange-picker.js

// Copyright 2020 Northern.tech AS
//
//    Licensed under the Apache License, Version 2.0 (the "License");
//    you may not use this file except in compliance with the License.
//    You may obtain a copy of the License at
//
//        http://www.apache.org/licenses/LICENSE-2.0
//
//    Unless required by applicable law or agreed to in writing, software
//    distributed under the License is distributed on an "AS IS" BASIS,
//    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//    See the License for the specific language governing permissions and
//    limitations under the License.
import React, { useEffect, useState } from 'react';

import { getISOStringBoundaries } from '../../helpers';

const timeranges = {
  today: { start: 0, end: 0, title: 'Today' },
  yesterday: { start: 1, end: 1, title: 'Yesterday' },
  week: { start: 6, end: 0, title: 'Last 7 days' },
  month: { start: 29, end: 0, title: 'Last 30 days' }
};

export const TimerangePicker = ({ classNames = '', endDate, onChange, startDate }) => {
  const [active, setActive] = useState();

  useEffect(() => {
    if (!(endDate && startDate)) {
      setActive(Object.keys(timeranges)[0]);
      return;
    }
    if (!(endDate || startDate)) {
      setActive();
      return;
    }
    const currentRange = Object.entries(timeranges).reduce((accu, [key, range]) => {
      let rangeEndDate = new Date();
      rangeEndDate.setDate(rangeEndDate.getDate() - (range.end || 0));
      const { end } = getISOStringBoundaries(rangeEndDate);
      let rangeStartDate = new Date();
      rangeStartDate.setDate(rangeStartDate.getDate() - (range.start || 0));
      const { start } = getISOStringBoundaries(rangeStartDate);
      if (startDate == start && endDate == end) {
        return key;
      }
      return accu;
    }, undefined);
    setActive(currentRange);
  }, [endDate, startDate]);

  const setRange = (after, before) => {
    let newStartDate = new Date();
    newStartDate.setDate(newStartDate.getDate() - (after || 0));
    const { start } = getISOStringBoundaries(newStartDate);
    let newEndDate = new Date();
    newEndDate.setDate(newEndDate.getDate() - (before || 0));
    const { end } = getISOStringBoundaries(newEndDate);
    onChange(start, end);
  };

  return (
    <div className={classNames}>
      <span>Filter by date</span>
      <ul className="unstyled link-list horizontal">
        {Object.entries(timeranges).map(([key, range]) => (
          <li key={`filter-by-${key}`}>
            <a className={active === key ? 'active' : ''} onClick={() => setRange(range.start, range.end)}>
              {range.title}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TimerangePicker;

1	// Copyright 2020 Northern.tech AS
2	//
3	// Licensed under the Apache License, Version 2.0 (the "License");
4	// you may not use this file except in compliance with the License.
5	// You may obtain a copy of the License at
6	//
7	// http://www.apache.org/licenses/LICENSE-2.0
8	//
9	// Unless required by applicable law or agreed to in writing, software
10	// distributed under the License is distributed on an "AS IS" BASIS,
11	// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12	// See the License for the specific language governing permissions and
13	// limitations under the License.
14	import React, { useEffect, useState } from 'react';
15
16	import { getISOStringBoundaries } from '../../helpers';
17
18	const timeranges = {	9✔
19	today: { start: 0, end: 0, title: 'Today' },
20	yesterday: { start: 1, end: 1, title: 'Yesterday' },
21	week: { start: 6, end: 0, title: 'Last 7 days' },
22	month: { start: 29, end: 0, title: 'Last 30 days' }
23	};
24
25	export const TimerangePicker = ({ classNames = '', endDate, onChange, startDate }) => {	9✔
26	const [active, setActive] = useState();	96✔
27
28	useEffect(() => {	96✔
29	if (!(endDate && startDate)) {	15✔
30	setActive(Object.keys(timeranges)[0]);	9✔
31	return;	9✔
32	}
33	if (!(endDate \|\| startDate)) {	6!
UNCOV 34	setActive();	×
UNCOV 35	return;	×
36	}
37	const currentRange = Object.entries(timeranges).reduce((accu, [key, range]) => {	6✔
38	let rangeEndDate = new Date();	24✔
39	rangeEndDate.setDate(rangeEndDate.getDate() - (range.end \|\| 0));	24✔
40	const { end } = getISOStringBoundaries(rangeEndDate);	24✔
41	let rangeStartDate = new Date();	24✔
42	rangeStartDate.setDate(rangeStartDate.getDate() - (range.start \|\| 0));	24✔
43	const { start } = getISOStringBoundaries(rangeStartDate);	24✔
44	if (startDate == start && endDate == end) {	24✔
45	return key;	5✔
46	}
47	return accu;	19✔
48	}, undefined);
49	setActive(currentRange);	6✔
50	}, [endDate, startDate]);
51
52	const setRange = (after, before) => {	96✔
53	let newStartDate = new Date();	3✔
54	newStartDate.setDate(newStartDate.getDate() - (after \|\| 0));	3!
55	const { start } = getISOStringBoundaries(newStartDate);	3✔
56	let newEndDate = new Date();	3✔
57	newEndDate.setDate(newEndDate.getDate() - (before \|\| 0));	3✔
58	const { end } = getISOStringBoundaries(newEndDate);	3✔
59	onChange(start, end);	3✔
60	};
61
62	return (	96✔
63	<div className={classNames}>
64	<span>Filter by date</span>
65	<ul className="unstyled link-list horizontal">
66	{Object.entries(timeranges).map(([key, range]) => (
67	<li key={`filter-by-${key}`}>	384✔
68	<a className={active === key ? 'active' : ''} onClick={() => setRange(range.start, range.end)}>	3✔
69	{range.title}
70	</a>
71	</li>
72	))}
73	</ul>
74	</div>
75	);
76	};
77
78	export default TimerangePicker;

mendersoftware / gui / 947088195

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous