[{"data":1,"prerenderedAt":652},["ShallowReactive",2],{"\u002Ffeatures\u002Fdashboards\u002Flayout-navigation":3,"\u002Ffeatures\u002Fdashboards\u002Flayout":150},[4,8,32,42,59,77,81,85,99,108,112,116,120,124,128,132],{"title":5,"path":6,"stem":7},"Get started","\u002Ffeatures","features\u002Findex",{"title":9,"closed":10,"path":11,"stem":12,"children":13,"page":-1},"Traces",true,"\u002Ffeatures\u002Ftraces","features\u002F01.traces\u002Findex",[14,16,20,24,28],{"title":15,"path":11,"stem":12},"Introduction",{"title":17,"path":18,"stem":19},"Grouping & systems","\u002Ffeatures\u002Ftraces\u002Fgrouping","features\u002F01.traces\u002F02.grouping",{"title":21,"path":22,"stem":23},"Querying spans","\u002Ffeatures\u002Ftraces\u002Fquerying-spans","features\u002F01.traces\u002F03.querying-spans",{"title":25,"path":26,"stem":27},"Querying traces","\u002Ffeatures\u002Ftraces\u002Fquerying-traces","features\u002F01.traces\u002F04.querying-traces",{"title":29,"path":30,"stem":31},"Reference","\u002Ffeatures\u002Ftraces\u002Freference","features\u002F01.traces\u002F05.reference",{"title":33,"closed":10,"path":34,"stem":35,"children":36,"page":-1},"Logs","\u002Ffeatures\u002Flogs","features\u002F02.logs\u002Findex",[37,38],{"title":15,"path":34,"stem":35},{"title":39,"path":40,"stem":41},"Grouping rules","\u002Ffeatures\u002Flogs\u002Fgrouping","features\u002F02.logs\u002Fgrouping",{"title":43,"closed":10,"path":44,"stem":45,"children":46,"page":-1},"Metrics","\u002Ffeatures\u002Fmetrics","features\u002F03.metrics\u002Findex",[47,48,52,56],{"title":15,"path":44,"stem":45},{"title":49,"path":50,"stem":51},"Querying","\u002Ffeatures\u002Fmetrics\u002Fquerying","features\u002F03.metrics\u002F02.querying",{"title":53,"path":54,"stem":55},"PromQL compat","\u002Ffeatures\u002Fmetrics\u002Fpromql-compat","features\u002F03.metrics\u002F03.promql-compat",{"title":29,"path":57,"stem":58},"\u002Ffeatures\u002Fmetrics\u002Freference","features\u002F03.metrics\u002F04.reference",{"title":60,"closed":10,"path":61,"stem":62,"children":63,"page":-1},"Alerting","\u002Ffeatures\u002Falerting","features\u002F04.alerting\u002Findex",[64,65,69,73],{"title":15,"path":61,"stem":62},{"title":66,"path":67,"stem":68},"Error monitors","\u002Ffeatures\u002Falerting\u002Ferror-monitors","features\u002F04.alerting\u002Ferror-monitors",{"title":70,"path":71,"stem":72},"Metric monitors","\u002Ffeatures\u002Falerting\u002Fmetric-monitors","features\u002F04.alerting\u002Fmetric-monitors",{"title":74,"path":75,"stem":76},"Notifications","\u002Ffeatures\u002Falerting\u002Fnotifications","features\u002F04.alerting\u002Fnotifications",{"title":78,"path":79,"stem":80},"Searching","\u002Ffeatures\u002Fsearching","features\u002F04.searching",{"title":82,"path":83,"stem":84},"Chart Annotations","\u002Ffeatures\u002Fannotations","features\u002F05.annotations",{"title":86,"path":87,"stem":88,"children":89,"closed":10},"Dashboards","\u002Ffeatures\u002Fdashboards","features\u002F06.dashboards\u002F01.index",[90,91,95],{"title":86,"path":87,"stem":88},{"title":92,"path":93,"stem":94},"Layout and editing","\u002Ffeatures\u002Fdashboards\u002Flayout","features\u002F06.dashboards\u002F02.layout",{"title":96,"path":97,"stem":98},"YAML Templates","\u002Ffeatures\u002Fdashboards\u002Fyaml","features\u002F06.dashboards\u002F03.yaml",{"title":100,"path":101,"stem":102,"children":103,"closed":10},"Transformations","\u002Ffeatures\u002Ftransformations","features\u002F07.transformations\u002F01.index",[104,105],{"title":15,"path":101,"stem":102},{"title":29,"path":106,"stem":107},"\u002Ffeatures\u002Ftransformations\u002Freference","features\u002F07.transformations\u002F02.reference",{"title":109,"path":110,"stem":111},"Service Graph","\u002Ffeatures\u002Fservice-graph","features\u002F08.service-graph",{"title":113,"path":114,"stem":115},"Grafana integration","\u002Ffeatures\u002Fgrafana","features\u002F09.grafana",{"title":117,"path":118,"stem":119},"Data fixtures","\u002Ffeatures\u002Ffixtures","features\u002F10.fixtures",{"title":121,"path":122,"stem":123},"JavaScript Source Maps","\u002Ffeatures\u002Fsourcemaps","features\u002F11.sourcemaps",{"title":125,"path":126,"stem":127},"MCP Server","\u002Ffeatures\u002Fmcp","features\u002F12.mcp",{"title":129,"path":130,"stem":131},"Observability as Code","\u002Ffeatures\u002Fobservability-as-code","features\u002F13.observability-as-code",{"title":133,"closed":10,"path":134,"stem":135,"children":136,"page":149},"SSO","\u002Ffeatures\u002Fsso","features\u002Fsso",[137,141,145],{"title":138,"path":139,"stem":140},"Google","\u002Ffeatures\u002Fsso\u002Fgoogle","features\u002Fsso\u002F01.google",{"title":142,"path":143,"stem":144},"Okta","\u002Ffeatures\u002Fsso\u002Fokta","features\u002Fsso\u002F02.okta",{"title":146,"path":147,"stem":148},"Keycloak","\u002Ffeatures\u002Fsso\u002Fkeycloak","features\u002Fsso\u002F03.keycloak",false,{"page":151,"surround":647},{"id":152,"title":153,"author":154,"body":155,"date":154,"description":636,"extension":637,"image":154,"meta":638,"navigation":644,"path":93,"seo":645,"stem":94,"surround_disabled":149,"__hash__":646},"features\u002Ffeatures\u002F06.dashboards\u002F02.layout.md","Dashboard layout and editing",null,{"type":156,"value":157,"toc":625},"minimark",[158,168,173,185,191,194,272,291,298,302,305,331,336,352,357,364,369,372,376,379,409,414,420,424,440,446,509,514,527,533,538,556,560,563,597,603,606,619],[159,160,161,162,167],"p",{},"A dashboard has one layout of widgets, rows and tabs. You change the layout in edit mode. This page shows each task. For the layout in YAML, see ",[163,164,166],"a",{"href":165},"\u002Ffeatures\u002Fdashboards\u002Fyaml#layout","Layout"," in the YAML reference.",[169,170,172],"h2",{"id":171},"edit-mode","Edit mode",[159,174,175,176,180,181,184],{},"Click ",[177,178,179],"strong",{},"Edit"," on a dashboard to change its layout. Edit mode is a draft: viewers of the dashboard see no change until you click ",[177,182,183],{},"Save",". Drag a widget by its title to move it, and the other widgets move to make room.",[159,186,187],{},[188,189],"video",{"autoPlay":10,"loop":10,"muted":10,"playsInline":10,"video":190},"grid-layout-drag-v2.1",[159,192,193],{},"The rail on the right of the dashboard holds:",[195,196,197,210],"table",{},[198,199,200],"thead",{},[201,202,203,207],"tr",{},[204,205,206],"th",{},"Control",[204,208,209],{},"What it does",[211,212,213,224,234,242,252,262],"tbody",{},[201,214,215,221],{},[216,217,218],"td",{},[177,219,220],{},"Add",[216,222,223],{},"Adds a widget, a row or a tab",[201,225,226,231],{},[216,227,228],{},[177,229,230],{},"Options",[216,232,233],{},"Opens the settings of the dashboard: its name, the page width and the grid",[201,235,236,239],{},[216,237,238],{},"Undo, Redo",[216,240,241],{},"Take back or do again the last change of the draft",[201,243,244,249],{},[216,245,246],{},[177,247,248],{},"Structure",[216,250,251],{},"Opens a tree of all the groups and widgets of the dashboard",[201,253,254,259],{},[216,255,256],{},[177,257,258],{},"History",[216,260,261],{},"Lists the saved revisions of the dashboard",[201,263,264,269],{},[216,265,266],{},[177,267,268],{},"YAML",[216,270,271],{},"Shows the dashboard as YAML",[159,273,274,277,278,280,281,283,284,286,287,290],{},[177,275,276],{},"Cancel"," next to ",[177,279,183],{}," discards the draft. If the draft has changes, ",[177,282,276],{}," lists them first. Click ",[177,285,276],{}," in the dialog to keep editing, or ",[177,288,289],{},"Discard"," to leave edit mode without the changes.",[159,292,293],{},[294,295],"img",{"alt":296,"src":297},"The Discard changes? dialog lists the changes of the draft","\u002Ffeatures\u002Fdashboards\u002Fdiscard-changes.png",[169,299,301],{"id":300},"group","Group widgets",[159,303,304],{},"Rows and tabs group widgets. To group some widgets:",[306,307,308,317,328],"ol",{},[309,310,311,312,316],"li",{},"Hold ",[313,314,315],"kbd",{},"Shift"," and click each widget. The panel of the selection shows how many widgets you selected.",[309,318,319,320,323,324,327],{},"In the panel, click ",[177,321,322],{},"Group into row"," or ",[177,325,326],{},"Group into tab",".",[309,329,330],{},"Type a title in the panel of the new row or tab.",[159,332,333],{},[188,334],{"autoPlay":10,"loop":10,"muted":10,"playsInline":10,"video":335},"grid-layout-group-row-v2.1",[159,337,338,340,341,343,344,347,348,351],{},[177,339,326],{}," puts the selected widgets in a new tab, and the other widgets in a second tab. To show the rows of a dashboard as tabs, open ",[177,342,230],{}," and switch ",[177,345,346],{},"Rows"," to ",[177,349,350],{},"Tabs",". The tabs show in the page header, and the URL holds the open tab.",[159,353,354],{},[188,355],{"autoPlay":10,"loop":10,"muted":10,"playsInline":10,"video":356},"grid-layout-group-tabs-v2.1",[159,358,359,360,363],{},"To change the order of the tabs, drag a tab along the header in edit mode. With the keyboard, focus a tab and press ",[313,361,362],{},"Alt"," and an arrow.",[159,365,366],{},[188,367],{"autoPlay":10,"loop":10,"muted":10,"playsInline":10,"video":368},"grid-layout-tab-order-v2.1",[159,370,371],{},"A row or a tab holds widgets or other groups, never both. So when you group some widgets of a grid, the other widgets of the grid go into one more row or tab after the new one.",[169,373,375],{"id":374},"move","Move widgets",[159,377,378],{},"There are three ways to move a widget. Use the one that fits the distance:",[380,381,382,388,400],"ul",{},[309,383,384,387],{},[177,385,386],{},"Drag"," a widget by its title to a new place, into another row, or into another tab. To move it into a closed tab, hold the widget over the tab: the tab opens, and you drop the widget in it.",[309,389,390,393,394,396,397,399],{},[177,391,392],{},"Move to"," moves the selected widgets to a row or a tab that you choose from a list. It is faster than a drag on a large dashboard. Select the widgets with ",[313,395,315],{}," and a click, click ",[177,398,392],{}," in the panel, and type a few letters of the name of the place.",[309,401,402,405,406,408],{},[177,403,404],{},"Move"," in the panel of a widget or a group moves it. Click the title of the widget or the group to open its panel, and click ",[177,407,404],{}," on its line in the Structure part of the panel.",[159,410,411],{},[188,412],{"autoPlay":10,"loop":10,"muted":10,"playsInline":10,"video":413},"grid-layout-move-tab-v2.1",[159,415,416],{},[294,417],{"alt":418,"src":419},"The Move to menu lists the rows of the dashboard","\u002Ffeatures\u002Fdashboards\u002Fmove-to.png",[169,421,423],{"id":422},"grid","Grid and widget size",[159,425,426,427,429,430,323,433,436,437,439],{},"The root of the dashboard and each group arrange their widgets on a grid. The ",[177,428,166],{}," of a grid is ",[177,431,432],{},"Auto",[177,434,435],{},"Custom",". Set the grid of the root in ",[177,438,230],{},", and the grid of a row or a tab in its panel.",[159,441,442,443,445],{},"An ",[177,444,432],{}," grid places the widgets in cells, one after another:",[195,447,448,458],{},[198,449,450],{},[201,451,452,455],{},[204,453,454],{},"Setting",[204,456,457],{},"What it sets",[211,459,460,470,483,496],{},[201,461,462,467],{},[216,463,464],{},[177,465,466],{},"Max columns",[216,468,469],{},"The largest number of widgets side by side",[201,471,472,477],{},[216,473,474],{},[177,475,476],{},"Min column width",[216,478,479,480,482],{},"The narrowest column. ",[177,481,432],{}," picks a width that splits the widgets evenly",[201,484,485,490],{},[216,486,487],{},[177,488,489],{},"Row height",[216,491,492,493],{},"The height of every widget, unless a kind of widget is set to ",[177,494,495],{},"Fit content",[201,497,498,503],{},[216,499,500],{},[177,501,502],{},"Max height",[216,504,505,506,508],{},"The tallest that a widget with ",[177,507,495],{}," grows. A taller one scrolls",[159,510,511],{},[188,512],{"autoPlay":10,"loop":10,"muted":10,"playsInline":10,"video":513},"grid-layout-grid-columns-v2.1",[159,515,516,518,519,522,523,526],{},[177,517,495],{}," makes stats as short as their value and tables as tall as their rows. ",[177,520,521],{},"Full width"," in the panel of a widget gives the widget a line of its own. ",[177,524,525],{},"Align heights within each row"," stretches every widget of a line to the tallest one.",[159,528,529,530,532],{},"A ",[177,531,435],{}," grid has 24 columns, and each widget takes the cell you give it. Point at a widget, and drag a corner to resize it. The widgets next to it move to make room.",[159,534,535],{},[188,536],{"autoPlay":10,"loop":10,"muted":10,"playsInline":10,"video":537},"grid-layout-grid-resize-v2.1",[159,539,540,543,544,547,548,550,551,347,554,327],{},[177,541,542],{},"Max width"," in the ",[177,545,546],{},"Page"," part of ",[177,549,230],{}," sets the width of the whole dashboard, from ",[177,552,553],{},"Narrow",[177,555,521],{},[169,557,559],{"id":558},"panels","Panels",[159,561,562],{},"In edit mode, a panel on the right shows the settings of what you work on:",[380,564,565,570,583,592],{},[309,566,567,569],{},[177,568,230],{}," holds the name and the tags of the dashboard, the page width, and the grid of the root.",[309,571,572,573,576,577,580,581,327],{},"A click on the title of a widget opens its panel: ",[177,574,575],{},"Title",", ",[177,578,579],{},"Size"," and ",[177,582,521],{},[309,584,585,586,576,588,591],{},"The panel of a row or a tab holds its ",[177,587,575],{},[177,589,590],{},"Show header"," for a row, and its grid. It opens when you make the row or the tab.",[309,593,594,596],{},[177,595,248],{}," shows a tree of all the groups and widgets of the dashboard.",[159,598,599],{},[294,600],{"alt":601,"src":602},"The Structure tree of a dashboard with two rows","\u002Ffeatures\u002Fdashboards\u002Fstructure.png",[169,604,258],{"id":605},"history",[159,607,608,609,611,612,615,616,618],{},"Each save makes a revision of the dashboard. To see them, click ",[177,610,258],{}," on the rail. The list shows who changed the dashboard, how, and when. Click a revision to see the dashboard as it was and what ",[177,613,614],{},"Restore"," changes. ",[177,617,614],{}," writes that revision back as a new revision, so the current one stays in the list.",[159,620,621],{},[294,622],{"alt":623,"src":624},"The History panel lists the revisions of a dashboard","\u002Ffeatures\u002Fdashboards\u002Fhistory.png",{"title":626,"searchDepth":627,"depth":628,"links":629},"",4,2,[630,631,632,633,634,635],{"id":171,"depth":628,"text":172},{"id":300,"depth":628,"text":301},{"id":374,"depth":628,"text":375},{"id":422,"depth":628,"text":423},{"id":558,"depth":628,"text":559},{"id":605,"depth":628,"text":258},"Edit the layout of an Uptrace dashboard as a draft: group widgets into rows and tabs, move widgets, set the grid and the size of each widget, and restore an earlier revision.","md",{"readingTime":639},{"text":640,"minutes":641,"time":642,"words":643},"5 min read",4.125,247500,825,{"title":92},{"title":153,"description":636},"McJpqH9T7QknljCb19D-8rc0SyH6b85-EZ1thwVGoy8",[648,650],{"title":86,"path":87,"stem":88,"description":649,"children":-1},"Build custom dashboards from spans, events, logs, and metrics using a graphical UI or YAML. Layouts of widgets, groups, rows and tabs, tables that open a filtered grid per row, PromQL-style expressions, and auto-activating templates.",{"title":96,"path":97,"stem":98,"description":651,"children":-1},"Complete reference for the Uptrace dashboard template YAML format, covering metadata, the layout, groups, rows and tabs, widgets, table widgets with linked grids, monitors, and composition.",1794133905659]