Skip to content

N
nexpie-grafana-theme
Commit a521a39e by Marcus Andersson Committed by GitHub
Options

TimeZone: added e2e tests for the custom time zone support. (#24442)

parent e341d4b2
Showing with 805 additions and 4 deletions
devenv/dev-dashboards/scenarios/time_zone_support.json 0 → 100644
{
"annotations": {
"list": [
{
"builtIn": 1,
"datasource": "-- Grafana --",
"enable": true,
"hide": true,
"iconColor": "rgba(0, 211, 255, 1)",
"name": "Annotations & Alerts",
"type": "dashboard"
}
]
},
"editable": true,
"gnetId": null,
"graphTooltip": 0,
"id": 28,
"links": [],
"panels": [
{
"aliasColors": {},
"bars": false,
"dashLength": 10,
"dashes": false,
"datasource": "gdev-testdata",
"editable": true,
"error": false,
"fieldConfig": {
"defaults": {
"custom": {}
},
"overrides": []
},
"fill": 1,
"fillGradient": 0,
"gridPos": {
"h": 7,
"w": 12,
"x": 0,
"y": 0
},
"hiddenSeries": false,
"id": 4,
"legend": {
"avg": false,
"current": false,
"max": false,
"min": false,
"show": true,
"total": false,
"values": false
},
"lines": true,
"linewidth": 2,
"links": [],
"nullPointMode": "connected",
"options": {
"dataLinks": []
},
"percentage": false,
"pointradius": 5,
"points": false,
"renderer": "flot",
"seriesOverrides": [],
"spaceLength": 10,
"stack": false,
"steppedLine": false,
"targets": [
{
"refId": "A",
"scenario": "random_walk",
"scenarioId": "random_walk",
"target": ""
}
],
"thresholds": [],
"timeFrom": "2s",
"timeRegions": [],
"timeShift": null,
"title": "Millisecond res x-axis and tooltip",
"tooltip": {
"msResolution": false,
"shared": true,
"sort": 0,
"value_type": "cumulative"
},
"type": "graph",
"xaxis": {
"buckets": null,
"mode": "time",
"name": null,
"show": true,
"values": []
},
"yaxes": [
{
"format": "short",
"label": null,
"logBase": 1,
"max": null,
"min": null,
"show": true
},
{
"format": "short",
"label": null,
"logBase": 1,
"max": null,
"min": null,
"show": true
}
],
"yaxis": {
"align": false,
"alignLevel": null
}
},
{
"aliasColors": {},
"bars": false,
"dashLength": 10,
"dashes": false,
"datasource": "gdev-testdata",
"editable": true,
"error": false,
"fieldConfig": {
"defaults": {
"custom": {}
},
"overrides": []
},
"fill": 1,
"fillGradient": 0,
"gridPos": {
"h": 7,
"w": 12,
"x": 12,
"y": 0
},
"hiddenSeries": false,
"id": 3,
"legend": {
"avg": false,
"current": false,
"max": false,
"min": false,
"show": true,
"total": false,
"values": false
},
"lines": true,
"linewidth": 2,
"links": [],
"nullPointMode": "connected",
"options": {
"dataLinks": []
},
"percentage": false,
"pointradius": 5,
"points": false,
"renderer": "flot",
"seriesOverrides": [],
"spaceLength": 10,
"stack": false,
"steppedLine": false,
"targets": [
{
"refId": "A",
"scenario": "random_walk",
"scenarioId": "random_walk",
"target": ""
}
],
"thresholds": [],
"timeFrom": null,
"timeRegions": [],
"timeShift": null,
"title": "Random walk series",
"tooltip": {
"msResolution": false,
"shared": true,
"sort": 0,
"value_type": "cumulative"
},
"type": "graph",
"xaxis": {
"buckets": null,
"mode": "time",
"name": null,
"show": true,
"values": []
},
"yaxes": [
{
"format": "short",
"label": null,
"logBase": 1,
"max": null,
"min": null,
"show": true
},
{
"format": "short",
"label": null,
"logBase": 1,
"max": null,
"min": null,
"show": true
}
],
"yaxis": {
"align": false,
"alignLevel": null
}
},
{
"aliasColors": {},
"bars": false,
"dashLength": 10,
"dashes": false,
"datasource": "gdev-testdata",
"editable": true,
"error": false,
"fieldConfig": {
"defaults": {
"custom": {}
},
"overrides": []
},
"fill": 1,
"fillGradient": 0,
"gridPos": {
"h": 8,
"w": 12,
"x": 0,
"y": 7
},
"hiddenSeries": false,
"id": 5,
"legend": {
"avg": false,
"current": false,
"max": false,
"min": false,
"show": true,
"total": false,
"values": false
},
"lines": true,
"linewidth": 2,
"links": [],
"nullPointMode": "connected",
"options": {
"dataLinks": []
},
"percentage": false,
"pointradius": 5,
"points": false,
"renderer": "flot",
"seriesOverrides": [
{
"alias": "B-series",
"yaxis": 2
}
],
"spaceLength": 10,
"stack": false,
"steppedLine": false,
"targets": [
{
"refId": "A",
"scenarioId": "csv_metric_values",
"stringInput": "1,20,90,30,5,0",
"target": ""
},
{
"refId": "B",
"scenarioId": "csv_metric_values",
"stringInput": "2000,3000,4000,1000,3000,10000",
"target": ""
}
],
"thresholds": [],
"timeFrom": null,
"timeRegions": [],
"timeShift": null,
"title": "2 yaxis and axis labels",
"tooltip": {
"msResolution": false,
"shared": true,
"sort": 0,
"value_type": "cumulative"
},
"type": "graph",
"xaxis": {
"buckets": null,
"mode": "time",
"name": null,
"show": true,
"values": []
},
"yaxes": [
{
"format": "percent",
"label": "Perecent",
"logBase": 1,
"max": null,
"min": null,
"show": true
},
{
"format": "short",
"label": "Pressure",
"logBase": 1,
"max": null,
"min": null,
"show": true
}
],
"yaxis": {
"align": false,
"alignLevel": null
}
},
{
"aliasColors": {},
"bars": false,
"dashLength": 10,
"dashes": false,
"datasource": "gdev-testdata",
"editable": true,
"error": false,
"fieldConfig": {
"defaults": {
"custom": {}
},
"overrides": []
},
"fill": 1,
"fillGradient": 0,
"gridPos": {
"h": 8,
"w": 12,
"x": 12,
"y": 7
},
"hiddenSeries": false,
"id": 9,
"legend": {
"avg": false,
"current": false,
"max": false,
"min": false,
"show": true,
"total": false,
"values": false
},
"lines": true,
"linewidth": 2,
"links": [],
"nullPointMode": "null",
"options": {
"dataLinks": []
},
"percentage": false,
"pointradius": 5,
"points": false,
"renderer": "flot",
"seriesOverrides": [
{
"alias": "B-series",
"zindex": -3
}
],
"spaceLength": 10,
"stack": true,
"steppedLine": false,
"targets": [
{
"hide": false,
"refId": "B",
"scenarioId": "csv_metric_values",
"stringInput": "1,20,null,null,null,null,null,null,100,10,10,20,30,40,10",
"target": ""
},
{
"alias": "",
"hide": false,
"refId": "A",
"scenarioId": "csv_metric_values",
"stringInput": "1,20,90,30,5,10,20,30,40,40,40,100,10,20,20",
"target": ""
},
{
"alias": "",
"hide": false,
"refId": "C",
"scenarioId": "csv_metric_values",
"stringInput": "1,20,90,30,5,10,20,30,40,40,40,100,10,20,20",
"target": ""
}
],
"thresholds": [],
"timeFrom": null,
"timeRegions": [],
"timeShift": null,
"title": "Stacking value ontop of nulls",
"tooltip": {
"msResolution": false,
"shared": true,
"sort": 0,
"value_type": "cumulative"
},
"type": "graph",
"xaxis": {
"buckets": null,
"mode": "time",
"name": null,
"show": true,
"values": []
},
"yaxes": [
{
"format": "short",
"label": null,
"logBase": 1,
"max": null,
"min": null,
"show": true
},
{
"format": "short",
"label": null,
"logBase": 1,
"max": null,
"min": null,
"show": true
}
],
"yaxis": {
"align": false,
"alignLevel": null
}
},
{
"aliasColors": {},
"bars": false,
"dashLength": 10,
"dashes": false,
"datasource": "gdev-testdata",
"editable": true,
"error": false,
"fieldConfig": {
"defaults": {
"custom": {}
},
"overrides": []
},
"fill": 0,
"fillGradient": 0,
"gridPos": {
"h": 7,
"w": 12,
"x": 0,
"y": 15
},
"hiddenSeries": false,
"id": 21,
"legend": {
"avg": false,
"current": false,
"max": false,
"min": false,
"show": true,
"total": false,
"values": false
},
"lines": true,
"linewidth": 2,
"links": [],
"nullPointMode": "null",
"options": {
"dataLinks": []
},
"percentage": false,
"pointradius": 5,
"points": false,
"renderer": "flot",
"seriesOverrides": [
{
"alias": "C-series",
"steppedLine": true
}
],
"spaceLength": 10,
"stack": false,
"steppedLine": false,
"targets": [
{
"alias": "",
"hide": false,
"refId": "B",
"scenarioId": "csv_metric_values",
"stringInput": "1,null,40,null,90,null,null,100,null,null,100,null,null,80,null",
"target": ""
},
{
"alias": "",
"hide": false,
"refId": "C",
"scenarioId": "csv_metric_values",
"stringInput": "20,null40,null,null,50,null,70,null,100,null,10,null,30,null",
"target": ""
}
],
"thresholds": [],
"timeFrom": null,
"timeRegions": [],
"timeShift": null,
"title": "Null between points",
"tooltip": {
"msResolution": false,
"shared": true,
"sort": 0,
"value_type": "cumulative"
},
"type": "graph",
"xaxis": {
"buckets": null,
"mode": "time",
"name": null,
"show": true,
"values": []
},
"yaxes": [
{
"format": "short",
"label": null,
"logBase": 1,
"max": null,
"min": null,
"show": true
},
{
"format": "short",
"label": null,
"logBase": 1,
"max": null,
"min": null,
"show": true
}
],
"yaxis": {
"align": false,
"alignLevel": null
}
},
{
"aliasColors": {},
"bars": false,
"dashLength": 10,
"dashes": false,
"datasource": "gdev-testdata",
"decimals": 3,
"fieldConfig": {
"defaults": {
"custom": {}
},
"overrides": []
},
"fill": 1,
"fillGradient": 0,
"gridPos": {
"h": 7,
"w": 12,
"x": 12,
"y": 15
},
"hiddenSeries": false,
"id": 16,
"legend": {
"alignAsTable": true,
"avg": true,
"current": true,
"max": true,
"min": true,
"show": true,
"total": true,
"values": true
},
"lines": true,
"linewidth": 1,
"links": [],
"nullPointMode": "null",
"options": {
"dataLinks": []
},
"percentage": false,
"pointradius": 5,
"points": false,
"renderer": "flot",
"seriesOverrides": [],
"spaceLength": 10,
"stack": false,
"steppedLine": false,
"targets": [
{
"refId": "A",
"scenarioId": "csv_metric_values",
"stringInput": "1,20,90,30,5,0",
"target": ""
},
{
"refId": "B",
"scenarioId": "csv_metric_values",
"stringInput": "1,20,90,30,5,0",
"target": ""
},
{
"refId": "C",
"scenarioId": "csv_metric_values",
"stringInput": "1,20,90,30,5,0",
"target": ""
},
{
"refId": "D",
"scenarioId": "csv_metric_values",
"stringInput": "1,20,90,30,5,0",
"target": ""
}
],
"thresholds": [],
"timeFrom": null,
"timeRegions": [],
"timeShift": null,
"title": "Legend Table No Scroll Visible",
"tooltip": {
"shared": true,
"sort": 0,
"value_type": "individual"
},
"type": "graph",
"xaxis": {
"buckets": null,
"mode": "time",
"name": null,
"show": true,
"values": []
},
"yaxes": [
{
"format": "short",
"label": null,
"logBase": 1,
"max": null,
"min": null,
"show": true
},
{
"format": "short",
"label": null,
"logBase": 1,
"max": null,
"min": null,
"show": true
}
],
"yaxis": {
"align": false,
"alignLevel": null
}
}
],
"refresh": false,
"revision": 8,
"schemaVersion": 25,
"style": "dark",
"tags": ["gdev", "panel-tests", "graph", "table"],
"templating": {
"list": []
},
"time": {
"from": "now-1h",
"to": "now"
},
"timepicker": {
"refresh_intervals": ["10s", "30s", "1m", "5m", "15m", "30m", "1h", "2h", "1d"],
"time_options": ["5m", "15m", "1h", "6h", "12h", "24h", "2d", "7d", "30d"]
},
"timezone": "utc",
"title": "Panel Tests - Time zone support",
"uid": "5SdHCasdf",
"version": 1
}
e2e/suite1/specs/dashboard-time-zone.spec.ts 0 → 100644
import { e2e } from '@grafana/e2e';
e2e.scenario({
describeName: 'Dashboard time zone support',
itName: 'Tests dashboard time zone scenarios',
addScenarioDataSource: false,
addScenarioDashBoard: false,
skipScenario: false,
scenario: () => {
e2e.flows.openDashboard('5SdHCasdf');
const fromTimeZone = 'UTC';
const toTimeZone = 'America/Chicago';
const offset = -5;
const panelsToCheck = [
'Random walk series',
'Millisecond res x-axis and tooltip',
'2 yaxis and axis labels',
'Stacking value ontop of nulls',
'Null between points',
'Legend Table No Scroll Visible',
];
const timesInUtc: Record<string, string> = {};
for (const title of panelsToCheck) {
e2e.components.Panels.Panel.containerByTitle(title)
.should('be.visible')
.within(() =>
e2e.components.Panels.Visualization.Graph.xAxis
.labels()
.should('be.visible')
.last()
.should(element => {
timesInUtc[title] = element.text();
})
);
}
e2e.pages.Dashboard.Toolbar.toolbarItems('Dashboard settings').click();
e2e.components.TimeZonePicker.container()
.should('be.visible')
.within(() => {
e2e.components.Select.singleValue()
.should('be.visible')
.should('have.text', fromTimeZone);
e2e.components.Select.input()
.should('be.visible')
.click();
e2e.components.Select.option()
.should('be.visible')
.contains(toTimeZone)
.click();
});
e2e.components.BackButton.backArrow().click();
for (const title of panelsToCheck) {
e2e.components.Panels.Panel.containerByTitle(title)
.should('be.visible')
.within(() =>
e2e.components.Panels.Visualization.Graph.xAxis
.labels()
.should('be.visible')
.last()
.should(element => {
const utc = timesInUtc[title];
const tz = element.text();
const isCorrect = isTimeCorrect(utc, tz, offset);
assert.isTrue(isCorrect, `Panel with title: "${title}"`);
})
);
}
},
});
const isTimeCorrect = (utc: string, tz: string, offset: number): boolean => {
const minutes = 1000 * 60;
const a = Cypress.moment(utc, 'HH:mm')
.set('seconds', 0)
.set('milliseconds', 0);
const b = Cypress.moment(tz, 'HH:mm')
.set('seconds', 0)
.set('milliseconds', 0)
.add('hours', offset);
return a.diff(b, 'minutes') <= 6 * minutes;
};
packages/grafana-e2e-selectors/src/selectors/components.ts
...@@ -18,6 +18,7 @@ export const Components = { ...@@ -18,6 +18,7 @@ export const Components = {
Panel: { Panel: {
title: (title: string) => `Panel header title item ${title}`, title: (title: string) => `Panel header title item ${title}`,
headerItems: (item: string) => `Panel header item ${item}`, headerItems: (item: string) => `Panel header item ${item}`,
containerByTitle: (title: string) => `Panel container title ${title}`,
}, },
Visualization: { Visualization: {
Graph: { Graph: {
...@@ -28,6 +29,9 @@ export const Components = { ...@@ -28,6 +29,9 @@ export const Components = {
legendItemAlias: (name: string) => `gpl alias ${name}`, legendItemAlias: (name: string) => `gpl alias ${name}`,
showLegendSwitch: 'gpl show legend', showLegendSwitch: 'gpl show legend',
}, },
xAxis: {
labels: () => 'div.flot-x-axis > div.flot-tick-label',
},
}, },
}, },
}, },
...@@ -109,6 +113,7 @@ export const Components = { ...@@ -109,6 +113,7 @@ export const Components = {
Select: { Select: {
option: 'Select option', option: 'Select option',
input: () => 'input[id*="react-select-"]', input: () => 'input[id*="react-select-"]',
singleValue: () => 'div[class*="-singleValue"]',
}, },
FieldConfigEditor: { FieldConfigEditor: {
content: 'Field config editor content', content: 'Field config editor content',
...@@ -119,4 +124,7 @@ export const Components = { ...@@ -119,4 +124,7 @@ export const Components = {
FolderPicker: { FolderPicker: {
container: 'Folder picker select container', container: 'Folder picker select container',
}, },
TimeZonePicker: {
container: 'Time zone picker select container',
},
}; };
public/app/core/components/SharedPreferences/SharedPreferences.tsx
...@@ -6,6 +6,7 @@ const { Select } = LegacyForms; ...@@ -6,6 +6,7 @@ const { Select } = LegacyForms;
import { DashboardSearchHit, DashboardSearchItemType } from 'app/features/search/types'; import { DashboardSearchHit, DashboardSearchItemType } from 'app/features/search/types';
import { backendSrv } from 'app/core/services/backend_srv'; import { backendSrv } from 'app/core/services/backend_srv';
import { getTimeZoneGroups, SelectableValue } from '@grafana/data'; import { getTimeZoneGroups, SelectableValue } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
export interface Props { export interface Props {
resourceUri: string; resourceUri: string;
...@@ -156,7 +157,7 @@ export class SharedPreferences extends PureComponent<Props, State> { ...@@ -156,7 +157,7 @@ export class SharedPreferences extends PureComponent<Props, State> {
width={20} width={20}
/> />
</div> </div>
<div className="gf-form"> <div className="gf-form" aria-label={selectors.components.TimeZonePicker.container}>
<label className="gf-form-label width-11">Timezone</label> <label className="gf-form-label width-11">Timezone</label>
<Select <Select
isSearchable={true} isSearchable={true}
......
public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx
...@@ -5,6 +5,7 @@ import { getTimeZoneGroups, TimeZone, rangeUtil, SelectableValue } from '@grafan ...@@ -5,6 +5,7 @@ import { getTimeZoneGroups, TimeZone, rangeUtil, SelectableValue } from '@grafan
import { config } from '@grafana/runtime'; import { config } from '@grafana/runtime';
import kbn from 'app/core/utils/kbn'; import kbn from 'app/core/utils/kbn';
import isEmpty from 'lodash/isEmpty'; import isEmpty from 'lodash/isEmpty';
import { selectors } from '@grafana/e2e-selectors';
const grafanaTimeZones = [ const grafanaTimeZones = [
{ value: '', label: 'Default' }, { value: '', label: 'Default' },
...@@ -112,7 +113,7 @@ export class TimePickerSettings extends PureComponent<Props, State> { ...@@ -112,7 +113,7 @@ export class TimePickerSettings extends PureComponent<Props, State> {
<div className="editor-row"> <div className="editor-row">
<h5 className="section-heading">Time Options</h5> <h5 className="section-heading">Time Options</h5>
<div className="gf-form-group"> <div className="gf-form-group">
<div className="gf-form"> <div className="gf-form" aria-label={selectors.components.TimeZonePicker.container}>
<label className="gf-form-label width-7">Timezone</label> <label className="gf-form-label width-7">Timezone</label>
<Select isSearchable={true} value={value} onChange={this.onTimeZoneChange} options={timeZones} width={40} /> <Select isSearchable={true} value={value} onChange={this.onTimeZoneChange} options={timeZones} width={40} />
</div> </div>
......
public/app/features/dashboard/dashgrid/PanelChrome.tsx
...@@ -26,6 +26,7 @@ import { ...@@ -26,6 +26,7 @@ import {
PanelPlugin, PanelPlugin,
FieldConfigSource, FieldConfigSource,
} from '@grafana/data'; } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
const DEFAULT_PLUGIN_ERROR = 'Error in plugin'; const DEFAULT_PLUGIN_ERROR = 'Error in plugin';
...@@ -329,7 +330,7 @@ export class PanelChrome extends PureComponent<Props, State> { ...@@ -329,7 +330,7 @@ export class PanelChrome extends PureComponent<Props, State> {
}); });
return ( return (
<div className={containerClassNames}> <div className={containerClassNames} aria-label={selectors.components.Panels.Panel.containerByTitle(panel.title)}>
<PanelHeader <PanelHeader
panel={panel} panel={panel}
dashboard={dashboard} dashboard={dashboard}
......
public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx
...@@ -16,6 +16,7 @@ import { StoreState } from 'app/types'; ...@@ -16,6 +16,7 @@ import { StoreState } from 'app/types';
import { DefaultTimeRange, LoadingState, PanelData, PanelEvents, PanelPlugin } from '@grafana/data'; import { DefaultTimeRange, LoadingState, PanelData, PanelEvents, PanelPlugin } from '@grafana/data';
import { updateLocation } from 'app/core/actions'; import { updateLocation } from 'app/core/actions';
import { PANEL_BORDER } from 'app/core/constants'; import { PANEL_BORDER } from 'app/core/constants';
import { selectors } from '@grafana/e2e-selectors';
interface OwnProps { interface OwnProps {
panel: PanelModel; panel: PanelModel;
...@@ -238,7 +239,7 @@ export class PanelChromeAngularUnconnected extends PureComponent<Props, State> { ...@@ -238,7 +239,7 @@ export class PanelChromeAngularUnconnected extends PureComponent<Props, State> {
}); });
return ( return (
<div className={containerClassNames}> <div className={containerClassNames} aria-label={selectors.components.Panels.Panel.containerByTitle(panel.title)}>
<PanelHeader <PanelHeader
panel={panel} panel={panel}
dashboard={dashboard} dashboard={dashboard}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment