From 12e644aa4eef8f9a7d15597f6ef4b857a2469c87 Mon Sep 17 00:00:00 2001
From: Heikki Hellgren <heikki.hellgren@op.fi>
Date: Fri, 16 Jun 2023 10:31:42 +0300
Subject: [PATCH] feat: show resource utilization in DevTools plugin

Signed-off-by: Heikki Hellgren <heikki.hellgren@op.fi>
---
 .changeset/khaki-pigs-accept.md               |  7 ++++++
 .../src/api/DevToolsBackendApi.ts             | 22 ++++++++++++++-----
 plugins/devtools-common/api-report.md         |  1 +
 plugins/devtools-common/src/types.ts          |  1 +
 .../Content/InfoContent/InfoContent.tsx       | 14 +++++++++++-
 5 files changed, 38 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/khaki-pigs-accept.md

diff --git a/.changeset/khaki-pigs-accept.md b/.changeset/khaki-pigs-accept.md
new file mode 100644
index 0000000000..e00db1746f
--- /dev/null
+++ b/.changeset/khaki-pigs-accept.md
@@ -0,0 +1,7 @@
+---
+'@backstage/plugin-devtools-backend': patch
+'@backstage/plugin-devtools-common': patch
+'@backstage/plugin-devtools': patch
+---
+
+Show resource utilization in `DevTools` plugin
diff --git a/plugins/devtools-backend/src/api/DevToolsBackendApi.ts b/plugins/devtools-backend/src/api/DevToolsBackendApi.ts
index efd0407b31..08a968e40e 100644
--- a/plugins/devtools-backend/src/api/DevToolsBackendApi.ts
+++ b/plugins/devtools-backend/src/api/DevToolsBackendApi.ts
@@ -17,12 +17,12 @@
 import { Config, ConfigReader } from '@backstage/config';
 import { loadConfigSchema } from '@backstage/config-loader';
 import {
-  PackageDependency,
-  DevToolsInfo,
-  ExternalDependency,
-  Endpoint,
-  ExternalDependencyStatus,
   ConfigInfo,
+  DevToolsInfo,
+  Endpoint,
+  ExternalDependency,
+  ExternalDependencyStatus,
+  PackageDependency,
 } from '@backstage/plugin-devtools-common';
 
 import { JsonObject } from '@backstage/types';
@@ -204,7 +204,16 @@ export class DevToolsBackendApi {
   }
 
   public async listInfo(): Promise<DevToolsInfo> {
-    const operatingSystem = `${os.type} ${os.release} - ${os.platform}/${os.arch}`;
+    const operatingSystem = `${os.hostname()}: ${os.type} ${os.release} - ${
+      os.platform
+    }/${os.arch}`;
+    const usedMem = Math.floor((os.totalmem() - os.freemem()) / (1024 * 1024));
+    const resources = `Memory: ${usedMem}/${Math.floor(
+      os.totalmem() / (1024 * 1024),
+    )}MB - Load: ${os
+      .loadavg()
+      .map(v => v.toFixed(2))
+      .join('/')}`;
     const nodeJsVersion = process.version;
 
     /* eslint-disable-next-line no-restricted-syntax */
@@ -233,6 +242,7 @@ export class DevToolsBackendApi {
 
     const info: DevToolsInfo = {
       operatingSystem: operatingSystem ?? 'N/A',
+      resourceUtilization: resources ?? 'N/A',
       nodeJsVersion: nodeJsVersion ?? 'N/A',
       backstageVersion:
         backstageJson && backstageJson.version ? backstageJson.version : 'N/A',
diff --git a/plugins/devtools-common/api-report.md b/plugins/devtools-common/api-report.md
index 6594b0d8a4..83af75d11a 100644
--- a/plugins/devtools-common/api-report.md
+++ b/plugins/devtools-common/api-report.md
@@ -32,6 +32,7 @@ export const devToolsExternalDependenciesReadPermission: BasicPermission;
 // @public (undocumented)
 export type DevToolsInfo = {
   operatingSystem: string;
+  resourceUtilization: string;
   nodeJsVersion: string;
   backstageVersion: string;
   dependencies: PackageDependency[];
diff --git a/plugins/devtools-common/src/types.ts b/plugins/devtools-common/src/types.ts
index d08232b155..75644ece26 100644
--- a/plugins/devtools-common/src/types.ts
+++ b/plugins/devtools-common/src/types.ts
@@ -35,6 +35,7 @@ export type ExternalDependency = {
 /** @public */
 export type DevToolsInfo = {
   operatingSystem: string;
+  resourceUtilization: string;
   nodeJsVersion: string;
   backstageVersion: string;
   dependencies: PackageDependency[];
diff --git a/plugins/devtools/src/components/Content/InfoContent/InfoContent.tsx b/plugins/devtools/src/components/Content/InfoContent/InfoContent.tsx
index 7a0ebb3e06..0ed43d2fee 100644
--- a/plugins/devtools/src/components/Content/InfoContent/InfoContent.tsx
+++ b/plugins/devtools/src/components/Content/InfoContent/InfoContent.tsx
@@ -33,6 +33,7 @@ import React from 'react';
 import { useInfo } from '../../../hooks';
 import { InfoDependenciesTable } from './InfoDependenciesTable';
 import DescriptionIcon from '@material-ui/icons/Description';
+import MemoryIcon from '@material-ui/icons/Memory';
 import DeveloperBoardIcon from '@material-ui/icons/DeveloperBoard';
 import { BackstageLogoIcon } from './BackstageLogoIcon';
 import FileCopyIcon from '@material-ui/icons/FileCopy';
@@ -57,7 +58,7 @@ const useStyles = makeStyles((theme: Theme) =>
 
 const copyToClipboard = ({ about }: { about: DevToolsInfo | undefined }) => {
   if (about) {
-    let formatted = `OS: ${about.operatingSystem}\nnode: ${about.nodeJsVersion}\nbackstage: ${about.backstageVersion}\nDependencies:\n`;
+    let formatted = `OS: ${about.operatingSystem}\nResources: ${about.resourceUtilization}\nnode: ${about.nodeJsVersion}\nbackstage: ${about.backstageVersion}\nDependencies:\n`;
     const deps = about.dependencies;
     for (const key in deps) {
       if (Object.prototype.hasOwnProperty.call(deps, key)) {
@@ -93,6 +94,17 @@ export const InfoContent = () => {
               secondary={about?.operatingSystem}
             />
           </ListItem>
+          <ListItem>
+            <ListItemAvatar>
+              <Avatar>
+                <MemoryIcon />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText
+              primary="Resource utilization"
+              secondary={about?.resourceUtilization}
+            />
+          </ListItem>
           <ListItem>
             <ListItemAvatar>
               <Avatar>