Skip to content

[metrics] show portrait success/error counts #113

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aaylward merged 1 commit into from
Sep 15, 2025
Merged

[metrics] show portrait success/error counts #113

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 46 additions & 42 deletions src/apps/metrics-systems/components/MetricsDashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,16 +178,6 @@ const MetricsDashboard = ({ onConnectionStateChange, activeTab = 'system', onTab
return data
}

const getRequestRateData = () => {
if (!portraitTimeseries?.series) return []
const requestSeries = portraitTimeseries.series.find(s => s.metric_name === 'request_rate')
if (!requestSeries?.values?.length) return []

return requestSeries.values.map(v => ({
time: formatTimestamp(v.timestamp),
rate: Math.max(0, v.value || 0)
}))
}

const getDiskIOData = () => {
if (!systemTimeseries?.series) return []
Expand Down Expand Up @@ -287,27 +277,40 @@ const MetricsDashboard = ({ onConnectionStateChange, activeTab = 'system', onTab
}))
}

const getRequestSuccessRateData = () => {

const getCacheHitRateData = () => {
if (!portraitTimeseries?.series) return []

const successSeries = portraitTimeseries.series.find(s => s.metric_name === 'request_success_rate')

const cacheSeries = portraitTimeseries.series.find(s => s.metric_name === 'cache_hit_rate')
if (!cacheSeries?.values?.length) return []

return cacheSeries.values.map(v => ({
time: formatTimestamp(v.timestamp),
hitRate: Math.max(0, Math.min(100, v.value || 0))
}))
}

const getRequestSuccessCountData = () => {
if (!portraitTimeseries?.series) return []

const successSeries = portraitTimeseries.series.find(s => s.metric_name === 'request_success_count')
if (!successSeries?.values?.length) return []

return successSeries.values.map(v => ({
time: formatTimestamp(v.timestamp),
successRate: Math.max(0, Math.min(100, v.value || 0))
count: Math.max(0, v.value || 0)
}))
}

const getCacheHitRateData = () => {
const getRequestFailureCountData = () => {
if (!portraitTimeseries?.series) return []
const cacheSeries = portraitTimeseries.series.find(s => s.metric_name === 'cache_hit_rate')
if (!cacheSeries?.values?.length) return []
return cacheSeries.values.map(v => ({

const failureSeries = portraitTimeseries.series.find(s => s.metric_name === 'request_failure_count')
if (!failureSeries?.values?.length) return []

return failureSeries.values.map(v => ({
time: formatTimestamp(v.timestamp),
hitRate: Math.max(0, Math.min(100, v.value || 0))
count: Math.max(0, v.value || 0)
}))
}

Expand Down Expand Up @@ -595,44 +598,44 @@ const MetricsDashboard = ({ onConnectionStateChange, activeTab = 'system', onTab
<div className={styles.section}>
<h2 className={styles.sectionTitle}>Request Performance</h2>
<div className={styles.sectionGrid}>
{/* Request Rate */}
{/* Request Success Count */}
<div className={styles.compactChart}>
<h4>Request Rate</h4>
{getRequestRateData().length > 0 ? (
<h4>Request Success Count</h4>
{getRequestSuccessCountData().length > 0 ? (
<ChartErrorBoundary>
<ResponsiveContainer width="100%" height={180}>
<BarChart data={getRequestRateData()}>
<AreaChart data={getRequestSuccessCountData()}>
<CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.1)" />
<XAxis dataKey="time" stroke="#888" fontSize={10} interval="preserveStartEnd" />
<YAxis stroke="#888" fontSize={10} tickFormatter={(value) => `${value}/s`} />
<Tooltip
contentStyle={{ backgroundColor: 'rgba(13, 17, 32, 0.9)', border: '1px solid rgba(255, 102, 255, 0.3)', borderRadius: '8px', fontSize: '12px' }}
formatter={(value) => [`${Number(value).toFixed(2)}/s`, 'Requests']}
<YAxis stroke="#888" fontSize={10} />
<Tooltip
contentStyle={{ backgroundColor: 'rgba(13, 17, 32, 0.9)', border: '1px solid rgba(102, 255, 102, 0.3)', borderRadius: '8px', fontSize: '12px' }}
formatter={(value) => [`${Number(value).toFixed(0)}`, 'Success Count']}
/>
<Bar dataKey="rate" fill={COLORS.info} />
</BarChart>
<Area type="monotone" dataKey="count" stroke={COLORS.success} fill="rgba(102, 255, 102, 0.3)" strokeWidth={2} />
</AreaChart>
</ResponsiveContainer>
</ChartErrorBoundary>
) : (
<NoDataMessage />
)}
</div>

{/* Request Success Rate */}
{/* Request Error Count */}
<div className={styles.compactChart}>
<h4>Request Success Rate</h4>
{getRequestSuccessRateData().length > 0 ? (
<h4>Request Error Count</h4>
{getRequestFailureCountData().length > 0 ? (
<ChartErrorBoundary>
<ResponsiveContainer width="100%" height={180}>
<AreaChart data={getRequestSuccessRateData()}>
<AreaChart data={getRequestFailureCountData()}>
<CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.1)" />
<XAxis dataKey="time" stroke="#888" fontSize={10} interval="preserveStartEnd" />
<YAxis stroke="#888" fontSize={10} domain={[0, 100]} tickFormatter={(value) => `${value}%`} />
<Tooltip
contentStyle={{ backgroundColor: 'rgba(13, 17, 32, 0.9)', border: '1px solid rgba(102, 255, 102, 0.3)', borderRadius: '8px', fontSize: '12px' }}
formatter={(value) => [`${Number(value).toFixed(1)}%`, 'Success Rate']}
<YAxis stroke="#888" fontSize={10} />
<Tooltip
contentStyle={{ backgroundColor: 'rgba(13, 17, 32, 0.9)', border: '1px solid rgba(255, 102, 102, 0.3)', borderRadius: '8px', fontSize: '12px' }}
formatter={(value) => [`${Number(value).toFixed(0)}`, 'Error Count']}
/>
<Area type="monotone" dataKey="successRate" stroke={COLORS.success} fill="rgba(102, 255, 102, 0.3)" strokeWidth={2} />
<Area type="monotone" dataKey="count" stroke={COLORS.danger} fill="rgba(255, 102, 102, 0.3)" strokeWidth={2} />
</AreaChart>
</ResponsiveContainer>
</ChartErrorBoundary>
Expand All @@ -651,7 +654,7 @@ const MetricsDashboard = ({ onConnectionStateChange, activeTab = 'system', onTab
<CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.1)" />
<XAxis dataKey="time" stroke="#888" fontSize={10} interval="preserveStartEnd" />
<YAxis stroke="#888" fontSize={10} />
<Tooltip
<Tooltip
contentStyle={{ backgroundColor: 'rgba(13, 17, 32, 0.9)', border: '1px solid rgba(255, 255, 255, 0.3)', borderRadius: '8px', fontSize: '12px' }}
formatter={(value, name) => [
name === 'avgDuration' ? `${Number(value).toFixed(2)}ms` : `${Number(value).toFixed(1)}%`,
Expand All @@ -668,6 +671,7 @@ const MetricsDashboard = ({ onConnectionStateChange, activeTab = 'system', onTab
<NoDataMessage />
)}
</div>

</div>
</div>

Expand Down