Adding EtcherPro device serial number to the Settings modal

Change-type: patch

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

@@ -25,6 +25,7 @@ import * as analytics from '../../modules/analytics';
 import { open as openExternal } from '../../os/open-external/services/open-external';
 import { Modal } from '../../styled-components';
 import * as i18next from 'i18next';
+import { etcherProInfo } from '../../utils/etcher-pro-specific';
 
 interface Setting {
 	name: string;
@@ -55,7 +56,7 @@ interface SettingsModalProps {
 	toggleModal: (value: boolean) => void;
 }
 
-const UUID = process.env.BALENA_DEVICE_UUID;
+const EPInfo = etcherProInfo();
 
 const InfoBox = (props: any) => (
 	<Box fontSize={14}>
@@ -117,10 +118,14 @@ export function SettingsModal({ toggleModal }: SettingsModalProps) {
 						</Flex>
 					);
 				})}
-				{UUID !== undefined && (
+				{EPInfo !== undefined && (
 					<Flex flexDirection="column">
 						<Txt fontSize={24}>{i18next.t('settings.systemInformation')}</Txt>
-						<InfoBox label="UUID" value={UUID.substr(0, 7)} />
+						{EPInfo.get_serial() === undefined ? (
+							<InfoBox label="UUID" value={EPInfo.uuid} />
+						) : (
+							<InfoBox label="Serial" value={EPInfo.get_serial()} />
+						)}
 					</Flex>
 				)}
 				<Flex

lib/gui/app/utils/etcher-pro-specific.ts

@@ -0,0 +1,67 @@
+/*
+ * Copyright 2022 balena.io
+ *
+ * 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 { Dictionary } from 'lodash';
+
+export class EtcherPro {
+	private supervisorAddr: string;
+	private supervisorKey: string;
+	private tags: Dictionary<string> | undefined;
+	public uuid: string;
+
+	constructor(supervisorAddr: string, supervisorKey: string) {
+		this.supervisorAddr = supervisorAddr;
+		this.supervisorKey = supervisorKey;
+		this.uuid = (process.env.BALENA_DEVICE_UUID ?? 'NO-UUID').substring(0, 7);
+		this.tags = undefined;
+		this.get_tags().then((tags) => (this.tags = tags));
+	}
+
+	async get_tags(): Promise<Dictionary<string>> {
+		const result = await fetch(
+			this.supervisorAddr + '/v2/device/tags?apikey=' + this.supervisorKey,
+		);
+		const parsed = await result.json();
+		if (parsed['status'] === 'success') {
+			return Object.assign(
+				{},
+				...parsed['tags'].map((tag: any) => {
+					return { [tag.name]: tag['value'] };
+				}),
+			);
+		} else {
+			return await {};
+		}
+	}
+
+	public get_serial(): string | undefined {
+		if (this.tags) {
+			return this.tags['Serial'];
+		} else {
+			return undefined;
+		}
+	}
+}
+
+export function etcherProInfo(): EtcherPro | undefined {
+	const BALENA_SUPERVISOR_ADDRESS = process.env.BALENA_SUPERVISOR_ADDRESS;
+	const BALENA_SUPERVISOR_API_KEY = process.env.BALENA_SUPERVISOR_API_KEY;
+
+	if (BALENA_SUPERVISOR_ADDRESS && BALENA_SUPERVISOR_API_KEY) {
+		return new EtcherPro(BALENA_SUPERVISOR_ADDRESS, BALENA_SUPERVISOR_API_KEY);
+	}
+	return undefined;
+}