Skip to content
KONIGI Patterns

Domains

Infrastructure and FinOps

What the infrastructure is doing and what it costs. Two questions, usually asked by two different people.

4 products 23 captures

Products 4

Cloudflare Radar

Public internet-traffic dashboards with location and time controls and links from summaries to detailed views.

Security · Infrastructure and FinOps
Datadog

Everything on one surface, which makes it the best place to see what a page looks like when the product refuses to choose between metrics, logs, traces and cost.

Observability · Infrastructure and FinOps · Security
Grafana

Examples of panel grids, shared selectors, stat tiles, and chart configuration.

Observability · Infrastructure and FinOps · IoT and energy
Netdata

A large collection of system charts with per-chart controls and anomaly-rate views.

Infrastructure and FinOps · Observability

Patterns seen in this domain 53

Captures

Newest first within each product.

Cloudflare Radar

Cloudflare Radar — Worldwide Overview, dark
Dark-first data palette. The darker traffic series has less contrast against this background. Delta indicator. Red change labels remain prominent in both themes. Categorical series palette. The category colors stay the same across themes, but their visual prominence changes.
Worldwide Overview, dark September 11, 2026 Public site, signed out; no version string exposed medium · dark · desktop-web
This capture shows Radar’s dark theme alongside the light version captured minutes earlier. The traffic series use the same hues, but the darker blue is harder to distinguish from the dark background. The lighter segments in the stacked bars also stand out more. The red browser-change labels remain prominent in both themes. The pair shows why a palette needs testing on each background.
Cloudflare Radar — Worldwide Overview
Multi-page dashboard. The rail links to eleven sections and expands the current one. Compare periods. The dotted line shows the previous seven days on the same axes. Delta indicator. Each browser share has a change value beneath it. Overview then detail. Each summary links to a fuller page through its heading arrow. Ratio and rate. Both parts of the split are named and shown as percentages. Stacked composition. Four mitigation categories fill a 100% bar, with their values printed above it. Ranked list. This top-ten list shows rank without values.
Worldwide Overview September 11, 2026 Public site, signed out; no version string exposed medium · light · desktop-web
Radar’s overview uses location and time controls to set the scope of the page. Each summary panel links to a fuller section, making the page a starting point for further reading. Values are printed above the charts, so people can read figures without estimating them from marks. The bot and human shares, for example, are both labeled beside their bar.

Grafana

Grafana — Grafana SLO / SLO Overview, loading
Loading and skeleton state. The content area does not reserve space for the rows that will appear. Loading and skeleton state. The loading message confirms that a request is in progress.
Grafana SLO / SLO Overview, loading September 11, 2026 Grafana Play (signed out; captured 1.2s after navigation) sparse · dark · desktop-web
This capture shows the SLO Overview shortly after navigation. A loading message appears beside the navigation rail, but the future rows have no placeholder space. The completed page appeared a few seconds later. The message identifies loading clearly, though this screenshot cannot establish how the page handles a failed or stalled request.
Grafana — Examples / Alert List
Alert rule attached to panel. Alert names use different conventions and do not consistently identify the affected system. Alert rule attached to panel. This alert has been firing for more than seventeen days. Semantic status color. Pending is labeled separately from firing. Drill-down. Each row links back to the alert rule. Filter bar. The row states how many instances are hidden by filters.
Examples / Alert List September 10, 2026 Grafana Play (signed out; no version string exposed) medium · dark · desktop-web
This list shows seven alerts with their states and durations. Several have been firing for days, which raises a question about whether the rules still prompt a useful response. The names use inconsistent conventions and often do not describe the affected system clearly. Pending and firing states are labeled separately, and each row links back to its rule.
Grafana — Demo / Annotations
Annotation. Frequent event markers compete with the request-rate line. Annotation. The event list provides readable timestamps and tags. Time-range picker. The selected twenty-four-hour range affects how densely markers appear. Filter bar. A tag filter is already applied to the annotations.
Demo / Annotations September 10, 2026 Grafana Play (signed out; no version string exposed) medium · dark · desktop-web
Frequent red event markers make the request-rate line difficult to follow across this twenty-four-hour view. The tag filter is already active, so filtering alone has not reduced the crowding enough. The event list below is easier to read because it separates timestamps and tags into individual entries. This example shows why event density matters as much as recording the events.
  • Annotation Frequent event markers compete with the request-rate line.
  • Annotation The event list provides readable timestamps and tags.
  • Filter bar A tag filter is already applied to the annotations.
  • Time-range picker The selected twenty-four-hour range affects how densely markers appear.
