feat: add summary dashboard history charts

This commit is contained in:
2026-04-21 18:03:51 +02:00
parent 0bb4be861c
commit 44f4206f34
12 changed files with 790 additions and 81 deletions

View File

@@ -12,7 +12,7 @@ struct GeneralView: View {
var canRestart: Bool = false
var isRestarting: Bool = false
var onRestart: (() -> Void)? = nil
var body: some View {
GeometryReader { geometry in
ScrollView {
@@ -22,13 +22,13 @@ struct GeneralView: View {
} value: {
InfoCell(value: [server.hostname])
}
TableRowView {
Text("IP addresses")
} value: {
InfoCell(value: server.info?.ipAddresses ?? [], monospaced: true)
}
TableRowView {
Text("Server time")
} value: {
@@ -49,53 +49,76 @@ struct GeneralView: View {
TableRowView {
Text("Operating system")
} value: {
InfoCell(value: operatingSystemRows, monospaced: true)
}
TableRowView {
Text("CPU")
} value: {
InfoCell(
value: {
guard let os = server.info?.operatingSystem else { return [] }
var rows: [String] = []
let distro = [os.distribution, os.version]
.filter { !$0.isEmpty }
.joined(separator: " ")
.trimmingCharacters(in: .whitespacesAndNewlines)
var description = os.label.trimmingCharacters(in: .whitespacesAndNewlines)
if description.isEmpty {
description = distro
} else if !distro.isEmpty && description.range(of: distro, options: [.caseInsensitive]) == nil {
description += "\(distro)"
}
if !os.architecture.isEmpty &&
description.range(of: os.architecture, options: [.caseInsensitive]) == nil {
description += " (\(os.architecture))"
}
if !description.isEmpty {
rows.append(description)
}
if let updates = os.updates {
var updateDescription = "Updates: \(updates.updateCount)"
if updates.securityUpdateCount > 0 {
updateDescription += "\(updates.securityUpdateCount) security"
}
rows.append(updateDescription)
if updates.rebootRequired {
rows.append("Reboot required")
}
}
if os.endOfLife {
rows.append("End-of-life release")
}
return rows
}(),
value: [
"\(server.info?.cpuCores ?? 0) cores",
String(format: "Load %.2f%% (%.2f / %.2f / %.2f)",
server.info?.load.percent ?? 0,
server.info?.load.minute1 ?? 0,
server.info?.load.minute5 ?? 0,
server.info?.load.minute15 ?? 0)
],
monospaced: true
)
}
TableRowView {
Text("Sytem PHP version")
Text("Memory")
} value: {
InfoCell(
value: [
"Used \(server.info?.memory.used ?? 0) / Total \(server.info?.memory.total ?? 0)",
String(format: "%.2f %%", server.info?.memory.percent ?? 0)
].map { line in
line
.replacingOccurrences(of: "\(server.info?.memory.used ?? 0)", with: (server.info?.memory.used ?? 0).toNiceBinaryUnit())
.replacingOccurrences(of: "\(server.info?.memory.total ?? 0)", with: (server.info?.memory.total ?? 0).toNiceBinaryUnit())
},
monospaced: true
)
}
TableRowView {
Text("Swap")
} value: {
InfoCell(
value: [
"Used \(server.info?.swap.used ?? 0) / Total \(server.info?.swap.total ?? 0)",
String(format: "%.2f %%", server.info?.swap.percent ?? 0)
].map { line in
line
.replacingOccurrences(of: "\(server.info?.swap.used ?? 0)", with: (server.info?.swap.used ?? 0).toNiceBinaryUnit())
.replacingOccurrences(of: "\(server.info?.swap.total ?? 0)", with: (server.info?.swap.total ?? 0).toNiceBinaryUnit())
},
monospaced: true
)
}
TableRowView {
Text("Disk space")
} value: {
InfoCell(
value: [
"Used \(server.info?.diskSpace.used ?? 0) / Total \(server.info?.diskSpace.total ?? 0)",
String(format: "%.2f %%", server.info?.diskSpace.percent ?? 0)
].map { line in
line
.replacingOccurrences(of: "\(server.info?.diskSpace.used ?? 0)", with: (server.info?.diskSpace.used ?? 0).toNiceBinaryUnit())
.replacingOccurrences(of: "\(server.info?.diskSpace.total ?? 0)", with: (server.info?.diskSpace.total ?? 0).toNiceBinaryUnit())
},
monospaced: true
)
}
TableRowView {
Text("System PHP version")
} value: {
InfoCell(value: [server.info?.phpVersion ?? ""], monospaced: true)
}
@@ -103,22 +126,7 @@ struct GeneralView: View {
TableRowView(showDivider: false) {
Text("Additional PHP interpreters")
} value: {
InfoCell(
value: {
let interpreters = server.info?.additionalPHPInterpreters ?? []
if interpreters.isEmpty {
return ["None"]
}
let versions = interpreters
.map { $0.fullVersion }
.filter { !$0.isEmpty }
if versions.isEmpty {
return ["None"]
}
return [versions.joined(separator: "")]
}(),
monospaced: true
)
InfoCell(value: additionalPHPRows, monospaced: true)
}
if canRestart, let onRestart {
@@ -155,6 +163,60 @@ struct GeneralView: View {
.scrollDisabled(true)
}
}
private var operatingSystemRows: [String] {
guard let os = server.info?.operatingSystem else { return [] }
var rows: [String] = []
let distro = [os.distribution, os.version]
.filter { !$0.isEmpty }
.joined(separator: " ")
.trimmingCharacters(in: .whitespacesAndNewlines)
var description = os.label.trimmingCharacters(in: .whitespacesAndNewlines)
if description.isEmpty {
description = distro
} else if !distro.isEmpty && description.range(of: distro, options: [.caseInsensitive]) == nil {
description += "\(distro)"
}
if !os.architecture.isEmpty &&
description.range(of: os.architecture, options: [.caseInsensitive]) == nil {
description += " (\(os.architecture))"
}
if !description.isEmpty {
rows.append(description)
}
if let updates = os.updates {
var updateDescription = "Updates: \(updates.updateCount)"
if updates.securityUpdateCount > 0 {
updateDescription += "\(updates.securityUpdateCount) security"
}
rows.append(updateDescription)
if updates.rebootRequired {
rows.append("Reboot required")
}
}
if os.endOfLife {
rows.append("End-of-life release")
}
return rows
}
private var additionalPHPRows: [String] {
let interpreters = server.info?.additionalPHPInterpreters ?? []
let versions = interpreters
.map { $0.fullVersion }
.filter { !$0.isEmpty }
if versions.isEmpty {
return ["None"]
}
return [versions.joined(separator: "")]
}
}
#Preview {

View File

@@ -0,0 +1,434 @@
//
// SummaryView.swift
// iKeyMon
//
// Created by tracer on 21.04.26.
//
import SwiftUI
import SwiftData
import Charts
struct SummaryView: View {
private enum TimeRange: String, CaseIterable, Identifiable {
case hour = "Hour"
case day = "Day"
case week = "Week"
case month = "Month"
var id: String { rawValue }
var duration: TimeInterval {
switch self {
case .hour:
return 60 * 60
case .day:
return 24 * 60 * 60
case .week:
return 7 * 24 * 60 * 60
case .month:
return 30 * 24 * 60 * 60
}
}
var axisLabelFormat: Date.FormatStyle {
switch self {
case .hour:
return .dateTime.hour().minute()
case .day:
return .dateTime.hour()
case .week:
return .dateTime.month(.abbreviated).day()
case .month:
return .dateTime.month(.abbreviated).day()
}
}
}
@Binding var server: Server
var canRestart: Bool = false
var isRestarting: Bool = false
var onRestart: (() -> Void)? = nil
@Query(sort: \MetricSample.timestamp, order: .forward) private var metricSamples: [MetricSample]
@State private var selectedRange: TimeRange = .hour
private let cardSpacing: CGFloat = 16
private let minCardWidth: CGFloat = 260
var body: some View {
GeometryReader { geometry in
let contentWidth = max(geometry.size.width - 36, 0)
let chartColumns = summaryColumns(for: contentWidth)
ScrollView {
VStack(alignment: .leading, spacing: 18) {
summaryHeader
HStack {
Spacer()
Picker("Time Range", selection: $selectedRange) {
ForEach(TimeRange.allCases) { range in
Text(range.rawValue)
.tag(range)
}
}
.pickerStyle(.segmented)
.frame(maxWidth: 260)
}
.frame(maxWidth: .infinity)
LazyVGrid(columns: chartColumns, spacing: cardSpacing) {
historyChartCard(
title: "CPU usage",
currentValue: server.info?.load.percent ?? 0,
tint: loadTint,
samples: filteredSamples,
value: \.cpuPercent,
yAxisDomain: cpuChartDomain,
yAxisValues: nil,
clampValuesToDomain: false,
footer: [
("1 min", String(format: "%.2f", server.info?.load.minute1 ?? 0)),
("5 min", String(format: "%.2f", server.info?.load.minute5 ?? 0)),
("15 min", String(format: "%.2f", server.info?.load.minute15 ?? 0))
]
)
historyChartCard(
title: "Memory usage",
currentValue: server.info?.memory.percent ?? 0,
tint: .blue,
samples: filteredSamples,
value: \.memoryPercent,
footer: [
("Used", (server.info?.memory.used ?? 0).toNiceBinaryUnit()),
("Free", (server.info?.memory.free ?? 0).toNiceBinaryUnit()),
("Total", (server.info?.memory.total ?? 0).toNiceBinaryUnit())
]
)
historyChartCard(
title: "Disk usage",
currentValue: server.info?.diskSpace.percent ?? 0,
tint: .green,
samples: filteredSamples,
value: \.diskPercent,
footer: [
("Used", (server.info?.diskSpace.used ?? 0).toNiceBinaryUnit()),
("Free", (server.info?.diskSpace.free ?? 0).toNiceBinaryUnit()),
("Total", (server.info?.diskSpace.total ?? 0).toNiceBinaryUnit())
]
)
historyChartCard(
title: "Swap usage",
currentValue: server.info?.swap.percent ?? 0,
tint: .orange,
samples: filteredSamples,
value: \.swapPercent,
footer: [
("Used", (server.info?.swap.used ?? 0).toNiceBinaryUnit()),
("Free", (server.info?.swap.free ?? 0).toNiceBinaryUnit()),
("Total", (server.info?.swap.total ?? 0).toNiceBinaryUnit())
]
)
}
.frame(maxWidth: .infinity, alignment: .leading)
}
.padding(18)
.frame(width: contentWidth, alignment: .leading)
}
}
}
private func summaryColumns(for width: CGFloat) -> [GridItem] {
let count = max(1, min(4, Int((width + cardSpacing) / (minCardWidth + cardSpacing))))
return Array(
repeating: GridItem(.flexible(minimum: minCardWidth), spacing: cardSpacing, alignment: .top),
count: count
)
}
private var selectedRangeStart: Date {
Date().addingTimeInterval(-selectedRange.duration)
}
private var filteredSamples: [MetricSample] {
return metricSamples.filter { sample in
sample.serverID == server.id && sample.timestamp >= selectedRangeStart
}
}
private var cpuChartDomain: ClosedRange<Double> {
let values = filteredSamples.map(\.cpuPercent) + [server.info?.load.percent ?? 0]
let maximum = max(values.max() ?? 0, 100)
let roundedUpperBound = ceil(maximum / 25) * 25
return 0 ... roundedUpperBound
}
private var summaryHeader: some View {
dashboardCard {
HStack(alignment: .top, spacing: 16) {
VStack(alignment: .leading, spacing: 10) {
HStack(alignment: .center, spacing: 10) {
Circle()
.fill(server.pingable ? Color.green : Color.red)
.frame(width: 10, height: 10)
Text(server.hostname)
.font(.system(size: 22, weight: .semibold))
statusBadge(server.pingable ? "Online" : "Offline", tint: server.pingable ? .green : .red)
}
HStack(spacing: 8) {
statusBadge(panelBadgeText, tint: .orange)
statusBadge(apiBadgeText, tint: .blue)
if let operatingSystemSummary = server.info?.operatingSystemSummary, !operatingSystemSummary.isEmpty {
statusBadge(operatingSystemSummary, tint: .secondary)
}
}
Text(summaryLine)
.font(.subheadline)
.foregroundStyle(.secondary)
.fixedSize(horizontal: false, vertical: true)
}
Spacer(minLength: 12)
if canRestart, let onRestart {
Button(role: .destructive) {
onRestart()
} label: {
if isRestarting {
HStack(spacing: 8) {
ProgressView()
.controlSize(.small)
Text("Rebooting…")
}
} else {
Label("Reboot Server", systemImage: "arrow.clockwise.circle")
}
}
.disabled(isRestarting)
}
}
}
}
private func historyChartCard(
title: String,
currentValue: Double,
tint: Color,
samples: [MetricSample],
value: KeyPath<MetricSample, Double>,
yAxisDomain: ClosedRange<Double> = 0...100,
yAxisValues: [Double]? = [0, 25, 50, 75, 100],
clampValuesToDomain: Bool = true,
footer: [(String, String)],
caption: String? = nil
) -> some View {
dashboardCard {
VStack(alignment: .leading, spacing: 14) {
HStack(alignment: .firstTextBaseline) {
Text(title)
.font(.headline)
Spacer()
Text(String(format: "%.2f %%", currentValue))
.font(.title3.weight(.semibold))
.foregroundStyle(tint)
.monospacedDigit()
}
if samples.isEmpty {
ContentUnavailableView(
"No chart data yet",
systemImage: "chart.xyaxis.line",
description: Text("History appears after a few refresh cycles.")
)
.frame(maxWidth: .infinity)
.padding(.vertical, 24)
} else {
Chart(samples) { sample in
let rawValue = sample[keyPath: value]
let sampleValue = clampValuesToDomain
? min(max(rawValue, yAxisDomain.lowerBound), yAxisDomain.upperBound)
: rawValue
AreaMark(
x: .value("Time", sample.timestamp),
y: .value(title, sampleValue)
)
.interpolationMethod(.catmullRom)
.foregroundStyle(
LinearGradient(
colors: [
tint.opacity(0.55),
tint.opacity(0.12)
],
startPoint: .top,
endPoint: .bottom
)
)
LineMark(
x: .value("Time", sample.timestamp),
y: .value(title, sampleValue)
)
.interpolationMethod(.catmullRom)
.foregroundStyle(tint)
.lineStyle(StrokeStyle(lineWidth: 2))
}
.chartYScale(domain: yAxisDomain)
.chartXScale(domain: selectedRangeStart ... Date())
.chartXAxis {
AxisMarks(values: .automatic(desiredCount: 6)) { value in
AxisGridLine(stroke: StrokeStyle(lineWidth: 0.5))
.foregroundStyle(.secondary.opacity(0.25))
AxisTick()
.foregroundStyle(.secondary.opacity(0.7))
AxisValueLabel(format: selectedRange.axisLabelFormat)
}
}
.chartYAxis {
if let yAxisValues {
AxisMarks(position: .leading, values: yAxisValues) { value in
AxisGridLine(stroke: StrokeStyle(lineWidth: 0.5))
.foregroundStyle(.secondary.opacity(0.2))
AxisTick()
.foregroundStyle(.secondary.opacity(0.7))
AxisValueLabel {
if let percent = value.as(Double.self) {
Text("\(Int(percent))%")
}
}
}
} else {
AxisMarks(position: .leading, values: .automatic(desiredCount: 5)) { value in
AxisGridLine(stroke: StrokeStyle(lineWidth: 0.5))
.foregroundStyle(.secondary.opacity(0.2))
AxisTick()
.foregroundStyle(.secondary.opacity(0.7))
AxisValueLabel {
if let percent = value.as(Double.self) {
Text("\(Int(percent))%")
}
}
}
}
}
.frame(height: 220)
}
HStack(spacing: 16) {
ForEach(Array(footer.enumerated()), id: \.offset) { _, item in
metric(item.0, value: item.1)
}
}
if let caption {
Text(caption)
.font(.caption)
.foregroundStyle(.secondary)
}
}
}
}
private func metric(_ title: String, value: String) -> some View {
VStack(alignment: .leading, spacing: 4) {
Text(title.uppercased())
.font(.caption2.weight(.semibold))
.foregroundStyle(.secondary)
Text(value)
.font(.system(.body, design: .monospaced))
}
.frame(maxWidth: .infinity, alignment: .leading)
}
private func statusBadge(_ text: String, tint: Color) -> some View {
Text(text)
.font(.caption.weight(.semibold))
.foregroundStyle(tint == .secondary ? .secondary : tint)
.padding(.horizontal, 10)
.padding(.vertical, 5)
.background {
Capsule(style: .continuous)
.fill(tint == .secondary ? Color.secondary.opacity(0.12) : tint.opacity(0.14))
}
}
private func dashboardCard<Content: View>(@ViewBuilder content: () -> Content) -> some View {
VStack(alignment: .leading, spacing: 0) {
content()
}
.padding(18)
.frame(maxWidth: .infinity, alignment: .leading)
.background(
RoundedRectangle(cornerRadius: 12, style: .continuous)
.fill(Color.white.opacity(0.03))
)
.overlay {
RoundedRectangle(cornerRadius: 12, style: .continuous)
.stroke(Color.white.opacity(0.06), lineWidth: 1)
}
}
private var apiBadgeText: String {
guard let apiVersion = server.info?.apiVersion, !apiVersion.isEmpty else {
return "API unknown"
}
return "API \(apiVersion)"
}
private var panelBadgeText: String {
guard let panelVersion = server.info?.panelVersion, !panelVersion.isEmpty else {
return "KeyHelp unknown"
}
return "KeyHelp \(panelVersion)"
}
private var summaryLine: String {
var parts: [String] = []
if let uptime = server.info?.uptime, !uptime.isEmpty {
parts.append("Uptime \(uptime)")
}
if let serverTime = server.info?.formattedServerTime, !serverTime.isEmpty {
parts.append("Server time \(serverTime)")
}
if parts.isEmpty {
return "Live summary for \(server.hostname)"
}
return parts.joined(separator: "")
}
private var loadTint: Color {
switch server.info?.load.level.lowercased() {
case "warning":
return .orange
case "critical":
return .red
default:
return .green
}
}
}
#Preview {
struct PreviewWrapper: View {
@State var previewServer = Server(hostname: "example.com", info: .placeholder)
var body: some View {
SummaryView(server: $previewServer, canRestart: true)
.padding()
.frame(width: 1100, height: 760)
}
}
return PreviewWrapper()
}