@if (viewMode === 'monitor') {
@if (metrics$ | async; as metrics) {
SYSTEM MONITOR

{{ metrics.hostname }}

{{ metrics.operatingSystem }} · {{ metrics.osVersion }}

Live
CPU USAGE {{ metrics.cpuUsagePercent | number:'1.1-1' }}%
{{ metrics.logicalProcessors }} logical processors
MEMORY USAGE {{ metrics.memoryUsagePercent | number:'1.1-1' }}%
{{ formatBytes(metrics.usedMemoryBytes) }} / {{ formatBytes(metrics.totalMemoryBytes) }}
AVAILABLE MEMORY {{ formatBytes(metrics.availableMemoryBytes) }} Currently available
@if (cpu$ | async; as cpu) {

CPU cores

@for (core of cpu.cores; track core.core) {
Core {{ core.core }} {{ core.usagePercent | number:'1.1-1' }}%
}
} } @else {

Waiting for system metrics…

} @if (linux$ | async; as linux) {

System information

Hostname{{ linux.hostname }}
Distribution{{ linux.distribution }}
Kernel{{ linux.kernelVersion }}
Uptime{{ formatUptime(linux.uptimeSeconds) }}
Load 1 min{{ linux.loadAverage1Min | number:'1.2-2' }}
Load 5 min{{ linux.loadAverage5Min | number:'1.2-2' }}
Load 15 min{{ linux.loadAverage15Min | number:'1.2-2' }}
}
} @else if (viewMode === 'htop') {
@if (cpu$ | async; as cpu) {
@for (core of cpu.cores; track core.core) {
{{ core.core }}
{{ core.usagePercent | number:'1.0-0' }}%
}
} @if (memory$ | async; as memory) {
Mem
{{ formatBytes(memory.usedRamBytes) }} / {{ formatBytes(memory.totalRamBytes) }}
Swp
{{ formatBytes(memory.usedSwapBytes) }} / {{ formatBytes(memory.totalSwapBytes) }}
} @if (linux$ | async; as linux) {
Load average {{ linux.loadAverage1Min | number:'1.2-2' }} {{ linux.loadAverage5Min | number:'1.2-2' }} {{ linux.loadAverage15Min | number:'1.2-2' }} Uptime {{ formatUptime(linux.uptimeSeconds) }}
}
PIDCommandCPU%MEMORYSTATE
@if (processes$ | async; as processes) { @for (process of getSortedProcesses(processes); track process.pid) {
{{ process.pid }} {{ process.name }} {{ process.cpuUsagePercent | number:'1.1-1' }} {{ formatBytes(process.residentMemoryBytes) }} {{ process.state }}
} @empty {

No processes available

} }
} @else {
@if (cpu$ | async; as cpu) { @if (memory$ | async; as memory) { @if (linux$ | async; as linux) {
@for (core of cpu.cores; track core.core) {
{{ core.core }} [ @for (segment of meterSegments20; track segment) { | } ] {{ core.usagePercent | number:'1.1-1' }}%
}
Mem [ @for (segment of meterSegments35; track segment) { | } ] {{ formatBytes(memory.usedRamBytes) }}/{{ formatBytes(memory.totalRamBytes) }}
Swp [ @for (segment of meterSegments15; track segment) { | } ] {{ formatBytes(memory.usedSwapBytes) }}/{{ formatBytes(memory.totalSwapBytes) }}
@if (processes$ | async; as processes) {
Tasks: {{ processes.length }}, — thr; — kthr; {{ countRunningProcesses(processes) }} running
}
Load average: {{ linux.loadAverage1Min | number:'1.2-2' }} {{ linux.loadAverage5Min | number:'1.2-2' }} {{ linux.loadAverage15Min | number:'1.2-2' }}
Uptime: {{ formatUptime(linux.uptimeSeconds) }}
Navigation: ↑/↓ (or J/K) Select | / Filter | K Kill | P CPU Sort | M MEM Sort
} } } @if (htopOriginalTab === 'main') {
USER PRI NI VIRT RES SHR S TIME+ Command
@if (memory$ | async; as memory) { @if (processes$ | async; as processes) { @for (process of getSortedProcessesForOriginal(processes); track process.pid; let i = $index) {
{{ process.pid }} — — — {{ formatBytes(process.virtualMemoryBytes) }} {{ formatBytes(process.residentMemoryBytes) }} — {{ process.state }} {{ process.cpuUsagePercent | number:'1.1-1' }} {{ getProcessMemoryPercent(process, memory.totalRamBytes) | number:'1.1-1' }} {{ formatUptime(process.uptimeSeconds) }} {{ process.name }}
} @empty {
No matching processes found
} } }
} @else {

Disks

@if (disks$ | async; as disks) {
Device Mount point File system Total Used Free Usage
@for (disk of disks; track disk.mountPoint) {
{{ disk.name }} {{ disk.mountPoint }} {{ disk.fileSystem }} {{ formatBytes(disk.totalBytes) }} {{ formatBytes(disk.usedBytes) }} {{ formatBytes(disk.usableBytes) }} {{ disk.usagePercent }}%
} @empty {

No disk information available

}
} @else {

Loading disk information...

}

Network traffic

@if (network$ | async; as networks) {
Interface Received Sent RX rate TX rate
@for (network of networks; track network.name) {
{{ network.displayName || network.name }} {{ formatBytes(network.bytesReceived) }} {{ formatBytes(network.bytesSent) }} {{ formatBytes(network.receiveBytesPerSecond) }}/s {{ formatBytes(network.sendBytesPerSecond) }}/s
} @empty {

No network information available

}
}
}
}