feat: show resource utilization in DevTools plugin

Signed-off-by: Heikki Hellgren <heikki.hellgren@op.fi>

.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

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',

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[];

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[];

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>