Grafana — Where The Cool Dashboards Live / Chicago L Trains
Data table. The raw feed includes the color value for each route. Wallboard mode. The next departure receives the largest text and panel. Panel grid. Later departures use smaller rows, making their lower priority visible. Freshness indicator. A countdown shows time until arrival but does not state the feed’s age. Semantic status color. Green identifies both a route and an on-time status; the words distinguish the meanings.
Where The Cool Dashboards Live / Chicago L Trains September 10, 2026 Grafana Play (signed out; no version string exposed) sparse · dark · wall
The departure board gives the next train more space than later arrivals and uses large text without hover-only details. Route colors connect the display to the train lines people already know. Green also appears in the On Time status, so the same hue has two meanings in one row. The status label helps distinguish them. Countdown values are useful, but the board also needs a clear indication of feed age.
  • Wallboard mode The next departure receives the largest text and panel.
  • Panel grid Later departures use smaller rows, making their lower priority visible.
  • Semantic status color Green identifies both a route and an on-time status; the words distinguish the meanings.
  • Freshness indicator A countdown shows time until arrival but does not state the feed’s age.
  • Data table The raw feed includes the color value for each route.
Grafana — Examples / Dashboard Variables
Categorical series palette. Similar hostnames and many colors make series matching difficult. Data table. A narrow table column truncates its content. Template variable. Selectors provide values used by panel queries and shared in the URL. Explain this metric. A text panel explains a hidden variable and its current value. Filter bar. Selected values appear as removable chips.
Examples / Dashboard Variables September 10, 2026 Grafana Play (signed out; no version string exposed) medium · dark · desktop-web
This dashboard demonstrates six selectors and explains how their values affect the page. Selected values appear as removable chips, making the active scope easy to read. A text panel also describes a hidden variable that has no visible control. Another note explains that changing the data source clears an instance selection. These dependencies need clear feedback when people change a value.
Grafana — Examples / Gauge
Semantic status color. Different values receive the same red treatment; the threshold needs explanation. Gauge and dial. Several similar disk values each occupy a separate gauge. Sequential and diverging scales. The multicolor ramp needs its labels to explain the value order. Sparkline. A sparkline adds history inside the gauge. Threshold line and region. A colored rim displays threshold regions.
Examples / Gauge September 10, 2026 Grafana Play (signed out; no version string exposed) medium · dark · desktop-web
The showcase includes several gauges with similar disk values. Comparing them requires reading the numbers, while each arc uses substantial space. A compact set of bars would make those values easier to compare. Elsewhere, different values share the same red treatment, making the threshold definition important to understanding the result. The examples also mix color ramps, sparklines, and threshold bands.
Grafana — Examples / Geomap
Sequential and diverging scales. The density layer groups nearby points; its radius affects the visible clusters. Geo map with markers. Satellite colors compete with the markers. Legend and series toggle. Layer 1 names the layer without explaining its data. Geo map with markers. Small green markers are difficult to distinguish on the dark background.
Examples / Geomap September 10, 2026 Grafana Play (signed out; no version string exposed) medium · dark · desktop-web
The same flight data appears on several map backgrounds. Small green markers are difficult to distinguish on the dark maps and compete with terrain colors on the satellite view. The density layer makes broad clusters easier to see, though its settings affect how widely those clusters spread. Legends labeled Layer 1 do not explain the data being shown.
Grafana — Examples / Histogram
Sequential and diverging scales. The gradient adds decoration; bar height already shows the count. Time series. The source series shows the values before they are grouped into intervals. Histogram and distribution. Automatic intervals reveal two peaks near 27 and 30.4. Histogram and distribution. Wider intervals reduce the same data to four bars and obscure the separate peaks. Histogram and distribution. Another distribution shows a long shoulder and a smaller second peak.
Examples / Histogram September 10, 2026 Grafana Play (signed out; no version string exposed) medium · dark · desktop-web
The source series appears with two histogram settings. Automatic intervals reveal two peaks, while the wider bucket-size setting combines the data into four bars and makes that distinction harder to see. The underlying data is the same. This is a useful example of why interval size belongs in the interpretation of a histogram, not only in its settings.
Grafana — Examples / Logs Panel
Drill-down. The trace ID connects the log event to its request. Stacked composition. Stacked log counts show volume by level over time. Log tail. Log rows are truncated and contain timestamps in two timezones.
Examples / Logs Panel September 10, 2026 Grafana Play (signed out; no version string exposed) medium · dark · desktop-web
A stacked volume chart sits above the individual log events, linking the overall pattern to specific lines. Each row shows a local timestamp and a UTC timestamp, but their timezones are not clearly labeled. That can make the same instant look like two different times. Expanded event details include a trace ID, providing a route to the request behind the message.
  • Stacked composition Stacked log counts show volume by level over time.
  • Log tail Log rows are truncated and contain timestamps in two timezones.
  • Drill-down The trace ID connects the log event to its request.
