mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Datagrid Panel: Edit data within your dashboards (#66353)
* wip * Datagrid WIP: snapshotting when data edited, better UI for adding column/rows, refactors * wip * WIP * wip * Add series selector * Delete selection on key press * wip * Multiple row select and delete * wip * draggable rows/columns, better column width calculator * bug fixes * scrollbars * add feature flag * bugfixes * bugfixes * bugfixes * bugfixes * Add possibility to rename column * Input fixes * bugfixes * bugfixes * performance optimisations * WIP component refactoring and optimisations * comment bit of code to remove error for testing * fix column move and payload types * WIP refactors and tests * e2e tests * queryGroup subscription refactor * queryGroup - add component on update, fix failing tests * refactor querygroup * querygroup refactor * tests * fix codeowners validation * lint fixes * revert convertFieldType modification in favor of already merged mod + re-add mistakenly deleted line * remove //ts-ignores * Minor style tweaks * fix * align colors with theme * fixes * refactor * add test for convertFieldType transformer and write todo --------- Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
This commit is contained in:
Victor Marin
GitHub
34
e2e/datagrid-suite/datagrid-data-change.spec.ts
Normal file
34
e2e/datagrid-suite/datagrid-data-change.spec.ts
Normal file
@@ -0,0 +1,34 @@
|
||||
import { e2e } from '@grafana/e2e';
|
||||
|
||||
const DASHBOARD_ID = 'a70ecb44-6c31-412d-ae74-d6306303ce37';
|
||||
const DATAGRID_SELECT_SERIES = 'Datagrid Select series';
|
||||
|
||||
e2e.scenario({
|
||||
describeName: 'Datagrid data changes',
|
||||
itName: 'Tests changing data in the grid',
|
||||
addScenarioDataSource: false,
|
||||
addScenarioDashBoard: false,
|
||||
skipScenario: false,
|
||||
scenario: () => {
|
||||
e2e.flows.openDashboard({ uid: DASHBOARD_ID, queryParams: { editPanel: 1 } });
|
||||
|
||||
// Check that the data is series A
|
||||
e2e.components.PanelEditor.OptionsPane.fieldLabel(DATAGRID_SELECT_SERIES).should('be.visible');
|
||||
cy.get('[data-testid="glide-cell-2-0"]').should('have.text', '1');
|
||||
cy.get('[data-testid="glide-cell-2-1"]').should('have.text', '20');
|
||||
cy.get('[data-testid="glide-cell-2-2"]').should('have.text', '90');
|
||||
|
||||
// Change the series to B
|
||||
e2e.components.PanelEditor.OptionsPane.fieldLabel(DATAGRID_SELECT_SERIES).find('input').type('B {enter}');
|
||||
cy.get('[data-testid="glide-cell-2-3"]').should('have.text', '30');
|
||||
cy.get('[data-testid="glide-cell-2-4"]').should('have.text', '40');
|
||||
cy.get('[data-testid="glide-cell-2-5"]').should('have.text', '50');
|
||||
|
||||
// Edit datagrid which triggers a snapshot query
|
||||
cy.get('.dvn-scroller').click(200, 100);
|
||||
cy.get('[data-testid="glide-cell-2-1"]').should('have.attr', 'aria-selected', 'true');
|
||||
cy.get('body').type('123455{enter}', { delay: 1000 });
|
||||
|
||||
cy.get('[data-testid="query-editor-row"]').contains('Spreadsheet or snapshot');
|
||||
},
|
||||
});
|
||||
150
e2e/datagrid-suite/datagrid-editing-features.spec.ts
Normal file
150
e2e/datagrid-suite/datagrid-editing-features.spec.ts
Normal file
@@ -0,0 +1,150 @@
|
||||
import { e2e } from '@grafana/e2e';
|
||||
|
||||
const DASHBOARD_ID = 'a70ecb44-6c31-412d-ae74-d6306303ce37';
|
||||
const DATAGRID_CANVAS = 'data-grid-canvas';
|
||||
|
||||
e2e.scenario({
|
||||
describeName: 'Datagrid data changes',
|
||||
itName: 'Tests changing data in the grid',
|
||||
addScenarioDataSource: false,
|
||||
addScenarioDashBoard: false,
|
||||
skipScenario: false,
|
||||
scenario: () => {
|
||||
e2e.flows.openDashboard({ uid: DASHBOARD_ID, queryParams: { editPanel: 1 } });
|
||||
|
||||
// Edit datagrid which triggers a snapshot query
|
||||
cy.get('.dvn-scroller').click(200, 100);
|
||||
cy.get('[data-testid="glide-cell-2-1"]').should('have.attr', 'aria-selected', 'true');
|
||||
cy.get('body').type('1{enter}');
|
||||
|
||||
// Delete a cell
|
||||
cy.get('.dvn-scroller').click(200, 200);
|
||||
cy.get('body').type('{del}');
|
||||
cy.get('[data-testid="glide-cell-2-4"]').should('have.text', 0);
|
||||
|
||||
// Delete a selection
|
||||
cy.get('.dvn-scroller').click(50, 100, { shiftKey: true });
|
||||
cy.get('body').type('{del}');
|
||||
cy.get('[data-testid="glide-cell-2-3"]').should('have.text', 0);
|
||||
cy.get('[data-testid="glide-cell-2-2"]').should('have.text', 0);
|
||||
cy.get('[data-testid="glide-cell-2-1"]').should('have.text', 0);
|
||||
cy.get('[data-testid="glide-cell-2-0"]').should('have.text', 1);
|
||||
cy.get('[data-testid="glide-cell-1-3"]').should('have.text', '');
|
||||
cy.get('[data-testid="glide-cell-1-2"]').should('have.text', '');
|
||||
cy.get('[data-testid="glide-cell-1-1"]').should('have.text', '');
|
||||
cy.get('[data-testid="glide-cell-1-0"]').should('not.have.text', '');
|
||||
|
||||
// Clear column through context menu
|
||||
cy.get('.dvn-scroller').rightclick(200, 100);
|
||||
cy.get('[aria-label="Context menu"]').click(100, 120); // click clear column
|
||||
cy.get('[data-testid="glide-cell-2-0"]').should('have.text', 0);
|
||||
cy.get('[data-testid="glide-cell-2-4"]').should('have.text', 0);
|
||||
|
||||
// Clear row through context menu
|
||||
cy.get('.dvn-scroller').click(200, 220);
|
||||
cy.get('body').type('1123{enter}', { delay: 500 });
|
||||
cy.get('.dvn-scroller').rightclick(200, 220);
|
||||
cy.get('[aria-label="Context menu"]').click(100, 100); // click clear row
|
||||
cy.get('[data-testid="glide-cell-1-4"]').should('have.text', '');
|
||||
cy.get('[data-testid="glide-cell-2-4"]').should('have.text', 0);
|
||||
|
||||
// get the data back
|
||||
cy.reload();
|
||||
|
||||
// Clear row through row selector
|
||||
cy.get('.dvn-scroller').click(20, 190, { waitForAnimations: true });
|
||||
cy.get('.dvn-scroller').click(20, 90, { shiftKey: true, waitForAnimations: true }); // with shift to select all rows between clicks
|
||||
cy.get('body').type('{del}');
|
||||
cy.get('[data-testid="glide-cell-1-4"]').should('have.text', '');
|
||||
cy.get('[data-testid="glide-cell-1-3"]').should('have.text', '');
|
||||
cy.get('[data-testid="glide-cell-1-2"]').should('have.text', '');
|
||||
cy.get('[data-testid="glide-cell-1-1"]').should('have.text', '');
|
||||
cy.get('[data-testid="glide-cell-2-4"]').should('have.text', 0);
|
||||
cy.get('[data-testid="glide-cell-2-3"]').should('have.text', 0);
|
||||
cy.get('[data-testid="glide-cell-2-2"]').should('have.text', 0);
|
||||
cy.get('[data-testid="glide-cell-2-1"]').should('have.text', 0);
|
||||
cy.wait(1000);
|
||||
cy.reload();
|
||||
cy.get('.dvn-scroller').click(20, 190, { waitForAnimations: true });
|
||||
cy.get('.dvn-scroller').click(20, 90, { commandKey: true, waitForAnimations: true }); // with cmd to select only clicked rows
|
||||
cy.get('body').type('{del}');
|
||||
cy.get('[data-testid="glide-cell-1-1"]').should('have.text', '');
|
||||
cy.get('[data-testid="glide-cell-2-1"]').should('have.text', 0);
|
||||
cy.get('[data-testid="glide-cell-2-4"]').should('have.text', 0);
|
||||
cy.get('[data-testid="glide-cell-1-4"]').should('have.text', '');
|
||||
|
||||
// Remove all data
|
||||
cy.get('.dvn-scroller').rightclick(100, 100);
|
||||
cy.get('body').click(150, 420);
|
||||
cy.get(`[data-testid="${DATAGRID_CANVAS}"] th`).should('have.length', 0);
|
||||
|
||||
cy.reload();
|
||||
|
||||
// Delete column through header dropdown menu
|
||||
cy.get('.dvn-scroller').click(250, 15); // click header dropdown
|
||||
cy.get('body').click(450, 420); // click delete column
|
||||
cy.get(`[data-testid="${DATAGRID_CANVAS}"] th`).should('have.length', 1);
|
||||
|
||||
// Delete row through context menu
|
||||
cy.get('.dvn-scroller').rightclick(100, 100);
|
||||
cy.get('[aria-label="Context menu"]').click(10, 10);
|
||||
cy.get(`[data-testid="${DATAGRID_CANVAS}"] tbody tr`).should('have.length', 6); // there are 5 data rows + 1 for the add new row btns
|
||||
|
||||
// Delete rows through row selector
|
||||
cy.get('.dvn-scroller').click(20, 190, { waitForAnimations: true });
|
||||
cy.get('.dvn-scroller').click(20, 90, { shiftKey: true, waitForAnimations: true }); // with shift to select all rows between clicks
|
||||
cy.get('.dvn-scroller').rightclick(100, 100);
|
||||
cy.get('[aria-label="Context menu"]').click(10, 10);
|
||||
cy.get(`[data-testid="${DATAGRID_CANVAS}"] tbody tr`).should('have.length', 2); // there are 1 data rows + 1 for the add new row btns
|
||||
cy.reload();
|
||||
cy.get('.dvn-scroller').click(20, 190, { waitForAnimations: true });
|
||||
cy.get('.dvn-scroller').click(20, 90, { commandKey: true, waitForAnimations: true }); // with shift to select all rows between clicks
|
||||
cy.get('.dvn-scroller').rightclick(40, 90);
|
||||
cy.get('[aria-label="Context menu"]').click(10, 10);
|
||||
cy.get(`[data-testid="${DATAGRID_CANVAS}"] tbody tr`).should('have.length', 5); // there are 5 data rows + 1 for the add new row btns
|
||||
|
||||
// Delete column through context menu
|
||||
cy.get('.dvn-scroller').rightclick(100, 100);
|
||||
cy.get('[aria-label="Context menu"]').click(10, 50);
|
||||
cy.get(`[data-testid="${DATAGRID_CANVAS}"] th`).should('have.length', 1);
|
||||
|
||||
cy.reload();
|
||||
cy.wait(3000);
|
||||
|
||||
// Add a new column
|
||||
cy.get('body').click(350, 200).type('New Column{enter}');
|
||||
cy.get('body')
|
||||
.click(350, 230)
|
||||
.type('Value 1{enter}')
|
||||
.type('Value 2{enter}')
|
||||
.type('Value 3{enter}')
|
||||
.type('Value 4{enter}')
|
||||
.type('Value 5{enter}')
|
||||
.type('Value 6{enter}');
|
||||
cy.get(`[data-testid="${DATAGRID_CANVAS}"] th`).should('have.length', 3);
|
||||
|
||||
// Rename a column
|
||||
cy.get('.dvn-scroller').click(250, 15); // click header dropdown
|
||||
cy.get('body').click(450, 380).type('{selectall}{backspace}Renamed column{enter}');
|
||||
cy.get(`[data-testid="${DATAGRID_CANVAS}"] th`).contains('Renamed column');
|
||||
|
||||
// Change column field type
|
||||
cy.get('.dvn-scroller').click(250, 15);
|
||||
cy.get('[aria-label="Context menu"]').click(50, 50);
|
||||
cy.get('.dvn-scroller').click(200, 100);
|
||||
cy.get('body').type('Str Value{enter}');
|
||||
cy.get(`[data-testid="${DATAGRID_CANVAS}"] tr`).contains('Str Value');
|
||||
|
||||
// Select all rows through row selection
|
||||
cy.get('.dvn-scroller').click(10, 10, { waitForAnimations: true });
|
||||
cy.get(`[data-testid="${DATAGRID_CANVAS}"] [aria-selected="true"]`).should('have.length', 6);
|
||||
|
||||
// Add a new row
|
||||
cy.get('.dvn-scroller').click(200, 250);
|
||||
cy.get('body').type('123');
|
||||
cy.get('.dvn-scroller').click(50, 250);
|
||||
cy.get('body').type('Val{enter}');
|
||||
cy.get(`[data-testid="${DATAGRID_CANVAS}"] tbody tr`).contains('Val');
|
||||
cy.get(`[data-testid="${DATAGRID_CANVAS}"] tbody tr`).should('have.length', 8);
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user