Add memory section to metadata

Author: lucko

src/style/metadata.module.scss

@@ -43,6 +43,46 @@
                 margin: 0 5px;
             }
 
+            .memory {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 10px;
+
+                .memory-pool {
+                    background-color: #293134;
+                    padding: 5px;
+                    border-radius: 5px;
+                }
+
+                .header {
+                    text-align: center;
+                    margin-bottom: 10px;
+                    color: #fff;
+                }
+
+                .usage-bar {
+                    height: 20px;
+                    width: 500px;
+                    border: 3px solid #252b2d;
+                    display: flex;
+                    background-color: #252b2d;
+
+                    > div {
+                        background-color: #b5b5b5;
+                    }
+                }
+
+                ul {
+                    li {
+                        list-style: none;
+
+                        span {
+                            color: #fff;
+                        }
+                    }
+                }
+            }
+
             .configurations {
                 ul {
                     padding-left: 20px;

src/viewer/common/components/metadata/MemoryStatistics.tsx

@@ -0,0 +1,109 @@
+import {
+    PlatformStatistics_Gc,
+    PlatformStatistics_Memory,
+    PlatformStatistics_Memory_MemoryUsage,
+} from '../../../proto/spark_pb';
+import { formatBytes } from '../../util/format';
+import { WidgetFormat } from '../widgets/format';
+
+export interface MemoryStatisticsProps {
+    memory: PlatformStatistics_Memory;
+    gc: Record<string, PlatformStatistics_Gc>;
+}
+
+export default function MemoryStatistics({
+    memory,
+    gc,
+}: MemoryStatisticsProps) {
+    return (
+        <>
+            <h2>Memory Areas</h2>
+            <div className="memory">
+                <MemoryPool name="Heap" usage={memory.heap!} />
+                <MemoryPool name="Non Heap" usage={memory.nonHeap!} />
+                {memory.pools
+                    .filter(pool => pool.usage)
+                    .map(pool => {
+                        return (
+                            <MemoryPool
+                                key={pool.name}
+                                name={'Heap - ' + pool.name}
+                                usage={pool.usage!}
+                                collectionUsage={pool.collectionUsage}
+                            />
+                        );
+                    })}
+            </div>
+        </>
+    );
+}
+
+interface MemoryPoolProps {
+    name: string;
+    usage: PlatformStatistics_Memory_MemoryUsage;
+    collectionUsage?: PlatformStatistics_Memory_MemoryUsage;
+}
+
+const MemoryPool = ({ name, usage, collectionUsage }: MemoryPoolProps) => {
+    return (
+        <div className="memory-pool">
+            <div className="header">{name}</div>
+            <MemoryUsageBar {...usage} />
+            {collectionUsage && (
+                <div>
+                    <br />
+                    <div className="header">{name} (at last GC)</div>
+                    <MemoryUsageBar {...collectionUsage} />
+                </div>
+            )}
+        </div>
+    );
+};
+
+const MemoryUsageBar = ({
+    used,
+    committed,
+    max,
+}: PlatformStatistics_Memory_MemoryUsage) => {
+    let percent;
+    if (max && max > 0) {
+        percent = used / max;
+    } else {
+        percent = used / committed;
+    }
+
+    let color;
+    if (percent > 0.9) {
+        color = WidgetFormat.colors.red;
+    } else if (percent > 0.65) {
+        color = WidgetFormat.colors.yellow;
+    } else {
+        color = WidgetFormat.colors.green;
+    }
+
+    return (
+        <>
+            <div className="usage-bar">
+                <div
+                    style={{
+                        width: `${Math.ceil(percent * 100)}%`,
+                        backgroundColor: color,
+                    }}
+                />
+            </div>
+            <ul>
+                <li>
+                    Used: <span>{formatBytes(used)}</span>
+                </li>
+                <li>
+                    Committed: <span>{formatBytes(committed)}</span>
+                </li>
+                {max !== -1 && max !== committed && (
+                    <li>
+                        Max: <span>{formatBytes(max)}</span>
+                    </li>
+                )}
+            </ul>
+        </>
+    );
+};

src/viewer/common/components/metadata/MetadataDetail.tsx

@@ -9,6 +9,7 @@ import {
 import ExtraPlatformMetadata from './ExtraPlatformMetadata';
 import GameRules from './GameRules';
 import JvmStartupArgs from './JvmStartupArgs';
+import MemoryStatistics from './MemoryStatistics';
 import PlatformStatistics from './PlatformStatistics';
 import PluginsModsList from './PluginsModsList';
 import ServerConfigurations from './ServerConfigurations';
@@ -64,6 +65,9 @@ export default function MetadataDetail({ metadata }: MetadataDetailProps) {
     const [view, setView] = useState('Platform');
     const views = {
         'Platform': () => true,
+        'Memory': () =>
+            platformStatistics?.memory &&
+            platformStatistics.memory.pools.length,
         'JVM Flags': () => systemStatistics?.java?.vmArgs,
         'Configurations': () => parsedConfigurations,
         'World': () =>
@@ -109,6 +113,11 @@ export default function MetadataDetail({ metadata }: MetadataDetailProps) {
                         numberOfIncludedTicks={numberOfIncludedTicks}
                         engine={samplerEngine}
                     />
+                ) : view === 'Memory' ? (
+                    <MemoryStatistics
+                        memory={platformStatistics?.memory!}
+                        gc={platformStatistics?.gc!}
+                    />
                 ) : view === 'JVM Flags' ? (
                     <JvmStartupArgs systemStatistics={systemStatistics!} />
                 ) : view === 'Configurations' ? (