Grafana — Examples / Node graph panel
Service map. Nodes represent services and lines represent their connections. Semantic status color. Each node combines two values with a success/error ring. Legend and series toggle. The legend explains the measures shown inside and around nodes. Zoom and pan on time. Zoom controls help reveal nodes outside the visible panel.
Examples / Node graph panel September 10, 2026 Grafana Play (signed out; no version string exposed) sparse · dark · desktop-web
Several service nodes extend beyond the panel’s right edge, so the full graph is not visible at once. Each node contains two values and a colored ring, with a legend explaining the measures. This adds detail but makes the map harder to scan for a single overall state. The zoom control helps reach the clipped nodes, though a clearer initial fit would make the relationships easier to inspect.
Grafana — Examples / Polystat Visualization Showcase
Host map. Touching hexagons make adjacent cells read as a group. Host map. Circles leave gaps between neighboring cells. Semantic status color. Cell fills represent OK, warning, and critical states. Ranked list. Descending order brings the highest values first. KPI tile. Label-only cells show a name and color without a numeric value.
Examples / Polystat Visualization Showcase September 10, 2026 Grafana Play (signed out; no version string exposed) medium · dark · desktop-web
This showcase displays the same threshold-colored cells in several shapes. Hexagons touch along their edges, while circles leave gaps, changing how adjacent cells form visible groups. The choice matters when scanning many items together. Other panels demonstrate named states, sorting, and label-only cells, each emphasizing a different part of the reading.
  • Host map Touching hexagons make adjacent cells read as a group.
  • Host map Circles leave gaps between neighboring cells.
  • Semantic status color Cell fills represent OK, warning, and critical states.
  • Ranked list Descending order brings the highest values first.
  • KPI tile Label-only cells show a name and color without a numeric value.
Grafana — Grafana SLO / SLO Overview
Small multiples. Sparkline scales differ between rows, limiting direct comparison. Metric targets. The budget column adds context to each objective’s result. Error and stale state. No data uses the same red treatment as a breach. Target and progress. Large negative budget values need a clear explanation of the calculation. Header KPI strip. The top tiles count targets, objectives, and series rather than showing whether goals are met.
Grafana SLO / SLO Overview September 10, 2026 Grafana Play (signed out; no version string exposed) dense · dark · desktop-web
The overview lists twenty-eight objectives with an indicator, remaining budget, and sparkline for each. The budget column combines large negative percentages with positive values, but gives little explanation of how to read them. No data uses the same red as breached objectives, making missing information harder to distinguish from a failed target. The sparklines also use different scales, so their shapes cannot be compared directly across rows.
  • Metric targets The budget column adds context to each objective’s result.
  • Target and progress Large negative budget values need a clear explanation of the calculation.
  • Error and stale state No data uses the same red treatment as a breach.
  • Small multiples Sparkline scales differ between rows, limiting direct comparison.
  • Header KPI strip The top tiles count targets, objectives, and series rather than showing whether goals are met.
