Ceph » mgr » Dashboard

Currently any new dashboard component added to the dashboard needs an extra entry manually added to the navigation bar menu (counting now like 20-30 elements).

This part is a clear candidate for automation. As a result of this the navbar menu would be dynamically generated from a data structure.

Pros:
- Functionality becomes self-contained. New UI components don't need to modify code from other parts of the dashboard.
- This will have a positive impact on translations too.
- This allows for decorator-based approach for adding a new element to the navbar menu.

Cons:
- This approach makes hard to refactor special menu elements like the heartbeat health icon. Alternatives: put it as a stand-alone menu entry with no link to/move it somewhere else (close to the Ceph logo).

Proposal:

interface MenuEntry {
  name: string
  link?: string
  perm?: boolean
  enable?: string
  children?: MenuEntries
};

type MenuEntries = MenuEntry[];

this.menuEntries:MenuEntries = = [
      {name: this.i18n('Dashboard'), link: '/dashboard',
        perm: permissions.hosts.read || permissions.monitor.read || permissions.osd.read || permissions.configOpt.read},

      {name: this.i18n('Cluster'), children: [
        {name: this.i18n('Hosts'), link: '/hosts', perm: permissions.hosts.read},
...
        {name: this.i18n('Alerts'), link: '/alerts', perm: this.prometheusConfigured && permissions.prometheus.read},
      ]},
      {name: this.i18n('Pools'), link: '/pool', perm: permissions.pool.read},
    ];

The above would eventually allow for defining components like:

@MenuEntry({
  name: 'Hosts',
  parent: 'root.cluster',
  link: '/hosts',
})
@Component({
...
})
export class XXXComponent implements OnInit {
...