Skip to content

1.4. UI Overview

The Whole Screen​

The OPENMARU MCM Console is made up of these main areas:

The whole UI
AreaDescription
Top barLogo, search, sidebar toggle, theme switch, full screen, account menu
SidebarMenu navigation, the resource create button, collapsing and expanding the sidebar
Main contentThe area that shows the content of the chosen menu

The Top Bar​

The top bar sits at the very top of the screen and holds these elements:

What Each Element Does​

ElementIconDescription
LogoThe OPENMARU MCM logoClick to go to the Overview page
Search box🔍Search resources, pages, and clusters by name (the / key jumps to it)
Sidebar toggle☰Collapse and expand the sidebar
Dark mode🌙Switch between the light and dark themes
Full screen⛶Switch the browser to full screen
Account👤User information and the logout menu

Clicking the search box or pressing the / key opens the global search.

Search

What can be searched:

  • Resources (Deployments, Pods, Services and so on)
  • Pages (menu items)
  • Cluster names

The Account Menu​

Clicking the account icon shows these options:

The account menu
Menu itemDescription
User informationShows the signed-in user name and email
SettingsGoes to the settings page
LogoutLogs out and goes to the login page

The Sidebar​

The sidebar sits on the left of the screen and provides menu navigation.

The Sidebar Expanded​

The sidebar expanded

The Menu Structure​

The sidebar menu is laid out like this:

CategorySub-menusDescription
Multi-Cluster Overview-The dashboard home screen
Multi-ClusterTopology, Clusters, Namespaces, NodesCluster management
WorkloadsDeployments, DaemonSets, StatefulSets, Jobs, CronJobs, ConfigMaps, Secrets, HPAs, ReplicaSets, PodsKubernetes workload management
NetworkingServices, IngressesNetwork resource management
StoragePVCsStorage resource management
Multi-Cluster PoliciesPropagation Policies, Override PoliciesMulti-cluster policy management
Settings-User settings

Some menu items carry a badge:

BadgeMeaning
PPropagation -- a resource to which a multi-cluster propagation policy applies
MMember Cluster -- a resource that belongs to a member cluster only

The Create Button​

Pressing the "+ Create" button at the bottom of the sidebar opens the YAML editor for creating a new resource.

Collapsing and Expanding the Sidebar​

  • The sidebar toggle button: click the ☰ icon on the top bar
  • The arrow at the bottom of the sidebar: click the < button at the bottom of the sidebar
  • When collapsed, only the icons are shown, and hovering brings up the menu name as a tooltip.

The Main Content Area​

The main content area shows different screens according to the menu chosen.

Common Elements​

Most pages share these elements:

ElementDescription
Page titleThe current page name and icon
Summary cardsA summary of resource status (the healthy and failed counts)
Resource listThe resource list as a table
Filter and searchThe namespace and cluster filters, and search
RefreshThe button that refreshes the data by hand

How a Detail Page Is Laid Out​

A resource detail page is normally made up of these tabs:

TabDescription
OverviewThe resource's basic information, labels, and annotations
YAMLThe resource YAML definition (editable)
EventsThe related Kubernetes events
ClustersThe multi-cluster deployment state (for resources a policy applies to)

Themes​

The OPENMARU MCM Console supports a light mode and a dark mode.

  • Light mode: a light background, the default
  • Dark mode: a dark background, easier on the eyes

The theme is switched by clicking the 🌙 icon on the top bar.

Keyboard Shortcuts​

ShortcutWhat it does
/Focus the search box
EscClose a dialog or popup

Responsive Design​

The OPENMARU MCM Console adapts to different screen sizes:

  • Desktop: the whole UI is shown
  • Tablet: the sidebar collapses automatically
  • Mobile: the sidebar becomes an overlay

Next Steps​