Grafana — Examples / Stats, light theme
Sparkline. Faint area fills are harder to distinguish on the light background. Dark-first data palette. Value colors that stand out on dark backgrounds appear pale on white. Grayscale with alerts. Unlabeled green cells remain difficult to interpret in either theme. Dark-first data palette. The orange value has limited visual contrast against white. Semantic status color. Whole-tile fills keep the text on a colored background.
Examples / Stats, light theme September 10, 2026 Grafana Play (signed out; ?theme=light) dense · light · desktop-web
This light-theme capture shows the same stat-panel options as the dark version. Several value colors become pale against white, especially pink and orange. Whole-tile fills retain a different relationship between text and background, while the faint sparkline areas are harder to see. The pair is useful for checking each treatment on both backgrounds rather than assuming a theme switch preserves readability.
Grafana — Examples / Stats
Header KPI strip. Consistent label and value positions make the tile row easier to scan. KPI tile. A label, value, unit, and sparkline appear without an explicit comparison. Dark-first data palette. The dark theme makes these value colors more prominent than in the light capture. Semantic status color. The cells have no text, leaving color as the only visible cue. Sparkline. Sparklines use individual scales, so row-to-row comparison needs care. KPI tile. Values appear without labels explaining what they measure. Grayscale with alerts. Multiple strong colors compete for attention. Semantic status color. Whole-tile color strongly emphasizes every value in this group.
Examples / Stats September 10, 2026 Grafana Play (signed out; no version string exposed) dense · dark · desktop-web
Grafana’s stat showcase compares value colors, background fills, layouts, and text options. Most examples emphasize presentation without adding a comparison value or clear reference point. The No text panel uses color alone, leaving cells without labels or numbers. These are useful demonstrations of settings, but a working dashboard needs enough context to explain each value and state.
  • KPI tile A label, value, unit, and sparkline appear without an explicit comparison.
  • Dark-first data palette The dark theme makes these value colors more prominent than in the light capture.
  • Sparkline Sparklines use individual scales, so row-to-row comparison needs care.
  • Semantic status color Whole-tile color strongly emphasizes every value in this group.
  • Grayscale with alerts Multiple strong colors compete for attention.
  • KPI tile Values appear without labels explaining what they measure.
  • Semantic status color The cells have no text, leaving color as the only visible cue.
  • Header KPI strip Consistent label and value positions make the tile row easier to scan.
Grafana — Examples / State timeline and Status history
Semantic status color. Both states have text labels as well as colors. Sequential and diverging scales. Separate sample marks use color for temperature rather than health. Status history. State names appear inside continuous time regions. Threshold line and region. Thresholds convert numeric values into named bands. Time series. The line chart preserves the numeric values behind the state view.
Examples / State timeline and Status history September 10, 2026 Grafana Play (signed out; no version string exposed) medium · dark · desktop-web
This page places a state timeline above a time-series view of the same query. The timeline converts numeric ranges into named states, making the periods easier to scan. The line chart keeps the numeric variation available for closer reading. Labels inside the colored regions explain their meaning, reducing reliance on color alone.
Grafana — Examples / Table
Data table. Narrow columns squeeze the bar and truncate text. Data table. Threshold colors help people scan the column for states. Sequential and diverging scales. A continuous color scale highlights differences down the column. Semantic status color. Value mappings pair named states with their colors. Delta indicator. Direction labels appear in a paginated table without a comparison amount.
Examples / Table September 10, 2026 Grafana Play (signed out; no version string exposed) dense · dark · desktop-web
The tables demonstrate colored cells, gradients, images, bars, pills, and richer text. Some treatments become less useful in narrow columns: a bar is squeezed into a thin strip and nearby text is cut off. Another table shows many pages of results alongside sort controls. The interface needs to make clear whether sorting applies to all returned records or a smaller subset.
Grafana — Grafana Heatmaps
Small multiples. Repeated panels make the effects of different settings easier to compare. Time series. The source series supplies the data for the heatmaps. Heatmap. Linear value intervals concentrate much of this distribution near the bottom. Sequential and diverging scales. Each heatmap has its own legend; check the ranges before comparing colors.
Grafana Heatmaps September 9, 2026 Grafana Play (signed out; no version string exposed) dense · dark · desktop-web
This teaching dashboard shows the source series and several heatmaps built from it. Different value scales and bucket settings change the apparent distribution. The linear view concentrates much of the data near the bottom; logarithmic views spread it across more of the chart. Titles identify the settings, making the grid useful for comparing their effects.
  • Time series The source series supplies the data for the heatmaps.
  • Heatmap Linear value intervals concentrate much of this distribution near the bottom.
  • Small multiples Repeated panels make the effects of different settings easier to compare.
  • Sequential and diverging scales Each heatmap has its own legend; check the ranges before comparing colors.
