963002358

pending completion

Build # 963002358

Build Type

Pull #3870

gitlab-ci

Committed by

mzedel

Commit Message

chore: cleaned up left over onboarding tooltips & aligned with updated design

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

Pull Request Pull Request #3870: MEN-5413

Run Details

4348 of 6319 branches covered (68.81%)

95 of 122 new or added lines in 24 files covered. (77.87%)

1734 existing lines in 160 files now uncovered.

8174 of 9951 relevant lines covered (82.14%)

178.12 hits per line

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

45.59

/src/js/components/devices/troubleshoot/terminal.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, { useCallback, useEffect, useMemo, useState } from 'react';

import { FitAddon } from 'xterm-addon-fit';
import { WebLinksAddon } from 'xterm-addon-web-links';

import { TIMEOUTS } from '../../../constants/appConstants';
import { DEVICE_MESSAGE_TYPES as MessageTypes } from '../../../constants/deviceConstants';
import useWindowSize from '../../../utils/resizehook';
import XTerm from '../../common/xterm';

const fitAddon = new FitAddon();

export const options = {
  cursorBlink: 'block',
  macOptionIsMeta: true
};

// only matching absolute paths, so: /here/there - but not ../here or ./here or here/there
const unixPathRegex = new RegExp('(\\/([^\\0\\s!$`&*()\\[\\]+\'":;\\\\])+)');

