patch: [diag] added diag container handling

Change-Type: patch

lib/gui/app/components/settings/settings.tsx

@@ -27,6 +27,7 @@ import * as settings from '../../models/settings';
 import * as analytics from '../../modules/analytics';
 import { open as openExternal } from '../../os/open-external/services/open-external';
 import { Modal } from '../../styled-components';
+import { unlinkSync, readFileSync  } from 'fs'
 
 const platform = os.platform();
 
@@ -71,8 +72,11 @@ interface SettingsModalProps {
 export function SettingsModal({ toggleModal }: SettingsModalProps): any {
 	const [settingsList, setCurrentSettingsList] = React.useState<Setting[]>([]);
 	const [showDiagScreen, setShowDiagScreen] = React.useState<Boolean>(false);
+	const [diagApiIsUp, setDiagApiIsUp] = React.useState<Boolean>(false);
 	const [showDiagButton, setShowDiagButton] = React.useState<Boolean>(false);
 	const [currentSettings, setCurrentSettings] = React.useState<_.Dictionary<boolean>>({});
+	const [errorMessage, setErrorMessage] = React.useState<String>("");
+	let diagCount = 0;
 
 	React.useEffect(() => {
 		(async () => {
@@ -96,6 +100,7 @@ export function SettingsModal({ toggleModal }: SettingsModalProps): any {
 				let result = await fetch('http://localhost:3000/api/ping')
 				if (result.ok) {
 					setShowDiagButton(true)
+					setDiagApiIsUp(true)
 				}
 			} catch {
 				// no diag container
@@ -132,8 +137,58 @@ export function SettingsModal({ toggleModal }: SettingsModalProps): any {
 		setShowDiagScreen(true);  
 	}
 
+	const prepareDiag = () => {
+		if (++diagCount > 5) {
+			setShowDiagButton(true);
+		}
+	}
+
+	const startDiag = async () => {
+		unlinkSync("/usr/src/diag-data/startup.lock");
+
+		const supUrl: string = readFileSync("/usr/src/diag-data/start.url", {encoding:'utf8', flag:'r'})
+		const startRes  = await fetch(supUrl, {
+			method: "POST",
+			body: JSON.stringify({ serviceName: 'diag-runner', force: true }),
+			headers: {
+				'Content-Type': 'application/json'
+			}
+		})
+
+		if (startRes.ok) {
+			// good
+		} else {
+			setErrorMessage(`${errorMessage} :: ${startRes.statusText}`)
+		}
+	}
+
 	const removeDiag = async () => {
-		// TODO
+		setErrorMessage("");
+		try {
+			const supervisorUrl = await (await fetch(`http://localhost:3000/api/supervisor/url`)).text()
+			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}`, {
+				method: "POST",
+				body: JSON.stringify({ serviceName: 'diag-runner', force: true }),
+				headers: {
+					'Content-Type': 'application/json'
+				}
+			})
+
+			if (!stopRes.ok) {
+				setErrorMessage(`Stop call failed | ${stopRes.statusText}`)
+			}
+
+			if (!createLock.ok) {
+				setErrorMessage(`${errorMessage} :: Create lock file failed :: `)
+			}
+
+		} catch (err) {
+			setErrorMessage(err)
+		}
 	}
 
 	return (
@@ -168,10 +223,11 @@ export function SettingsModal({ toggleModal }: SettingsModalProps): any {
 						cursor: 'pointer',
 						fontSize: 14,
 					}}
-					onClick={() => {
+					onClick={() => { 
 						openExternal(
 							'https://github.com/balena-io/etcher/blob/master/CHANGELOG.md',
 						);
+						prepareDiag();
 					}
 					}
 				>
@@ -183,8 +239,16 @@ export function SettingsModal({ toggleModal }: SettingsModalProps): any {
 					<Txt style={{ borderBottom: '1px solid #00aeef' }}>{version}</Txt>					
 				</Flex>
 				{showDiagButton ? <Box>
-					<Button primary onClick={() => openDiagFrame()}>Open Diagnostics</Button>
+					{diagApiIsUp ? 
-					<Button danger onClick={() => removeDiag()}>Remove container</Button>
+						<>
+							<Button primary onClick={() => openDiagFrame()}>Open Diagnostics</Button>
+							<Button danger onClick={() => removeDiag()}>Stop container</Button>
+						</> :
+						<>
+							<Button primary onClick={() => startDiag()}>Start diag container</Button>
+						</>
+					}
+					<Txt>{errorMessage}</Txt>
 				</Box> : <></>}
 			</Flex>
 
@@ -197,11 +261,11 @@ export function SettingsModal({ toggleModal }: SettingsModalProps): any {
 				style={{ 
 					borderRadius: '100%', 
 					position: "fixed",
-					top: "23px",
+					top: "17px",
-					right: "15px",
+					right: "3px",
 					height: "27px",
 					width: "23px",
-					zIndex: 999 }
+					zIndex: 555 }
 				}
 				width={23}
 				icon={<FontAwesomeIcon icon={faTimes}/>}