Merge pull request #2580 from xtreme-vikram-yadav/route-history

Show octant route history in the header

changelogs/unreleased/2580-xtreme-vikram-yadav

@@ -0,0 +1 @@
+Added Octant route history dropdown and updated page title

internal/api/breadcrumb.go

@@ -39,6 +39,9 @@ func GenerateBreadcrumb(cm *ContentManager, contentPath string, state octant.Sta
  parent, title := CreateNavigationBreadcrumb(navs, contentPath)
  if title == nil {
  return title
+ } else if parent.Title == "" {
+ title = append(title, component.NewText(path.Base(contentPath)))
+ return title
  }
 
  if strings.Contains(contentPath, crPath) {
@@ -76,6 +79,12 @@ func CreateNavigationBreadcrumb(navs []navigation.Navigation, contentPath string
  var last LinkDefinition
  var title []component.TitleComponent
 
+ // When there is a single non-nested navigation entry, then show it as a link.
+ if len(navs) == 1 && contentPath != navs[0].Path && strings.HasPrefix(contentPath, navs[0].Path) {
+ title = append(title, component.NewLink("", path.Base(navs[0].Title), path_util.PrefixedPath(navs[0].Path)))
+ return LinkDefinition{}, title
+ }
+
  thisPath := contentPath
  for {
  if thisPath == "." { // done

internal/api/breadcrumb_test.go

@@ -10,12 +10,12 @@ import (
  "path/filepath"
  "testing"
 
- "github.com/golang/mock/gomock"
  "github.com/stretchr/testify/require"
 
  "github.com/vmware-tanzu/octant/internal/api"
  "github.com/vmware-tanzu/octant/internal/util/json"
  "github.com/vmware-tanzu/octant/pkg/navigation"
+ "github.com/vmware-tanzu/octant/pkg/view/component"
 )
 
 func Test_NavigationFromPathNamespace(t *testing.T) {
@@ -94,8 +94,6 @@ func Test_NavigationFromPathNamespace(t *testing.T) {
  expectedItems: 0,
  },
  }
- controller := gomock.NewController(t)
- defer controller.Finish()
  data, err := ioutil.ReadFile(filepath.Join("testdata", "namespace_navigation.json"))
  require.NoError(t, err)
  var namespaceNavigation []navigation.Navigation
@@ -192,8 +190,6 @@ func Test_NavigationFromPathCluster(t *testing.T) {
  expectedItems: 0,
  },
  }
- controller := gomock.NewController(t)
- defer controller.Finish()
  data, err := ioutil.ReadFile(filepath.Join("testdata", "cluster_navigation.json"))
  require.NoError(t, err)
  var namespaceNavigation []navigation.Navigation
@@ -287,8 +283,6 @@ func Test_CreateNavigationBreadcrumbNamespace(t *testing.T) {
  expectedItems: 0,
  },
  }
- controller := gomock.NewController(t)
- defer controller.Finish()
  data, err := ioutil.ReadFile(filepath.Join("testdata", "namespace_navigation.json"))
  require.NoError(t, err)
  var namespaceNavigation []navigation.Navigation
@@ -377,8 +371,6 @@ func Test_CreateNavigationBreadcrumbCluster(t *testing.T) {
  expectedItems: 0,
  },
  }
- controller := gomock.NewController(t)
- defer controller.Finish()
  data, err := ioutil.ReadFile(filepath.Join("testdata", "cluster_navigation.json"))
  require.NoError(t, err)
  var namespaceNavigation []navigation.Navigation
@@ -399,3 +391,40 @@ func Test_CreateNavigationBreadcrumbCluster(t *testing.T) {
  })
  }
 }
