Skip to content

Commit

Permalink
Projects list view: expand workbenches column to a table
Browse files Browse the repository at this point in the history
  • Loading branch information
@jeff-phillips-18
jeff-phillips-18 committed Sep 16, 2024
1 parent d0b5ce9 commit db5d2ec
Show file tree
Hide file tree
Showing 19 changed files with 617 additions and 445 deletions.
26 changes: 20 additions & 6 deletions frontend/src/__tests__/cypress/cypress/pages/projects.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,21 +36,35 @@ class NotebookRow extends TableRow {
}
}

class ProjectNotebookRow extends TableRow {
findNotebookRouteLink() {
return this.find().findByTestId('notebook-route-link');
}

findNotebookStatusText() {
return this.find().findByTestId('notebook-status-text');
}
}

class ProjectRow extends TableRow {
findDescription() {
return this.find().findByTestId('table-row-title-description');
}

findEnableSwitch() {
return this.find().pfSwitch('notebook-status-switch');
findNotebookColumn() {
return this.find().findByTestId('notebook-column-expand');
}

findNotebookRouteLink() {
return this.find().findByTestId('notebook-route-link');
findNotebookTable() {
return this.find().parents('tbody').findByTestId('project-notebooks-table');
}

findNotebookStatusText() {
return this.find().findByTestId('notebook-status-text');
getNotebookRow(notebookName: string) {
return new ProjectNotebookRow(() => this.findNotebookLink(notebookName).parents('tr'));
}

findNotebookLink(notebookName: string) {
return this.findNotebookTable().findByRole('link', { name: notebookName });
}
}

Expand Down
4 changes: 0 additions & 4 deletions frontend/src/__tests__/cypress/cypress/pages/workbench.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,10 +139,6 @@ class NotebookRow extends TableRow {
.findByTestId('add-storage-button');
}

findEnableSwitch() {
return this.find().pfSwitch('notebook-status-switch');
}

shouldHaveContainerSize(name: string) {
this.find().find(`[data-label="Container size"]`).contains(name).should('exist');
return this;
Expand Down
110 changes: 74 additions & 36 deletions frontend/src/__tests__/cypress/cypress/tests/mocked/projects/projectList.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,14 +61,6 @@ describe('Data science projects details', () => {
cy.url().should('include', '/projects/test-project');
});

it('should test url for workbench creation', () => {
initIntercepts();
projectListPage.visit();
projectListPage.findCreateWorkbenchButton().click();

cy.url().should('include', '/projects/test-project/spawner');
});

it('should list the new project', () => {
initIntercepts();
projectListPage.visit();
Expand Down Expand Up @@ -191,41 +183,81 @@ describe('Data science projects details', () => {
deleteProject.should('have.attr', 'aria-disabled', 'true');
});

describe('Table filter', () => {
it('filter by name', () => {
initIntercepts();
projectListPage.visit();

// Select the "Name" filter
const projectListToolbar = projectListPage.getTableToolbar();
projectListToolbar.findFilterMenuOption('filter-toolbar-dropdown', 'Name').click();
projectListToolbar.findFilterInput('name').type('Test Project');
// Verify only rows with the typed run name exist
projectListPage.getProjectRow('Test Project').find().should('exist');
});
it('should filter by name', () => {
initIntercepts();
projectListPage.visit();

it('filter by user', () => {
initIntercepts();
projectListPage.visit();
// Select the "Name" filter
const projectListToolbar = projectListPage.getTableToolbar();
projectListToolbar.findFilterMenuOption('filter-toolbar-dropdown', 'Name').click();
projectListToolbar.findFilterInput('name').type('Test Project');
// Verify only rows with the typed run name exist
projectListPage.getProjectRow('Test Project').find().should('exist');
});

// Select the "User" filter
const projectListToolbar = projectListPage.getTableToolbar();
projectListToolbar.findFilterMenuOption('filter-toolbar-dropdown', 'User').click();
projectListToolbar.findFilterInput('user').type('test-user');
// Verify only rows with the typed run user exist
projectListPage.getProjectRow('Test Project').find().should('exist');
});
it('should filter by user', () => {
initIntercepts();
projectListPage.visit();

// Select the "User" filter
const projectListToolbar = projectListPage.getTableToolbar();
projectListToolbar.findFilterMenuOption('filter-toolbar-dropdown', 'User').click();
projectListToolbar.findFilterInput('user').type('test-user');
// Verify only rows with the typed run user exist
projectListPage.getProjectRow('Test Project').find().should('exist');
});

it('Validate that clicking on switch toggle will open modal to stop workbench', () => {
it('should show list of workbenches when the column is expanded', () => {
cy.interceptK8sList(ProjectModel, mockK8sResourceList([mockProjectK8sResource({})]));
cy.interceptK8s(RouteModel, mockRouteK8sResource({ notebookName: 'test-notebook' })).as(
'getWorkbench',
);
cy.interceptK8sList(
{ model: NotebookModel },
mockK8sResourceList([
mockNotebookK8sResource({
opts: {
spec: {
template: {
spec: {
containers: [
{
name: 'test-notebook',
image: 'test-image:latest',
},
],
},
},
},
metadata: {
name: 'test-notebook',
namespace: 'test-project',
labels: {
'opendatahub.io/notebook-image': 'true',
},
annotations: {
'opendatahub.io/image-display-name': 'Test image',
},
},
},
}),
]),
);
projectListPage.visit();
cy.wait('@getWorkbench');
const projectTableRow = projectListPage.getProjectRow('Test Project');
projectTableRow.findNotebookColumn().click();
});

it('should open the modal to stop workbench when user stops the workbench', () => {
cy.interceptK8sList(ProjectModel, mockK8sResourceList([mockProjectK8sResource({})]));
cy.interceptK8s('PATCH', NotebookModel, mockNotebookK8sResource({})).as('stopWorkbench');
cy.interceptK8sList(PodModel, mockK8sResourceList([mockPodK8sResource({})]));
cy.interceptK8s(RouteModel, mockRouteK8sResource({ notebookName: 'test-notebook' })).as(
'getWorkbench',
);
cy.interceptK8sList(
{ model: NotebookModel, ns: 'test-project' },
NotebookModel,
mockK8sResourceList([
mockNotebookK8sResource({
opts: {
Expand All @@ -243,6 +275,7 @@ describe('Data science projects details', () => {
},
metadata: {
name: 'test-notebook',
namespace: 'test-project',
labels: {
'opendatahub.io/notebook-image': 'true',
},
Expand All @@ -255,9 +288,14 @@ describe('Data science projects details', () => {
]),
);
projectListPage.visit();
cy.wait('@getWorkbench');
const projectTableRow = projectListPage.getProjectRow('Test Project');
projectTableRow.findEnableSwitch().click();
projectTableRow.findNotebookColumn().click();

const notebookRow = projectTableRow.getNotebookRow('Test Notebook');
notebookRow.findNotebookRouteLink().should('have.attr', 'aria-disabled', 'false');

notebookRow.findKebabAction('Start').should('be.disabled');
notebookRow.findKebabAction('Stop').click();

//stop workbench
notebookConfirmModal.findStopWorkbenchButton().should('be.enabled');
Expand Down Expand Up @@ -288,8 +326,8 @@ describe('Data science projects details', () => {
},
]);
});
projectTableRow.findNotebookStatusText().should('have.text', 'Stopped ');
projectTableRow.findNotebookRouteLink().should('have.attr', 'aria-disabled', 'true');
notebookRow.findNotebookStatusText().should('have.text', 'Stopped');
notebookRow.findNotebookRouteLink().should('have.attr', 'aria-disabled', 'true');
});
});

Expand Down
10 changes: 5 additions & 5 deletions frontend/src/__tests__/cypress/cypress/tests/mocked/projects/workbench.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -420,7 +420,7 @@ describe('Workbench page', () => {
const notebookRow = workbenchPage.getNotebookRow('Test Notebook');
notebookRow.shouldHaveNotebookImageName('Test Image');
notebookRow.shouldHaveContainerSize('Small');
notebookRow.findHaveNotebookStatusText().should('have.text', 'Running ');
notebookRow.findHaveNotebookStatusText().should('have.text', 'Running');
notebookRow.findNotebookRouteLink().should('have.attr', 'aria-disabled', 'false');

//Name sorting
Expand Down Expand Up @@ -449,7 +449,7 @@ describe('Workbench page', () => {
const notebookRow = workbenchPage.getNotebookRow('Test Notebook');

//stop Workbench
notebookRow.findEnableSwitch().click();
notebookRow.findKebabAction('Stop').click();
notebookConfirmModal.findStopWorkbenchButton().should('be.enabled');
cy.interceptK8s(
NotebookModel,
Expand Down Expand Up @@ -478,7 +478,7 @@ describe('Workbench page', () => {
},
]);
});
notebookRow.findHaveNotebookStatusText().should('have.text', 'Stopped ');
notebookRow.findHaveNotebookStatusText().should('have.text', 'Stopped');
notebookRow.findNotebookRouteLink().should('have.attr', 'aria-disabled', 'true');

cy.interceptK8s('PATCH', NotebookModel, mockNotebookK8sResource({})).as('startWorkbench');
Expand All @@ -499,8 +499,8 @@ describe('Workbench page', () => {
}),
);

notebookRow.findEnableSwitch().click();
notebookRow.findHaveNotebookStatusText().should('have.text', 'Starting... ');
notebookRow.findKebabAction('Start').click();
notebookRow.findHaveNotebookStatusText().should('have.text', 'Starting');
notebookRow.findHaveNotebookStatusText().click();

cy.wait('@startWorkbench').then((interception) => {
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/api/k8s/notebooks.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,7 @@ export const getStopPatch = (): Patch => ({
value: getStopPatchDataString(),
});

export const getNotebooks = (namespace: string): Promise<NotebookKind[]> =>
export const getNotebooks = (namespace?: string): Promise<NotebookKind[]> =>
k8sListResource<NotebookKind>({
model: NotebookModel,
queryOptions: { ns: namespace },
Expand Down
13 changes: 13 additions & 0 deletions frontend/src/images/icons/NotebookIcon.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { createIcon } from '@patternfly/react-icons/dist/esm/createIcon';

const NotebookIcon = createIcon({
name: 'NotebookIcon',
width: 48,
height: 48,
svgPath:
'M 13, 35m -1.5, 0 a 1.5,1.5 0 1,0 3,0 a 1.5,1.5 0 1,0 -3,0ZM39.74,12.91c-.15-.28-.42-.47-.73-.52-.31-.04-.63.06-.86.28l-6.12,6.12c-.75.75-2.07.75-2.83,0-.38-.38-.58-.88-.58-1.41s.21-1.04.58-1.41l6.12-6.12c.22-.22.33-.54.28-.86-.05-.31-.24-.59-.52-.73-1.55-.82-3.31-1.26-5.09-1.26-6.07,0-11,4.93-11,11,0,1.03.14,2.05.43,3.03l-10.87,10.87c-1.01,1.01-1.56,2.34-1.56,3.77s.55,2.76,1.56,3.77,2.4,1.56,3.77,1.56,2.73-.52,3.77-1.56l10.87-10.87c.98.29,2,.43,3.03.43,6.07,0,11-4.93,11-11,0-1.77-.43-3.53-1.26-5.09Zm-9.74,14.09c-1.02,0-2.02-.17-2.97-.51-.36-.13-.77-.04-1.04.24l-11.3,11.3c-1.3,1.3-3.41,1.3-4.71,0-.63-.63-.97-1.46-.97-2.35s.35-1.72.97-2.35l11.3-11.3c.27-.27.36-.68.24-1.04-.34-.96-.51-1.96-.51-2.97,0-4.96,4.04-9,9-9,1,0,1.96.16,2.88.47l-5.08,5.08c-1.56,1.56-1.56,4.1,0,5.65s4.1,1.56,5.65,0l5.08-5.08c.31.92.47,1.88.47,2.88,0,4.96-4.04,9-9,9Z',
xOffset: 0,
yOffset: 0,
});

export default NotebookIcon;
Loading

0 comments on commit db5d2ec

Please sign in to comment.