901187442

pending completion

Build # 901187442

Build Type

Pull #3795

gitlab-ci

Committed by

mzedel

Commit Message

feat: increased chances of adopting our intended navigation patterns instead of unsupported browser navigation

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

Pull Request Pull Request #3795: feat: increased chances of adopting our intended navigation patterns instead of unsupported browser navigation

Run Details

4389 of 6365 branches covered (68.96%)

5 of 5 new or added lines in 1 file covered. (100.0%)

1729 existing lines in 165 files now uncovered.

8274 of 10019 relevant lines covered (82.58%)

144.86 hits per line

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

89.09

/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();
      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]);

  useEffect(() => {
    if (!(endDate && startDate)) {
      setActive(Object.keys(timeranges)[0]);
    }
  }, []);

  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();	80✔
27
28	useEffect(() => {	80✔
29	if (!(endDate \|\| startDate)) {	9✔
30	setActive();	8✔
31	return;	8✔
32	}
33	const currentRange = Object.entries(timeranges).reduce((accu, [key, range]) => {	1✔
34	let rangeEndDate = new Date();	4✔
35	rangeEndDate.setDate(rangeEndDate.getDate() - (range.end \|\| 0));	4✔
36	const { end } = getISOStringBoundaries(rangeEndDate);	4✔
37	let rangeStartDate = new Date();	4✔
38	rangeStartDate.setDate(rangeStartDate.getDate() - (range.start \|\| 0));	4✔
39	const { start } = getISOStringBoundaries(rangeStartDate);	4✔
40	if (startDate == start && endDate == end) {	4!
UNCOV 41	return key;	×
42	}
43	return accu;	4✔
44	}, undefined);
45	setActive(currentRange);	1✔
46	}, [endDate, startDate]);
47
48	useEffect(() => {	80✔
49	if (!(endDate && startDate)) {	8!
50	setActive(Object.keys(timeranges)[0]);	8✔
51	}
52	}, []);
53
54	const setRange = (after, before) => {	80✔
55	let newStartDate = new Date();	3✔
56	newStartDate.setDate(newStartDate.getDate() - (after \|\| 0));	3!
57	const { start } = getISOStringBoundaries(newStartDate);	3✔
58	let newEndDate = new Date();	3✔
59	newEndDate.setDate(newEndDate.getDate() - (before \|\| 0));	3✔
60	const { end } = getISOStringBoundaries(newEndDate);	3✔
61	onChange(start, end);	3✔
62	};
63
64	return (	80✔
65	<div className={classNames}>
66	<span>Filter by date</span>
67	<ul className="unstyled link-list horizontal">
68	{Object.entries(timeranges).map(([key, range]) => (
69	<li key={`filter-by-${key}`}>	320✔
70	<a className={active === key ? 'active' : ''} onClick={() => setRange(range.start, range.end)}>	3✔
71	{range.title}
72	</a>
73	</li>
74	))}
75	</ul>
76	</div>
77	);
78	};
79
80	export default TimerangePicker;

mendersoftware / gui / 901187442

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