export const Terminal = ({ onDownloadClick, sendMessage, setSnackbar, socketInitialized, textInput, xtermRef, ...xtermProps }) => {
  const [dimensions, setDimensions] = useState({});
  const [isVisible, setIsVisible] = useState(false);
  const size = useWindowSize();

  const observer = useMemo(() => new IntersectionObserver(([entry]) => setIsVisible(entry.isIntersecting)), []);
  const addons = useMemo(() => [fitAddon], []);

  const tryFit = useCallback(() => {
    try {
      fitAddon.fit();
    } catch {
      setSnackbar('Fit not possible, terminal not yet visible', TIMEOUTS.fiveSeconds);
    }
  }, [setSnackbar]);

  useEffect(() => {
    if (!socketInitialized) {
      return;
    }
    observer.observe(xtermRef.current.terminalRef.current);
    // Remove the observer as soon as the component is unmounted
    return () => {
      observer.disconnect();
    };
  }, [observer, sendMessage, socketInitialized, xtermRef]);

  useEffect(() => {
    if (!socketInitialized || !xtermRef.current?.terminal?.current) {
      return;
    }
    xtermRef.current.terminal.current.reset();
    const webLinksAddon = new WebLinksAddon((e, link) => onDownloadClick(link), { urlRegex: unixPathRegex }, true);
    xtermRef.current.terminal.current.loadAddon(webLinksAddon);
    tryFit();
    const { rows = 40, cols = 80 } = fitAddon.proposeDimensions() || {};
    sendMessage({ typ: MessageTypes.Resize, props: { terminal_height: rows, terminal_width: cols } });
    setDimensions({ rows, cols });
    xtermRef.current.terminal.current.focus();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [onDownloadClick, socketInitialized, tryFit, sendMessage]);

  useEffect(() => {
    if (!socketInitialized || !xtermRef.current.terminal || !isVisible) {
      return;
    }
    fitAddon.fit();
    const newDimensions = fitAddon.proposeDimensions();
    if (newDimensions.rows != dimensions.rows || newDimensions.cols != dimensions.cols) {
      //
      sendMessage({
        typ: MessageTypes.Resize,
        props: { terminal_height: newDimensions.rows, terminal_width: newDimensions.cols }
      });
      setDimensions(newDimensions);
    }
  }, [size, isVisible, socketInitialized, xtermRef, dimensions.rows, dimensions.cols, sendMessage]);

  useEffect(() => {
    if (!socketInitialized || !xtermRef.current.terminal || !textInput) {
      return;
    }
    xtermRef.current.terminal.current.paste(textInput);
  }, [socketInitialized, textInput, xtermRef]);

  const onData = useCallback(data => sendMessage({ typ: MessageTypes.Shell, body: data }), [sendMessage]);

  return <XTerm xtermRef={xtermRef} addons={addons} options={options} onData={onData} {...xtermProps} />;
};

export default Terminal;

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, { useCallback, useEffect, useMemo, useState } from 'react';
15
16	import { FitAddon } from 'xterm-addon-fit';
17	import { WebLinksAddon } from 'xterm-addon-web-links';
18
19	import { TIMEOUTS } from '../../../constants/appConstants';
20	import { DEVICE_MESSAGE_TYPES as MessageTypes } from '../../../constants/deviceConstants';
21	import useWindowSize from '../../../utils/resizehook';
22	import XTerm from '../../common/xterm';
23
24	const fitAddon = new FitAddon();	13✔
25
26	export const options = {	13✔
27	cursorBlink: 'block',
28	macOptionIsMeta: true
29	};
30
31	// only matching absolute paths, so: /here/there - but not ../here or ./here or here/there
32	const unixPathRegex = new RegExp('(\\/([^\\0\\s!$`&*()\\[\\]+\'":;\\\\])+)');	13✔
33
34	export const Terminal = ({ onDownloadClick, sendMessage, setSnackbar, socketInitialized, textInput, xtermRef, ...xtermProps }) => {	13✔
35	const [dimensions, setDimensions] = useState({});	2✔
36	const [isVisible, setIsVisible] = useState(false);	2✔
37	const size = useWindowSize();	2✔
38
39	const observer = useMemo(() => new IntersectionObserver(([entry]) => setIsVisible(entry.isIntersecting)), []);	2✔
40	const addons = useMemo(() => [fitAddon], []);	2✔
41
42	const tryFit = useCallback(() => {	2✔
UNCOV 43	try {	×
UNCOV 44	fitAddon.fit();	×
45	} catch {
UNCOV 46	setSnackbar('Fit not possible, terminal not yet visible', TIMEOUTS.fiveSeconds);	×
47	}
48	}, [setSnackbar]);
49
50	useEffect(() => {	2✔
51	if (!socketInitialized) {	2!
52	return;	2✔
53	}
UNCOV 54	observer.observe(xtermRef.current.terminalRef.current);	×
55	// Remove the observer as soon as the component is unmounted
UNCOV 56	return () => {	×
UNCOV 57	observer.disconnect();	×
58	};
59	}, [observer, sendMessage, socketInitialized, xtermRef]);
60
61	useEffect(() => {	2✔
62	if (!socketInitialized \|\| !xtermRef.current?.terminal?.current) {	2!
63	return;	2✔
64	}
UNCOV 65	xtermRef.current.terminal.current.reset();	×
UNCOV 66	const webLinksAddon = new WebLinksAddon((e, link) => onDownloadClick(link), { urlRegex: unixPathRegex }, true);	×
UNCOV 67	xtermRef.current.terminal.current.loadAddon(webLinksAddon);	×
UNCOV 68	tryFit();	×
UNCOV 69	const { rows = 40, cols = 80 } = fitAddon.proposeDimensions() \|\| {};	×
UNCOV 70	sendMessage({ typ: MessageTypes.Resize, props: { terminal_height: rows, terminal_width: cols } });	×
UNCOV 71	setDimensions({ rows, cols });	×
UNCOV 72	xtermRef.current.terminal.current.focus();	×
73	// eslint-disable-next-line react-hooks/exhaustive-deps
74	}, [onDownloadClick, socketInitialized, tryFit, sendMessage]);
75
76	useEffect(() => {	2✔
77	if (!socketInitialized \|\| !xtermRef.current.terminal \|\| !isVisible) {	2!
78	return;	2✔
79	}
UNCOV 80	fitAddon.fit();	×
UNCOV 81	const newDimensions = fitAddon.proposeDimensions();	×
UNCOV 82	if (newDimensions.rows != dimensions.rows \|\| newDimensions.cols != dimensions.cols) {	×
83	//
UNCOV 84	sendMessage({	×
85	typ: MessageTypes.Resize,
86	props: { terminal_height: newDimensions.rows, terminal_width: newDimensions.cols }
87	});
UNCOV 88	setDimensions(newDimensions);	×
89	}
90	}, [size, isVisible, socketInitialized, xtermRef, dimensions.rows, dimensions.cols, sendMessage]);
91
92	useEffect(() => {	2✔
93	if (!socketInitialized \|\| !xtermRef.current.terminal \|\| !textInput) {	2!
94	return;	2✔
95	}
UNCOV 96	xtermRef.current.terminal.current.paste(textInput);	×
97	}, [socketInitialized, textInput, xtermRef]);
98
99	const onData = useCallback(data => sendMessage({ typ: MessageTypes.Shell, body: data }), [sendMessage]);	2✔
100
101	return <XTerm xtermRef={xtermRef} addons={addons} options={options} onData={onData} {...xtermProps} />;	2✔
102	};
103
104	export default Terminal;

mendersoftware / gui / 963002358

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