Skip to content
KONIGI Patterns

Domains

Observability

Whether the software is working, for the people who get paged when it isn't.

7 products 26 captures

Products 7

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
Honeycomb

Query-driven views use heatmaps and selected regions to investigate differences between requests.

Observability
Kibana

A query bar and filtering controls define the data shown in charts and document tables.

Observability · Security
Netdata

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

Infrastructure and FinOps · Observability
PagerDuty

A queue rather than a chart. Two-pane list and detail with keyboard traversal, because the task is working through incidents rather than looking at them.

Support · Observability
Sentry

Issue-centric rather than metric-centric; the two-pane list-and-detail structure with sparklines inline on every row.

Observability

Patterns seen in this domain 58

Captures

Newest first within each product.

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.

Honeycomb

Honeycomb — Trace / cart checkout
Trace waterfall. Indented bars show parent-child relationships and timing. Trace waterfall. Sequential SELECT operations within getDiscounts are worth investigating. Detail on demand. Selecting a span opens its fields beside the waterfall. Overview then detail. A minimap shows the overall trace above the detailed list. Categorical series palette. Service names accompany the colors used for spans. Percentile summary. The distribution marks this trace among other durations.
Trace / cart checkout September 11, 2026 Honeycomb sandbox, public dataset (signed out) dense · light · desktop-web
The trace contains seventy-one spans across one checkout request. The getDiscounts operation occupies much of the total duration, with visible SELECT spans arranged sequentially beneath it. That sequence is a useful place to investigate repeated work, though the chart alone does not establish the right fix. A distribution panel places the selected span’s duration among other observations, helping people judge whether this request is typical.
Honeycomb — Query / HEATMAP(duration_ms)
Heatmap. The linear scale leaves most of the chart above the dense lower band. Search across panels. A search field helps people find fields in the schema list. Dashboard builder. The query controls define which requests appear in the result. Tabs as genres. Tabs provide different ways to investigate the same result. Freshness indicator. The freshness label refers to arriving data. Time-range picker. The fixed time range includes granularity and controls for adjacent periods. Data source badge. The footer reports query time and rows examined.
Query / HEATMAP(duration_ms) September 10, 2026 Honeycomb sandbox, public dataset (signed out; no version string exposed) medium · light · desktop-web
This sandbox heatmap uses a linear vertical scale. Most requests sit near the bottom, while a separate group of slower requests extends upward later in the period. The view exposes variation that a single summary value would hide, though a different scale could give the lower band more room. The footer reports query duration and rows examined. A cookie banner and onboarding dialog were removed for the capture; the dashboard itself was left intact.

Kibana

Kibana — Dashboards / list
Multi-page dashboard. Many peer dashboards appear in a paginated list. Data table. Descriptions add context beyond the dashboard names. Search across panels. Search helps people find a dashboard without browsing every page. Semantic grouping. Prefixes and tags group related generated dashboards.
Dashboards / list September 10, 2026 Elastic demo environment (guest session) medium · light · desktop-web
The dashboard list has fourteen pages, with many similarly prefixed Kubernetes entries on the first page. Search helps people find a specific destination without browsing the full collection. Descriptions beneath titles provide useful context, while prefixes and tags group related entries. The list would also benefit from a clear indication of which dashboards are maintained or recommended.
Kibana — Discover / filebeat logs
Two-pane list and detail. The field list stays visible beside the records. Data table. The Summary column combines many fields in one cell. Histogram and distribution. The volume chart uses time intervals; the newest interval may still be incomplete. Filter bar. The query bar supports detailed filters that require knowledge of its syntax. Detail on demand. Each row can expand inline, moving later rows down. Time-range picker. The relative time range sits beside the refresh control. Search across panels. A search field narrows the long list of available fields.
Discover / filebeat logs September 10, 2026 Elastic demo environment (guest session; no version string exposed) dense · light · desktop-web
The view places a searchable field list beside a large table of documents, with a volume chart above. Search is useful for navigating the hundreds of available fields. The default Summary column combines many fields into each row, making quick comparisons difficult until people choose more focused columns. Pagination and sorting are visible, but the scope of each operation needs to be clear.
Kibana — Dashboards / [Flights] Global Flight Dashboard
Panel grid. Panels use different sizes within a grid. Ratio and rate. Delay percentages appear without their flight counts. Stacked composition. A 100% stack shows the mix of delay types without total volume. Annotation. Grouped event markers share the chart’s time axis. Header KPI strip. Different tile sizes and arrangements make the summary row less consistent. Compare periods. The comparison period is named, but the meaning of the percentage is unclear. Filter bar. Pickers and a range control provide alternatives to typing a query. Share and embed. Sharing and full-screen controls are available in the header.
Dashboards / [Flights] Global Flight Dashboard September 10, 2026 Elastic demo environment, sample flight data (guest session) dense · light · desktop-web
The delay table shows percentages without the number of flights behind each one. A high rate based on very few flights would look as prominent as one based on many. A nearby comparison tile names the previous week but does not clearly explain what its percentage represents. The filtering controls are more explicit: a query bar sits above pickers and a price range, giving people both typed and guided ways to narrow the view.
  • Ratio and rate Delay percentages appear without their flight counts.
  • Compare periods The comparison period is named, but the meaning of the percentage is unclear.
  • Share and embed Sharing and full-screen controls are available in the header.
  • Filter bar Pickers and a range control provide alternatives to typing a query.
  • Panel grid Panels use different sizes within a grid.
  • Stacked composition A 100% stack shows the mix of delay types without total volume.
  • Annotation Grouped event markers share the chart’s time axis.
  • Header KPI strip Different tile sizes and arrangements make the summary row less consistent.

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.