+
+func Test_CreateNavigationBreadcrumbApplications(t *testing.T) {
+ data, err := ioutil.ReadFile(filepath.Join("testdata", "application_navigation.json"))
+ require.NoError(t, err)
+ var namespaceNavigation []navigation.Navigation
+
+ err = json.Unmarshal([]byte(data), &namespaceNavigation)
+ require.NoError(t, err)
+ require.Equal(t, 1, len(namespaceNavigation))
+
+ tests := []struct {
+ name string
+ path string
+ lastTitle string
+ lastUrl string
+ expectedTitle component.TitleComponent
+ expectedItems int
+ }{
+ {
+ name: "Applications Detail Breadcumb",
+ path: "workloads/namespace/milan/detail/simple-app",
+ expectedTitle: component.NewLink("", "Applications", "/workloads/namespace/milan"),
+ expectedItems: 1,
+ },
+ }
+
+ for _, test := range tests {
+ t.Run(test.name, func(t *testing.T) {
+ last, title := api.CreateNavigationBreadcrumb(namespaceNavigation, test.path)
+ require.Equal(t, test.expectedItems, len(title))
+ require.Equal(t, test.expectedTitle, title[0])
+ require.NotNil(t, title)
+ require.Equal(t, "", last.Title)
+ require.Equal(t, "", last.Url)
+ })
+ }
+}

internal/api/content_manager.go

@@ -168,7 +168,7 @@ func (cm *ContentManager) runUpdate(state octant.State, s api.OctantClient) Poll
 
  if ctx.Err() == nil {
  if content.Path == state.GetContentPath() {
- s.Send(CreateContentEvent(content.Response, state.GetNamespace(), contentPath, state.GetQueryParams()))
+ s.Send(CreateContentEvent(content.Response, getNamespace(state, contentPath, cm), contentPath, state.GetQueryParams()))
  }
 
  }
@@ -346,3 +346,12 @@ func moduloIndex(key string, options [][]string) []string {
  i := int(h.Sum32()) % len(options)
  return options[i]
 }
+
+func getNamespace(state octant.State, contentPath string, cm *ContentManager) string {
+ m, ok := cm.moduleManager.ModuleForContentPath(contentPath)
+ if ok && m.Name() == "cluster-overview" {
+ return ""
+ }
+
+ return state.GetNamespace()
+}

internal/api/content_manager_test.go

