jeans/etcher
jeans/etcher
1
0
Fork 0
mirror of https://github.com/balena-io/etcher.git synced 2025-07-27 21:26:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

patch: changed iframe css; fixed lint

Browse Source 
Change-Type: patch
This commit is contained in:
Peter Makra 2022-01-20 13:26:19 +01:00
parent ac77ac7546
commit 507ca28234
1 changed files with 126 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

227
lib/gui/app/components/settings/settings.tsx
View File

@ -19,15 +19,15 @@ import * as _ from 'lodash';
import * as os from 'os'; import * as os from 'os';
import * as React from 'react'; import * as React from 'react';
import { Box, Button, Flex, Checkbox, Txt } from 'rendition'; import { Box, Button, Flex, Checkbox, Txt } from 'rendition';
import { faTimes } from '@fortawesome/free-solid-svg-icons' import { faTimes } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { version, packageType } from '../../../../../package.json'; import { version, packageType } from '../../../../../package.json';
import * as settings from '../../models/settings'; import * as settings from '../../models/settings';
import * as analytics from '../../modules/analytics'; import * as analytics from '../../modules/analytics';
import { open as openExternal } from '../../os/open-external/services/open-external'; import { open as openExternal } from '../../os/open-external/services/open-external';
import { Modal } from '../../styled-components'; import { Modal } from '../../styled-components';
import { unlinkSync, readFileSync } from 'fs' import { unlinkSync, readFileSync } from 'fs';
const platform = os.platform(); const platform = os.platform();
@ -71,11 +71,13 @@ interface SettingsModalProps {
export function SettingsModal({ toggleModal }: SettingsModalProps): any { export function SettingsModal({ toggleModal }: SettingsModalProps): any {
const [settingsList, setCurrentSettingsList] = React.useState<Setting[]>([]); const [settingsList, setCurrentSettingsList] = React.useState<Setting[]>([]);
const [showDiagScreen, setShowDiagScreen] = React.useState<Boolean>(false); const [showDiagScreen, setShowDiagScreen] = React.useState<boolean>(false);
const [diagApiIsUp, setDiagApiIsUp] = React.useState<Boolean>(false); const [diagApiIsUp, setDiagApiIsUp] = React.useState<boolean>(false);
const [showDiagButton, setShowDiagButton] = React.useState<Boolean>(false); const [showDiagButton, setShowDiagButton] = React.useState<boolean>(false);
const [currentSettings, setCurrentSettings] = React.useState<_.Dictionary<boolean>>({}); const [currentSettings, setCurrentSettings] = React.useState<
const [errorMessage, setErrorMessage] = React.useState<String>(""); _.Dictionary<boolean>
>({});
const [errorMessage, setErrorMessage] = React.useState<string>('');
let diagCount = 0; let diagCount = 0;
React.useEffect(() => { React.useEffect(() => {
@ -85,7 +87,7 @@ export function SettingsModal({ toggleModal }: SettingsModalProps): any {
} }
})(); })();
}); });
React.useEffect(() => { React.useEffect(() => {
(async () => { (async () => {
if (_.isEmpty(currentSettings)) { if (_.isEmpty(currentSettings)) {
@ -95,12 +97,12 @@ export function SettingsModal({ toggleModal }: SettingsModalProps): any {
}); });
React.useEffect(() => { React.useEffect(() => {
(async() => { (async () => {
try { try {
let result = await fetch('http://localhost:3000/api/ping') const result = await fetch('http://localhost:3000/api/ping');
if (result.ok) { if (result.ok) {
setShowDiagButton(true) setShowDiagButton(true);
setDiagApiIsUp(true) setDiagApiIsUp(true);
} }
} catch { } catch {
// no diag container // no diag container
@ -130,66 +132,79 @@ export function SettingsModal({ toggleModal }: SettingsModalProps): any {
}; };
const closeDiagFrame = () => { const closeDiagFrame = () => {
setShowDiagScreen(false); setShowDiagScreen(false);
} };
const openDiagFrame = () => { const openDiagFrame = () => {
setShowDiagScreen(true); setShowDiagScreen(true);
} };
const prepareDiag = () => { const prepareDiag = () => {
if (++diagCount > 5) { if (++diagCount > 5) {
setShowDiagButton(true); setShowDiagButton(true);
} }
} };
const startDiag = async () => { const startDiag = async () => {
unlinkSync("/usr/src/diag-data/startup.lock"); unlinkSync('/usr/src/diag-data/startup.lock');
const supUrl: string = readFileSync("/usr/src/diag-data/start.url", {encoding:'utf8', flag:'r'}) const supUrl: string = readFileSync('/usr/src/diag-data/start.url', {
const startRes = await fetch(supUrl, { encoding: 'utf8',
method: "POST", flag: 'r',
});
const startRes = await fetch(supUrl, {
method: 'POST',
body: JSON.stringify({ serviceName: 'diag-runner', force: true }), body: JSON.stringify({ serviceName: 'diag-runner', force: true }),
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json',
} },
}) });
if (startRes.ok) { if (startRes.ok) {
// good // good
} else { } else {
setErrorMessage(`${errorMessage} :: ${startRes.statusText}`) setErrorMessage(`${errorMessage} :: ${startRes.statusText}`);
} }
} };
const removeDiag = async () => { const removeDiag = async () => {
setErrorMessage(""); setErrorMessage('');
try { try {
const supervisorUrl = await (await fetch(`http://localhost:3000/api/supervisor/url`)).text() const supervisorUrl = await (
const supervisorApiKey = await (await fetch(`http://localhost:3000/api/supervisor/apiKey`)).text() await fetch(`http://localhost:3000/api/supervisor/url`)
const appId = await (await fetch(`http://localhost:3000/api/supervisor/appid`)).text() ).text();
const createLock = await fetch(`http://localhost:3000/api/supervisor/createlock`) const supervisorApiKey = await (
await fetch(`http://localhost:3000/api/supervisor/apiKey`)
const stopRes = await fetch(`${supervisorUrl}/v2/applications/${appId}/stop-service?apikey=${supervisorApiKey}`, { ).text();
method: "POST", const appId = await (
body: JSON.stringify({ serviceName: 'diag-runner', force: true }), await fetch(`http://localhost:3000/api/supervisor/appid`)
headers: { ).text();
'Content-Type': 'application/json' const createLock = await fetch(
} `http://localhost:3000/api/supervisor/createlock`,
}) );
const stopRes = await fetch(
`${supervisorUrl}/v2/applications/${appId}/stop-service?apikey=${supervisorApiKey}`,
{
method: 'POST',
body: JSON.stringify({ serviceName: 'diag-runner', force: true }),
headers: {
'Content-Type': 'application/json',
},
},
);
if (!stopRes.ok) { if (!stopRes.ok) {
setErrorMessage(`Stop call failed | ${stopRes.statusText}`) setErrorMessage(`Stop call failed | ${stopRes.statusText}`);
} }
if (!createLock.ok) { if (!createLock.ok) {
setErrorMessage(`${errorMessage} :: Create lock file failed :: `) setErrorMessage(`${errorMessage} :: Create lock file failed :: `);
} }
} catch (err) { } catch (err) {
setErrorMessage(err) setErrorMessage(err);
} }
} };
return ( return (
<Modal <Modal
@ -223,75 +238,85 @@ export function SettingsModal({ toggleModal }: SettingsModalProps): any {
cursor: 'pointer', cursor: 'pointer',
fontSize: 14, fontSize: 14,
}} }}
onClick={() => { onClick={() => {
openExternal( openExternal(
'https://github.com/balena-io/etcher/blob/master/CHANGELOG.md', 'https://github.com/balena-io/etcher/blob/master/CHANGELOG.md',
); );
prepareDiag(); prepareDiag();
} }}
}
> >
<GithubSvg <GithubSvg
height="1em" height="1em"
fill="currentColor" fill="currentColor"
style={{ marginRight: 8 }} style={{ marginRight: 8 }}
/> />
<Txt style={{ borderBottom: '1px solid #00aeef' }}>{version}</Txt> <Txt style={{ borderBottom: '1px solid #00aeef' }}>{version}</Txt>
</Flex> </Flex>
{showDiagButton ? <Box> {showDiagButton ? (
{diagApiIsUp ? <Box>
<> {diagApiIsUp ? (
<Button primary onClick={() => openDiagFrame()}>Open Diagnostics</Button> <>
<Button danger onClick={() => removeDiag()}>Stop container</Button> <Button primary onClick={() => openDiagFrame()}>
</> : Open Diagnostics
<> </Button>
<Button primary onClick={() => startDiag()}>Start diag container</Button> <Button danger onClick={() => removeDiag()}>
</> Stop container
} </Button>
<Txt>{errorMessage}</Txt> </>
</Box> : <></>} ) : (
<>
<Button primary onClick={() => startDiag()}>
Start diag container
</Button>
</>
)}
<Txt>{errorMessage}</Txt>
</Box>
) : (
<></>
)}
</Flex> </Flex>
{showDiagScreen ? <> {showDiagScreen ? (
<Button <>
primary <Button
onClick={() => closeDiagFrame()} plain
className="add-fab" onClick={() => closeDiagFrame()}
padding='13px' className="add-fab"
style={{ padding="13px"
borderRadius: '100%', style={{
position: "fixed", borderRadius: '100%',
top: "17px", position: 'fixed',
right: "3px", top: '17px',
height: "27px", right: '3px',
width: "23px", height: '27px',
zIndex: 555 } width: '23px',
} zIndex: 555,
width={23} }}
icon={<FontAwesomeIcon icon={faTimes}/>} width={23}
/> icon={<FontAwesomeIcon icon={faTimes} />}
<iframe />
className="App-frame" <iframe
src={`http://localhost:3000/diagsteps/start`} className="App-frame"
title='screen' src={`http://localhost:3000/diagsteps/start`}
key="screen-frame" title="screen"
style={{ key="screen-frame"
position: "fixed", style={{
top: "0px", position: 'fixed',
bottom: "0px", top: '0px',
left: "0px", bottom: '0px',
right: "0px", left: '0px',
minWidth: "100vw", right: '0px',
minHeight: "100vh", border: 'none',
border: "none", margin: 0,
margin: 0, padding: 0,
padding: 0, backgroundColor: 'white',
backgroundColor: "#282c34", }}
color: "white" } ></iframe>
} </>
> ) : (
</iframe> <></>
</> : <></>} )}
</Modal> </Modal>
); );
} }