import { DashboardV3PageHelper } from '../ui/dashboard-v3.po';
-describe('Dashboard Main Page', { retries: 0 }, () => {
- const dashboard = new DashboardV3PageHelper();
+describe('Overview Page', { retries: 0 }, () => {
+ const overview = new DashboardV3PageHelper();
beforeEach(() => {
cy.login();
- dashboard.navigateTo();
+ overview.navigateTo();
});
describe('Dashboard accessibility', () => {
welcome: { url: '#/expand-cluster?welcome=true', id: 'cd-create-cluster' },
// Landing page
- dashboard: { url: '#/dashboard', id: 'cd-dashboard' },
+ overview: { url: '#/overview', id: 'cd-dashboard' },
// Hosts
hosts: { url: '#/hosts', id: 'cd-hosts' },
describe('OSDs page', () => {
const osds = new OSDsPageHelper();
- const dashboard = new DashboardV3PageHelper();
+ const overview = new DashboardV3PageHelper();
before(() => {
cy.login();
osds.expectTableCount('total', expectedCount);
// landing page is easier to check OSD status
- dashboard.navigateTo();
- dashboard.cardRow('OSD').should('contain.text', `${expectedCount} OSDs`);
+ overview.navigateTo();
+ overview.cardRow('OSD').should('contain.text', `${expectedCount} OSDs`);
cy.wait(30000);
expect(Number(newCount)).to.be.gte(2);
And I should see a button to "Skip"
When I click on "Skip" button
And I confirm to "Continue" on carbon modal
- Then I should be on the "dashboard" page
+ Then I should be on the "overview" page
import { DashboardV3PageHelper } from './dashboard-v3.po';
describe('Dashboard-v3 Main Page', () => {
- const dashboard = new DashboardV3PageHelper();
+ const overview = new DashboardV3PageHelper();
before(() => {
cy.login();
beforeEach(() => {
cy.login();
- dashboard.navigateTo();
+ overview.navigateTo();
});
describe('Check that all hyperlinks on inventory card lead to the correct page and fields exist', () => {
};
for (const [linkText, breadcrumbText] of Object.entries(expectationMap)) {
- cy.location('hash').should('eq', '#/dashboard');
- dashboard.clickInventoryCardLink(linkText);
- dashboard.expectBreadcrumbText(breadcrumbText);
- dashboard.navigateBack();
+ cy.location('hash').should('eq', '#/overview');
+ overview.clickInventoryCardLink(linkText);
+ overview.expectBreadcrumbText(breadcrumbText);
+ overview.navigateBack();
}
});
- it('should verify that cards exist on dashboard in proper order', () => {
- // Ensures that cards are all displayed on the dashboard tab while being in the proper
+ it('should verify that cards exist on overview in proper order', () => {
+ // Ensures that cards are all displayed on the overview tab while being in the proper
// order, checks for card title and position via indexing into a list of all cards.
const order = ['Details', 'Inventory', 'Status', 'Capacity', 'Cluster Utilization'];
for (let i = 0; i < order.length; i++) {
- dashboard.card(i).should('contain.text', order[i]);
+ overview.card(i).should('contain.text', order[i]);
}
});
});
import { PageHelper } from '../page-helper.po';
export class DashboardV3PageHelper extends PageHelper {
- pages = { index: { url: '#/dashboard', id: 'cd-dashboard-v3' } };
+ pages = { index: { url: '#/overview', id: 'cd-dashboard-v3' } };
cardTitle(index: number) {
return cy.get('.card-title').its(index).text();
export class LanguagePageHelper extends PageHelper {
pages = {
- index: { url: '#/dashboard', id: 'cd-dashboard' }
+ index: { url: '#/overview', id: 'cd-dashboard' }
};
getLanguageBtn() {
describe('Login page', () => {
const login = new LoginPageHelper();
- it('should login and navigate to dashboard page', () => {
+ it('should login and navigate to overview page', () => {
login.navigateTo();
login.doLogin();
});
export class LoginPageHelper extends PageHelper {
pages = {
index: { url: '#/login', id: 'cd-login' },
- dashboard: { url: '#/dashboard', id: 'cd-dashboard' }
+ overview: { url: '#/overview', id: 'cd-dashboard' }
};
doLogin() {
export class NavigationPageHelper extends PageHelper {
pages = {
- index: { url: '#/dashboard', id: 'cd-dashboard' }
+ index: { url: '#/overview', id: 'cd-dashboard' }
};
navigations = [
- { menu: 'Dashboard', component: 'cd-dashboard' },
+ { menu: 'Overview', component: 'cd-dashboard' },
{
menu: 'Multi-Cluster',
submenus: [
import { LoginPageHelper } from '../ui/login.po';
-describe.skip('Dashboard Landing Page', () => {
+describe.skip('Overview Landing Page', () => {
const login = new LoginPageHelper();
beforeEach(() => {
cy.eyesOpen({
- testName: 'Dashboard Component'
+ testName: 'Overview Component'
});
});
cy.eyesClose();
});
- it('should take screenshot of dashboard landing page', () => {
+ it('should take screenshot of overview landing page', () => {
login.navigateTo();
login.doLogin();
cy.get('[aria-label="Status card"]').should('be.visible');
cy.get('[aria-label="Inventory card"]').should('be.visible');
cy.get('[aria-label="Cluster utilization card"]').should('be.visible');
- cy.eyesCheckWindow({ tag: 'Dashboard landing page' });
+ cy.eyesCheckWindow({ tag: 'Overview landing page' });
});
});
}
const routes: Routes = [
- // Dashboard
- { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
+ // Overview
+ { path: '', redirectTo: 'overview', pathMatch: 'full' },
{ path: 'api-docs', component: ApiDocsComponent },
{
path: '',
canActivate: [AuthGuardService, ChangePasswordGuardService],
canActivateChild: [AuthGuardService, ChangePasswordGuardService],
children: [
- { path: 'dashboard', component: DashboardComponent },
+ { path: 'overview', component: DashboardComponent },
{ path: 'error', component: ErrorComponent },
// Cluster
data: {
moduleStatusGuardConfig: {
uiApiPath: 'orchestrator',
- redirectTo: 'dashboard',
+ redirectTo: 'overview',
backend: 'cephadm'
},
breadcrumbs: 'Cluster/Expand Cluster'
NotificationType.info,
$localize`Cluster expansion skipped by user`
);
- this.router.navigate(['/dashboard']);
+ this.router.navigate(['/overview']);
this.modalService.dismissAll();
}
});
NotificationType.success,
$localize`Cluster expansion was successful`
);
- this.router.navigate(['/dashboard']);
+ this.router.navigate(['/overview']);
})
)
)
-<main aria-label="Cluster Overview">
-@if (useDeprecated === true) {
+<main aria-label="Overview">
+@let features = enabledFeature$ | async;
+@if (features?.dashboard) {
<!-- OLD OVERVIEW -->
<cd-dashboard-v3 data-testid="cd-dashboard-v3"></cd-dashboard-v3>
} @else {
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
import { FeatureTogglesService } from '~/app/shared/services/feature-toggles.service';
describe('DashboardComponent', () => {
let component: DashboardComponent;
let fixture: ComponentFixture<DashboardComponent>;
- let featureTogglesService: FeatureTogglesService;
configureTestBed({
imports: [NgbNavModule, HttpClientTestingModule],
});
beforeEach(() => {
- featureTogglesService = TestBed.inject(FeatureTogglesService);
fixture = TestBed.createComponent(DashboardComponent);
component = fixture.componentInstance;
});
it('should create', () => {
- spyOn(featureTogglesService, 'isFeatureEnabled').and.returnValue(true);
-
fixture.detectChanges();
expect(component).toBeTruthy();
});
-
- it('should call featureTogglesService.isFeatureEnabled() on initialization', () => {
- const spy = spyOn(featureTogglesService, 'isFeatureEnabled').and.returnValue(true);
- fixture.detectChanges();
- expect(spy).toHaveBeenCalled();
- expect(spy).toHaveBeenCalledWith('dashboard');
- });
-
- it('should set useDeprecated based on feature toggle', () => {
- spyOn(featureTogglesService, 'isFeatureEnabled').and.returnValue(true);
- fixture.detectChanges();
- expect(component.useDeprecated).toBe(true);
- });
-
- describe('when dashboard feature is enabled (new dashboard)', () => {
- beforeEach(() => {
- spyOn(featureTogglesService, 'isFeatureEnabled').and.returnValue(true);
- fixture.detectChanges();
- });
-
- it('should show cd-dashboard-v3 in template when dashboard feature is enabled', () => {
- const overviewElement = fixture.debugElement.query(By.css('[data-testid="cd-overview"]'));
- const dashboardV3Element = fixture.debugElement.query(
- By.css('[data-testid="cd-dashboard-v3"]')
- );
-
- expect(overviewElement).toBeNull();
- expect(dashboardV3Element).toBeTruthy();
- });
-
- it('should set useDeprecated to false when feature is enabled', () => {
- expect(component.useDeprecated).toBe(true);
- });
- });
-
- describe('when dashboard feature is disabled (old dashboard)', () => {
- beforeEach(() => {
- spyOn(featureTogglesService, 'isFeatureEnabled').and.returnValue(false);
- fixture.detectChanges();
- });
-
- it('should show cd-overview in template when dashboard feature is disabled', () => {
- const overviewElement = fixture.debugElement.query(By.css('[data-testid="cd-overview"]'));
- const dashboardV3Element = fixture.debugElement.query(
- By.css('[data-testid="cd-dashboard-v3"]')
- );
-
- expect(overviewElement).toBeTruthy();
- expect(dashboardV3Element).toBeNull();
- });
-
- it('should set useDeprecated to true when feature is disabled', () => {
- expect(component.useDeprecated).toBe(false);
- });
- });
});
import { Component, inject, OnInit } from '@angular/core';
-import { FeatureTogglesService } from '~/app/shared/services/feature-toggles.service';
+import { Observable } from 'rxjs';
+import {
+ FeatureTogglesMap,
+ FeatureTogglesService
+} from '~/app/shared/services/feature-toggles.service';
@Component({
selector: 'cd-dashboard',
standalone: false
})
export class DashboardComponent implements OnInit {
- useDeprecated: boolean = true;
+ enabledFeature$: Observable<FeatureTogglesMap>;
private featureToggles = inject(FeatureTogglesService);
ngOnInit() {
- this.useDeprecated = this.featureToggles.isFeatureEnabled('dashboard');
+ this.enabledFeature$ = this.featureToggles.get();
}
}
[narrow]="true"
[condensed]="false"
[fullWidth]="true"
- class="overview">
+ class="cds-mt-5 cds-mb-5">
<div cdsRow
- [narrow]="true"
- class="overview-row">
+ [narrow]="true">
<div cdsCol
- [columnNumbers]="{md: 16, lg: 11}">
+ class="cds-mb-5"
+ [columnNumbers]="{lg: 11}">
<cds-tile>Health card</cds-tile>
</div>
<div cdsCol
- [columnNumbers]="{md: 16, lg: 5}">
+ class="cds-mb-5"
+ [columnNumbers]="{lg: 5}">
<cds-tile>Alerts card</cds-tile>
</div>
</div>
<div cdsRow
- [narrow]="true"
- class="overview-row">
+ [narrow]="true">
<div cdsCol
- [columnNumbers]="{md: 16, lg: 11}">
+ class="cds-mb-5"
+ [columnNumbers]="{lg: 11}">
<cds-tile>Storage card</cds-tile>
</div>
<div cdsCol
- [columnNumbers]="{md: 16, lg: 5}">
+ class="cds-mb-5"
+ [columnNumbers]="{lg: 5}">
<cds-tile>Docs card</cds-tile>
</div>
</div>
<div cdsRow>
<div cdsCol
- [columnNumbers]="{md: 16, lg: 16}">
+ class="cds-mb-5"
+ [columnNumbers]="{lg: 16}">
<cds-tile>Performance card</cds-tile>
</div>
</div>
-.overview {
- margin-top: var(--cds-spacing-05);
- margin-bottom: var(--cds-spacing-05);
-}
-
-.overview-row {
- margin-bottom: var(--cds-spacing-05);
-}
this.authService.login(this.model).subscribe(() => {
const urlPath = this.postInstalled ? '/' : '/expand-cluster';
let url = _.get(this.route.snapshot.queryParams, 'returnUrl', urlPath);
- if (!this.postInstalled && this.route.snapshot.queryParams['returnUrl'] === '/dashboard') {
+ if (!this.postInstalled && this.route.snapshot.queryParams['returnUrl'] === '/overview') {
url = '/expand-cluster';
}
if (url == '/expand-cluster') {
<div class="mt-4 text-center"
*ngIf="!module_name; else enableButton">
<button class="btn btn-primary"
- [routerLink]="'/dashboard'"
- i18n>Go To Dashboard</button>
+ [routerLink]="'/overview'"
+ i18n>Go To Overview</button>
</div>
</ng-template>
<block-ui name="global">
<cd-navigation>
<div class="container-fluid h-100"
- [ngClass]="{'dashboard': (router.url == '/dashboard' || router.url == '/dashboard_3' || router.url == '/multi-cluster/overview'), 'rgw-dashboard': (router.url == '/rgw/overview')}">
+ [ngClass]="{'overview': (router.url == '/overview' || router.url == '/dashboard_3' || router.url == '/multi-cluster/overview'), 'rgw-dashboard': (router.url == '/rgw/overview')}">
<!-- ************************ -->
<!-- ALERTS BANNER -->
<!-- ************************ -->
<div class="cd-alert-container"
- [ngClass]="{'ms-4 me-4': (router.url == '/dashboard' || router.url == '/dashboard_3' || router.url == '/multi-cluster/overview'), 'm-3': (router.url == '/rgw/overview')}">
+ [ngClass]="{'ms-4 me-4': (router.url == '/overview' || router.url == '/dashboard_3' || router.url == '/multi-cluster/overview'), 'm-3': (router.url == '/rgw/overview')}">
<cd-pwd-expiration-notification></cd-pwd-expiration-notification>
<cd-telemetry-notification></cd-telemetry-notification>
<cd-motd></cd-motd>
@use './src/styles/vendor/variables' as vv;
-.dashboard {
+.overview {
background-color: vv.$body-bg-alt;
margin: 0;
padding: 0;
<!-- ***************************** -->
<ng-template #brandTemplate>
<a class="cds--header__name navbar-brand ms-3"
- routerLink="/dashboard">
+ routerLink="/overview">
<img src="assets/Ceph_Ceph_Logo_with_text_white.svg"
alt="Ceph" />
</a>
class="mt-5"
(click)="onMenuClick($event)"
#sidenavContainer>
- <!-- Dashboard -->
- <cds-sidenav-item route="/dashboard"
+ <!-- Overview -->
+ <cds-sidenav-item route="/overview"
[useRouter]="true"
- title="Dashboard"
+ title="Overview"
i18n-title
- class="nav-item tc_menuitem_dashboard">
+ class="nav-item tc_menuitem_overview">
<svg cdsIcon="template"
icon
size="20"></svg>
<span i18n>
- Dashboard</span>
+ Overview</span>
</cds-sidenav-item>
<!-- Multi-cluster Dashboard -->
<cds-sidenav-menu title="Multi-cluster"
fixture.detectChanges();
const expectedTexts = {
- '.tc_menuitem_dashboard': 'Dashboard',
+ '.tc_menuitem_overview': 'Overview',
'.tc_submenuitem_multiCluster_overview': 'Overview',
'.tc_submenuitem_multiCluster_manage_clusters': 'Manage clusters',
'.tc_submenuitem_cluster_pool': 'Pools',
// ...
// cellTransformation: CellTemplate.redirect,
// customTemplateConfig: {
- // redirectLink: ['dashboard', 'overview'],
+ // redirectLink: ['overview', 'overview'],
// }
// ...
// }
// you can also use '::prop' in the redirectLink array to replace it with the cell value.
- // e.g ['dashboard', '::prop', 'details']
+ // e.g ['overview', '::prop', 'details']
//
// if you want to use some other property of the row for redirection instead of the cell value,
// you can use the 'customRowProperty' property in the customTemplateConfig to specify
get(): FeatureTogglesMap$ {
return this.featureToggleMap$;
}
-
- isFeatureEnabled(feature: string): boolean {
- return this.http.get<FeatureTogglesMap>(this.API_URL)?.[feature];
- }
}
.cds-mb-3 {
margin-bottom: layout.$spacing-03;
}
+
+.cds-mb-5 {
+ margin-bottom: layout.$spacing-05;
+}
+
+.cds-mt-5 {
+ margin-top: layout.$spacing-05;
+}
projects / ceph.git / commitdiff