@@ -76,7 +76,7 @@ func TestContentManager_GenerateContent(t *testing.T) {
  octantClient.EXPECT().Send(contentEvent).AnyTimes()
  octantClient.EXPECT().StopCh().Return(stopCh).AnyTimes()
 
- moduleManager.EXPECT().ModuleForContentPath(gomock.Any()).Return(fakeModule, true)
+ moduleManager.EXPECT().ModuleForContentPath(gomock.Any()).Return(fakeModule, true).Times(2)
  moduleManager.EXPECT().Navigation(gomock.Any(), "foo-namespace", "foo-module").Return([]navigation.Navigation{}, nil)
  fakeModule.EXPECT().Name().Return("foo-module").AnyTimes()
  fakeModule.EXPECT().Content(gomock.Any(), ".", gomock.Any()).
@@ -101,6 +101,53 @@ func TestContentManager_GenerateContent(t *testing.T) {
  manager.Start(ctx, state, octantClient)
 }
 
+func TestContentManager_GenerateContent_ClusterOverviewNamespace(t *testing.T) {
+ controller := gomock.NewController(t)
+ defer controller.Finish()
+
+ params := map[string][]string{}
+ filters := []octant.Filter{{Key: "foo", Value: "bar"}}
+
+ dashConfig := configFake.NewMockDash(controller)
+ moduleManager := moduleFake.NewMockManagerInterface(controller)
+ fakeModule := moduleFake.NewMockModule(controller)
+ state := octantFake.NewMockState(controller)
+
+ dashConfig.EXPECT().CurrentContext().Return("foo-context")
+ state.EXPECT().GetClientID().Return("foo-client")
+ state.EXPECT().GetFilters().Return(filters).AnyTimes()
+ state.EXPECT().GetNamespace().Return("foo-namespace").AnyTimes()
+ state.EXPECT().GetQueryParams().Return(params).AnyTimes()
+ state.EXPECT().GetContentPath().Return(".").AnyTimes()
+ state.EXPECT().OnContentPathUpdate(gomock.Any()).DoAndReturn(func(fn octant.ContentPathUpdateFunc) octant.UpdateCancelFunc {
+ fn("foo")
+ return func() {}
+ })
+ octantClient := fake.NewMockOctantClient(controller)
+
+ stopCh := make(chan struct{}, 1)
+
+ contentResponse := component.ContentResponse{}
+ contentEvent := api.CreateContentEvent(contentResponse, "", ".", params)
+ octantClient.EXPECT().Send(contentEvent).AnyTimes()
+ octantClient.EXPECT().StopCh().Return(stopCh).AnyTimes()
+
+ moduleManager.EXPECT().ModuleForContentPath(gomock.Any()).Return(fakeModule, true).Times(2)
+ moduleManager.EXPECT().Navigation(gomock.Any(), "foo-namespace", "cluster-overview").Return([]navigation.Navigation{}, nil)
+ fakeModule.EXPECT().Name().Return("cluster-overview").AnyTimes()
+ fakeModule.EXPECT().Content(gomock.Any(), ".", gomock.Any()).Return(contentResponse, nil)
+
+ logger := log.NopLogger()
+
+ poller := api.NewSingleRunPoller()
+
+ manager := api.NewContentManager(moduleManager, dashConfig, logger,
+ api.WithContentGeneratorPoller(poller))
+
+ ctx := context.Background()
+ manager.Start(ctx, state, octantClient)
+}
+
 func TestContentManager_SetContentPath(t *testing.T) {
  controller := gomock.NewController(t)
  defer controller.Finish()

internal/api/testdata/application_navigation.json

@@ -0,0 +1,9 @@
+[
+ {
+ "title": "Applications",
+ "path": "workloads/namespace/milan",
+ "children": [],
+ "iconName": "application",
+ "isLoading": false
+ }
+]

internal/modules/workloads/detail_describer.go

@@ -90,9 +90,8 @@ func (d *DetailDescriber) Describe(ctx context.Context, namespace string, option
  }
 
  workloadName := fmt.Sprintf(`
-### %s
 _%s_
-`, cur.Name, cur.Owner.GroupVersionKind())
+`, cur.Owner.GroupVersionKind())
 
  headerSection := component.FlexLayoutSection{
  {

pkg/view/component/dropdown.go

@@ -57,6 +57,7 @@ type DropdownConfig struct {
  Action string `json:"action,omitempty"`
  Selection string `json:"selection,omitempty"`
  UseSelection bool `json:"useSelection"`
+ ShowToggleIcon bool `json:"showToggleIcon"`
  Items []DropdownItemConfig `json:"items"`
 }
 
@@ -114,6 +115,11 @@ func (t *Dropdown) SetDropdownUseSelection(sel bool) {
  t.Config.UseSelection = sel
 }
 
+// SetDropdownShowToggleIcon defines if dropdown toggle caret icon is shown.
+func (t *Dropdown) SetDropdownShowToggleIcon(sti bool) {
+ t.Config.ShowToggleIcon = sti
+}
+
 // SupportsTitle designates this is a TextComponent.
 func (t *Dropdown) SupportsTitle() {}
 
@@ -138,6 +144,7 @@ func (t *DropdownConfig) UnmarshalJSON(data []byte) error {
  Action string `json:"action,omitempty"`
  Selection string `json:"selection,omitempty"`
  UseSelection bool `json:"useSelection,omitempty"`
+ ShowToggleIcon bool `json:"showToggleIcon,omitempty"`
  Items []DropdownItemConfig `json:"items"`
  }{}
 
@@ -150,6 +157,7 @@ func (t *DropdownConfig) UnmarshalJSON(data []byte) error {
  t.Action = x.Action
  t.Selection = x.Selection
  t.UseSelection = x.UseSelection
+ t.ShowToggleIcon = x.ShowToggleIcon
  t.Items = x.Items
  return nil
 }

pkg/view/component/testdata/dropdown.json

@@ -8,6 +8,7 @@
  "type": "button",
  "action": "action.octant.dev/dropdownTest",
  "useSelection": false,
+ "showToggleIcon": false,
  "items": [
  {
  "name": "first",

web/src/app/modules/shared/components/presentation/dropdown/dropdown.component.html

@@ -12,7 +12,7 @@
  </div>
  <div *ngIf="type == 'icon'" class="source" clrDropdownTrigger>
  <clr-icon [attr.shape]="title"></clr-icon>
- <clr-icon shape="caret down"></clr-icon>
+ <clr-icon *ngIf="showToggleIcon" shape="caret down"></clr-icon>
  </div>
  <div *ngIf="type == 'label'" class="source" clrDropdownTrigger>
  {{title}}

web/src/app/modules/shared/components/presentation/dropdown/dropdown.component.spec.ts

@@ -52,6 +52,7 @@ describe('DropdownComponent', () => {
  type: 'button',
  action: 'action',
  useSelection: false,
+ showToggleIcon: false,
  items: [
  {
  name: 'item-header',
@@ -119,6 +120,7 @@ describe('DropdownComponent', () => {
  type: 'button',
  action: 'action',
  useSelection: false,
+ showToggleIcon: false,
  items: [
  {
  name: 'first',

web/src/app/modules/shared/components/presentation/dropdown/dropdown.component.ts

@@ -27,6 +27,7 @@ import { WebsocketService } from '../../../../../data/services/websocket/websock
 export class DropdownComponent extends AbstractViewComponent<DropdownView> {
  readonly defaultItemLimit = 10;
  useSelection = false;
+ showToggleIcon = true;
  selectedItem = '';
  url: string;
  position: string;
@@ -58,6 +59,7 @@ export class DropdownComponent extends AbstractViewComponent<DropdownView> {
  this.type = view.config.type;
  this.action = view.config.action;
  this.items = view.config.items;
+ this.showToggleIcon = view.config.showToggleIcon;
 
  this.items.forEach(item => {
  if (item.name === view.config.selection) {
@@ -100,7 +102,7 @@ export class DropdownComponent extends AbstractViewComponent<DropdownView> {
  });
  }
 
- if (item.url && this.type === 'link') {
+ if (item.url && item.type === 'link') {
  setTimeout(() => {
  this.router.navigateByUrl(item.url);
  }, 0);

web/src/app/modules/shared/models/content.ts

@@ -7,6 +7,12 @@ export interface ContentResponse {
  currentPath: string;
 }
 
+export interface NamespacedTitle {
+ namespace: string;
+ title: string;
+ path: string;
+}
+
 export interface Content {
  extensionComponent: ExtensionView;
  viewComponents: View[];
@@ -106,6 +112,7 @@ export interface DropdownView extends View {
  action: string;
  selection?: string;
  useSelection: boolean;
+ showToggleIcon: boolean;
  items: DropdownItem[];
  };
 }

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

@@ -20,12 +20,11 @@ import {
  Filter,
  LabelFilterService,
 } from '../label-filter/label-filter.service';
+import { Title } from '@angular/platform-browser';
 
 describe('ContentService', () => {
  let service: ContentService;
- const mockRouter = {
- navigate: jasmine.createSpy('navigate'),
- };
+ const mockRouter = jasmine.createSpyObj('Router', ['navigate']);
 
  beforeEach(() => {
  TestBed.configureTestingModule({
@@ -40,6 +39,10 @@ describe('ContentService', () => {
  provide: Router,
  useValue: mockRouter,
  },
+ {
+ provide: Title,
+ useValue: jasmine.createSpyObj('Title', ['getTitle', 'setTitle']),
+ },
  ],
  });