mirror of
https://github.com/FBukovina/Atoll.git
synced 2026-10-27 15:14:33 +00:00
Somewhat Fixed UI
This commit is contained in:
Hariharan Mudaliar
parent
267c4ba092
commit
5603ce4c1e
2 changed files with 108 additions and 62 deletions
|
|
@ -62,38 +62,57 @@ struct CPUUsageDashboard: View {
|
||||||
let idleColor: Color
|
let idleColor: Color
|
||||||
|
|
||||||
var body: some View {
|
var body: some View {
|
||||||
HStack(alignment: .center, spacing: 28) {
|
let usageSection = VStack(alignment: .leading, spacing: 12) {
|
||||||
CPUSegmentDonut(
|
Text("Usage")
|
||||||
breakdown: breakdown,
|
.font(.caption)
|
||||||
systemColor: systemColor,
|
.foregroundColor(.secondary)
|
||||||
userColor: userColor,
|
DetailRow(color: systemColor.opacity(0.95), label: "System", value: StatsFormatting.percentage(breakdown.system))
|
||||||
idleColor: idleColor
|
DetailRow(color: userColor.opacity(0.95), label: "User", value: StatsFormatting.percentage(breakdown.user))
|
||||||
)
|
DetailRow(color: idleColor.opacity(0.7), label: "Idle", value: StatsFormatting.percentage(breakdown.idle))
|
||||||
.frame(width: 132, height: 132)
|
DetailRow(color: nil, label: "Active", value: StatsFormatting.percentage(breakdown.activeUsage))
|
||||||
|
}
|
||||||
VStack(alignment: .leading, spacing: 12) {
|
.frame(maxWidth: .infinity, alignment: .leading)
|
||||||
Text("Usage")
|
|
||||||
.font(.caption)
|
let systemSection = VStack(alignment: .leading, spacing: 10) {
|
||||||
.foregroundColor(.secondary)
|
Text("System")
|
||||||
DetailRow(color: systemColor.opacity(0.95), label: "System", value: StatsFormatting.percentage(breakdown.system))
|
.font(.caption)
|
||||||
DetailRow(color: userColor.opacity(0.95), label: "User", value: StatsFormatting.percentage(breakdown.user))
|
.foregroundColor(.secondary)
|
||||||
DetailRow(color: idleColor.opacity(0.7), label: "Idle", value: StatsFormatting.percentage(breakdown.idle))
|
DetailRow(color: nil, label: "Logical cores", value: "\(max(coreCount, 1))")
|
||||||
DetailRow(color: nil, label: "Active", value: StatsFormatting.percentage(breakdown.activeUsage))
|
DetailRow(color: nil, label: "Uptime", value: StatsFormatting.abbreviatedDuration(uptime))
|
||||||
}
|
Divider().padding(.vertical, 4)
|
||||||
.frame(maxWidth: .infinity, alignment: .leading)
|
DetailRow(color: nil, label: "Load 1m", value: String(format: "%.2f", loadAverage.oneMinute))
|
||||||
|
DetailRow(color: nil, label: "Load 5m", value: String(format: "%.2f", loadAverage.fiveMinutes))
|
||||||
VStack(alignment: .leading, spacing: 10) {
|
DetailRow(color: nil, label: "Load 15m", value: String(format: "%.2f", loadAverage.fifteenMinutes))
|
||||||
Text("System")
|
}
|
||||||
.font(.caption)
|
.frame(maxWidth: .infinity, alignment: .leading)
|
||||||
.foregroundColor(.secondary)
|
|
||||||
DetailRow(color: nil, label: "Logical cores", value: "\(max(coreCount, 1))")
|
return ViewThatFits(in: .horizontal) {
|
||||||
DetailRow(color: nil, label: "Uptime", value: StatsFormatting.abbreviatedDuration(uptime))
|
VStack(alignment: .leading, spacing: 20) {
|
||||||
|
CPUSegmentDonut(
|
||||||
|
breakdown: breakdown,
|
||||||
|
systemColor: systemColor,
|
||||||
|
userColor: userColor,
|
||||||
|
idleColor: idleColor
|
||||||
|
)
|
||||||
|
.frame(width: 132, height: 132)
|
||||||
|
.frame(maxWidth: .infinity, alignment: .leading)
|
||||||
|
|
||||||
|
usageSection
|
||||||
Divider().padding(.vertical, 4)
|
Divider().padding(.vertical, 4)
|
||||||
DetailRow(color: nil, label: "Load 1m", value: String(format: "%.2f", loadAverage.oneMinute))
|
systemSection
|
||||||
DetailRow(color: nil, label: "Load 5m", value: String(format: "%.2f", loadAverage.fiveMinutes))
|
}
|
||||||
DetailRow(color: nil, label: "Load 15m", value: String(format: "%.2f", loadAverage.fifteenMinutes))
|
HStack(alignment: .top, spacing: 28) {
|
||||||
|
CPUSegmentDonut(
|
||||||
|
breakdown: breakdown,
|
||||||
|
systemColor: systemColor,
|
||||||
|
userColor: userColor,
|
||||||
|
idleColor: idleColor
|
||||||
|
)
|
||||||
|
.frame(width: 132, height: 132)
|
||||||
|
|
||||||
|
usageSection
|
||||||
|
systemSection
|
||||||
}
|
}
|
||||||
.frame(maxWidth: .infinity, alignment: .leading)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -58,42 +58,69 @@ private struct MemoryUsageDashboard: View {
|
||||||
private let freeColor = Color.gray.opacity(0.28)
|
private let freeColor = Color.gray.opacity(0.28)
|
||||||
|
|
||||||
var body: some View {
|
var body: some View {
|
||||||
HStack(alignment: .center, spacing: 28) {
|
let totalsSection = VStack(alignment: .leading, spacing: 12) {
|
||||||
ZStack {
|
DetailRow(color: accentColor.opacity(0.8), label: "Used", value: formattedBytes(breakdown.usedBytes))
|
||||||
Circle()
|
DetailRow(color: freeColor.opacity(0.9), label: "Free", value: formattedBytes(breakdown.freeBytes))
|
||||||
.stroke(freeColor.opacity(0.35), lineWidth: 14)
|
DetailRow(color: nil, label: "Total", value: formattedBytes(breakdown.totalBytes))
|
||||||
.frame(width: 128, height: 128)
|
}
|
||||||
|
.frame(maxWidth: .infinity, alignment: .leading)
|
||||||
MemoryUsageRing(breakdown: breakdown, usedColor: accentColor, freeColor: freeColor)
|
|
||||||
.frame(width: 128, height: 128)
|
let breakdownSection = VStack(alignment: .leading, spacing: 8) {
|
||||||
|
Text("Breakdown")
|
||||||
VStack(spacing: 4) {
|
.font(.caption)
|
||||||
Text(StatsFormatting.percentage(breakdown.usedPercentage))
|
.foregroundColor(.secondary)
|
||||||
.font(.system(size: 30, weight: .bold, design: .rounded))
|
MemoryBreakdownRow(label: "App", value: breakdown.appBytes, total: breakdown.totalBytes, color: accentColor.opacity(0.85))
|
||||||
Text("Used")
|
MemoryBreakdownRow(label: "Cached", value: breakdown.cacheBytes, total: breakdown.totalBytes, color: accentColor.opacity(0.65))
|
||||||
.font(.footnote)
|
MemoryBreakdownRow(label: "Wired", value: breakdown.wiredBytes, total: breakdown.totalBytes, color: accentColor.opacity(0.45))
|
||||||
.foregroundColor(.secondary)
|
MemoryBreakdownRow(label: "Compressed", value: breakdown.compressedBytes, total: breakdown.totalBytes, color: accentColor.opacity(0.35))
|
||||||
|
}
|
||||||
|
.frame(maxWidth: .infinity, alignment: .leading)
|
||||||
|
|
||||||
|
return ViewThatFits(in: .horizontal) {
|
||||||
|
VStack(alignment: .leading, spacing: 20) {
|
||||||
|
ZStack {
|
||||||
|
Circle()
|
||||||
|
.stroke(freeColor.opacity(0.35), lineWidth: 14)
|
||||||
|
.frame(width: 128, height: 128)
|
||||||
|
|
||||||
|
MemoryUsageRing(breakdown: breakdown, usedColor: accentColor, freeColor: freeColor)
|
||||||
|
.frame(width: 128, height: 128)
|
||||||
|
|
||||||
|
VStack(spacing: 4) {
|
||||||
|
Text(StatsFormatting.percentage(breakdown.usedPercentage))
|
||||||
|
.font(.system(size: 30, weight: .bold, design: .rounded))
|
||||||
|
Text("Used")
|
||||||
|
.font(.footnote)
|
||||||
|
.foregroundColor(.secondary)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
.frame(maxWidth: .infinity, alignment: .leading)
|
||||||
|
|
||||||
VStack(alignment: .leading, spacing: 12) {
|
|
||||||
DetailRow(color: accentColor.opacity(0.8), label: "Used", value: formattedBytes(breakdown.usedBytes))
|
|
||||||
DetailRow(color: freeColor.opacity(0.9), label: "Free", value: formattedBytes(breakdown.freeBytes))
|
|
||||||
DetailRow(color: nil, label: "Total", value: formattedBytes(breakdown.totalBytes))
|
|
||||||
}
|
|
||||||
.frame(maxWidth: .infinity, alignment: .leading)
|
|
||||||
|
|
||||||
VStack(alignment: .leading, spacing: 8) {
|
|
||||||
Text("Breakdown")
|
|
||||||
.font(.caption)
|
|
||||||
.foregroundColor(.secondary)
|
|
||||||
|
|
||||||
MemoryBreakdownRow(label: "App", value: breakdown.appBytes, total: breakdown.totalBytes, color: accentColor.opacity(0.85))
|
totalsSection
|
||||||
MemoryBreakdownRow(label: "Cached", value: breakdown.cacheBytes, total: breakdown.totalBytes, color: accentColor.opacity(0.65))
|
Divider().padding(.vertical, 4)
|
||||||
MemoryBreakdownRow(label: "Wired", value: breakdown.wiredBytes, total: breakdown.totalBytes, color: accentColor.opacity(0.45))
|
breakdownSection
|
||||||
MemoryBreakdownRow(label: "Compressed", value: breakdown.compressedBytes, total: breakdown.totalBytes, color: accentColor.opacity(0.35))
|
}
|
||||||
|
HStack(alignment: .top, spacing: 28) {
|
||||||
|
ZStack {
|
||||||
|
Circle()
|
||||||
|
.stroke(freeColor.opacity(0.35), lineWidth: 14)
|
||||||
|
.frame(width: 128, height: 128)
|
||||||
|
|
||||||
|
MemoryUsageRing(breakdown: breakdown, usedColor: accentColor, freeColor: freeColor)
|
||||||
|
.frame(width: 128, height: 128)
|
||||||
|
|
||||||
|
VStack(spacing: 4) {
|
||||||
|
Text(StatsFormatting.percentage(breakdown.usedPercentage))
|
||||||
|
.font(.system(size: 30, weight: .bold, design: .rounded))
|
||||||
|
Text("Used")
|
||||||
|
.font(.footnote)
|
||||||
|
.foregroundColor(.secondary)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
totalsSection
|
||||||
|
breakdownSection
|
||||||
}
|
}
|
||||||
.frame(maxWidth: .infinity, alignment: .leading)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue