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

Make clear that variable scss files are generated from templates

Browse Source
This commit is contained in:
Dominik Prokop 2019-02-18 11:03:52 +01:00
parent 28f42bab5b
commit 6da57d4c08
13 changed files with 90 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
View File

@ -1,9 +1,11 @@
/* tslint:disable:max-line-length */ /* tslint:disable:max-line-length */
import { GrafanaTheme } from '../types'; import { GrafanaTheme } from '../types';
import { renderGeneratedFileBanner } from '../utils/generatedFileBanner';
export const darkThemeVarsTemplate = (theme: GrafanaTheme) => export const darkThemeVarsTemplate = (theme: GrafanaTheme) =>
`// Global values `${renderGeneratedFileBanner('grafana-ui/src/themes/dark.ts', 'grafana-ui/src/themes/_variables.dark.scss.tmpl.ts')}
// Global values
// -------------------------------------------------- // --------------------------------------------------
$theme-name: dark; $theme-name: dark;

4
packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
View File

@ -1,9 +1,11 @@
/* tslint:disable:max-line-length */ /* tslint:disable:max-line-length */
import { GrafanaTheme } from '../types'; import { GrafanaTheme } from '../types';
import { renderGeneratedFileBanner } from '../utils/generatedFileBanner';
export const lightThemeVarsTemplate = (theme: GrafanaTheme) => export const lightThemeVarsTemplate = (theme: GrafanaTheme) =>
`// Global values `${renderGeneratedFileBanner('grafana-ui/src/themes/light.ts', 'grafana-ui/src/themes/_variable.light.scss.tmpl.ts')}
// Global values
// -------------------------------------------------- // --------------------------------------------------
$theme-name: light; $theme-name: light;

4
packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
View File

@ -1,9 +1,11 @@
/* tslint:disable:max-line-length */ /* tslint:disable:max-line-length */
import { GrafanaThemeCommons } from '../types'; import { GrafanaThemeCommons } from '../types';
import { renderGeneratedFileBanner } from '../utils/generatedFileBanner';
export const commonThemeVarsTemplate = (theme: GrafanaThemeCommons) => export const commonThemeVarsTemplate = (theme: GrafanaThemeCommons) =>
`// Options `${renderGeneratedFileBanner('grafana-ui/src/themes/default.ts', 'grafana-ui/src/themes/_variables.scss.tmpl.ts')}
// Options
// //
// Quickly modify global styling by enabling or disabling optional features. // Quickly modify global styling by enabling or disabling optional features.

10
packages/grafana-ui/src/utils/generatedFileBanner.ts Normal file
View File

@ -0,0 +1,10 @@
export const renderGeneratedFileBanner = (themeFile: string, templateFile: string) => `/***
* !!! THIS FILE WAS GENERATED AUTOMATICALLY !!!
*
* Do not modify this file!
* - Edit ${themeFile} to regenerate
* - Edit ${templateFile} to update template
*
* !!! THIS FILE WAS GENERATED AUTOMATICALLY !!!
*/
`;

60
public/app/features/dashboard/containers/DashboardPage.test.tsx
View File

