@@ -61,6 +61,26 @@ function formatRate(value: number | null) {
return value === null ? '—' : ` ${ formatBytes ( value ) } /s ` ;
}
export function DiskMetricCards ( { disks } : { disks : InfrastructureMonitoringOverview [ 'disks' ] } ) {
if ( ! disks . length ) return < article className = "surface system-monitoring-metric" > < HardDrive size = { 19 } / > < div > < span > 磁 盘 < / span > < strong > 暂 无 数 据 < / strong > < / div > < / article > ;
return < > { disks . map ( ( disk ) = > {
const aliases = ( disk . mountpoints ? ? [ disk . mountpoint ] ) . filter ( ( path ) = > path !== disk . mountpoint ) ;
return < article className = "surface system-monitoring-metric" key = { disk . id } >
< div className = "system-monitoring-metric__icon is-amber" > < HardDrive size = { 19 } / > < / div >
< div >
< span > { disk . mountpoint === '/' ? '系统盘' : '磁盘' } { disk . mountpoint } < / span >
< strong > { formatPercent ( disk . usagePercent ) } < / strong >
< small title = { ` ${ disk . device } · ${ disk . filesystem } · ${ disk . instance } ` } > { disk . device } · { disk . filesystem } < / small >
< small > { formatBytes ( disk . availableBytes ) } 可 用 / { formatBytes ( disk . totalBytes ) } < / small >
{ aliases . length > 0 ? < details className = "system-monitoring-metric__mounts" >
< summary > 其 他 挂 载 点 ( { aliases . length } ) < / summary >
< ul > { aliases . map ( ( path ) = > < li key = { path } > { path } < / li > ) } < / ul >
< / details > : null }
< / div >
< / article > ;
} ) } < / > ;
}
function totalNetworkRate ( receive : number | null | undefined , transmit : number | null | undefined ) {
if ( receive === null || receive === undefined || transmit === null || transmit === undefined ) return null ;
return receive + transmit ;
@@ -352,11 +372,7 @@ export function AdminSystemMonitoringPage() {
< div className = "system-monitoring-metrics" >
< article className = "surface system-monitoring-metric" > < div className = "system-monitoring-metric__icon is-blue" > < Cpu size = { 19 } / > < / div > < div > < span > CPU 使 用 率 < / span > < strong > { formatPercent ( metrics ? . cpuUsagePercent ? ? null ) } < / strong > < small > 5 分 钟 平 均 < / small > < / div > < / article >
< article className = "surface system-monitoring-metric" > < div className = "system-monitoring-metric__icon is-violet" > < MemoryStick size = { 19 } / > < / div > < div > < span > 内 存 使 用 率 < / span > < strong > { formatPercent ( metrics ? . memoryUsagePercent ? ? null ) } < / strong > < small > { formatBytes ( metrics ? . memoryAvailableBytes ? ? null ) } 可 用 / { formatBytes ( metrics ? . memoryTotalBytes ? ? null ) } < / small > < / div > < / article >
{ ( overview ? . disks ? ? [ ] ) . map ( ( disk ) = > < article className = "surface system-monitoring-metric" key = { disk . id } >
< div className = "system-monitoring-metric__icon is-amber" > < HardDrive size = { 19 } / > < / div >
< div > < span > { disk . mountpoint === '/' ? '系统盘' : '磁盘' } { disk . mountpoint } < / span > < strong > { formatPercent ( disk . usagePercent ) } < / strong > < small title = { ` ${ disk . device } · ${ disk . filesystem } · ${ disk . instance } ` } > { disk . device } · { disk . filesystem } < / small > < small > { formatBytes ( disk . availableBytes ) } 可 用 / { formatBytes ( disk . totalBytes ) } < / small > < / div >
< / article > ) }
{ ! overview ? . disks ? . length ? < article className = "surface system-monitoring-metric" > < HardDrive size = { 19 } / > < div > < span > 磁 盘 < / span > < strong > 暂 无 数 据 < / strong > < / div > < / article > : null }
< DiskMetricCards disks = { overview ? . disks ? ? [ ] } / >
< article className = "surface system-monitoring-metric" > < div className = "system-monitoring-metric__icon is-green" > < Network size = { 19 } / > < / div > < div > < span > 网 络 吞 吐 < / span > < strong > { formatRate ( totalNetworkRate ( metrics ? . networkReceiveBytesPerSecond , metrics ? . networkTransmitBytesPerSecond ) ) } < / strong > < small > 接 收 { formatRate ( metrics ? . networkReceiveBytesPerSecond ? ? null ) } · 发 送 { formatRate ( metrics ? . networkTransmitBytesPerSecond ? ? null ) } < / small > < / div > < / article >
< / div >
@@ -364,7 +380,7 @@ export function AdminSystemMonitoringPage() {
< div className = "system-monitoring-chart-stack" >
< article className = "surface system-monitoring-chart-card" > < header > < div > < Cpu size = { 17 } / > < strong > CPU 趋 势 < / strong > < / div > < span > { formatPercent ( metrics ? . cpuUsagePercent ? ? null ) } < / span > < / header > { overview ? . trends . cpuUsagePercent . length ? < Chart height = { 230 } option = { cpuOption } / > : < EmptyChart / > } < / article >
< article className = "surface system-monitoring-chart-card" > < header > < div > < MemoryStick size = { 17 } / > < strong > 内 存 趋 势 < / strong > < / div > < span > { formatPercent ( metrics ? . memoryUsagePercent ? ? null ) } < / span > < / header > { overview ? . trends . memoryUsagePercent . length ? < Chart height = { 230 } option = { memoryOption } / > : < EmptyChart / > } < / article >
< article className = "surface system-monitoring-chart-card" > < header > < div > < HardDrive size = { 17 } / > < strong > 全 部 磁 盘 趋 势 < / strong > < / div > < span > { overview ? . disks ? . length ? ? 0 } 个 挂 载 点 < / span > < / header > { overview ? . disks ? . some ( ( disk ) = > disk . trend . length ) ? < Chart height = { 230 } option = { diskOption } / > : < EmptyChart / > } < / article >
< article className = "surface system-monitoring-chart-card" > < header > < div > < HardDrive size = { 17 } / > < strong > 全 部 磁 盘 趋 势 < / strong > < / div > < span > { overview ? . disks ? . length ? ? 0 } 个 文 件 系 统 < / span > < / header > { overview ? . disks ? . some ( ( disk ) = > disk . trend . length ) ? < Chart height = { 230 } option = { diskOption } / > : < EmptyChart / > } < / article >
< article className = "surface system-monitoring-chart-card" > < header > < div > < Activity size = { 17 } / > < strong > 网 络 趋 势 < / strong > < / div > < span > { formatRate ( totalNetworkRate ( metrics ? . networkReceiveBytesPerSecond , metrics ? . networkTransmitBytesPerSecond ) ) } < / span > < / header > { overview ? . trends . networkReceiveBytesPerSecond . length ? < Chart height = { 230 } option = { networkOption } / > : < EmptyChart / > } < / article >
< / div >