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

171
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(() => {
@ -97,10 +99,10 @@ 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
@ -131,65 +133,78 @@ 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', {
encoding: 'utf8',
flag: 'r',
});
const startRes = await fetch(supUrl, { const startRes = await fetch(supUrl, {
method: "POST", 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`)
).text();
const appId = await (
await fetch(`http://localhost:3000/api/supervisor/appid`)
).text();
const createLock = await fetch(
`http://localhost:3000/api/supervisor/createlock`,
);
const stopRes = await fetch(`${supervisorUrl}/v2/applications/${appId}/stop-service?apikey=${supervisorApiKey}`, { const stopRes = await fetch(
method: "POST", `${supervisorUrl}/v2/applications/${appId}/stop-service?apikey=${supervisorApiKey}`,
{
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 (!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
@ -228,8 +243,7 @@ export function SettingsModal({ toggleModal }: SettingsModalProps): any {
'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"
@ -238,60 +252,71 @@ export function SettingsModal({ toggleModal }: SettingsModalProps): any {
/> />
<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 primary onClick={() => openDiagFrame()}>
<Button danger onClick={() => removeDiag()}>Stop container</Button> Open Diagnostics
</> : </Button>
<> <Button danger onClick={() => removeDiag()}>
<Button primary onClick={() => startDiag()}>Start diag container</Button> Stop container
</Button>
</> </>
} ) : (
<>
<Button primary onClick={() => startDiag()}>
Start diag container
</Button>
</>
)}
<Txt>{errorMessage}</Txt> <Txt>{errorMessage}</Txt>
</Box> : <></>} </Box>
) : (
<></>
)}
</Flex> </Flex>
{showDiagScreen ? <> {showDiagScreen ? (
<>
<Button <Button
primary plain
onClick={() => closeDiagFrame()} onClick={() => closeDiagFrame()}
className="add-fab" className="add-fab"
padding='13px' padding="13px"
style={{ style={{
borderRadius: '100%', borderRadius: '100%',
position: "fixed", position: 'fixed',
top: "17px", top: '17px',
right: "3px", right: '3px',
height: "27px", height: '27px',
width: "23px", width: '23px',
zIndex: 555 } zIndex: 555,
} }}
width={23} width={23}
icon={<FontAwesomeIcon icon={faTimes} />} icon={<FontAwesomeIcon icon={faTimes} />}
/> />
<iframe <iframe
className="App-frame" className="App-frame"
src={`http://localhost:3000/diagsteps/start`} src={`http://localhost:3000/diagsteps/start`}
title='screen' title="screen"
key="screen-frame" key="screen-frame"
style={{ style={{
position: "fixed", position: 'fixed',
top: "0px", top: '0px',
bottom: "0px", bottom: '0px',
left: "0px", left: '0px',
right: "0px", right: '0px',
minWidth: "100vw", border: 'none',
minHeight: "100vh",
border: "none",
margin: 0, margin: 0,
padding: 0, padding: 0,
backgroundColor: "#282c34", backgroundColor: 'white',
color: "white" } }}
} ></iframe>
> </>
</iframe> ) : (
</> : <></>} <></>
)}
</Modal> </Modal>
); );
} }