@ -3,10 +3,10 @@ import { shallow, ShallowWrapper } from 'enzyme';
import { DashboardPage, Props, State } from './DashboardPage'; import { DashboardPage, Props, State } from './DashboardPage';
import { DashboardModel } from '../state'; import { DashboardModel } from '../state';
import { cleanUpDashboard } from '../state/actions'; import { cleanUpDashboard } from '../state/actions';
import { getNoPayloadActionCreatorMock, NoPayloadActionCreatorMock } from 'app/core/redux'; import { getNoPayloadActionCreatorMock, NoPayloadActionCreatorMock } from 'app/core/redux';
import { DashboardRouteInfo, DashboardInitPhase } from 'app/types'; import { DashboardRouteInfo, DashboardInitPhase } from 'app/types';
jest.mock('sass/_variables.scss', () => ({ jest.mock('sass/_variables.generated.scss', () => ({
panelhorizontalpadding: 10, panelhorizontalpadding: 10,
panelVerticalPadding: 10, panelVerticalPadding: 10,
})); }));
@ -23,17 +23,20 @@ interface ScenarioContext {
} }
function getTestDashboard(overrides?: any, metaOverrides?: any): DashboardModel { function getTestDashboard(overrides?: any, metaOverrides?: any): DashboardModel {
const data = Object.assign({ const data = Object.assign(
title: 'My dashboard', {
panels: [ title: 'My dashboard',
{ panels: [
id: 1, {
type: 'graph', id: 1,
title: 'My graph', type: 'graph',
gridPos: { x: 0, y: 0, w: 1, h: 1 }, title: 'My graph',
}, gridPos: { x: 0, y: 0, w: 1, h: 1 },
], },
}, overrides); ],
},
overrides
);
const meta = Object.assign({ canSave: true, canEdit: true }, metaOverrides); const meta = Object.assign({ canSave: true, canEdit: true }, metaOverrides);
return new DashboardModel(data, meta); return new DashboardModel(data, meta);
@ -74,7 +77,7 @@ function dashboardPageScenario(description, scenarioFn: (ctx: ScenarioContext) =
ctx.dashboard = props.dashboard; ctx.dashboard = props.dashboard;
ctx.wrapper = shallow(<DashboardPage {...props} />); ctx.wrapper = shallow(<DashboardPage {...props} />);
} },
}; };
beforeEach(() => { beforeEach(() => {
@ -86,8 +89,7 @@ function dashboardPageScenario(description, scenarioFn: (ctx: ScenarioContext) =
} }
describe('DashboardPage', () => { describe('DashboardPage', () => {
dashboardPageScenario('Given initial state', ctx => {
dashboardPageScenario("Given initial state", (ctx) => {
ctx.setup(() => { ctx.setup(() => {
ctx.mount(); ctx.mount();
}); });
@ -97,7 +99,7 @@ describe('DashboardPage', () => {
}); });
}); });
dashboardPageScenario("Dashboard is fetching slowly", (ctx) => { dashboardPageScenario('Dashboard is fetching slowly', ctx => {
ctx.setup(() => { ctx.setup(() => {
ctx.mount(); ctx.mount();
ctx.wrapper.setProps({ ctx.wrapper.setProps({
@ -111,7 +113,7 @@ describe('DashboardPage', () => {
}); });
}); });
dashboardPageScenario("Dashboard init completed ", (ctx) => { dashboardPageScenario('Dashboard init completed ', ctx => {
ctx.setup(() => { ctx.setup(() => {
ctx.mount(); ctx.mount();
ctx.setDashboardProp(); ctx.setDashboardProp();
@ -126,7 +128,7 @@ describe('DashboardPage', () => {
}); });
}); });
dashboardPageScenario("When user goes into panel edit", (ctx) => { dashboardPageScenario('When user goes into panel edit', ctx => {
ctx.setup(() => { ctx.setup(() => {
ctx.mount(); ctx.mount();
ctx.setDashboardProp(); ctx.setDashboardProp();
@ -149,7 +151,7 @@ describe('DashboardPage', () => {
}); });
}); });
dashboardPageScenario("When user goes back to dashboard from panel edit", (ctx) => { dashboardPageScenario('When user goes back to dashboard from panel edit', ctx => {
ctx.setup(() => { ctx.setup(() => {
ctx.mount(); ctx.mount();
ctx.setDashboardProp(); ctx.setDashboardProp();
@ -179,7 +181,7 @@ describe('DashboardPage', () => {
}); });
}); });
dashboardPageScenario("When dashboard has editview url state", (ctx) => { dashboardPageScenario('When dashboard has editview url state', ctx => {
ctx.setup(() => { ctx.setup(() => {
ctx.mount(); ctx.mount();
ctx.setDashboardProp(); ctx.setDashboardProp();
@ -197,7 +199,7 @@ describe('DashboardPage', () => {
}); });
}); });
dashboardPageScenario("When adding panel", (ctx) => { dashboardPageScenario('When adding panel', ctx => {
ctx.setup(() => { ctx.setup(() => {
ctx.mount(); ctx.mount();
ctx.setDashboardProp(); ctx.setDashboardProp();
@ -214,37 +216,37 @@ describe('DashboardPage', () => {
}); });
}); });
dashboardPageScenario("Given panel with id 0", (ctx) => { dashboardPageScenario('Given panel with id 0', ctx => {
ctx.setup(() => { ctx.setup(() => {
ctx.mount(); ctx.mount();
ctx.setDashboardProp({ ctx.setDashboardProp({
panels: [{ id: 0, type: 'graph'}], panels: [{ id: 0, type: 'graph' }],
schemaVersion: 17, schemaVersion: 17,
}); });
ctx.wrapper.setProps({ ctx.wrapper.setProps({
urlEdit: true, urlEdit: true,
urlFullscreen: true, urlFullscreen: true,
urlPanelId: '0' urlPanelId: '0',
}); });
}); });
it('Should go into edit mode' , () => { it('Should go into edit mode', () => {
expect(ctx.wrapper.state().isEditing).toBe(true); expect(ctx.wrapper.state().isEditing).toBe(true);
expect(ctx.wrapper.state().fullscreenPanel.id).toBe(0); expect(ctx.wrapper.state().fullscreenPanel.id).toBe(0);
}); });
}); });
dashboardPageScenario("When dashboard unmounts", (ctx) => { dashboardPageScenario('When dashboard unmounts', ctx => {
ctx.setup(() => { ctx.setup(() => {
ctx.mount(); ctx.mount();
ctx.setDashboardProp({ ctx.setDashboardProp({
panels: [{ id: 0, type: 'graph'}], panels: [{ id: 0, type: 'graph' }],
schemaVersion: 17, schemaVersion: 17,
}); });
ctx.wrapper.unmount(); ctx.wrapper.unmount();
}); });
it('Should call clean up action' , () => { it('Should call clean up action', () => {
expect(ctx.cleanUpDashboardMock.calls).toBe(1); expect(ctx.cleanUpDashboardMock.calls).toBe(1);
}); });
}); });

2
public/app/features/dashboard/dashgrid/PanelChrome.tsx
View File

@ -19,7 +19,7 @@ import { DashboardModel, PanelModel } from '../state';
import { PanelPlugin } from 'app/types'; import { PanelPlugin } from 'app/types';
import { TimeRange, LoadingState } from '@grafana/ui'; import { TimeRange, LoadingState } from '@grafana/ui';
import variables from 'sass/_variables.scss'; import variables from 'sass/_variables.generated.scss';
import templateSrv from 'app/features/templating/template_srv'; import templateSrv from 'app/features/templating/template_srv';
import { DataQueryResponse } from '@grafana/ui/src'; import { DataQueryResponse } from '@grafana/ui/src';

10
public/sass/_variables.dark.scss → public/sass/_variables.dark.generated.scss
View File

@ -1,3 +1,13 @@
/***
* !!! THIS FILE WAS GENERATED AUTOMATICALLY !!!
*
* Do not modify it!
* - Edit grafana-ui/src/themes/dark.ts to regenerate
* - Edit grafana-ui/src/themes/_variables.dark.scss.tmpl.ts to update template
*
* !!! THIS FILE WAS GENERATED AUTOMATICALLY !!!
*/
// Global values // Global values
// -------------------------------------------------- // --------------------------------------------------

10
public/sass/_variables.scss → public/sass/_variables.generated.scss
View File

@ -1,3 +1,13 @@
/***
* !!! THIS FILE WAS GENERATED AUTOMATICALLY !!!
*
* Do not modify it!
* - Edit grafana-ui/src/themes/default.ts to regenerate
* - Edit grafana-ui/src/themes/_variables.scss.tmpl.ts to update template
*
* !!! THIS FILE WAS GENERATED AUTOMATICALLY !!!
*/
// Options // Options
// //
// Quickly modify global styling by enabling or disabling optional features. // Quickly modify global styling by enabling or disabling optional features.

4
public/sass/_variables.scss.d.ts → public/sass/_variables.generated.scss.d.ts vendored
View File

@ -1,6 +1,6 @@
export interface GrafanaVariables { export interface GrafanaVariables {
'panelHorizontalPadding': number; panelHorizontalPadding: number;
'panelVerticalPadding': number; panelVerticalPadding: number;
} }
declare const variables: GrafanaVariables; declare const variables: GrafanaVariables;

10
public/sass/_variables.light.scss → public/sass/_variables.light.generated.scss
View File

@ -1,3 +1,13 @@
/***
* !!! THIS FILE WAS GENERATED AUTOMATICALLY !!!
*
* Do not modify it!
* - Edit grafana-ui/src/themes/light.ts to regenerate
* - Edit grafana-ui/src/themes/_variable.light.scss.tmpl.ts to update template
*
* !!! THIS FILE WAS GENERATED AUTOMATICALLY !!!
*/
// Global values // Global values
// -------------------------------------------------- // --------------------------------------------------

4
public/sass/grafana.dark.scss
View File

@ -1,3 +1,3 @@
@import 'variables'; @import 'variables.generated';
@import 'variables.dark'; @import 'variables.dark.generated';
@import 'grafana'; @import 'grafana';

4
public/sass/grafana.light.scss
View File

@ -1,3 +1,3 @@
@import 'variables'; @import 'variables.generated';
@import 'variables.light'; @import 'variables.light.generated';
@import 'grafana'; @import 'grafana';

6
scripts/cli/generateSassVariableFiles.ts
View File

@ -6,9 +6,9 @@ import { darkThemeVarsTemplate } from '@grafana/ui/src/themes/_variables.dark.sc
import { lightThemeVarsTemplate } from '@grafana/ui/src/themes/_variables.light.scss.tmpl'; import { lightThemeVarsTemplate } from '@grafana/ui/src/themes/_variables.light.scss.tmpl';
import { commonThemeVarsTemplate } from '@grafana/ui/src/themes/_variables.scss.tmpl'; import { commonThemeVarsTemplate } from '@grafana/ui/src/themes/_variables.scss.tmpl';
const darkThemeVariablesPath = __dirname + '/../../public/sass/_variables.dark.scss'; const darkThemeVariablesPath = __dirname + '/../../public/sass/_variables.dark.generated.scss';
const lightThemeVariablesPath = __dirname + '/../../public/sass/_variables.light.scss'; const lightThemeVariablesPath = __dirname + '/../../public/sass/_variables.light.generated.scss';
const defaultThemeVariablesPath = __dirname + '/../../public/sass/_variables.scss'; const defaultThemeVariablesPath = __dirname + '/../../public/sass/_variables.generated.scss';
const writeVariablesFile = async (path: string, data: string) => { const writeVariablesFile = async (path: string, data: string) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {