apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

Browse Source
pull/24505/head
Marcus Andersson 5 years ago committed by GitHub
parent e341d4b26f
commit a521a39ebf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 805 additions and 4 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 695
      devenv/dev-dashboards/scenarios/time_zone_support.json
  2. 94
      e2e/suite1/specs/dashboard-time-zone.spec.ts
  3. 8
      packages/grafana-e2e-selectors/src/selectors/components.ts
  4. 3
      public/app/core/components/SharedPreferences/SharedPreferences.tsx
  5. 3
      public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx
  6. 3
      public/app/features/dashboard/dashgrid/PanelChrome.tsx
  7. 3
      public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx

695
devenv/dev-dashboards/scenarios/time_zone_support.json vendored
Unescape View File

@ -0,0 +1,695 @@
{
"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
}

94
e2e/suite1/specs/dashboard-time-zone.spec.ts
Unescape View File

@ -0,0 +1,94 @@
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;
};

8
packages/grafana-e2e-selectors/src/selectors/components.ts
Unescape View File

@ -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 = {
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 = {
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 = {
FolderPicker: { FolderPicker: {
container: 'Folder picker select container', container: 'Folder picker select container',
}, },
TimeZonePicker: {
container: 'Time zone picker select container',
},
}; };

3
public/app/core/components/SharedPreferences/SharedPreferences.tsx
Unescape View File

@ -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> {
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}

3
public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx
Unescape View File

@ -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> {
<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>

3
public/app/features/dashboard/dashgrid/PanelChrome.tsx
Unescape View File

@ -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> {
}); });
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}

3
public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx
Unescape View File

@ -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> {
}); });
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}

Write Preview
Loading…
Cancel
Save