public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #15567 from grafana/cp-6.0-stable

Browse Source 
Cherry picks for 6.0 stable
This commit is contained in:
Leonard Gram
2019-02-25 15:47:26 +01:00
committed by GitHub
parent 19192fc0b5 0655a23091
commit 73d2dbaa3e
110 changed files with 1183 additions and 678 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+17 -6
View File
@@ -5,7 +5,7 @@
"company": "Grafana Labs"
},
"name": "grafana",
"version": "6.0.0-beta3",
"version": "6.0.0",
"repository": {
"type": "git",
"url": "http://github.com/grafana/grafana.git"
@@ -83,7 +83,7 @@
"postcss-browser-reporter": "^0.5.0",
"postcss-loader": "^2.0.6",
"postcss-reporter": "^5.0.0",
"prettier": "1.9.2",
"prettier": "1.16.4",
"react-hot-loader": "^4.3.6",
"react-test-renderer": "^16.5.0",
"redux-mock-store": "^1.5.3",
@@ -129,8 +129,14 @@
}
},
"lint-staged": {
"*.{ts,tsx,json,scss}": ["prettier --write", "git add"],
"*pkg/**/*.go": ["gofmt -w -s", "git add"]
"*.{ts,tsx,json,scss}": [
"prettier --write",
"git add"
],
"*pkg/**/*.go": [
"gofmt -w -s",
"git add"
]
},
"prettier": {
"trailingComma": "es5",
@@ -195,7 +201,12 @@
"**/@types/react": "16.7.6"
},
"workspaces": {
"packages": ["packages/*"],
"nohoist": ["**/@types/*", "**/@types/*/**"]
"packages": [
"packages/*"
],
"nohoist": [
"**/@types/*",
"**/@types/*/**"
]
}
}
packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import React, { Component, createRef } from 'react';
import PopperController from '../Tooltip/PopperController';
import Popper from '../Tooltip/Popper';
import { PopperController } from '../Tooltip/PopperController';
import { Popper } from '../Tooltip/Popper';
import { ColorPickerPopover } from './ColorPickerPopover';
import { Themeable } from '../../types';
import { getColorFromHexRgbOrName } from '../../utils/namedColorsPalette';
packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ import { getColorName, getColorFromHexRgbOrName } from '../../utils/namedColorsP
import { ColorPickerProps, warnAboutColorPickerPropsDeprecation } from './ColorPicker';
import { PopperContentProps } from '../Tooltip/PopperController';
import SpectrumPalette from './SpectrumPalette';
import { GrafanaThemeType } from '@grafana/ui';
import { GrafanaThemeType } from '../../types/theme';
export interface Props<T> extends ColorPickerProps, PopperContentProps {
customPickers?: T;
packages/grafana-ui/src/components/DeleteButton/DeleteButton.story.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import React, { FunctionComponent } from 'react';
import { storiesOf } from '@storybook/react';
import { DeleteButton } from '@grafana/ui';
import { DeleteButton } from './DeleteButton';
const CenteredStory: FunctionComponent<{}> = ({ children }) => {
return (
packages/grafana-ui/src/components/EmptySearchResult/_EmptySearchResult.scss
+8
View File
@@ -0,0 +1,8 @@
.empty-search-result {
border-left: 3px solid $info-box-border-color;
background-color: $empty-list-cta-bg;
padding: $spacer;
min-width: 350px;
border-radius: $border-radius;
margin-bottom: $spacer * 2;
}
packages/grafana-ui/src/components/Gauge/Gauge.tsx
+2 -2
View File
@@ -115,9 +115,9 @@ export class Gauge extends PureComponent<Props> {
getFontScale(length: number): number {
if (length > 12) {
return FONT_SCALE - length * 5 / 120;
return FONT_SCALE - (length * 5) / 110;
}
return FONT_SCALE - length * 5 / 105;
return FONT_SCALE - (length * 5) / 100;
}
draw() {
packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
+3 -2
View File
@@ -3,7 +3,8 @@ import { Threshold } from '../../types';
import { ColorPicker } from '..';
import { PanelOptionsGroup } from '..';
import { colors } from '../../utils';
import { getColorFromHexRgbOrName, ThemeContext } from '@grafana/ui';
import { ThemeContext } from '../../themes/ThemeContext';
import { getColorFromHexRgbOrName } from '../../utils/namedColorsPalette';
export interface Props {
thresholds: Threshold[];
@@ -54,7 +55,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
const value = afterThresholdValue - (afterThresholdValue - beforeThresholdValue) / 2;
// Set a color
const color = colors.filter(c => !newThresholds.some(t => t.color === c))[0];
const color = colors.filter(c => !newThresholds.some(t => t.color === c))[1];
this.setState(
{
packages/grafana-ui/src/components/Tooltip/Popper.tsx
+10 -10
View File
@@ -1,7 +1,7 @@
import React, { PureComponent } from 'react';
import * as PopperJS from 'popper.js';
import { Manager, Popper as ReactPopper, PopperArrowProps } from 'react-popper';
import { Portal } from '@grafana/ui';
import { Portal } from '../Portal/Portal';
import Transition from 'react-transition-group/Transition';
import { PopperContent } from './PopperController';
@@ -17,12 +17,7 @@ const transitionStyles: { [key: string]: object } = {
exiting: { opacity: 0, transitionDelay: '500ms' },
};
export type RenderPopperArrowFn = (
props: {
arrowProps: PopperArrowProps;
placement: string;
}
) => JSX.Element;
export type RenderPopperArrowFn = (props: { arrowProps: PopperArrowProps; placement: string }) => JSX.Element;
interface Props extends React.HTMLAttributes<HTMLDivElement> {
show: boolean;
@@ -58,7 +53,7 @@ class Popper extends PureComponent<Props> {
// TODO: move modifiers config to popper controller
modifiers={{ preventOverflow: { enabled: true, boundariesElement: 'window' } }}
>
{({ ref, style, placement, arrowProps }) => {
{({ ref, style, placement, arrowProps, scheduleUpdate }) => {
return (
<div
onMouseEnter={onMouseEnter}
@@ -73,7 +68,12 @@ class Popper extends PureComponent<Props> {
className={`${wrapperClassName}`}
>
<div className={className}>
{typeof content === 'string' ? content : React.cloneElement(content)}
{typeof content === 'string' && content}
{React.isValidElement(content) && React.cloneElement(content)}
{typeof content === 'function' &&
content({
updatePopperPosition: scheduleUpdate,
})}
{renderArrow &&
renderArrow({
arrowProps,
@@ -93,4 +93,4 @@ class Popper extends PureComponent<Props> {
}
}
export default Popper;
export { Popper };
packages/grafana-ui/src/components/Tooltip/PopperController.tsx
+2 -2
View File
@@ -7,7 +7,7 @@ export interface PopperContentProps {
updatePopperPosition?: () => void;
}
export type PopperContent<T extends PopperContentProps> = string | React.ReactElement<T>;
export type PopperContent<T extends PopperContentProps> = string | React.ReactElement<T> | ((props: T) => JSX.Element);
export interface UsingPopperProps {
show?: boolean;
@@ -101,4 +101,4 @@ class PopperController extends React.Component<Props, State> {
}
}
export default PopperController;
export { PopperController };
packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
import React, { createRef } from 'react';
import * as PopperJS from 'popper.js';
import Popper from './Popper';
import PopperController, { UsingPopperProps } from './PopperController';
import { Popper } from './Popper';
import { PopperController, UsingPopperProps } from './PopperController';
interface TooltipProps extends UsingPopperProps {
theme?: 'info' | 'error';
packages/grafana-ui/src/components/index.ts
+2
View File
@@ -1,5 +1,7 @@
export { DeleteButton } from './DeleteButton/DeleteButton';
export { Tooltip } from './Tooltip/Tooltip';
export { PopperController } from './Tooltip/PopperController';
export { Popper } from './Tooltip/Popper';
export { Portal } from './Portal/Portal';
export { CustomScrollbar } from './CustomScrollbar/CustomScrollbar';
public/app/core/angular_wrappers.ts
+2
View File
@@ -10,10 +10,12 @@ import { SideMenu } from './components/sidemenu/SideMenu';
import { MetricSelect } from './components/Select/MetricSelect';
import AppNotificationList from './components/AppNotifications/AppNotificationList';
import { ColorPicker, SeriesColorPickerPopoverWithTheme } from '@grafana/ui';
import { FunctionEditor } from 'app/plugins/datasource/graphite/FunctionEditor';
export function registerAngularDirectives() {
react2AngularDirective('passwordStrength', PasswordStrength, ['password']);
react2AngularDirective('sidemenu', SideMenu, []);
react2AngularDirective('functionEditor', FunctionEditor, ['func', 'onRemove', 'onMoveLeft', 'onMoveRight']);
react2AngularDirective('appNotificationsList', AppNotificationList, []);
react2AngularDirective('pageHeader', PageHeader, ['model', 'noTabs']);
react2AngularDirective('emptyListCta', EmptyListCTA, ['model']);
public/app/core/components/PermissionList/PermissionListItem.tsx
+8 -9
View File
@@ -61,15 +61,14 @@ export default class PermissionsListItem extends PureComponent<Props> {
{item.name} <ItemDescription item={item} />
</td>
<td>
{item.inherited &&
folderInfo && (
<em className="muted no-wrap">
Inherited from folder{' '}
<a className="text-link" href={`${folderInfo.url}/permissions`}>
{folderInfo.title}
</a>{' '}
</em>
)}
{item.inherited && folderInfo && (
<em className="muted no-wrap">
Inherited from folder{' '}
<a className="text-link" href={`${folderInfo.url}/permissions`}>
{folderInfo.title}
</a>{' '}
</em>
)}
{inheritedFromRoot && <em className="muted no-wrap">Default Permission</em>}
</td>
<td className="query-keyword">Can</td>
public/app/core/components/json_explorer/helpers.ts
+10 -10
View File
@@ -3,14 +3,14 @@
/*
* Escapes `"` characters from string
*/
*/
function escapeString(str: string): string {
return str.replace('"', '"');
}
/*
* Determines if a value is an object
*/
*/
export function isObject(value: any): boolean {
const type = typeof value;
return !!value && type === 'object';
@@ -20,7 +20,7 @@ export function isObject(value: any): boolean {
* Gets constructor name of an object.
* From http://stackoverflow.com/a/332429
*
*/
*/
export function getObjectName(object: object): string {
if (object === undefined) {
return '';
@@ -43,7 +43,7 @@ export function getObjectName(object: object): string {
/*
* Gets type of an object. Returns "null" for null objects
*/
*/
export function getType(object: object): string {
if (object === null) {
return 'null';
@@ -53,7 +53,7 @@ export function getType(object: object): string {
/*
* Generates inline preview for a JavaScript object based on a value
*/
*/
export function getValuePreview(object: object, value: string): string {
const type = getType(object);
@@ -78,7 +78,7 @@ export function getValuePreview(object: object, value: string): string {
/*
* Generates inline preview for a JavaScript object
*/
*/
let value = '';
export function getPreview(obj: object): string {
if (isObject(obj)) {
@@ -94,15 +94,15 @@ export function getPreview(obj: object): string {
/*
* Generates a prefixed CSS class name
*/
*/
export function cssClass(className: string): string {
return `json-formatter-${className}`;
}
/*
* Creates a new DOM element with given type and class
* TODO: move me to helpers
*/
* Creates a new DOM element with given type and class
* TODO: move me to helpers
*/
export function createElement(type: string, className?: string, content?: Element | string): Element {
const el = document.createElement(type);
if (className) {
public/app/core/components/json_explorer/json_explorer.ts
+12 -12
View File
@@ -83,7 +83,7 @@ export class JsonExplorer {
/*
* is formatter open?
*/
*/
private get isOpen(): boolean {
if (this._isOpen !== null) {
return this._isOpen;
@@ -94,14 +94,14 @@ export class JsonExplorer {
/*
* set open state (from toggler)
*/
*/
private set isOpen(value: boolean) {
this._isOpen = value;
}
/*
* is this a date string?
*/
*/
private get isDate(): boolean {
return (
this.type === 'string' &&
@@ -111,14 +111,14 @@ export class JsonExplorer {
/*
* is this a URL string?
*/
*/
private get isUrl(): boolean {
return this.type === 'string' && this.json.indexOf('http') === 0;
}
/*
* is this an array?
*/
*/
private get isArray(): boolean {
return Array.isArray(this.json);
}
@@ -126,21 +126,21 @@ export class JsonExplorer {
/*
* is this an object?
* Note: In this context arrays are object as well
*/
*/
private get isObject(): boolean {
return isObject(this.json);
}
/*
* is this an empty object with no properties?
*/
*/
private get isEmptyObject(): boolean {
return !this.keys.length && !this.isArray;
}
/*
* is this an empty object or array?
*/
*/
private get isEmpty(): boolean {
return this.isEmptyObject || (this.keys && !this.keys.length && this.isArray);
}
@@ -148,14 +148,14 @@ export class JsonExplorer {
/*
* did we receive a key argument?
* This means that the formatter was called as a sub formatter of a parent formatter
*/
*/
private get hasKey(): boolean {
return typeof this.key !== 'undefined';
}
/*
* if this is an object, get constructor function name
*/
*/
private get constructorName(): string {
return getObjectName(this.json);
}
@@ -163,7 +163,7 @@ export class JsonExplorer {
/*
* get type of this value
* Possible values: all JavaScript primitive types plus "array" and "null"
*/
*/
private get type(): string {
return getType(this.json);
}
@@ -171,7 +171,7 @@ export class JsonExplorer {
/*
* get object keys
* If there is an empty key we pad it wit quotes to make it visible
*/
*/
private get keys(): string[] {
if (this.isObject) {
return Object.keys(this.json).map(key => (key ? key : '""'));
public/app/core/components/sidemenu/BottomNavLinks.tsx
+2 -1
View File
@@ -47,7 +47,8 @@ class BottomNavLinks extends PureComponent<Props> {
<div className="sidemenu-org-switcher__org-current">Current Org:</div>
</div>
<div className="sidemenu-org-switcher__switch">
<i className="fa fa-fw fa-random" />Switch
<i className="fa fa-fw fa-random" />
Switch
</div>
</a>
</li>
public/app/core/components/sidemenu/SideMenu.tsx
+2 -1
View File
@@ -29,7 +29,8 @@ export class SideMenu extends PureComponent {
<div className="sidemenu__logo_small_breakpoint" onClick={this.toggleSideMenuSmallBreakpoint} key="hamburger">
<i className="fa fa-bars" />
<span className="sidemenu__close">
<i className="fa fa-times" />&nbsp;Close
<i className="fa fa-times" />
&nbsp;Close
</span>
</div>,
<TopSection key="topsection" />,
public/app/core/directives/dropdown_typeahead.ts
+7 -1
View File
@@ -128,7 +128,7 @@ export function dropdownTypeahead2($compile) {
'<input type="text"' + ' class="gf-form-input"' + ' spellcheck="false" style="display:none"></input>';
const buttonTemplate =
'<a class="gf-form-input dropdown-toggle"' +
'<a class="{{buttonTemplateClass}} dropdown-toggle"' +
' tabindex="1" gf-dropdown="menuItems" data-toggle="dropdown"' +
' ><i class="fa fa-plus"></i></a>';
@@ -137,9 +137,15 @@ export function dropdownTypeahead2($compile) {
menuItems: '=dropdownTypeahead2',
dropdownTypeaheadOnSelect: '&dropdownTypeaheadOnSelect',
model: '=ngModel',
buttonTemplateClass: '@',
},
link: ($scope, elem, attrs) => {
const $input = $(inputTemplate);
if (!$scope.buttonTemplateClass) {
$scope.buttonTemplateClass = 'gf-form-input';
}
const $button = $(buttonTemplate);
const timeoutId = {
blur: null,
public/app/core/directives/value_select_dropdown.ts
+8 -8
View File
@@ -240,7 +240,7 @@ export class ValueSelectDropdownCtrl {
/** @ngInject */
export function valueSelectDropdown($compile, $window, $timeout, $rootScope) {
return {
scope: { variable: '=', onUpdated: '&' },
scope: { dashboard: '=', variable: '=', onUpdated: '&' },
templateUrl: 'public/app/partials/valueSelectDropdown.html',
controller: 'ValueSelectDropdownCtrl',
controllerAs: 'vm',
@@ -288,13 +288,13 @@ export function valueSelectDropdown($compile, $window, $timeout, $rootScope) {
}
});
const cleanUp = $rootScope.$on('template-variable-value-updated', () => {
scope.vm.updateLinkText();
});
scope.$on('$destroy', () => {
cleanUp();
});
scope.vm.dashboard.on(
'template-variable-value-updated',
() => {
scope.vm.updateLinkText();
},
scope
);
scope.vm.init();
},
public/app/core/utils/explore.ts
+1 -1
View File
@@ -153,7 +153,7 @@ export function buildQueryTransaction(
};
}
export const clearQueryKeys: ((query: DataQuery) => object) = ({ key, refId, ...rest }) => rest;
export const clearQueryKeys: (query: DataQuery) => object = ({ key, refId, ...rest }) => rest;
const isMetricSegment = (segment: { [key: string]: string }) => segment.hasOwnProperty('expr');
const isUISegment = (segment: { [key: string]: string }) => segment.hasOwnProperty('ui');
public/app/core/utils/kbn.ts
+1 -1
View File
@@ -143,7 +143,7 @@ kbn.secondsToHhmmss = seconds => {
};
kbn.to_percent = (nr, outof) => {
return Math.floor(nr / outof * 10000) / 100 + '%';
return Math.floor((nr / outof) * 10000) / 100 + '%';
};
kbn.addslashes = str => {
public/app/features/alerting/AlertRuleList.tsx
+6 -1
View File
@@ -149,4 +149,9 @@ const mapDispatchToProps = {
togglePauseAlertRule,
};
export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(AlertRuleList));
export default hot(module)(
connect(
mapStateToProps,
mapDispatchToProps
)(AlertRuleList)
);
public/app/features/api-keys/ApiKeysPage.tsx
+6 -1
View File
@@ -263,4 +263,9 @@ const mapDispatchToProps = {
addApiKey,
};
export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(ApiKeysPage));
export default hot(module)(
connect(
mapStateToProps,
mapDispatchToProps
)(ApiKeysPage)
);
public/app/features/dashboard/components/AddPanelWidget/_AddPanelWidget.scss
+1 -1
View File
@@ -32,7 +32,7 @@
.add-panel-widget__title {
font-size: $font-size-md;
font-weight: $font-weight-semi-bold;
margin-right: $spacer*2;
margin-right: $spacer * 2;
}
.add-panel-widget__link {
public/app/features/dashboard/components/DashNav/DashNav.tsx
+4 -1
View File
@@ -267,4 +267,7 @@ const mapDispatchToProps = {
updateLocation,
};
export default connect(mapStateToProps, mapDispatchToProps)(DashNav);
export default connect(
mapStateToProps,
mapDispatchToProps
)(DashNav);
public/app/features/dashboard/components/SubMenu/template.html
+1 -1
View File
@@ -4,7 +4,7 @@
<label class="gf-form-label template-variable" ng-hide="variable.hide === 1">
{{variable.label || variable.name}}
</label>
<value-select-dropdown ng-if="variable.type !== 'adhoc' && variable.type !== 'textbox'" variable="variable" on-updated="ctrl.variableUpdated(variable)"></value-select-dropdown>
<value-select-dropdown ng-if="variable.type !== 'adhoc' && variable.type !== 'textbox'" dashboard="ctrl.dashboard" variable="variable" on-updated="ctrl.variableUpdated(variable)"></value-select-dropdown>
<input type="text" ng-if="variable.type === 'textbox'" ng-model="variable.query" class="gf-form-input width-12" ng-blur="variable.current.value != variable.query && variable.updateOptions() && ctrl.variableUpdated(variable);" ng-keydown="$event.keyCode === 13 && variable.current.value != variable.query && variable.updateOptions() && ctrl.variableUpdated(variable);" ></input>
</div>
<ad-hoc-filters ng-if="variable.type === 'adhoc'" variable="variable" dashboard="ctrl.dashboard"></ad-hoc-filters>
public/app/features/dashboard/containers/DashboardPage.tsx
+6 -1
View File
@@ -306,4 +306,9 @@ const mapDispatchToProps = {
updateLocation,
};
export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(DashboardPage));
export default hot(module)(
connect(
mapStateToProps,
mapDispatchToProps
)(DashboardPage)
);
public/app/features/dashboard/containers/SoloPanelPage.tsx
+6 -1
View File
@@ -107,4 +107,9 @@ const mapDispatchToProps = {
initDashboard,
};
export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(SoloPanelPage));
export default hot(module)(
connect(
mapStateToProps,
mapDispatchToProps
)(SoloPanelPage)
);
public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
+14 -15
View File
@@ -49,21 +49,20 @@ export class PanelHeaderCorner extends Component<Props> {
return (
<div className="markdown-html">
<div dangerouslySetInnerHTML={{ __html: remarkableInterpolatedMarkdown }} />
{panel.links &&
panel.links.length > 0 && (
<ul className="text-left">
{panel.links.map((link, idx) => {
const info = linkSrv.getPanelLinkAnchorInfo(link, panel.scopedVars);
return (
<li key={idx}>
<a className="panel-menu-link" href={info.href} target={info.target}>
{info.title}
</a>
</li>
);
})}
</ul>
)}
{panel.links && panel.links.length > 0 && (
<ul className="text-left">
{panel.links.map((link, idx) => {
const info = linkSrv.getPanelLinkAnchorInfo(link, panel.scopedVars);
return (
<li key={idx}>
<a className="panel-menu-link" href={info.href} target={info.target}>
{info.title}
</a>
</li>
);
})}
</ul>
)}
</div>
);
};
public/app/features/dashboard/panel_editor/QueriesTab.tsx
+2 -1
View File
@@ -176,7 +176,7 @@ export class QueriesTab extends PureComponent<Props, State> {
};
render() {
const { panel } = this.props;
const { panel, dashboard } = this.props;
const { currentDS, scrollTop } = this.state;
const queryInspector: EditorToolbarView = {
@@ -205,6 +205,7 @@ export class QueriesTab extends PureComponent<Props, State> {
dataSourceValue={query.datasource || panel.datasource}
key={query.refId}
panel={panel}
dashboard={dashboard}
query={query}
onChange={query => this.onQueryChange(query, index)}
onRemoveQuery={this.onRemoveQuery}
public/app/features/dashboard/panel_editor/QueryEditorRow.tsx
+5 -1
View File
@@ -12,10 +12,12 @@ import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';
// Types
import { PanelModel } from '../state/PanelModel';
import { DataQuery, DataSourceApi, TimeRange } from '@grafana/ui';
import { DashboardModel } from '../state/DashboardModel';
interface Props {
panel: PanelModel;
query: DataQuery;
dashboard: DashboardModel;
onAddQuery: (query?: DataQuery) => void;
onRemoveQuery: (query: DataQuery) => void;
onMoveQuery: (query: DataQuery, direction: number) => void;
@@ -83,13 +85,14 @@ export class QueryEditorRow extends PureComponent<Props, State> {
};
getAngularQueryComponentScope(): AngularQueryComponentScope {
const { panel, query } = this.props;
const { panel, query, dashboard } = this.props;
const { datasource } = this.state;
return {
datasource: datasource,
target: query,
panel: panel,
dashboard: dashboard,
refresh: () => panel.refresh(),
render: () => panel.render(),
events: panel.events,
@@ -265,6 +268,7 @@ export class QueryEditorRow extends PureComponent<Props, State> {
export interface AngularQueryComponentScope {
target: DataQuery;
panel: PanelModel;
dashboard: DashboardModel;
events: Emitter;
refresh: () => void;
render: () => void;
public/app/features/dashboard/services/TimeSrv.ts
+2 -2
View File
@@ -227,8 +227,8 @@ export class TimeSrv {
const timespan = range.to.valueOf() - range.from.valueOf();
const center = range.to.valueOf() - timespan / 2;
const to = center + timespan * factor / 2;
const from = center - timespan * factor / 2;
const to = center + (timespan * factor) / 2;
const from = center - (timespan * factor) / 2;
this.setTime({ from: moment.utc(from), to: moment.utc(to) });
}
public/app/features/dashboard/state/DashboardMigrator.ts
+1 -1
View File
@@ -487,7 +487,7 @@ export class DashboardMigrator {
for (const panel of row.panels) {
panel.span = panel.span || DEFAULT_PANEL_SPAN;
if (panel.minSpan) {
panel.minSpan = Math.min(GRID_COLUMN_COUNT, GRID_COLUMN_COUNT / 12 * panel.minSpan);
panel.minSpan = Math.min(GRID_COLUMN_COUNT, (GRID_COLUMN_COUNT / 12) * panel.minSpan);
}
const panelWidth = Math.floor(panel.span) * widthFactor;
const panelHeight = panel.height ? getGridHeight(panel.height) : rowGridHeight;
public/app/features/datasources/DataSourceDashboards.tsx
+6 -1
View File
@@ -98,4 +98,9 @@ const mapDispatchToProps = {
removeDashboard,
};
export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(DataSourceDashboards));
export default hot(module)(
connect(
mapStateToProps,
mapDispatchToProps
)(DataSourceDashboards)
);
public/app/features/datasources/DataSourcesListPage.tsx
+6 -1
View File
@@ -115,4 +115,9 @@ const mapDispatchToProps = {
setDataSourcesLayoutMode,
};
export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(DataSourcesListPage));
export default hot(module)(
connect(
mapStateToProps,
mapDispatchToProps
)(DataSourcesListPage)
);
public/app/features/datasources/NewDataSourcePage.tsx
+6 -1
View File
@@ -80,4 +80,9 @@ const mapDispatchToProps = {
setDataSourceTypeSearchQuery,
};
export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(NewDataSourcePage));
export default hot(module)(
connect(
mapStateToProps,
mapDispatchToProps
)(NewDataSourcePage)
);
public/app/features/datasources/settings/DataSourceSettingsPage.tsx
+6 -1
View File
@@ -259,4 +259,9 @@ const mapDispatchToProps = {
setIsDefault,
};
export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(DataSourceSettingsPage));
export default hot(module)(
connect(
mapStateToProps,
mapDispatchToProps
)(DataSourceSettingsPage)
);
public/app/features/explore/Explore.tsx
+41 -37
View File
@@ -200,43 +200,42 @@ export class Explore extends React.PureComponent<ExploreProps> {
</div>
)}
{datasourceInstance &&
!datasourceError && (
<div className="explore-container">
<QueryRows exploreEvents={this.exploreEvents} exploreId={exploreId} queryKeys={queryKeys} />
<AutoSizer onResize={this.onResize} disableHeight>
{({ width }) => {
if (width === 0) {
return null;
}
{datasourceInstance && !datasourceError && (
<div className="explore-container">
<QueryRows exploreEvents={this.exploreEvents} exploreId={exploreId} queryKeys={queryKeys} />
<AutoSizer onResize={this.onResize} disableHeight>
{({ width }) => {
if (width === 0) {
return null;
}
return (
<main className="m-t-2" style={{ width }}>
<ErrorBoundary>
{showingStartPage && <StartPage onClickExample={this.onClickExample} />}
{!showingStartPage && (
<>
{supportsGraph && !supportsLogs && <GraphContainer width={width} exploreId={exploreId} />}
{supportsTable && <TableContainer exploreId={exploreId} onClickCell={this.onClickLabel} />}
{supportsLogs && (
<LogsContainer
width={width}
exploreId={exploreId}
onChangeTime={this.onChangeTime}
onClickLabel={this.onClickLabel}
onStartScanning={this.onStartScanning}
onStopScanning={this.onStopScanning}
/>
)}
</>
)}
</ErrorBoundary>
</main>
);
}}
</AutoSizer>
</div>
)}
return (
<main className="m-t-2" style={{ width }}>
<ErrorBoundary>
{showingStartPage && <StartPage onClickExample={this.onClickExample} />}
{!showingStartPage && (
<>
{supportsGraph && !supportsLogs && <GraphContainer width={width} exploreId={exploreId} />}
{supportsTable && <TableContainer exploreId={exploreId} onClickCell={this.onClickLabel} />}
{supportsLogs && (
<LogsContainer
width={width}
exploreId={exploreId}
onChangeTime={this.onChangeTime}
onClickLabel={this.onClickLabel}
onStartScanning={this.onStartScanning}
onStopScanning={this.onStopScanning}
/>
)}
</>
)}
</ErrorBoundary>
</main>
);
}}
</AutoSizer>
</div>
)}
</div>
);
}
@@ -287,4 +286,9 @@ const mapDispatchToProps = {
setQueries,
};
export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(Explore));
export default hot(module)(
connect(
mapStateToProps,
mapDispatchToProps
)(Explore)
);
public/app/features/explore/ExploreToolbar.tsx
+6 -1
View File
@@ -193,4 +193,9 @@ const mapDispatchToProps: DispatchProps = {
split: splitOpen,
};
export const ExploreToolbar = hot(module)(connect(mapStateToProps, mapDispatchToProps)(UnConnectedExploreToolbar));
export const ExploreToolbar = hot(module)(
connect(
mapStateToProps,
mapDispatchToProps
)(UnConnectedExploreToolbar)
);
public/app/features/explore/Graph.tsx
+16 -16
View File
@@ -217,11 +217,13 @@ export class Graph extends PureComponent<GraphProps, GraphState> {
let series = [{ data: [[0, 0]] }];
if (data && data.length > 0) {
series = data.filter((ts: TimeSeries) => !hiddenSeries.has(ts.alias)).map((ts: TimeSeries) => ({
color: ts.color,
label: ts.label,
data: ts.getFlotPairs('null'),
}));
series = data
.filter((ts: TimeSeries) => !hiddenSeries.has(ts.alias))
.map((ts: TimeSeries) => ({
color: ts.color,
label: ts.label,
data: ts.getFlotPairs('null'),
}));
}
this.dynamicOptions = this.getDynamicOptions();
@@ -242,17 +244,15 @@ export class Graph extends PureComponent<GraphProps, GraphState> {
return (
<>
{this.props.data &&
this.props.data.length > MAX_NUMBER_OF_TIME_SERIES &&
!this.state.showAllTimeSeries && (
<div className="time-series-disclaimer">
<i className="fa fa-fw fa-warning disclaimer-icon" />
{`Showing only ${MAX_NUMBER_OF_TIME_SERIES} time series. `}
<span className="show-all-time-series" onClick={this.onShowAllTimeSeries}>{`Show all ${
this.props.data.length
}`}</span>
</div>
)}
{this.props.data && this.props.data.length > MAX_NUMBER_OF_TIME_SERIES && !this.state.showAllTimeSeries && (
<div className="time-series-disclaimer">
<i className="fa fa-fw fa-warning disclaimer-icon" />
{`Showing only ${MAX_NUMBER_OF_TIME_SERIES} time series. `}
<span className="show-all-time-series" onClick={this.onShowAllTimeSeries}>{`Show all ${
this.props.data.length
}`}</span>
</div>
)}
<div id={id} className="explore-graph" style={{ height }} />
<Legend data={data} hiddenSeries={hiddenSeries} onToggleSeries={this.onToggleSeries} />
</>
public/app/features/explore/GraphContainer.tsx
+6 -1
View File
@@ -70,4 +70,9 @@ const mapDispatchToProps = {
changeTime,
};
export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(GraphContainer));
export default hot(module)(
connect(
mapStateToProps,
mapDispatchToProps
)(GraphContainer)
);
public/app/features/explore/LogLabelStats.tsx
+3 -1
View File
@@ -60,7 +60,9 @@ export class LogLabelStats extends PureComponent<Props> {
<span className="logs-stats__close fa fa-remove" onClick={onClickClose} />
</div>
<div className="logs-stats__body">
{topRows.map(stat => <LogLabelStatsRow key={stat.value} {...stat} active={stat.value === value} />)}
{topRows.map(stat => (
<LogLabelStatsRow key={stat.value} {...stat} active={stat.value === value} />
))}
{insertActiveRow && activeRow && <LogLabelStatsRow key={activeRow.value} {...activeRow} active />}
{otherCount > 0 && (
<LogLabelStatsRow key="__OTHERS__" count={otherCount} value="Other" proportion={otherProportion} />
public/app/features/explore/LogRow.tsx
+8 -9
View File
@@ -166,15 +166,14 @@ export class LogRow extends PureComponent<Props, State> {
highlightClassName="logs-row__field-highlight"
/>
)}
{!parsed &&
needsHighlighter && (
<Highlighter
textToHighlight={row.entry}
searchWords={highlights}
findChunks={findHighlightChunksInText}
highlightClassName={highlightClassName}
/>
)}
{!parsed && needsHighlighter && (
<Highlighter
textToHighlight={row.entry}
searchWords={highlights}
findChunks={findHighlightChunksInText}
highlightClassName={highlightClassName}
/>
)}
{!parsed && !needsHighlighter && row.entry}
{showFieldStats && (
<div className="logs-row__stats">
public/app/features/explore/Logs.tsx
+18 -21
View File
@@ -237,17 +237,16 @@ export default class Logs extends PureComponent<Props, State> {
</div>
</div>
{hasData &&
meta && (
<div className="logs-panel-meta">
{meta.map(item => (
<div className="logs-panel-meta__item" key={item.label}>
<span className="logs-panel-meta__label">{item.label}:</span>
<span className="logs-panel-meta__value">{renderMetaItem(item.value, item.kind)}</span>
</div>
))}
</div>
)}
{hasData && meta && (
<div className="logs-panel-meta">
{meta.map(item => (
<div className="logs-panel-meta__item" key={item.label}>
<span className="logs-panel-meta__label">{item.label}:</span>
<span className="logs-panel-meta__value">{renderMetaItem(item.value, item.kind)}</span>
</div>
))}
</div>
)}
<div className="logs-rows">
{hasData &&
@@ -282,16 +281,14 @@ export default class Logs extends PureComponent<Props, State> {
))}
{hasData && deferLogs && <span>Rendering {dedupedData.rows.length} rows...</span>}
</div>
{!loading &&
!hasData &&
!scanning && (
<div className="logs-panel-nodata">
No logs found.
<a className="link" onClick={this.onClickScan}>
Scan for older logs
</a>
</div>
)}
{!loading && !hasData && !scanning && (
<div className="logs-panel-nodata">
No logs found.
<a className="link" onClick={this.onClickScan}>
Scan for older logs
</a>
</div>
)}
{scanning && (
<div className="logs-panel-nodata">
public/app/features/explore/LogsContainer.tsx
+6 -1
View File
@@ -127,4 +127,9 @@ const mapDispatchToProps = {
toggleLogLevelAction,
};
export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(LogsContainer));
export default hot(module)(
connect(
mapStateToProps,
mapDispatchToProps
)(LogsContainer)
);
public/app/features/explore/QueryRow.tsx
+6 -1
View File
@@ -169,4 +169,9 @@ const mapDispatchToProps = {
runQueries,
};
export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(QueryRow));
export default hot(module)(
connect(
mapStateToProps,
mapDispatchToProps
)(QueryRow)
);
public/app/features/explore/TableContainer.tsx
+6 -1
View File
@@ -51,4 +51,9 @@ const mapDispatchToProps = {
toggleTable,
};
export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(TableContainer));
export default hot(module)(
connect(
mapStateToProps,
mapDispatchToProps
)(TableContainer)
);
public/app/features/explore/Wrapper.tsx
+6 -1
View File
@@ -82,4 +82,9 @@ const mapDispatchToProps = {
resetExploreAction,
};
export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(Wrapper));
export default hot(module)(
connect(
mapStateToProps,
mapDispatchToProps
)(Wrapper)
);
public/app/features/folders/FolderPermissions.tsx
+6 -1
View File
@@ -132,4 +132,9 @@ const mapDispatchToProps = {
addFolderPermission,
};
export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(FolderPermissions));
export default hot(module)(
connect(
mapStateToProps,
mapDispatchToProps
)(FolderPermissions)
);
public/app/features/folders/FolderSettingsPage.tsx
+6 -1
View File
@@ -113,4 +113,9 @@ const mapDispatchToProps = {
deleteFolder,
};
export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(FolderSettingsPage));
export default hot(module)(
connect(
mapStateToProps,
mapDispatchToProps
)(FolderSettingsPage)
);
public/app/features/org/OrgDetailsPage.tsx
+6 -1
View File
@@ -65,4 +65,9 @@ const mapDispatchToProps = {
updateOrganization,
};
export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(OrgDetailsPage));
export default hot(module)(
connect(
mapStateToProps,
mapDispatchToProps
)(OrgDetailsPage)
);
public/app/features/panel/query_editor_row.ts
+1 -1
View File
@@ -14,7 +14,7 @@ export class QueryRowCtrl {
this.target = this.queryCtrl.target;
this.panel = this.panelCtrl.panel;
if (this.hasTextEditMode) {
if (this.hasTextEditMode && this.queryCtrl.toggleEditorMode) {
// expose this function to react parent component
this.panelCtrl.toggleEditorMode = this.queryCtrl.toggleEditorMode.bind(this.queryCtrl);
}
public/app/features/plugins/PluginListPage.tsx
+6 -1
View File
@@ -81,4 +81,9 @@ const mapDispatchToProps = {
setPluginsSearchQuery,
};
export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(PluginListPage));
export default hot(module)(
connect(
mapStateToProps,
mapDispatchToProps
)(PluginListPage)
);
public/app/features/plugins/plugin_component.ts
+22 -20
View File
@@ -136,27 +136,29 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
// Datasource ConfigCtrl
case 'datasource-config-ctrl': {
const dsMeta = scope.ctrl.datasourceMeta;
return importPluginModule(dsMeta.module).then((dsModule): any => {
if (!dsModule.ConfigCtrl) {
return { notFound: true };
return importPluginModule(dsMeta.module).then(
(dsModule): any => {
if (!dsModule.ConfigCtrl) {
return { notFound: true };
}
scope.$watch(
'ctrl.current',
() => {
scope.onModelChanged(scope.ctrl.current);
},
true
);
return {
baseUrl: dsMeta.baseUrl,
name: 'ds-config-' + dsMeta.id,
bindings: { meta: '=', current: '=' },
attrs: { meta: 'ctrl.datasourceMeta', current: 'ctrl.current' },
Component: dsModule.ConfigCtrl,
};
}
scope.$watch(
'ctrl.current',
() => {
scope.onModelChanged(scope.ctrl.current);
},
true
);
return {
baseUrl: dsMeta.baseUrl,
name: 'ds-config-' + dsMeta.id,
bindings: { meta: '=', current: '=' },
attrs: { meta: 'ctrl.datasourceMeta', current: 'ctrl.current' },
Component: dsModule.ConfigCtrl,
};
});
);
}
// AppConfigCtrl
case 'app-config-ctrl': {
public/app/features/teams/TeamGroupSync.tsx
+22 -20
View File
@@ -116,26 +116,25 @@ export class TeamGroupSync extends PureComponent<Props, State> {
</div>
</SlideDown>
{groups.length === 0 &&
!isAdding && (
<div className="empty-list-cta">
<div className="empty-list-cta__title">There are no external groups to sync with</div>
<button onClick={this.onToggleAdding} className="empty-list-cta__button btn btn-xlarge btn-primary">
<i className="gicon gicon-add-team" />
Add Group
</button>
<div className="empty-list-cta__pro-tip">
<i className="fa fa-rocket" /> {headerTooltip}
<a
className="text-link empty-list-cta__pro-tip-link"
href="http://docs.grafana.org/auth/enhanced_ldap/"
target="_blank"
>
Learn more
</a>
</div>
{groups.length === 0 && !isAdding && (
<div className="empty-list-cta">
<div className="empty-list-cta__title">There are no external groups to sync with</div>
<button onClick={this.onToggleAdding} className="empty-list-cta__button btn btn-xlarge btn-primary">
<i className="gicon gicon-add-team" />
Add Group
</button>
<div className="empty-list-cta__pro-tip">
<i className="fa fa-rocket" /> {headerTooltip}
<a
className="text-link empty-list-cta__pro-tip-link"
href="http://docs.grafana.org/auth/enhanced_ldap/"
target="_blank"
>
Learn more
</a>
</div>
)}
</div>
)}
{groups.length > 0 && (
<div className="admin-list-table">
@@ -167,4 +166,7 @@ const mapDispatchToProps = {
removeTeamGroup,
};
export default connect(mapStateToProps, mapDispatchToProps)(TeamGroupSync);
export default connect(
mapStateToProps,
mapDispatchToProps
)(TeamGroupSync);
public/app/features/teams/TeamList.tsx
+6 -1
View File
@@ -161,4 +161,9 @@ const mapDispatchToProps = {
setSearchQuery,
};
export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(TeamList));
export default hot(module)(
connect(
mapStateToProps,
mapDispatchToProps
)(TeamList)
);
public/app/features/teams/TeamMembers.tsx
+7 -2
View File
@@ -62,7 +62,9 @@ export class TeamMembers extends PureComponent<Props, State> {
return (
<td>
{labels.map(label => <TagBadge key={label} label={label} removeIcon={false} count={0} onClick={() => {}} />)}
{labels.map(label => (
<TagBadge key={label} label={label} removeIcon={false} count={0} onClick={() => {}} />
))}
</td>
);
}
@@ -156,4 +158,7 @@ const mapDispatchToProps = {
setSearchMemberQuery,
};
export default connect(mapStateToProps, mapDispatchToProps)(TeamMembers);
export default connect(
mapStateToProps,
mapDispatchToProps
)(TeamMembers);
public/app/features/teams/TeamPages.tsx
+6 -1
View File
@@ -108,4 +108,9 @@ const mapDispatchToProps = {
loadTeam,
};
export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(TeamPages));
export default hot(module)(
connect(
mapStateToProps,
mapDispatchToProps
)(TeamPages)
);
public/app/features/teams/TeamSettings.tsx
+4 -1
View File
@@ -98,4 +98,7 @@ const mapDispatchToProps = {
updateTeam,
};
export default connect(mapStateToProps, mapDispatchToProps)(TeamSettings);
export default connect(
mapStateToProps,
mapDispatchToProps
)(TeamSettings);
public/app/features/templating/variable_srv.ts
+9 -7
View File
@@ -54,15 +54,17 @@ export class VariableSrv {
onTimeRangeUpdated(timeRange: TimeRange) {
this.templateSrv.updateTimeRange(timeRange);
const promises = this.variables.filter(variable => variable.refresh === 2).map(variable => {
const previousOptions = variable.options.slice();
const promises = this.variables
.filter(variable => variable.refresh === 2)
.map(variable => {
const previousOptions = variable.options.slice();
return variable.updateOptions().then(() => {
if (angular.toJson(previousOptions) !== angular.toJson(variable.options)) {
this.dashboard.templateVariableValueUpdated();
}
return variable.updateOptions().then(() => {
if (angular.toJson(previousOptions) !== angular.toJson(variable.options)) {
this.dashboard.templateVariableValueUpdated();
}
});
});
});
return this.$q.all(promises).then(() => {
this.dashboard.startRefresh();
public/app/features/users/InviteeRow.tsx
+6 -3
View File
@@ -52,6 +52,9 @@ const mapDispatchToProps = {
revokeInvite,
};
export default connect(() => {
return {};
}, mapDispatchToProps)(InviteeRow);
export default connect(
() => {
return {};
},
mapDispatchToProps
)(InviteeRow);
public/app/features/users/UsersActionBar.tsx
+4 -1
View File
@@ -92,4 +92,7 @@ const mapDispatchToProps = {
setUsersSearchQuery,
};
export default connect(mapStateToProps, mapDispatchToProps)(UsersActionBar);
export default connect(
mapStateToProps,
mapDispatchToProps
)(UsersActionBar);
public/app/features/users/UsersListPage.tsx
+6 -1
View File
@@ -138,4 +138,9 @@ const mapDispatchToProps = {
removeUser,
};
export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(UsersListPage));
export default hot(module)(
connect(
mapStateToProps,
mapDispatchToProps
)(UsersListPage)
);
public/app/plugins/datasource/grafana-azure-monitor-datasource/annotations_query_ctrl.ts
+2 -1
View File
@@ -4,7 +4,8 @@ export class AzureMonitorAnnotationsQueryCtrl {
annotation: any;
workspaces: any[];
defaultQuery = '<your table>\n| where $__timeFilter() \n| project TimeGenerated, Text=YourTitleColumn, Tags="tag1,tag2"';
defaultQuery =
'<your table>\n| where $__timeFilter() \n| project TimeGenerated, Text=YourTitleColumn, Tags="tag1,tag2"';
/** @ngInject */
constructor() {
public/app/plugins/datasource/grafana-azure-monitor-datasource/editor/query_field.tsx
+2 -2
View File
@@ -311,8 +311,8 @@ class QueryField extends React.Component<any, any> {
let selectedIndex = Math.max(this.state.typeaheadIndex, 0);
const flattenedSuggestions = flattenSuggestions(suggestions);
selectedIndex = selectedIndex % flattenedSuggestions.length || 0;
const selectedKeys = (flattenedSuggestions.length > 0 ? [flattenedSuggestions[selectedIndex]] : []).map(
i => (typeof i === 'object' ? i.text : i)
const selectedKeys = (flattenedSuggestions.length > 0 ? [flattenedSuggestions[selectedIndex]] : []).map(i =>
typeof i === 'object' ? i.text : i
);
// Create typeahead in DOM root so we can later position it absolutely
public/app/plugins/datasource/graphite/FunctionEditor.tsx
+110
View File
@@ -0,0 +1,110 @@
import React from 'react';
import { PopperController, Popper } from '@grafana/ui';
import rst2html from 'rst2html';
import { FunctionDescriptor, FunctionEditorControlsProps, FunctionEditorControls } from './FunctionEditorControls';
interface FunctionEditorProps extends FunctionEditorControlsProps {
func: FunctionDescriptor;
}
interface FunctionEditorState {
showingDescription: boolean;
}
class FunctionEditor extends React.PureComponent<FunctionEditorProps, FunctionEditorState> {
private triggerRef = React.createRef<HTMLSpanElement>();
constructor(props: FunctionEditorProps) {
super(props);
this.state = {
showingDescription: false,
};
}
renderContent = ({ updatePopperPosition }) => {
const {
onMoveLeft,
onMoveRight,
func: {
def: { name, description },
},
} = this.props;
const { showingDescription } = this.state;
if (showingDescription) {
return (
<div style={{ overflow: 'auto', maxHeight: '30rem', textAlign: 'left', fontWeight: 'normal' }}>
<h4 style={{ color: 'white' }}> {name} </h4>
<div
dangerouslySetInnerHTML={{
__html: rst2html(description),
}}
/>
</div>
);
}
return (
<FunctionEditorControls
{...this.props}
onMoveLeft={() => {
onMoveLeft(this.props.func);
updatePopperPosition();
}}
onMoveRight={() => {
onMoveRight(this.props.func);
updatePopperPosition();
}}
onDescriptionShow={() => {
this.setState({ showingDescription: true }, () => {
updatePopperPosition();
});
}}
/>
);
};
render() {
return (
<PopperController content={this.renderContent} placement="top" hideAfter={300}>
{(showPopper, hidePopper, popperProps) => {
return (
<>
{this.triggerRef && (
<Popper
{...popperProps}
referenceElement={this.triggerRef.current}
wrapperClassName="popper"
className="popper__background"
onMouseLeave={() => {
this.setState({ showingDescription: false });
hidePopper();
}}
onMouseEnter={showPopper}
renderArrow={({ arrowProps, placement }) => (
<div className="popper__arrow" data-placement={placement} {...arrowProps} />
)}
/>
)}
<span
ref={this.triggerRef}
onClick={popperProps.show ? hidePopper : showPopper}
onMouseLeave={() => {
hidePopper();
this.setState({ showingDescription: false });
}}
style={{ cursor: 'pointer' }}
>
{this.props.func.def.name}
</span>
</>
);
}}
</PopperController>
);
}
}
export { FunctionEditor };
public/app/plugins/datasource/graphite/FunctionEditorControls.tsx
+65
View File
@@ -0,0 +1,65 @@
import React from 'react';
export interface FunctionDescriptor {
text: string;
params: string[];
def: {
category: string;
defaultParams: string[];
description?: string;
fake: boolean;
name: string;
params: string[];
};
}
export interface FunctionEditorControlsProps {
onMoveLeft: (func: FunctionDescriptor) => void;
onMoveRight: (func: FunctionDescriptor) => void;
onRemove: (func: FunctionDescriptor) => void;
}
const FunctionHelpButton = (props: { description: string; name: string; onDescriptionShow: () => void }) => {
if (props.description) {
return <span className="pointer fa fa-question-circle" onClick={props.onDescriptionShow} />;
}
return (
<span
className="pointer fa fa-question-circle"
onClick={() => {
window.open(
'http://graphite.readthedocs.org/en/latest/functions.html#graphite.render.functions.' + props.name,
'_blank'
);
}}
/>
);
};
export const FunctionEditorControls = (
props: FunctionEditorControlsProps & {
func: FunctionDescriptor;
onDescriptionShow: () => void;
}
) => {
const { func, onMoveLeft, onMoveRight, onRemove, onDescriptionShow } = props;
return (
<div
style={{
display: 'flex',
width: '60px',
justifyContent: 'space-between',
}}
>
<span className="pointer fa fa-arrow-left" onClick={() => onMoveLeft(func)} />
<FunctionHelpButton
name={func.def.name}
description={func.def.description}
onDescriptionShow={onDescriptionShow}
/>
<span className="pointer fa fa-remove" onClick={() => onRemove(func)} />
<span className="pointer fa fa-arrow-right" onClick={() => onMoveRight(func)} />
</div>
);
};
public/app/plugins/datasource/graphite/func_editor.ts
+20 -87
View File
@@ -1,33 +1,42 @@
import _ from 'lodash';
import $ from 'jquery';
import rst2html from 'rst2html';
import coreModule from 'app/core/core_module';
/** @ngInject */
export function graphiteFuncEditor($compile, templateSrv, popoverSrv) {
const funcSpanTemplate = '<a ng-click="">{{func.def.name}}</a><span>(</span>';
const funcSpanTemplate = `
<function-editor
func="func"
onRemove="ctrl.handleRemoveFunction"
onMoveLeft="ctrl.handleMoveLeft"
onMoveRight="ctrl.handleMoveRight"
/><span>(</span>
`;
const paramTemplate =
'<input type="text" style="display:none"' + ' class="input-small tight-form-func-param"></input>';
const funcControlsTemplate = `
<div class="tight-form-func-controls">
<span class="pointer fa fa-arrow-left"></span>
<span class="pointer fa fa-question-circle"></span>
<span class="pointer fa fa-remove" ></span>
<span class="pointer fa fa-arrow-right"></span>
</div>`;
return {
restrict: 'A',
link: function postLink($scope, elem) {
const $funcLink = $(funcSpanTemplate);
const $funcControls = $(funcControlsTemplate);
const ctrl = $scope.ctrl;
const func = $scope.func;
let scheduledRelink = false;
let paramCountAtLink = 0;
let cancelBlur = null;
ctrl.handleRemoveFunction = func => {
ctrl.removeFunction(func);
};
ctrl.handleMoveLeft = func => {
ctrl.moveFunction(func, -1);
};
ctrl.handleMoveRight = func => {
ctrl.moveFunction(func, 1);
};
function clickFuncParam(this: any, paramIndex) {
/*jshint validthis:true */
@@ -158,24 +167,7 @@ export function graphiteFuncEditor($compile, templateSrv, popoverSrv) {
};
}
function toggleFuncControls() {
const targetDiv = elem.closest('.tight-form');
if (elem.hasClass('show-function-controls')) {
elem.removeClass('show-function-controls');
targetDiv.removeClass('has-open-function');
$funcControls.hide();
return;
}
elem.addClass('show-function-controls');
targetDiv.addClass('has-open-function');
$funcControls.show();
}
function addElementsAndCompile() {
$funcControls.appendTo(elem);
$funcLink.appendTo(elem);
const defParams = _.clone(func.def.params);
@@ -245,69 +237,10 @@ export function graphiteFuncEditor($compile, templateSrv, popoverSrv) {
}
}
function registerFuncControlsToggle() {
$funcLink.click(toggleFuncControls);
}
function registerFuncControlsActions() {
$funcControls.click(e => {
const $target = $(e.target);
if ($target.hasClass('fa-remove')) {
toggleFuncControls();
$scope.$apply(() => {
ctrl.removeFunction($scope.func);
});
return;
}
if ($target.hasClass('fa-arrow-left')) {
$scope.$apply(() => {
_.move(ctrl.queryModel.functions, $scope.$index, $scope.$index - 1);
ctrl.targetChanged();
});
return;
}
if ($target.hasClass('fa-arrow-right')) {
$scope.$apply(() => {
_.move(ctrl.queryModel.functions, $scope.$index, $scope.$index + 1);
ctrl.targetChanged();
});
return;
}
if ($target.hasClass('fa-question-circle')) {
const funcDef = ctrl.datasource.getFuncDef(func.def.name);
if (funcDef && funcDef.description) {
popoverSrv.show({
element: e.target,
position: 'bottom left',
classNames: 'drop-popover drop-function-def',
template: `
<div style="overflow:auto;max-height:30rem;">
<h4> ${funcDef.name} </h4>
${rst2html(funcDef.description)}
</div>`,
openOn: 'click',
});
} else {
window.open(
'http://graphite.readthedocs.org/en/latest/functions.html#graphite.render.functions.' + func.def.name,
'_blank'
);
}
return;
}
});
}
function relink() {
elem.children().remove();
addElementsAndCompile();
ifJustAddedFocusFirstParam();
registerFuncControlsToggle();
registerFuncControlsActions();
}
relink();
public/app/plugins/datasource/graphite/graphite_query.ts
+5
View File
@@ -154,6 +154,11 @@ export default class GraphiteQuery {
this.functions = _.without(this.functions, func);
}
moveFunction(func, offset) {
const index = this.functions.indexOf(func);
_.move(this.functions, index, index + offset);
}
updateModelTarget(targets) {
// render query
if (!this.target.textEditor) {
public/app/plugins/datasource/graphite/query_ctrl.ts
+5
View File
@@ -272,6 +272,11 @@ export class GraphiteQueryCtrl extends QueryCtrl {
this.targetChanged();
}
moveFunction(func, offset) {
this.queryModel.moveFunction(func, offset);
this.targetChanged();
}
addSeriesByTagFunc(tag) {
const newFunc = this.datasource.createFuncInstance('seriesByTag', {
withDefaultParams: false,
public/app/plugins/datasource/influxdb/datasource.ts
+35 -33
View File
@@ -78,46 +78,48 @@ export default class InfluxDatasource {
// replace templated variables
allQueries = this.templateSrv.replace(allQueries, scopedVars);
return this._seriesQuery(allQueries, options).then((data): any => {
if (!data || !data.results) {
return [];
}
const seriesList = [];
for (i = 0; i < data.results.length; i++) {
const result = data.results[i];
if (!result || !result.series) {
continue;
return this._seriesQuery(allQueries, options).then(
(data): any => {
if (!data || !data.results) {
return [];
}
const target = queryTargets[i];
let alias = target.alias;
if (alias) {
alias = this.templateSrv.replace(target.alias, options.scopedVars);
}
const influxSeries = new InfluxSeries({
series: data.results[i].series,
alias: alias,
});
switch (target.resultFormat) {
case 'table': {
seriesList.push(influxSeries.getTable());
break;
const seriesList = [];
for (i = 0; i < data.results.length; i++) {
const result = data.results[i];
if (!result || !result.series) {
continue;
}
default: {
const timeSeries = influxSeries.getTimeSeries();
for (y = 0; y < timeSeries.length; y++) {
seriesList.push(timeSeries[y]);
const target = queryTargets[i];
let alias = target.alias;
if (alias) {
alias = this.templateSrv.replace(target.alias, options.scopedVars);
}
const influxSeries = new InfluxSeries({
series: data.results[i].series,
alias: alias,
});
switch (target.resultFormat) {
case 'table': {
seriesList.push(influxSeries.getTable());
break;
}
default: {
const timeSeries = influxSeries.getTimeSeries();
for (y = 0; y < timeSeries.length; y++) {
seriesList.push(timeSeries[y]);
}
break;
}
break;
}
}
}
return { data: seriesList };
});
return { data: seriesList };
}
);
}
annotationQuery(options) {
public/app/plugins/datasource/influxdb/partials/query.editor.html
+151 -75
View File
@@ -1,19 +1,38 @@
<query-editor-row query-ctrl="ctrl" can-collapse="true" has-text-edit-mode="true">
<div ng-if="ctrl.target.rawQuery">
<div ng-if="ctrl.target.rawQuery">
<div class="gf-form">
<textarea rows="3" class="gf-form-input" ng-model="ctrl.target.query" spellcheck="false" placeholder="InfluxDB Query" ng-model-onblur ng-change="ctrl.refresh()"></textarea>
<textarea
rows="3"
class="gf-form-input"
ng-model="ctrl.target.query"
spellcheck="false"
placeholder="InfluxDB Query"
ng-model-onblur
ng-change="ctrl.refresh()"
></textarea>
</div>
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label query-keyword">FORMAT AS</label>
<div class="gf-form-select-wrapper">
<select class="gf-form-input gf-size-auto" ng-model="ctrl.target.resultFormat" ng-options="f.value as f.text for f in ctrl.resultFormats" ng-change="ctrl.refresh()"></select>
<select
class="gf-form-input gf-size-auto"
ng-model="ctrl.target.resultFormat"
ng-options="f.value as f.text for f in ctrl.resultFormats"
ng-change="ctrl.refresh()"
></select>
</div>
</div>
<div class="gf-form max-width-25" ng-hide="ctrl.target.resultFormat === 'table'">
<div class="gf-form max-width-25" ng-hide="ctrl.target.resultFormat === 'table'">
<label class="gf-form-label query-keyword">ALIAS BY</label>
<input type="text" class="gf-form-input" ng-model="ctrl.target.alias" spellcheck='false' placeholder="Naming pattern" ng-blur="ctrl.refresh()">
<input
type="text"
class="gf-form-input"
ng-model="ctrl.target.alias"
spellcheck="false"
placeholder="Naming pattern"
ng-blur="ctrl.refresh()"
/>
</div>
<div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div>
@@ -21,108 +40,154 @@
</div>
</div>
<div ng-if="!ctrl.target.rawQuery">
<div ng-if="!ctrl.target.rawQuery">
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label query-keyword width-7">FROM</label>
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label query-keyword width-7">FROM</label>
<metric-segment
segment="ctrl.policySegment"
get-options="ctrl.getPolicySegments()"
on-change="ctrl.policyChanged()"
></metric-segment>
<metric-segment
segment="ctrl.measurementSegment"
get-options="ctrl.getMeasurements($query)"
on-change="ctrl.measurementChanged()"
></metric-segment>
</div>
<metric-segment segment="ctrl.policySegment" get-options="ctrl.getPolicySegments()" on-change="ctrl.policyChanged()"></metric-segment>
<metric-segment segment="ctrl.measurementSegment" get-options="ctrl.getMeasurements($query)" on-change="ctrl.measurementChanged()"></metric-segment>
</div>
<div class="gf-form">
<label class="gf-form-label query-keyword">WHERE</label>
</div>
<div class="gf-form">
<label class="gf-form-label query-keyword">WHERE</label>
</div>
<div class="gf-form" ng-repeat="segment in ctrl.tagSegments">
<metric-segment
segment="segment"
get-options="ctrl.getTagsOrValues(segment, $index)"
on-change="ctrl.tagSegmentUpdated(segment, $index)"
></metric-segment>
</div>
<div class="gf-form" ng-repeat="segment in ctrl.tagSegments">
<metric-segment segment="segment" get-options="ctrl.getTagsOrValues(segment, $index)" on-change="ctrl.tagSegmentUpdated(segment, $index)"></metric-segment>
</div>
<div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div>
</div>
</div>
<div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div>
</div>
</div>
<div class="gf-form-inline" ng-repeat="selectParts in ctrl.queryModel.selectModels">
<div class="gf-form">
<label class="gf-form-label query-keyword width-7"> <span ng-show="$index === 0">SELECT</span>&nbsp; </label>
</div>
<div class="gf-form-inline" ng-repeat="selectParts in ctrl.queryModel.selectModels">
<div class="gf-form">
<label class="gf-form-label query-keyword width-7">
<span ng-show="$index === 0">SELECT</span>&nbsp;
</label>
</div>
<div class="gf-form" ng-repeat="part in selectParts">
<query-part-editor
class="gf-form-label query-part"
part="part"
handle-event="ctrl.handleSelectPartEvent(selectParts, part, $event)"
>
</query-part-editor>
</div>
<div class="gf-form" ng-repeat="part in selectParts">
<query-part-editor class="gf-form-label query-part" part="part" handle-event="ctrl.handleSelectPartEvent(selectParts, part, $event)">
</query-part-editor>
</div>
<div class="gf-form">
<label
class="dropdown"
dropdown-typeahead2="ctrl.selectMenu"
dropdown-typeahead-on-select="ctrl.addSelectPart(selectParts, $item, $subItem)"
button-template-class="gf-form-label query-part"
>
</label>
</div>
<div class="gf-form">
<label class="dropdown"
dropdown-typeahead="ctrl.selectMenu"
dropdown-typeahead-on-select="ctrl.addSelectPart(selectParts, $item, $subItem)">
</label>
</div>
<div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div>
</div>
</div>
<div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div>
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label query-keyword width-7">
<span>GROUP BY</span>
</label>
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label query-keyword width-7">
<span>GROUP BY</span>
</label>
<query-part-editor
ng-repeat="part in ctrl.queryModel.groupByParts"
part="part"
class="gf-form-label query-part"
handle-event="ctrl.handleGroupByPartEvent(part, $index, $event)"
>
</query-part-editor>
</div>
<query-part-editor ng-repeat="part in ctrl.queryModel.groupByParts"
part="part" class="gf-form-label query-part"
handle-event="ctrl.handleGroupByPartEvent(part, $index, $event)">
</query-part-editor>
</div>
<div class="gf-form">
<metric-segment
segment="ctrl.groupBySegment"
get-options="ctrl.getGroupByOptions()"
on-change="ctrl.groupByAction(part, $index)"
></metric-segment>
</div>
<div class="gf-form">
<metric-segment segment="ctrl.groupBySegment" get-options="ctrl.getGroupByOptions()" on-change="ctrl.groupByAction(part, $index)"></metric-segment>
</div>
<div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div>
</div>
</div>
<div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div>
</div>
</div>
<div class="gf-form-inline" ng-if="ctrl.target.orderByTime === 'DESC'">
<div class="gf-form">
<label class="gf-form-label query-keyword width-7">ORDER BY</label>
<label class="gf-form-label pointer" ng-click="ctrl.removeOrderByTime()">time <span class="query-keyword">DESC</span> <i class="fa fa-remove"></i></label>
<label class="gf-form-label pointer" ng-click="ctrl.removeOrderByTime()"
>time <span class="query-keyword">DESC</span> <i class="fa fa-remove"></i
></label>
</div>
<div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div>
</div>
<div class="gf-form-label gf-form-label--grow"></div>
</div>
</div>
<div class="gf-form-inline" ng-if="ctrl.target.limit">
<div class="gf-form">
<label class="gf-form-label query-keyword width-7">LIMIT</label>
<input type="text" class="gf-form-input width-9" ng-model="ctrl.target.limit" spellcheck='false' placeholder="No Limit" ng-blur="ctrl.refresh()">
<input
type="text"
class="gf-form-input width-9"
ng-model="ctrl.target.limit"
spellcheck="false"
placeholder="No Limit"
ng-blur="ctrl.refresh()"
/>
</div>
<div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div>
</div>
<div class="gf-form-label gf-form-label--grow"></div>
</div>
</div>
<div class="gf-form-inline" ng-if="ctrl.target.slimit">
<div class="gf-form">
<label class="gf-form-label query-keyword width-7">SLIMIT</label>
<input type="text" class="gf-form-input width-9" ng-model="ctrl.target.slimit" spellcheck='false' placeholder="No Limit" ng-blur="ctrl.refresh()">
<input
type="text"
class="gf-form-input width-9"
ng-model="ctrl.target.slimit"
spellcheck="false"
placeholder="No Limit"
ng-blur="ctrl.refresh()"
/>
</div>
<div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div>
</div>
<div class="gf-form-label gf-form-label--grow"></div>
</div>
</div>
<div class="gf-form-inline" ng-if="ctrl.target.tz">
<div class="gf-form">
<label class="gf-form-label query-keyword width-7">tz</label>
<input type="text" class="gf-form-input width-9" ng-model="ctrl.target.tz" spellcheck='false' placeholder="No Timezone" ng-blur="ctrl.refresh()">
<input
type="text"
class="gf-form-input width-9"
ng-model="ctrl.target.tz"
spellcheck="false"
placeholder="No Timezone"
ng-blur="ctrl.refresh()"
/>
</div>
<div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div>
@@ -133,7 +198,12 @@
<div class="gf-form">
<label class="gf-form-label query-keyword width-7">FORMAT AS</label>
<div class="gf-form-select-wrapper">
<select class="gf-form-input gf-size-auto" ng-model="ctrl.target.resultFormat" ng-options="f.value as f.text for f in ctrl.resultFormats" ng-change="ctrl.refresh()"></select>
<select
class="gf-form-input gf-size-auto"
ng-model="ctrl.target.resultFormat"
ng-options="f.value as f.text for f in ctrl.resultFormats"
ng-change="ctrl.refresh()"
></select>
</div>
</div>
<div class="gf-form gf-form--grow">
@@ -141,15 +211,21 @@
</div>
</div>
<div class="gf-form-inline" ng-hide="ctrl.target.resultFormat === 'table'">
<div class="gf-form-inline" ng-hide="ctrl.target.resultFormat === 'table'">
<div class="gf-form max-width-30">
<label class="gf-form-label query-keyword width-7">ALIAS BY</label>
<input type="text" class="gf-form-input" ng-model="ctrl.target.alias" spellcheck='false' placeholder="Naming pattern" ng-blur="ctrl.refresh()">
<input
type="text"
class="gf-form-input"
ng-model="ctrl.target.alias"
spellcheck="false"
placeholder="Naming pattern"
ng-blur="ctrl.refresh()"
/>
</div>
<div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div>
</div>
</div>
</div>
</query-editor-row>
public/app/plugins/datasource/mysql/mysql_query.ts
+1 -1
View File
@@ -52,7 +52,7 @@ export default class MysqlQuery {
}
escapeLiteral(value) {
return value.replace(/'/g, "''");
return String(value).replace(/'/g, "''");
}
hasTimeGroup() {
public/app/plugins/datasource/mysql/partials/query.editor.html
+4 -2
View File
@@ -45,8 +45,10 @@
<div class="gf-form">
<label class="dropdown"
dropdown-typeahead="ctrl.selectMenu"
dropdown-typeahead-on-select="ctrl.addSelectPart(selectParts, $item, $subItem)">
dropdown-typeahead2="ctrl.selectMenu"
dropdown-typeahead-on-select="ctrl.addSelectPart(selectParts, $item, $subItem)"
button-template-class="gf-form-label query-part"
>
</label>
</div>
public/app/plugins/datasource/postgres/partials/query.editor.html
+4 -2
View File
@@ -45,8 +45,10 @@
<div class="gf-form">
<label class="dropdown"
dropdown-typeahead="ctrl.selectMenu"
dropdown-typeahead-on-select="ctrl.addSelectPart(selectParts, $item, $subItem)">
dropdown-typeahead2="ctrl.selectMenu"
dropdown-typeahead-on-select="ctrl.addSelectPart(selectParts, $item, $subItem)"
button-template-class="gf-form-label query-part"
>
</label>
</div>
public/app/plugins/datasource/prometheus/components/PromQueryField.tsx
+11 -9
View File
@@ -38,15 +38,17 @@ export function groupMetricsByPrefix(metrics: string[], delimiter = '_'): Cascad
const metricsOptions = _.chain(metrics)
.filter(metric => !ruleRegex.test(metric))
.groupBy(metric => metric.split(delimiter)[0])
.map((metricsForPrefix: string[], prefix: string): CascaderOption => {
const prefixIsMetric = metricsForPrefix.length === 1 && metricsForPrefix[0] === prefix;
const children = prefixIsMetric ? [] : metricsForPrefix.sort().map(m => ({ label: m, value: m }));
return {
children,
label: prefix,
value: prefix,
};
})
.map(
(metricsForPrefix: string[], prefix: string): CascaderOption => {
const prefixIsMetric = metricsForPrefix.length === 1 && metricsForPrefix[0] === prefix;
const children = prefixIsMetric ? [] : metricsForPrefix.sort().map(m => ({ label: m, value: m }));
return {
children,
label: prefix,
value: prefix,
};
}
)
.sortBy('label')
.value();
public/app/plugins/datasource/prometheus/datasource.ts
+13 -7
View File
@@ -396,6 +396,10 @@ export class PrometheusDatasource implements DataSourceApi<PromQuery> {
const expandedQueries = queries.map(query => ({
...query,
expr: this.templateSrv.replace(query.expr, {}, this.interpolateQueryExpr),
// null out values we don't support in Explore yet
legendFormat: null,
step: null,
}));
state = {
...state,
@@ -487,13 +491,15 @@ export function alignRange(start, end, step) {
export function extractRuleMappingFromGroups(groups: any[]) {
return groups.reduce(
(mapping, group) =>
group.rules.filter(rule => rule.type === 'recording').reduce(
(acc, rule) => ({
...acc,
[rule.name]: rule.query,
}),
mapping
),
group.rules
.filter(rule => rule.type === 'recording')
.reduce(
(acc, rule) => ({
...acc,
[rule.name]: rule.query,
}),
mapping
),
{}
);
}
public/app/plugins/datasource/stackdriver/components/Help.tsx
+7 -7
View File
@@ -57,18 +57,18 @@ export class Help extends React.Component<Props, State> {
<div className="gf-form-label gf-form-label--grow" />
</div>
</div>
{rawQuery &&
displaRawQuery && (
<div className="gf-form">
<pre className="gf-form-pre">{rawQuery}</pre>
</div>
)}
{rawQuery && displaRawQuery && (
<div className="gf-form">
<pre className="gf-form-pre">{rawQuery}</pre>
</div>
)}
{displayHelp && (
<div className="gf-form grafana-info-box" style={{ padding: 0 }}>
<pre className="gf-form-pre alert alert-info" style={{ marginRight: 0 }}>
<h5>Alias Patterns</h5>Format the legend keys any way you want by using alias patterns. Format the legend
keys any way you want by using alias patterns.<br /> <br />
keys any way you want by using alias patterns.
<br /> <br />
Example:
<code>{`${'{{metricDescriptor.name}} - {{metricDescriptor.label.instance_name}}'}`}</code>
<br />
public/app/plugins/datasource/stackdriver/components/Metrics.tsx
+16 -12
View File
@@ -92,12 +92,14 @@ export class Metrics extends React.Component<Props, State> {
if (!selectedMetricDescriptor) {
return [];
}
const metricsByService = metricDescriptors.filter(m => m.service === selectedMetricDescriptor.service).map(m => ({
service: m.service,
value: m.type,
label: m.displayName,
description: m.description,
}));
const metricsByService = metricDescriptors
.filter(m => m.service === selectedMetricDescriptor.service)
.map(m => ({
service: m.service,
value: m.type,
label: m.displayName,
description: m.description,
}));
return metricsByService;
}
@@ -105,12 +107,14 @@ export class Metrics extends React.Component<Props, State> {
const { metricDescriptors } = this.state;
const { templateSrv, metricType } = this.props;
const metrics = metricDescriptors.filter(m => m.service === templateSrv.replace(service)).map(m => ({
service: m.service,
value: m.type,
label: m.displayName,
description: m.description,
}));
const metrics = metricDescriptors
.filter(m => m.service === templateSrv.replace(service))
.map(m => ({
service: m.service,
value: m.type,
label: m.displayName,
description: m.description,
}));
this.setState({ service, metrics });
public/app/plugins/datasource/stackdriver/components/VariableQueryEditor.tsx
+4 -4
View File
@@ -58,7 +58,7 @@ export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryP
metricTypes,
selectedMetricType,
metricDescriptors,
...await this.getLabels(selectedMetricType),
...(await this.getLabels(selectedMetricType)),
};
this.setState(state);
}
@@ -66,7 +66,7 @@ export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryP
async onQueryTypeChange(event) {
const state: any = {
selectedQueryType: event.target.value,
...await this.getLabels(this.state.selectedMetricType, event.target.value),
...(await this.getLabels(this.state.selectedMetricType, event.target.value)),
};
this.setState(state);
}
@@ -82,13 +82,13 @@ export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryP
selectedService: event.target.value,
metricTypes,
selectedMetricType,
...await this.getLabels(selectedMetricType),
...(await this.getLabels(selectedMetricType)),
};
this.setState(state);
}
async onMetricTypeChange(event) {
const state: any = { selectedMetricType: event.target.value, ...await this.getLabels(event.target.value) };
const state: any = { selectedMetricType: event.target.value, ...(await this.getLabels(event.target.value)) };
this.setState(state);
}
public/app/plugins/panel/graph/graph.ts
+1 -1
View File
@@ -532,7 +532,7 @@ class GraphElement {
// Expand ticks for pretty view
min = Math.floor(min / tickStep) * tickStep;
// 1.01 is 101% - ensure we have enough space for last bar
max = Math.ceil(max * 1.01 / tickStep) * tickStep;
max = Math.ceil((max * 1.01) / tickStep) * tickStep;
ticks = [];
for (let i = min; i <= max; i += tickStep) {
public/app/plugins/panel/graph/series_overrides_ctrl.ts
+1 -1
View File
@@ -11,7 +11,7 @@ export function SeriesOverridesCtrl($scope, $element, popoverSrv) {
const option = {
text: name,
propertyName: propertyName,
index: $scope.overrideMenu.lenght,
index: $scope.overrideMenu.length,
values: values,
submenu: _.map(values, value => {
return { text: String(value), value: value };
public/app/plugins/panel/graph/tab_display.html
+189 -105
View File
@@ -1,110 +1,194 @@
<div class="editor-row">
<div class="section gf-form-group">
<h5 class="section-heading">Draw Modes</h5>
<gf-form-switch
class="gf-form"
label="Bars"
label-class="width-5"
checked="ctrl.panel.bars"
on-change="ctrl.render()"
></gf-form-switch>
<gf-form-switch
class="gf-form"
label="Lines"
label-class="width-5"
checked="ctrl.panel.lines"
on-change="ctrl.render()"
></gf-form-switch>
<gf-form-switch
class="gf-form"
label="Points"
label-class="width-5"
checked="ctrl.panel.points"
on-change="ctrl.render()"
></gf-form-switch>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">Mode Options</h5>
<div class="gf-form">
<label class="gf-form-label width-8">Fill</label>
<div class="gf-form-select-wrapper max-width-5">
<select
class="gf-form-input"
ng-model="ctrl.panel.fill"
ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]"
ng-change="ctrl.render()"
ng-disabled="!ctrl.panel.lines"
></select>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-8">Line Width</label>
<div class="gf-form-select-wrapper max-width-5">
<select
class="gf-form-input"
ng-model="ctrl.panel.linewidth"
ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]"
ng-change="ctrl.render()"
ng-disabled="!ctrl.panel.lines"
></select>
</div>
</div>
<gf-form-switch
ng-disabled="!ctrl.panel.lines"
class="gf-form"
label="Staircase"
label-class="width-8"
checked="ctrl.panel.steppedLine"
on-change="ctrl.render()"
>
</gf-form-switch>
<div class="gf-form" ng-if="ctrl.panel.points">
<label class="gf-form-label width-8">Point Radius</label>
<div class="gf-form-select-wrapper max-width-5">
<select
class="gf-form-input"
ng-model="ctrl.panel.pointradius"
ng-options="f for f in [0.5,1,2,3,4,5,6,7,8,9,10]"
ng-change="ctrl.render()"
></select>
</div>
</div>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">Hover tooltip</h5>
<div class="gf-form">
<label class="gf-form-label width-9">Mode</label>
<div class="gf-form-select-wrapper max-width-8">
<select
class="gf-form-input"
ng-model="ctrl.panel.tooltip.shared"
ng-options="f.value as f.text for f in [{text: 'All series', value: true}, {text: 'Single', value: false}]"
ng-change="ctrl.render()"
></select>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-9">Sort order</label>
<div class="gf-form-select-wrapper max-width-8">
<select
class="gf-form-input"
ng-model="ctrl.panel.tooltip.sort"
ng-options="f.value as f.text for f in [{text: 'None', value: 0}, {text: 'Increasing', value: 1}, {text: 'Decreasing', value: 2}]"
ng-change="ctrl.render()"
></select>
</div>
</div>
<div class="gf-form" ng-show="ctrl.panel.stack">
<label class="gf-form-label width-9">Stacked value</label>
<div class="gf-form-select-wrapper max-width-8">
<select
class="gf-form-input"
ng-model="ctrl.panel.tooltip.value_type"
ng-options="f for f in ['cumulative','individual']"
ng-change="ctrl.render()"
></select>
</div>
</div>
</div>
<div class="editor-row">
<div class="section gf-form-group">
<h5 class="section-heading">Draw Modes</h5>
<gf-form-switch class="gf-form" label="Bars" label-class="width-5" checked="ctrl.panel.bars" on-change="ctrl.render()"></gf-form-switch>
<gf-form-switch class="gf-form" label="Lines" label-class="width-5" checked="ctrl.panel.lines" on-change="ctrl.render()"></gf-form-switch>
<gf-form-switch class="gf-form" label="Points" label-class="width-5" checked="ctrl.panel.points" on-change="ctrl.render()"></gf-form-switch>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">Mode Options</h5>
<div class="gf-form">
<label class="gf-form-label width-8">Fill</label>
<div class="gf-form-select-wrapper max-width-5">
<select class="gf-form-input" ng-model="ctrl.panel.fill" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]" ng-change="ctrl.render()" ng-disabled="!ctrl.panel.lines"></select>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-8">Line Width</label>
<div class="gf-form-select-wrapper max-width-5">
<select class="gf-form-input" ng-model="ctrl.panel.linewidth" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]" ng-change="ctrl.render()" ng-disabled="!ctrl.panel.lines"></select>
</div>
</div>
<gf-form-switch ng-disabled="!ctrl.panel.lines" class="gf-form" label="Staircase" label-class="width-8" checked="ctrl.panel.steppedLine" on-change="ctrl.render()">
</gf-form-switch>
<div class="gf-form" ng-if="ctrl.panel.points">
<label class="gf-form-label width-8">Point Radius</label>
<div class="gf-form-select-wrapper max-width-5">
<select class="gf-form-input" ng-model="ctrl.panel.pointradius" ng-options="f for f in [0.5,1,2,3,4,5,6,7,8,9,10]" ng-change="ctrl.render()"></select>
</div>
</div>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">Hover tooltip</h5>
<div class="gf-form">
<label class="gf-form-label width-9">Mode</label>
<div class="gf-form-select-wrapper max-width-8">
<select class="gf-form-input" ng-model="ctrl.panel.tooltip.shared" ng-options="f.value as f.text for f in [{text: 'All series', value: true}, {text: 'Single', value: false}]" ng-change="ctrl.render()"></select>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-9">Sort order</label>
<div class="gf-form-select-wrapper max-width-8">
<select class="gf-form-input" ng-model="ctrl.panel.tooltip.sort" ng-options="f.value as f.text for f in [{text: 'None', value: 0}, {text: 'Increasing', value: 1}, {text: 'Decreasing', value: 2}]" ng-change="ctrl.render()"></select>
</div>
</div>
<div class="gf-form" ng-show="ctrl.panel.stack">
<label class="gf-form-label width-9">Stacked value</label>
<div class="gf-form-select-wrapper max-width-8">
<select class="gf-form-input" ng-model="ctrl.panel.tooltip.value_type" ng-options="f for f in ['cumulative','individual']" ng-change="ctrl.render()"></select>
</div>
</div>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">Stacking & Null value</h5>
<gf-form-switch
class="gf-form"
label="Stack"
label-class="width-7"
checked="ctrl.panel.stack"
on-change="ctrl.refresh()"
>
</gf-form-switch>
<gf-form-switch
class="gf-form"
ng-show="ctrl.panel.stack"
label="Percent"
label-class="width-7"
checked="ctrl.panel.percentage"
on-change="ctrl.render()"
>
</gf-form-switch>
<div class="gf-form">
<label class="gf-form-label width-7">Null value</label>
<div class="gf-form-select-wrapper">
<select
class="gf-form-input max-width-9"
ng-model="ctrl.panel.nullPointMode"
ng-options="f for f in ['connected', 'null', 'null as zero']"
ng-change="ctrl.render()"
></select>
</div>
</div>
</div>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">Stacking & Null value</h5>
<gf-form-switch class="gf-form" label="Stack" label-class="width-7" checked="ctrl.panel.stack" on-change="ctrl.refresh()">
</gf-form-switch>
<gf-form-switch class="gf-form" ng-show="ctrl.panel.stack" label="Percent" label-class="width-7" checked="ctrl.panel.percentage" on-change="ctrl.render()">
</gf-form-switch>
<div class="gf-form">
<label class="gf-form-label width-7">Null value</label>
<div class="gf-form-select-wrapper">
<select class="gf-form-input max-width-9" ng-model="ctrl.panel.nullPointMode" ng-options="f for f in ['connected', 'null', 'null as zero']" ng-change="ctrl.render()"></select>
</div>
</div>
</div>
</div>
<div>
<div class="gf-form-inline" ng-repeat="override in ctrl.panel.seriesOverrides" ng-controller="SeriesOverridesCtrl">
<div class="gf-form">
<label class="gf-form-label">alias or regex</label>
</div>
<div class="gf-form width-15">
<input
type="text"
ng-model="override.alias"
bs-typeahead="getSeriesNames"
ng-blur="ctrl.render()"
data-min-length="0"
data-items="100"
class="gf-form-input width-15"
/>
</div>
<div class="gf-form" ng-repeat="option in currentOverrides">
<label class="gf-form-label">
<i class="pointer fa fa-remove" ng-click="removeOverride(option)"></i>
<span ng-show="option.propertyName === 'color'">
Color: <i class="fa fa-circle" ng-style="{color:option.value}"></i>
</span>
<span ng-show="option.propertyName !== 'color'"> {{ option.name }}: {{ option.value }} </span>
</label>
</div>
<div>
<div class="gf-form-inline" ng-repeat="override in ctrl.panel.seriesOverrides" ng-controller="SeriesOverridesCtrl">
<div class="gf-form">
<label class="gf-form-label">alias or regex</label>
</div>
<div class="gf-form width-15">
<input type="text" ng-model="override.alias" bs-typeahead="getSeriesNames" ng-blur="ctrl.render()" data-min-length=0 data-items=100 class="gf-form-input width-15">
</div>
<div class="gf-form" ng-repeat="option in currentOverrides">
<label class="gf-form-label">
<i class="pointer fa fa-remove" ng-click="removeOverride(option)"></i>
<span ng-show="option.propertyName === 'color'">
Color: <i class="fa fa-circle" ng-style="{color:option.value}"></i>
</span>
<span ng-show="option.propertyName !== 'color'">
{{option.name}}: {{option.value}}
</span>
</label>
</div>
<div class="gf-form">
<span
class="dropdown"
dropdown-typeahead2="overrideMenu"
dropdown-typeahead-on-select="setOverride($item, $subItem)"
button-template-class="gf-form-label"
>
</span>
</div>
<div class="gf-form">
<span class="dropdown" dropdown-typeahead="overrideMenu" dropdown-typeahead-on-select="setOverride($item, $subItem)">
</span>
</div>
<div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div>
</div>
<div class="gf-form">
<label class="gf-form-label">
<i class="fa fa-trash pointer" ng-click="ctrl.removeSeriesOverride(override)"></i>
</label>
</div>
</div>
<div class="gf-form-button-row">
<button class="btn btn-inverse" ng-click="ctrl.addSeriesOverride()">
<i class="fa fa-plus"></i>&nbsp;Add series override<tip>Regex match example: /server[0-3]/i </tip>
</button>
</div>
</div>
<div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div>
</div>
<div class="gf-form">
<label class="gf-form-label">
<i class="fa fa-trash pointer" ng-click="ctrl.removeSeriesOverride(override)"></i>
</label>
</div>
</div>
<div class="gf-form-button-row">
<button class="btn btn-inverse" ng-click="ctrl.addSeriesOverride()">
<i class="fa fa-plus"></i>&nbsp;Add series override<tip>Regex match example: /server[0-3]/i </tip>
</button>
</div>
</div>
public/app/plugins/panel/heatmap/color_legend.ts
+1 -2
View File
@@ -173,8 +173,7 @@ function drawLegendValues(elem, colorScale, rangeFrom, rangeTo, maxValue, minVal
const posY = getSvgElemHeight(legendElem) + LEGEND_VALUE_MARGIN;
const posX = getSvgElemX(colorRect);
d3
.select(legendElem.get(0))
d3.select(legendElem.get(0))
.append('g')
.attr('class', 'axis')
.attr('transform', 'translate(' + posX + ',' + posY + ')')
public/app/plugins/panel/heatmap/heatmap_tooltip.ts
+2 -2
View File
@@ -205,10 +205,10 @@ export class HeatmapTooltip {
let barWidth;
if (this.panel.yAxis.logBase === 1) {
barWidth = Math.floor(HISTOGRAM_WIDTH / (max - min) * yBucketSize * 0.9);
barWidth = Math.floor((HISTOGRAM_WIDTH / (max - min)) * yBucketSize * 0.9);
} else {
const barNumberFactor = yBucketSize ? yBucketSize : 1;
barWidth = Math.floor(HISTOGRAM_WIDTH / ticks / barNumberFactor * 0.9);
barWidth = Math.floor((HISTOGRAM_WIDTH / ticks / barNumberFactor) * 0.9);
}
barWidth = Math.max(barWidth, 1);
public/app/plugins/panel/heatmap/rendering.ts
+1 -2
View File
@@ -570,8 +570,7 @@ export class HeatmapRenderer {
}
resetCardHighLight(event) {
d3
.select(event.target)
d3.select(event.target)
.style('fill', this.tooltip.originalFillColor)
.style('stroke', this.tooltip.originalFillColor)
.style('stroke-width', 0);
public/sass/_grafana.scss
+1
View File
@@ -115,5 +115,6 @@
@import 'pages/styleguide';
@import 'pages/errorpage';
@import 'pages/explore';
@import 'pages/plugins';
@import 'old_responsive';
@import 'components/view_states.scss';
public/sass/_variables.scss
+69 -23
View File
@@ -14,12 +14,31 @@ $spacer: 1rem !default;
$spacer-x: $spacer !default;
$spacer-y: $spacer !default;
$spacers: (
0: (x: 0, y: 0),
1: (x: $spacer-x, y: $spacer-y),
2: (x: ($spacer-x * 1.5), y: ($spacer-y * 1.5)),
3: (x: ($spacer-x * 3), y: ($spacer-y * 3))
)
!default;
0: (
x: 0,
y: 0,
),
1: (
x: $spacer-x,
y: $spacer-y,
),
2: (
x: (
$spacer-x * 1.5,
),
y: (
$spacer-y * 1.5,
),
),
3: (
x: (
$spacer-x * 3,
),
y: (
$spacer-y * 3,
),
),
) !default;
$border-width: 1px !default;
// Grid breakpoints
@@ -27,13 +46,24 @@ $border-width: 1px !default;
// Define the minimum and maximum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.
$grid-breakpoints: (xs: 0, sm: 544px, md: 768px, lg: 992px, xl: 1200px) !default;
$grid-breakpoints: (
xs: 0,
sm: 544px,
md: 768px,
lg: 992px,
xl: 1200px,
) !default;
// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.
$container-max-widths: (sm: 576px, md: 720px, lg: 940px, xl: 1080px) !default;
$container-max-widths: (
sm: 576px,
md: 720px,
lg: 940px,
xl: 1080px,
) !default;
// Grid columns
//
@@ -100,7 +130,7 @@ $line-height-sm: 1.5 !default;
$border-radius: 3px !default;
$border-radius-lg: 5px !default;
$border-radius-sm: 2px!default;
$border-radius-sm: 2px !default;
// Page
@@ -143,12 +173,9 @@ $gf-form-input-height: 35px;
$cursor-disabled: not-allowed !default;
// Form validation icons
$form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E")
!default;
$form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23f0ad4e' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E")
!default;
$form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E")
!default;
$form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") !default;
$form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23f0ad4e' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") !default;
$form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") !default;
// Z-index master list
// -------------------------
@@ -191,19 +218,38 @@ $panel-margin: 10px;
$dashboard-padding: $panel-margin * 2;
$panel-horizontal-padding: 10;
$panel-vertical-padding: 5;
$panel-padding: 0px $panel-horizontal-padding+0px $panel-vertical-padding+0px $panel-horizontal-padding+0px;
$panel-padding: 0px $panel-horizontal-padding + 0px $panel-vertical-padding + 0px $panel-horizontal-padding + 0px;
// tabs
$tabs-padding: 10px 15px 9px;
$external-services: (
github: (bgColor: #464646, borderColor: #393939, icon: ''),
gitlab: (bgColor: #fc6d26, borderColor: #e24329, icon: ''),
google: (bgColor: #e84d3c, borderColor: #b83e31, icon: ''),
grafanacom: (bgColor: #262628, borderColor: #393939, icon: ''),
oauth: (bgColor: #262628, borderColor: #393939, icon: '')
)
!default;
github: (
bgColor: #464646,
borderColor: #393939,
icon: '',
),
gitlab: (
bgColor: #fc6d26,
borderColor: #e24329,
icon: '',
),
google: (
bgColor: #e84d3c,
borderColor: #b83e31,
icon: '',
),
grafanacom: (
bgColor: #262628,
borderColor: #393939,
icon: '',
),
oauth: (
bgColor: #262628,
borderColor: #393939,
icon: '',
),
) !default;
:export {
panelhorizontalpadding: $panel-horizontal-padding;
public/sass/base/_forms.scss
+1 -1
View File
@@ -31,7 +31,7 @@ input,
button,
select,
textarea {
@include font-shorthand($font-size-base,normal,$line-height-base); // Set size, weight, line-height here
@include font-shorthand($font-size-base, normal, $line-height-base); // Set size, weight, line-height here
}
input,
button,
public/sass/base/_type.scss
+2 -2
View File
@@ -357,14 +357,14 @@ a.external-link {
ul,
ol {
padding-left: $spacer*1.5;
padding-left: $spacer * 1.5;
margin-bottom: $spacer;
}
table {
td,
th {
padding: $spacer*0.5 $spacer;
padding: $spacer * 0.5 $spacer;
}
th {
font-weight: $font-weight-semi-bold;
public/sass/components/_cards.scss
+1 -1
View File
@@ -35,7 +35,7 @@
}
.card-section {
margin-bottom: $spacer*2;
margin-bottom: $spacer * 2;
}
.card-list {
public/sass/components/_dashboard_settings.scss
+2 -2
View File
@@ -53,7 +53,7 @@
.dashboard-settings__header {
font-size: $font-size-h3;
margin-bottom: $spacer*2;
margin-bottom: $spacer * 2;
}
.dashboard-settings__subheader {
@@ -89,7 +89,7 @@
flex-direction: column;
height: 100%;
flex-grow: 1;
margin: $spacer*3 $spacer*2 0 0;
margin: $spacer * 3 $spacer * 2 0 0;
button {
margin-bottom: 10px;
public/sass/components/_empty_list_cta.scss
+3 -3
View File
@@ -1,7 +1,7 @@
.empty-list-cta {
background-color: $empty-list-cta-bg;
text-align: center;
padding: $spacer*2;
padding: $spacer * 2;
border-radius: $border-radius;
.grafana-info-box {
@@ -11,12 +11,12 @@
}
.empty-list-cta__title {
padding-bottom: $spacer*3;
padding-bottom: $spacer * 3;
font-style: italic;
}
.empty-list-cta__button {
margin-bottom: $spacer*3;
margin-bottom: $spacer * 3;
}
.empty-list-cta__pro-tip-link {
public/sass/components/_gf-form.scss
+4 -4
View File
@@ -226,7 +226,7 @@ $input-border: 1px solid $input-border-color;
}
&--dropdown {
padding-right: $input-padding-x*2;
padding-right: $input-padding-x * 2;
&::after {
position: absolute;
@@ -276,7 +276,7 @@ $input-border: 1px solid $input-border-color;
& + .gf-form-input {
position: relative;
z-index: 2;
padding-left: $input-padding-x*3;
padding-left: $input-padding-x * 3;
background-color: transparent;
option {
@@ -293,7 +293,7 @@ $input-border: 1px solid $input-border-color;
select.gf-form-input {
text-indent: 0.01px;
text-overflow: '';
padding-right: $input-padding-x*3;
padding-right: $input-padding-x * 3;
appearance: none;
&:-moz-focusring {
@@ -321,7 +321,7 @@ $input-border: 1px solid $input-border-color;
&--has-help-icon {
&::after {
right: $input-padding-x*3;
right: $input-padding-x * 3;
}
}
}
public/sass/components/_modals.scss
+4 -4
View File
@@ -24,7 +24,7 @@
z-index: $zindex-modal;
width: 100%;
background: $page-bg;
@include box-shadow(0 3px 7px rgba(0,0,0,0.3));
@include box-shadow(0 3px 7px rgba(0, 0, 0, 0.3));
@include background-clip(padding-box);
outline: none;
@@ -47,7 +47,7 @@
font-size: $font-size-h3;
float: left;
padding-top: $spacer * 0.75;
margin: 0 $spacer*3 0 $spacer*1.5;
margin: 0 $spacer * 3 0 $spacer * 1.5;
.gicon {
position: relative;
@@ -66,7 +66,7 @@
}
.modal-content {
padding: $spacer*2;
padding: $spacer * 2;
&--has-scroll {
max-height: calc(100vh - 400px);
@@ -105,7 +105,7 @@
.confirm-modal-text {
font-size: $font-size-h4;
color: $link-color;
margin-bottom: $spacer*2;
margin-bottom: $spacer * 2;
padding-top: $spacer;
}
public/sass/components/_panel_editor.scss
+1 -1
View File
@@ -21,7 +21,7 @@
}
.panel-editor-container__editor {
margin-top: $panel-margin*2;
margin-top: $panel-margin * 2;
display: flex;
flex-direction: row;
flex: 1 1 0;
public/sass/components/_panel_gettingstarted.scss
+1 -1
View File
@@ -57,7 +57,7 @@ $path-position: $marker-size-half - ($path-height / 2);
z-index: 1;
top: $path-position;
bottom: $path-position;
right: - $marker-size-half;
right: -$marker-size-half;
width: 100%;
height: $path-height;
border-top: 2px solid $progress-color-grey-light;
public/sass/components/_panel_logs.scss
+2 -2
View File
@@ -6,7 +6,7 @@ $column-horizontal-spacing: 10px;
padding: $panel-padding;
padding-top: 10px;
border-radius: $border-radius;
margin: 2*$panel-margin 0 $panel-margin;
margin: 2 * $panel-margin 0 $panel-margin;
border: $panel-border;
flex-direction: column;
}
@@ -18,7 +18,7 @@ $column-horizontal-spacing: 10px;
flex-wrap: wrap;
> * {
margin-right: $spacer*2;
margin-right: $spacer * 2;
}
}
public/sass/components/_panel_text.scss
-1
View File
@@ -1 +0,0 @@
public/sass/components/_query_editor.scss
-1
View File
@@ -50,7 +50,6 @@ input[type='text'].tight-form-func-param {
}
.tight-form-func-controls {
display: none;
text-align: center;
.fa-arrow-left {

Some files were not shown because too many files have changed in this diff Show More