Skip to content

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

Fix: reverted back to `import * as module` instead of using namespaces (#23069) 

* Removed namespace declaration to prevent issues with external plugins.

* fixed imports and tests.
parent c4693378
Showing with 87 additions and 98 deletions
packages/grafana-data/src/datetime/datemath.test.ts
import sinon, { SinonFakeTimers } from 'sinon';
import each from 'lodash/each';
import { dateMath } from './datemath';
import * as dateMath from './datemath';
import { dateTime, DurationUnit, DateTime } from './moment_wrapper';
describe('DateMath', () => {
......
packages/grafana-data/src/datetime/datemath.ts
......@@ -5,9 +5,7 @@ import { TimeZone } from '../types/index';
const units: DurationUnit[] = ['y', 'M', 'w', 'd', 'h', 'm', 's'];
// eslint-disable-next-line @typescript-eslint/no-namespace
export namespace dateMath {
export function isMathString(text: string | DateTime | Date): boolean {
export function isMathString(text: string | DateTime | Date): boolean {
if (!text) {
return false;
}
......@@ -17,20 +15,20 @@ export namespace dateMath {
} else {
return false;
}
}
}
/**
/**
* Parses different types input to a moment instance. There is a specific formatting language that can be used
* if text arg is string. See unit tests for examples.
* @param text
* @param roundUp See parseDateMath function.
* @param timezone Only string 'utc' is acceptable here, for anything else, local timezone is used.
*/
export function parse(
export function parse(
text?: string | DateTime | Date | null,
roundUp?: boolean,
timezone?: TimeZone
): DateTime | undefined {
): DateTime | undefined {
if (!text) {
return undefined;
}
......@@ -72,14 +70,14 @@ export namespace dateMath {
return parseDateMath(mathString, time, roundUp);
}
}
}
/**
/**
* Checks if text is a valid date which in this context means that it is either a Moment instance or it can be parsed
* by parse function. See parse function to see what is considered acceptable.
* @param text
*/
export function isValid(text: string | DateTime): boolean {
export function isValid(text: string | DateTime): boolean {
const date = parse(text);
if (!date) {
return false;
......@@ -90,16 +88,16 @@ export namespace dateMath {
}
return false;
}
}
/**
/**
* Parses math part of the time string and shifts supplied time according to that math. See unit tests for examples.
* @param mathString
* @param time
* @param roundUp If true it will round the time to endOf time unit, otherwise to startOf time unit.
*/
// TODO: Had to revert Andrejs `time: moment.Moment` to `time: any`
export function parseDateMath(mathString: string, time: any, roundUp?: boolean): DateTime | undefined {
// TODO: Had to revert Andrejs `time: moment.Moment` to `time: any`
export function parseDateMath(mathString: string, time: any, roundUp?: boolean): DateTime | undefined {
const strippedMathString = mathString.replace(/\s/g, '');
const dateTime = time;
let i = 0;
......@@ -161,5 +159,4 @@ export namespace dateMath {
}
}
return dateTime;
}
}
packages/grafana-data/src/datetime/index.ts
// Names are too general to export globally
export { dateMath } from './datemath';
export { rangeUtil } from './rangeutil';
import * as dateMath from './datemath';
import * as rangeUtil from './rangeutil';
export * from './moment_wrapper';
export * from './timezones';
export * from './formats';
export { dateMath, rangeUtil };
packages/grafana-data/src/datetime/rangeutil.ts
......@@ -3,12 +3,10 @@ import groupBy from 'lodash/groupBy';
import { RawTimeRange } from '../types/time';
import { dateMath } from './datemath';
import * as dateMath from './datemath';
import { isDateTime, DateTime } from './moment_wrapper';
// eslint-disable-next-line @typescript-eslint/no-namespace
export namespace rangeUtil {
const spans: { [key: string]: { display: string; section?: number } } = {
const spans: { [key: string]: { display: string; section?: number } } = {
s: { display: 'second' },
m: { display: 'minute' },
h: { display: 'hour' },
......@@ -16,9 +14,9 @@ export namespace rangeUtil {
w: { display: 'week' },
M: { display: 'month' },
y: { display: 'year' },
};
};
const rangeOptions = [
const rangeOptions = [
{ from: 'now/d', to: 'now/d', display: 'Today', section: 2 },
{ from: 'now/d', to: 'now', display: 'Today so far', section: 2 },
{ from: 'now/w', to: 'now/w', display: 'This week', section: 2 },
......@@ -61,16 +59,16 @@ export namespace rangeUtil {
{ from: 'now-1y', to: 'now', display: 'Last 1 year', section: 0 },
{ from: 'now-2y', to: 'now', display: 'Last 2 years', section: 0 },
{ from: 'now-5y', to: 'now', display: 'Last 5 years', section: 0 },
];
];
const absoluteFormat = 'YYYY-MM-DD HH:mm:ss';
const absoluteFormat = 'YYYY-MM-DD HH:mm:ss';
const rangeIndex: any = {};
each(rangeOptions, (frame: any) => {
const rangeIndex: any = {};
each(rangeOptions, (frame: any) => {
rangeIndex[frame.from + ' to ' + frame.to] = frame;
});
});
export function getRelativeTimesList(timepickerSettings: any, currentDisplay: any) {
export function getRelativeTimesList(timepickerSettings: any, currentDisplay: any) {
const groups = groupBy(rangeOptions, (option: any) => {
option.active = option.display === currentDisplay;
return option.section;
......@@ -84,19 +82,19 @@ export namespace rangeUtil {
// });
return groups;
}
}
function formatDate(date: DateTime) {
function formatDate(date: DateTime) {
return date.format(absoluteFormat);
}
}
// handles expressions like
// 5m
// 5m to now/d
// now/d to now
// now/d
// if no to <expr> then to now is assumed
export function describeTextRange(expr: any) {
// handles expressions like
// 5m
// 5m to now/d
// now/d to now
// now/d
// if no to <expr> then to now is assumed
export function describeTextRange(expr: any) {
const isLast = expr.indexOf('+') !== 0;
if (expr.indexOf('now') === -1) {
expr = (isLast ? 'now-' : 'now') + expr;
......@@ -132,9 +130,9 @@ export namespace rangeUtil {
}
return opt;
}
}
/**
/**
* Use this function to get a properly formatted string representation of a {@link @grafana/data:RawTimeRange | range}.
*
* @example
......@@ -146,7 +144,7 @@ export namespace rangeUtil {
* @param range - a time range (usually specified by the TimePicker)
* @alpha
*/
export function describeTimeRange(range: RawTimeRange): string {
export function describeTimeRange(range: RawTimeRange): string {
const option = rangeIndex[range.from.toString() + ' to ' + range.to.toString()];
if (option) {
return option.display;
......@@ -172,14 +170,13 @@ export namespace rangeUtil {
}
return range.from.toString() + ' to ' + range.to.toString();
}
}
export const isValidTimeSpan = (value: string) => {
export const isValidTimeSpan = (value: string) => {
if (value.indexOf('$') === 0 || value.indexOf('+$') === 0) {
return true;
}
const info = describeTextRange(value);
return info.invalid !== true;
};
}
};
packages/grafana-data/src/types/appEvents.ts
......@@ -5,11 +5,8 @@ export interface AppEvent<T> {
payload?: T;
}
// eslint-disable-next-line @typescript-eslint/no-namespace
export namespace AppEvents {
export type AlertPayload = [string, string?];
export type AlertPayload = [string, string?];
export const alertSuccess = eventFactory<AlertPayload>('alert-success');
export const alertWarning = eventFactory<AlertPayload>('alert-warning');
export const alertError = eventFactory<AlertPayload>('alert-error');
}
export const alertSuccess = eventFactory<AlertPayload>('alert-success');
export const alertWarning = eventFactory<AlertPayload>('alert-warning');
export const alertError = eventFactory<AlertPayload>('alert-error');
packages/grafana-data/src/types/index.ts
......@@ -24,5 +24,9 @@ export * from './theme';
export * from './orgs';
export * from './flot';
export { AppEvent, AppEvents } from './appEvents';
export { PanelEvents } from './panelEvents';
import * as AppEvents from './appEvents';
import { AppEvent } from './appEvents';
export { AppEvent, AppEvents };
import * as PanelEvents from './panelEvents';
export { PanelEvents };
packages/grafana-data/src/types/panelEvents.ts
......@@ -2,28 +2,25 @@ import { eventFactory } from './utils';
import { DataQueryError, DataQueryResponseData } from './datasource';
import { AngularPanelMenuItem } from './panel';
// eslint-disable-next-line @typescript-eslint/no-namespace
export namespace PanelEvents {
/** Payloads */
export interface PanelChangeViewPayload {
/** Payloads */
export interface PanelChangeViewPayload {
fullscreen?: boolean;
edit?: boolean;
panelId?: number;
toggle?: boolean;
}
/** Events */
export const refresh = eventFactory('refresh');
export const componentDidMount = eventFactory('component-did-mount');
export const dataError = eventFactory<DataQueryError>('data-error');
export const dataReceived = eventFactory<DataQueryResponseData[]>('data-received');
export const dataSnapshotLoad = eventFactory<DataQueryResponseData[]>('data-snapshot-load');
export const editModeInitialized = eventFactory('init-edit-mode');
export const initPanelActions = eventFactory<AngularPanelMenuItem[]>('init-panel-actions');
export const panelChangeView = eventFactory<PanelChangeViewPayload>('panel-change-view');
export const panelInitialized = eventFactory('panel-initialized');
export const panelSizeChanged = eventFactory('panel-size-changed');
export const panelTeardown = eventFactory('panel-teardown');
export const render = eventFactory<any>('render');
export const viewModeChanged = eventFactory('view-mode-changed');
}
/** Events */
export const refresh = eventFactory('refresh');
export const componentDidMount = eventFactory('component-did-mount');
export const dataError = eventFactory<DataQueryError>('data-error');
export const dataReceived = eventFactory<DataQueryResponseData[]>('data-received');
export const dataSnapshotLoad = eventFactory<DataQueryResponseData[]>('data-snapshot-load');
export const editModeInitialized = eventFactory('init-edit-mode');
export const initPanelActions = eventFactory<AngularPanelMenuItem[]>('init-panel-actions');
export const panelChangeView = eventFactory<PanelChangeViewPayload>('panel-change-view');
export const panelInitialized = eventFactory('panel-initialized');
export const panelSizeChanged = eventFactory('panel-size-changed');
export const panelTeardown = eventFactory('panel-teardown');
export const render = eventFactory<any>('render');
export const viewModeChanged = eventFactory('view-mode-changed');
packages/grafana-ui/src/components/ValueMappingsEditor/MappingRow.tsx
......@@ -2,7 +2,7 @@ import React, { ChangeEvent } from 'react';
import { HorizontalGroup } from '../Layout/Layout';
import Forms from '../Forms';
import { MappingType, RangeMap, ValueMap, ValueMapping } from '@grafana/data';
import { styleMixins } from '../../themes/mixins';
import * as styleMixins from '../../themes/mixins';
import { useTheme } from '../../themes';
import { FieldConfigItemHeaderTitle } from '../FieldConfigs/FieldConfigItemHeaderTitle';
......
packages/grafana-ui/src/themes/index.ts
......@@ -3,4 +3,6 @@ import { getTheme, mockTheme } from './getTheme';
import { selectThemeVariant } from './selectThemeVariant';
export { stylesFactory } from './stylesFactory';
export { ThemeContext, withTheme, mockTheme, getTheme, selectThemeVariant, useTheme, mockThemeContext };
export { styleMixins } from './mixins';
import * as styleMixins from './mixins';
export { styleMixins };
packages/grafana-ui/src/themes/mixins.ts
......@@ -3,9 +3,7 @@ import { selectThemeVariant } from './selectThemeVariant';
import { css } from 'emotion';
import { stylesFactory } from './stylesFactory';
// eslint-disable-next-line @typescript-eslint/no-namespace
export namespace styleMixins {
export function cardChrome(theme: GrafanaTheme): string {
export function cardChrome(theme: GrafanaTheme): string {
if (theme.isDark) {
return `
background: linear-gradient(135deg, ${theme.colors.dark8}, ${theme.colors.dark6});
......@@ -25,9 +23,9 @@ export namespace styleMixins {
box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1);
border-radius: ${theme.border.radius.md};
`;
}
}
export function listItem(theme: GrafanaTheme): string {
export function listItem(theme: GrafanaTheme): string {
if (theme.isDark) {
return `
background: ${theme.colors.dark7};
......@@ -47,9 +45,9 @@ export namespace styleMixins {
box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1);
border-radius: ${theme.border.radius.md};
`;
}
}
export const panelEditorNestedListStyles = stylesFactory((theme: GrafanaTheme) => {
export const panelEditorNestedListStyles = stylesFactory((theme: GrafanaTheme) => {
const borderColor = selectThemeVariant(
{
light: theme.colors.gray85,
......@@ -97,5 +95,4 @@ export namespace styleMixins {
padding: ${theme.spacing.xs} ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.sm};
`,
};
});
}
});
packages/grafana-ui/src/utils/dom.ts
// eslint-disable-next-line @typescript-eslint/no-namespace
export namespace DOMUtil {
// Node.closest() polyfill
if ('Element' in window && !Element.prototype.closest) {
// Node.closest() polyfill
if ('Element' in window && !Element.prototype.closest) {
Element.prototype.closest = function(this: any, s: string) {
const matches = (this.document || this.ownerDocument).querySelectorAll(s);
let el = this;
......@@ -15,9 +13,9 @@ export namespace DOMUtil {
} while (i < 0 && el);
return el;
};
}
}
export function getPreviousCousin(node: any, selector: string) {
export function getPreviousCousin(node: any, selector: string) {
let sibling = node.parentElement.previousSibling;
let el;
while (sibling) {
......@@ -28,9 +26,9 @@ export namespace DOMUtil {
sibling = sibling.previousSibling;
}
return undefined;
}
}
export function getNextCharacter(global?: any) {
export function getNextCharacter(global?: any) {
const selection = (global || window).getSelection();
if (!selection || !selection.anchorNode) {
return null;
......@@ -40,5 +38,4 @@ export namespace DOMUtil {
const text = selection.anchorNode.textContent;
const offset = range.startOffset;
return text!.substr(offset, 1);
}
}
packages/grafana-ui/src/utils/index.ts
......@@ -6,5 +6,5 @@ export * from './tags';
export * from './measureText';
export { default as ansicolor } from './ansicolor';
// Export with a namespace
export { DOMUtil } from './dom'; // includes Element.closest polyfil
import * as DOMUtil from './dom'; // includes Element.closest polyfil
export { DOMUtil };
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