IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Selector improvements for E2E (#27271)

Browse Source
This commit is contained in:
Steven Vachon 2020-08-28 12:59:56 -04:00 committed by GitHub
parent 7d72837d40
commit 611d416f91
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 24 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/grafana-e2e-selectors/src/selectors/pages.ts
View File

@ -125,7 +125,9 @@ export const Pages = {
url: '/explore',
General: {
container: 'Explore',
graph: 'Explore Graph',
runButton: 'Run button',
table: 'Explore Table',
},
Toolbar: {
navBar: '.explore-toolbar',

5
packages/grafana-ui/src/components/Graph/Graph.tsx
View File

@ -13,6 +13,7 @@ import { GraphDimensions } from './GraphTooltip/types';
import { graphTimeFormat, graphTickFormatter } from './utils';
export interface GraphProps {
ariaLabel?: string;
children?: JSX.Element | JSX.Element[];
series: GraphSeriesXY[];
timeRange: TimeRange; // NOTE: we should aim to make `time` a property of the axis, not force it for all graphs
@ -361,12 +362,12 @@ export class Graph extends PureComponent<GraphProps, GraphState> {
}
render() {
const { height, width, series } = this.props;
const { ariaLabel, height, width, series } = this.props;
const noDataToBeDisplayed = series.length === 0;
const tooltip = this.renderTooltip();
const context = this.renderContextMenu();
return (
<div className="graph-panel">
<div className="graph-panel" aria-label={ariaLabel}>
<div
className="graph-panel__chart"
ref={e => (this.element = e)}

3
packages/grafana-ui/src/components/Graph/GraphWithLegend.tsx
View File

@ -73,6 +73,7 @@ export const GraphWithLegend: React.FunctionComponent<GraphWithLegendProps> = (p
onHorizontalRegionSelected,
timeZone,
children,
ariaLabel,
} = props;
const { graphContainer, wrapper, legendContainer } = getGraphWithLegendStyles(props);
@ -91,7 +92,7 @@ export const GraphWithLegend: React.FunctionComponent<GraphWithLegendProps> = (p
}, []);
return (
<div className={wrapper}>
<div className={wrapper} aria-label={ariaLabel}>
<div className={graphContainer}>
<Graph
series={series}

4
packages/grafana-ui/src/components/Table/Table.tsx
View File

@ -28,6 +28,7 @@ import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar';
const COLUMN_MIN_WIDTH = 150;
export interface Props {
ariaLabel?: string;
data: DataFrame;
width: number;
height: number;
@ -111,6 +112,7 @@ function getInitialState(props: Props, columns: Column[]): Partial<ReactTableInt
export const Table: FC<Props> = memo((props: Props) => {
const {
ariaLabel,
data,
height,
onCellFilterAdded,
@ -182,7 +184,7 @@ export const Table: FC<Props> = memo((props: Props) => {
const headerHeight = noHeader ? 0 : tableStyles.cellHeight;
return (
<div {...getTableProps()} className={tableStyles.table}>
<div {...getTableProps()} className={tableStyles.table} aria-label={ariaLabel}>
<CustomScrollbar hideVerticalTrack={true}>
<div style={{ width: `${totalColumnsWidth}px` }}>
{!noHeader && (

2
public/app/features/explore/Explore.tsx
View File

@ -389,6 +389,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
<>
{showMetrics && (
<ExploreGraphPanel
ariaLabel={selectors.pages.Explore.General.graph}
series={graphResult}
width={width}
loading={loading}
@ -406,6 +407,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
)}
{showTable && (
<TableContainer
ariaLabel={selectors.pages.Explore.General.table}
width={width}
exploreId={exploreId}
onCellFilterAdded={

3
public/app/features/explore/ExploreGraphPanel.tsx
View File

@ -40,6 +40,7 @@ const getStyles = (theme: GrafanaTheme) => ({
});
interface Props extends Themeable {
ariaLabel?: string;
series?: GraphSeriesXY[] | null;
width: number;
absoluteRange: AbsoluteTimeRange;
@ -87,6 +88,7 @@ class UnThemedExploreGraphPanel extends PureComponent<Props, State> {
renderGraph = () => {
const {
ariaLabel,
width,
series,
onHiddenSeriesChanged,
@ -123,6 +125,7 @@ class UnThemedExploreGraphPanel extends PureComponent<Props, State> {
{({ onSeriesToggle, toggledSeries }: GraphSeriesTogglerAPI) => {
return (
<GraphWithLegend
ariaLabel={ariaLabel}
displayMode={LegendDisplayMode.List}
height={height}
isLegendVisible={true}

11
public/app/features/explore/TableContainer.tsx
View File

@ -13,6 +13,7 @@ import { FilterItem } from '@grafana/ui/src/components/Table/types';
import { getFieldLinksForExplore } from './utils/links';
interface TableContainerProps {
ariaLabel?: string;
exploreId: ExploreId;
loading: boolean;
width: number;
@ -41,7 +42,7 @@ export class TableContainer extends PureComponent<TableContainerProps> {
}
render() {
const { loading, onCellFilterAdded, showingTable, tableResult, width, splitOpen, range } = this.props;
const { loading, onCellFilterAdded, showingTable, tableResult, width, splitOpen, range, ariaLabel } = this.props;
const height = this.getTableHeight();
const tableWidth = width - config.theme.panelPadding * 2 - PANEL_BORDER;
@ -61,7 +62,13 @@ export class TableContainer extends PureComponent<TableContainerProps> {
return (
<Collapse label="Table" loading={loading} collapsible isOpen={showingTable} onToggle={this.onClickTableButton}>
{hasTableResult ? (
<Table data={tableResult!} width={tableWidth} height={height} onCellFilterAdded={onCellFilterAdded} />
<Table
ariaLabel={ariaLabel}
data={tableResult!}
width={tableWidth}
height={height}
onCellFilterAdded={onCellFilterAdded}
/>
) : (
<MetaInfoText metaItems={[{ value: '0 series returned' }]} />
)}