Vertical Navigation redesign

changelogs/unreleased/1353-mklanjsek

@@ -0,0 +1 @@
+Left Navigation redesign

internal/api/navigation_manager.go

@@ -146,6 +146,8 @@ func NavigationGenerator(ctx context.Context, state octant.State, config Navigat
 			if err != nil {
 				return fmt.Errorf("unable to generate navigation for module %s: %v", m.Name(), err)
 			}
+			navList[0].Module = m.Name()
+			navList[0].Description = m.Description()
 
 			mu.Lock()
 			defer mu.Unlock()

internal/api/navigation_manager_test.go

@@ -63,6 +63,7 @@ func TestNavigationGenerator(t *testing.T) {
 				m := moduleFake.NewMockModule(controller)
 				m.EXPECT().ContentPath().Return("/module")
 				m.EXPECT().Name().Return("module").AnyTimes()
+				m.EXPECT().Description().Return("description").AnyTimes()
 				m.EXPECT().
 					Navigation(gomock.Any(), "default", "/module").
 					Return([]navigation.Navigation{
@@ -81,7 +82,7 @@ func TestNavigationGenerator(t *testing.T) {
 				return dashConfig, state
 			},
 			expected: []navigation.Navigation{
-				{Title: "module"},
+				{Title: "module", Module: "module", Description: "description"},
 			},
 		},
 	}

internal/module/module.go

@@ -28,6 +28,8 @@ type ContentOptions struct {
 type Module interface {
 	// Name is the name of the module.
 	Name() string
+	// Description is a description for this module
+	Description() string
 	// ClientRequestHandlers are handlers for handling client requests.
 	ClientRequestHandlers() []octant.ClientRequestHandler
 	// Content generates content for a path.

internal/modules/applications/module.go

@@ -59,6 +59,11 @@ func (m Module) Name() string {
 	return "applications"
 }
 
+// Description is the description of the module.
+func (m Module) Description() string {
+	return "Applications module description comes here"
+}
+
 // ClientRequestHandlers are client handlers for the module.
 func (m Module) ClientRequestHandlers() []octant.ClientRequestHandler {
 	return nil

internal/modules/clusteroverview/clusteroverview.go

@@ -117,6 +117,10 @@ func (co *ClusterOverview) Name() string {
 	return "cluster-overview"
 }
 
+func (co *ClusterOverview) Description() string {
+	return "Cluster module is used to display all cluster related resources"
+}
+
 func (co *ClusterOverview) ClientRequestHandlers() []octant.ClientRequestHandler {
 	return nil
 }
@@ -200,7 +204,7 @@ func (co *ClusterOverview) Navigation(ctx context.Context, _ string, root string
 			"Port Forwards":               nil,
 		},
 		IconMap: map[string]string{
-			"Cluster Overview":            icon.Overview,
+			"Cluster Overview":            icon.Cluster,
 			"Namespaces":                  icon.Namespaces,
 			"Custom Resources":            icon.CustomResources,
 			"Custom Resource Definitions": icon.CustomResourceDefinition,

internal/modules/configuration/configuration.go

@@ -57,6 +57,11 @@ func (Configuration) Name() string {
 	return "configuration"
 }
 
+func (Configuration) Description() string {
+	return `Plugins module displays all registered plugins and their properties.
+		To find list of known plugins go to https://github.com/topics/octant-plugin`
+}
+
 func (c Configuration) ClientRequestHandlers() []octant.ClientRequestHandler {
 	return nil
 }
@@ -96,7 +101,7 @@ func (c *Configuration) Navigation(ctx context.Context, namespace, root string)
 	return []navigation.Navigation{
 		{
 			Module:   "Configuration",
-			Title:    "Plugin",
+			Title:    "Plugins",
 			Path:     path.Join(c.ContentPath(), "plugins"),
 			IconName: icon.ConfigurationPlugin,
 		},

internal/modules/localcontent/localcontent.go

@@ -45,6 +45,10 @@ func (l *LocalContent) Name() string {
 	return "local"
 }
 
+func (l *LocalContent) Description() string {
+	return "This is the local module description"
+}
+
 func (l *LocalContent) ClientRequestHandlers() []octant.ClientRequestHandler {
 	return nil
 }

internal/modules/overview/overview.go

@@ -181,6 +181,11 @@ func (co *Overview) Name() string {
 	return "overview"
 }
 
+// Description returns module description.
+func (co *Overview) Description() string {
+	return "Namespace module shows all resources related to currently selected namespace\nUse dropdown at the top to change the selected namespace"
+}
+
 func (co *Overview) ClientRequestHandlers() []octant.ClientRequestHandler {
 	return nil
 }

internal/modules/workloads/module.go

@@ -71,6 +71,11 @@ func (m *Module) Name() string {
 	return "workloads"
 }
 
+// Description returns the module description.
+func (m *Module) Description() string {
+	return "Application module displays all known applications and their status"
+}
+
 // ClientRequestHandlers returns nil.
 func (m *Module) ClientRequestHandlers() []octant.ClientRequestHandler {
 	return nil

pkg/icon/icon.go

@@ -14,6 +14,7 @@ const (
 	ConfigAndStorage          = "storage"
 	RBAC                      = "assign-user"
 	Events                    = "event"
+	Cluster                   = "cluster"
 
 	Namespaces      = "namespace"
 	ApiServer       = "hard-disk"

pkg/navigation/navigation.go

@@ -49,12 +49,13 @@ func SetLoading(isLoading bool) Option {
 
 // Navigation is a set of navigation entries.
 type Navigation struct {
-	Module   string       `json:"module,omitempty"`
-	Title    string       `json:"title,omitempty"`
-	Path     string       `json:"path,omitempty"`
-	Children []Navigation `json:"children,omitempty"`
-	IconName string       `json:"iconName,omitempty"`
-	Loading  bool         `json:"isLoading"`
+	Module      string       `json:"module,omitempty"`
+	Description string       `json:"description,omitempty"`
+	Title       string       `json:"title,omitempty"`
+	Path        string       `json:"path,omitempty"`
+	Children    []Navigation `json:"children,omitempty"`
+	IconName    string       `json:"iconName,omitempty"`
+	Loading     bool         `json:"isLoading"`
 }
 
 // New creates a Navigation.

pkg/plugin/module_proxy.go

@@ -41,6 +41,11 @@ func (m *ModuleProxy) Name() string {
 	return m.Metadata.Name
 }
 
+// Description returns the module's description.
+func (m *ModuleProxy) Description() string {
+	return m.Metadata.Description
+}
+
 func (m *ModuleProxy) ClientRequestHandlers() []octant.ClientRequestHandler {
 	return nil
 }

web/src/app/modules/shared/components/presentation/content-filter/content-filter.component.ts

@@ -26,8 +26,10 @@ export class ContentFilterComponent
   }
 
   ngOnInit(): void {
-    this.filter.selected.forEach(value => (this.checkboxes[value] = true));
-    this.cd.detectChanges();
+    if (this.filter.selected) {
+      this.filter.selected.forEach(value => (this.checkboxes[value] = true));
+      this.cd.detectChanges();
+    }
   }
 
   accepts(row: TableRow): boolean {

web/src/app/modules/shared/components/smart/helper/helper.component.html

@@ -162,6 +162,36 @@ <h3 class="modal-title">Keyboard Shortcuts</h3>
           <span class="label">Ctrl<span class="badge">Y</span></span>
         </clr-stack-content>
       </clr-stack-block>
+        <clr-stack-block
+          [clrStackViewLevel]="2"
+          [clrStackViewSetsize]="0"
+          [clrStackViewPosinset]="1"
+        >
+          <clr-stack-label>Toggle Theme</clr-stack-label>
+          <clr-stack-content>
+            <span class="label">Ctrl Shift<span class="badge">T</span></span>
+          </clr-stack-content>
+        </clr-stack-block>
+        <clr-stack-block
+          [clrStackViewLevel]="2"
+          [clrStackViewSetsize]="0"
+          [clrStackViewPosinset]="1"
+        >
+          <clr-stack-label>Toggle Navigation</clr-stack-label>
+          <clr-stack-content>
+            <span class="label">Ctrl<span class="badge">b</span></span>
+          </clr-stack-content>
+        </clr-stack-block>
+        <clr-stack-block
+          [clrStackViewLevel]="2"
+          [clrStackViewSetsize]="0"
+          [clrStackViewPosinset]="1"
+        >
+          <clr-stack-label>Show/Hide Labels</clr-stack-label>
+          <clr-stack-content>
+            <span class="label">Ctrl Shift<span class="badge">L</span></span>
+          </clr-stack-content>
+        </clr-stack-block>
       </clr-stack-block>
       <clr-stack-block
         [clrSbExpandable]="false"

web/src/app/modules/shared/services/navigation/navigation.service.spec.ts

@@ -13,7 +13,10 @@ import {
 import { WebsocketServiceMock } from '../../../../data/services/websocket/mock';
 import { Navigation } from '../../../sugarloaf/models/navigation';
 import { ContentService } from '../content/content.service';
-import { NAVIGATION_MOCK_DATA } from './navigation.test.data';
+import {
+  expectedSelection,
+  NAVIGATION_MOCK_DATA,
+} from './navigation.test.data';
 import { BehaviorSubject } from 'rxjs';
 import { take } from 'rxjs/operators';
 
@@ -73,11 +76,16 @@ describe('NavigationService', () => {
           if (section.children) {
             section.children.map(child => {
               verifySelection(child.path, svc, index, 'child');
+              if (child.children) {
+                child.children.map(grandchild => {
+                  verifySelection(grandchild.path, svc, index, 'grandchild');
+                });
+              }
             });
           }
         });
         svc.activeUrl.unsubscribe();
-        svc.lastSelection.unsubscribe();
+        svc.selectedItem.unsubscribe();
       }
     ));
 
@@ -90,10 +98,19 @@ describe('NavigationService', () => {
       svc.activeUrl.next('/' + path);
       svc.updateLastSelection();
 
-      svc.lastSelection.pipe(take(1)).subscribe(selection => {
-        expect(selection)
-          .withContext(`navigation selected ${descriptor} index ${index}`)
-          .toEqual(index);
+      svc.selectedItem.pipe(take(1)).subscribe(selection => {
+        const expected = expectedSelection[path];
+
+        expect(selection.index)
+          .withContext(
+            `navigation selected ${descriptor} index ${index} ${path}`
+          )
+          .toEqual(expected.index);
+        expect(selection.module)
+          .withContext(
+            `navigation selected ${descriptor} module ${index} ${path}`
+          )
+          .toEqual(expected.module);
       });
 
       svc.activeUrl.pipe(take(1)).subscribe(url =>