Grafana — Linux node / fleet overview
Empty state. The chart reports No data but gives little help with the cause. Header KPI strip. Status tiles sit above the charts. Error and stale state. The red tile reports missing metrics and suggests checking configuration. Freshness indicator. The freshness tile reports No data without an update time. Data source badge. The integration version remains available while measurements are missing.
Linux node / fleet overview September 9, 2026 Grafana Play (signed out; no version string exposed) medium · dark · desktop-web
The data source was returning no measurements when this overview was captured. A red tile says no metrics were received and suggests checking configuration. The freshness tile says No data, while another panel says No errors. Those messages need clearer distinctions: missing measurements do not establish that a system has no errors.

Netdata

Netdata — Anomalies / Anomaly advisor
Anomaly band. A separate anomaly-rate chart summarizes many metrics. Empty state. The empty panel explains which action will produce results. Cross-filter. Selecting a time period reveals the contributing metrics. Explain this metric. Definitions appear directly beneath section headings. Share and embed. A report control is available above the charts.
Anomalies / Anomaly advisor September 11, 2026 Netdata Agent, Anomaly advisor (public registry node, signed out) medium · dark · desktop-web
Netdata shows the share and count of measurements flagged as unusual in separate charts. This provides a compact overview across many metrics rather than drawing an expected range on each one. People then select a time period to see which metrics contributed. The empty detail panel explains that a selection is needed before results will appear.
  • Anomaly band A separate anomaly-rate chart summarizes many metrics.
  • Explain this metric Definitions appear directly beneath section headings.
  • Cross-filter Selecting a time period reveals the contributing metrics.
  • Empty state The empty panel explains which action will produce results.
  • Share and embed A report control is available above the charts.
Netdata — Metrics / System
Header KPI strip. The summary tiles use several arrangements across two rows. Sidebar and canvas. The rail organizes collected metrics into a hierarchy. Gauge and dial. Rate gauges need meaningful scale limits to make their arcs interpretable. Dashboard builder. Chart headers include controls for grouping and aggregation. Search across panels. Search helps locate a chart within the large collection. Semantic grouping. Sections follow the collector’s metric categories. Compare periods. Period comparison is configured per chart, so panels may use different settings. Freshness indicator. The header explicitly separates live and stale nodes.
Metrics / System September 10, 2026 Netdata Agent v2.10.0-686-nightly (public registry node, signed out) dense · dark · desktop-web
The navigation reports 720 charts organized by the metrics collected from the system. The main page follows the same nested structure, giving broad coverage but little indication of which charts matter most to a particular task. Search helps navigate that volume. The header also distinguishes live and stale nodes, making missing updates visible instead of presenting every node as current.
Netdata — Metrics / System › Compute › CPU
Gauge and dial. The gauges mix bounded percentages with rates whose limits need explanation. Collapsible row. Nested headings use leading dashes to show depth. Legend and series toggle. The legend includes values and bars for the listed series. Dashboard builder. Each chart header exposes query controls. Overview then detail. The breadcrumb identifies the current section within the larger collection.
Metrics / System › Compute › CPU September 10, 2026 Netdata Agent (public registry node, signed out) dense · dark · desktop-web
This section follows several nested levels of the generated metric hierarchy. Leading dashes indicate depth, while a breadcrumb identifies the current CPU section. Each chart includes its own grouping and aggregation controls. The Anomaly Rate option is visible but switched off, so this capture demonstrates the control rather than the resulting anomaly display.