Component Badges

Reference for every badge Kanvas draws on a component - what it means, where it sits, when it appears, what a click does and how to hide it - in Designer and Operator modes.

A badge is a small marker Kanvas draws on the edge of a component to report something about it: errors waiting to be fixed, components held inside it, a link, or where it came from. Badges are status, not decoration. A count on a badge tells you there is something to read, and clicking it shows what.

Which badges appear depends on the mode. Designer mode draws badges that help you build a valid design. Operator mode draws badges about live resources.

A component with an error count badge and a validation summary beside it on the Designer canvas

BadgePositionAppears whenClick
Error countBottom-left, red, shows a numberThe component has at least one schema validation warning or deployment error. The number is the sum of both.Opens a summary with one count per category. Each count opens the matching details: the validation results or the deployment results.
InventoryBottom-right, shows a numberThe component holds other components inside it. The number is how many.Lists the held components. Choosing one opens its configurator.
External LinkTop-rightYou set a Link on the component in its style options.Opens the URL in a new tab.
Parent model iconLeft edge, above the error countThe component is a parent that contains other components.None. It shows the parent’s model icon in the component color.
Expand and collapseInside the component, top-rightThe component is a parent with children.Hides the children, or shows them again.
Section labelTop-left, inside the sectionThe object is a section.None. It carries the section name, shortened with an ellipsis when it does not fit the width.

The error count joins two checks into one number:

  • Validation warnings come from checking the component’s configuration against its schema, such as a missing required field or an invalid value.
  • Deployment errors come from a dry run of the design against a cluster. See Validating Designs.

A component with no errors shows no badge. Fix the field the warning names and the count drops, and the badge disappears at zero. Opening a validation warning from the badge takes you to the offending configuration field.

Clicking an error badge and correcting the configuration field it reports

An inventory badge appears on a component that holds other components, such as a workload that holds its configuration objects. The held components are drawn inside the inventory rather than as separate nodes on the canvas. The relationship between them is created by the policy engine; see Relationships.

BadgePositionAppears whenClick
Managed by MesheryTop-left, greenThe resource was created from a design and Kanvas knows which one.Opens the source design in Designer mode.
TerminalBottom-right, blackThe resource is a container that has a terminal session open.Opens the terminal panel. See Interactive Terminal.

Operator mode draws no health, performance or policy badge. Resource state is on the resource itself; see Resource Details.

  • The Layers panel has a Component Badges section with separate switches for Validation Warnings, Deployment Errors and Inventory. Switching one off removes its share of the error count, or the inventory badge, from the canvas without changing the design’s contents. The setting is saved with the design. See Layout and Layers.
  • Badges draw only at Full render fidelity. In Medium and the lower fidelity modes Kanvas leaves them out to keep large designs responsive.
  • Badges, like object controls, draw only when the canvas is zoomed in far enough to read them.
  • Clear the error count on every component before you deploy. A design with no badges is a design that passes both checks.
  • Use the Managed by Meshery badge to jump from a live resource to the design that produced it when you need to change its configuration.
  • Hide badges before you take a screenshot for a review if you want a clean image. See Canvas Actions.

Related Reading