mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Merge pull request #14476 from grafana/metrics-tab-changes-2
Metrics tab changes 2
This commit is contained in:
Torkel Ödegaard
GitHub
commit
a9e98feea0
@ -8,15 +8,16 @@ interface ExtendedOptionProps extends OptionProps<any> {
|
||||
}
|
||||
|
||||
export const Option = (props: ExtendedOptionProps) => {
|
||||
const { children, isSelected, data, className } = props;
|
||||
const { children, isSelected, data } = props;
|
||||
|
||||
return (
|
||||
<components.Option {...props}>
|
||||
<div className={`description-picker-option__button btn btn-link ${className}`}>
|
||||
{isSelected && <i className="fa fa-check pull-right" aria-hidden="true" />}
|
||||
<div className="gf-form">{children}</div>
|
||||
<div className="gf-form">
|
||||
<div className="muted width-17">{data.description}</div>
|
||||
<div className="gf-form-select-box__desc-option">
|
||||
<div className="gf-form-select-box__desc-option__body">
|
||||
<div>{children}</div>
|
||||
{data.description && <div className="gf-form-select-box__desc-option__desc">{data.description}</div>}
|
||||
</div>
|
||||
{isSelected && <i className="fa fa-check" aria-hidden="true" />}
|
||||
</div>
|
||||
</components.Option>
|
||||
);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import PickerOption from './PickerOption';
|
||||
|
||||
@ -24,7 +24,7 @@ const model = {
|
||||
children: 'Model title',
|
||||
data: {
|
||||
title: 'Model title',
|
||||
avatarUrl: 'url/to/avatar',
|
||||
imgUrl: 'url/to/avatar',
|
||||
label: 'User picker label',
|
||||
},
|
||||
className: 'class-for-user-picker',
|
||||
|
||||
@ -4,19 +4,41 @@ import { OptionProps } from 'react-select/lib/components/Option';
|
||||
|
||||
// https://github.com/JedWatson/react-select/issues/3038
|
||||
interface ExtendedOptionProps extends OptionProps<any> {
|
||||
data: any;
|
||||
data: {
|
||||
description?: string;
|
||||
imgUrl?: string;
|
||||
};
|
||||
}
|
||||
|
||||
export const PickerOption = (props: ExtendedOptionProps) => {
|
||||
const { children, data, className } = props;
|
||||
export const Option = (props: ExtendedOptionProps) => {
|
||||
const { children, isSelected, data } = props;
|
||||
|
||||
return (
|
||||
<components.Option {...props}>
|
||||
<div className={`description-picker-option__button btn btn-link ${className}`}>
|
||||
{data.avatarUrl && <img src={data.avatarUrl} alt={data.label} className="user-picker-option__avatar" />}
|
||||
{children}
|
||||
<div className="gf-form-select-box__desc-option">
|
||||
{data.imgUrl && <img className="gf-form-select-box__desc-option__img" src={data.imgUrl} />}
|
||||
<div className="gf-form-select-box__desc-option__body">
|
||||
<div>{children}</div>
|
||||
{data.description && <div className="gf-form-select-box__desc-option__desc">{data.description}</div>}
|
||||
</div>
|
||||
{isSelected && <i className="fa fa-check" aria-hidden="true" />}
|
||||
</div>
|
||||
</components.Option>
|
||||
);
|
||||
};
|
||||
|
||||
export default PickerOption;
|
||||
// was not able to type this without typescript error
|
||||
export const SingleValue = props => {
|
||||
const { children, data } = props;
|
||||
|
||||
return (
|
||||
<components.SingleValue {...props}>
|
||||
<div className="gf-form-select-box__img-value">
|
||||
{data.imgUrl && <img className="gf-form-select-box__desc-option__img" src={data.imgUrl} />}
|
||||
{children}
|
||||
</div>
|
||||
</components.SingleValue>
|
||||
);
|
||||
};
|
||||
|
||||
export default Option;
|
||||
|
||||
60
public/app/core/components/Picker/Select.tsx
Normal file
60
public/app/core/components/Picker/Select.tsx
Normal file
@ -0,0 +1,60 @@
|
||||
// import React, { PureComponent } from 'react';
|
||||
// import Select as ReactSelect from 'react-select';
|
||||
// import DescriptionOption from './DescriptionOption';
|
||||
// import IndicatorsContainer from './IndicatorsContainer';
|
||||
// import ResetStyles from './ResetStyles';
|
||||
//
|
||||
// export interface OptionType {
|
||||
// label: string;
|
||||
// value: string;
|
||||
// }
|
||||
//
|
||||
// interface Props {
|
||||
// defaultValue?: any;
|
||||
// getOptionLabel: (item: T) => string;
|
||||
// getOptionValue: (item: T) => string;
|
||||
// onChange: (item: T) => {} | void;
|
||||
// options: T[];
|
||||
// placeholder?: string;
|
||||
// width?: number;
|
||||
// value: T;
|
||||
// className?: string;
|
||||
// }
|
||||
//
|
||||
// export class Select<T> extends PureComponent<Props<T>> {
|
||||
// static defaultProps = {
|
||||
// width: null,
|
||||
// className: '',
|
||||
// }
|
||||
//
|
||||
// render() {
|
||||
// const { defaultValue, getOptionLabel, getOptionValue, onSelected, options, placeholder, width, value, className } = this.props;
|
||||
// let widthClass = '';
|
||||
// if (width) {
|
||||
// widthClass = 'width-'+width;
|
||||
// }
|
||||
//
|
||||
// return (
|
||||
// <ReactSelect
|
||||
// classNamePrefix="gf-form-select-box"
|
||||
// className={`gf-form-input gf-form-input--form-dropdown ${widthClass} ${className}`}
|
||||
// components={{
|
||||
// Option: DescriptionOption,
|
||||
// IndicatorsContainer,
|
||||
// }}
|
||||
// defaultValue={defaultValue}
|
||||
// value={value}
|
||||
// getOptionLabel={getOptionLabel}
|
||||
// getOptionValue={getOptionValue}
|
||||
// menuShouldScrollIntoView={false}
|
||||
// isSearchable={false}
|
||||
// onChange={onSelected}
|
||||
// options={options}
|
||||
// placeholder={placeholder || 'Choose'}
|
||||
// styles={ResetStyles}
|
||||
// />
|
||||
// );
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// export default Select;
|
||||
@ -1,6 +1,7 @@
|
||||
import React, { SFC } from 'react';
|
||||
import Select from 'react-select';
|
||||
import DescriptionOption from './DescriptionOption';
|
||||
import IndicatorsContainer from './IndicatorsContainer';
|
||||
import ResetStyles from './ResetStyles';
|
||||
|
||||
interface Props {
|
||||
@ -32,6 +33,7 @@ const SimplePicker: SFC<Props> = ({
|
||||
className={`${width ? 'width-' + width : ''} gf-form-input gf-form-input--form-dropdown ${className || ''}`}
|
||||
components={{
|
||||
Option: DescriptionOption,
|
||||
IndicatorsContainer,
|
||||
}}
|
||||
defaultValue={defaultValue}
|
||||
value={value}
|
||||
|
||||
@ -47,7 +47,7 @@ export class TeamPicker extends Component<Props, State> {
|
||||
id: team.id,
|
||||
label: team.name,
|
||||
name: team.name,
|
||||
avatarUrl: team.avatarUrl,
|
||||
imgUrl: team.avatarUrl,
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
@ -41,7 +41,7 @@ export class UserPicker extends Component<Props, State> {
|
||||
return result.map(user => ({
|
||||
id: user.userId,
|
||||
label: user.login === user.email ? user.login : `${user.login} - ${user.email}`,
|
||||
avatarUrl: user.avatarUrl,
|
||||
imgUrl: user.avatarUrl,
|
||||
login: user.login,
|
||||
}));
|
||||
})
|
||||
|
||||
@ -3,15 +3,19 @@
|
||||
exports[`PickerOption renders correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
className="description-picker-option__button btn btn-link class-for-user-picker"
|
||||
className="gf-form-select-box__desc-option"
|
||||
>
|
||||
<img
|
||||
alt="User picker label"
|
||||
className="user-picker-option__avatar"
|
||||
className="gf-form-select-box__desc-option__img"
|
||||
src="url/to/avatar"
|
||||
/>
|
||||
Model title
|
||||
<div
|
||||
className="gf-form-select-box__desc-option__body"
|
||||
>
|
||||
<div>
|
||||
Model title
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -141,9 +141,10 @@ export class DashboardMigrator {
|
||||
|
||||
// ensure query refIds
|
||||
panelUpgrades.push(panel => {
|
||||
console.log('asdasd', panel);
|
||||
_.each(panel.targets, target => {
|
||||
if (!target.refId) {
|
||||
target.refId = this.dashboard.getNextQueryLetter(panel);
|
||||
target.refId = panel.getNextQueryLetter && panel.getNextQueryLetter();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@ -806,16 +806,6 @@ export class DashboardModel {
|
||||
return this.timezone === 'browser' ? moment(date).fromNow() : moment.utc(date).fromNow();
|
||||
}
|
||||
|
||||
getNextQueryLetter(panel) {
|
||||
const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
|
||||
|
||||
return _.find(letters, refId => {
|
||||
return _.every(panel.targets, other => {
|
||||
return other.refId !== refId;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
isTimezoneUtc() {
|
||||
return this.getTimezone() === 'utc';
|
||||
}
|
||||
|
||||
@ -1,115 +1,81 @@
|
||||
// Libraries
|
||||
import React, { PureComponent } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import _ from 'lodash';
|
||||
import KeyboardNavigation, { KeyboardNavigationProps } from './KeyboardNavigation';
|
||||
|
||||
// Components
|
||||
import ResetStyles from 'app/core/components/Picker/ResetStyles';
|
||||
import { Option, SingleValue } from 'app/core/components/Picker/PickerOption';
|
||||
import IndicatorsContainer from 'app/core/components/Picker/IndicatorsContainer';
|
||||
import Select from 'react-select';
|
||||
|
||||
// Types
|
||||
import { DataSourceSelectItem } from 'app/types';
|
||||
|
||||
export interface Props {
|
||||
onChangeDataSource: (ds: DataSourceSelectItem) => void;
|
||||
datasources: DataSourceSelectItem[];
|
||||
current: DataSourceSelectItem;
|
||||
onBlur?: () => void;
|
||||
autoFocus?: boolean;
|
||||
}
|
||||
|
||||
interface State {
|
||||
searchQuery: string;
|
||||
}
|
||||
export class DataSourcePicker extends PureComponent<Props> {
|
||||
static defaultProps = {
|
||||
autoFocus: false,
|
||||
};
|
||||
|
||||
export class DataSourcePicker extends PureComponent<Props, State> {
|
||||
searchInput: HTMLElement;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
searchQuery: '',
|
||||
};
|
||||
}
|
||||
|
||||
getDataSources() {
|
||||
const { searchQuery } = this.state;
|
||||
const regex = new RegExp(searchQuery, 'i');
|
||||
const { datasources } = this.props;
|
||||
|
||||
const filtered = datasources.filter(item => {
|
||||
return regex.test(item.name) || regex.test(item.meta.name);
|
||||
});
|
||||
|
||||
return filtered;
|
||||
}
|
||||
|
||||
get maxSelectedIndex() {
|
||||
const filtered = this.getDataSources();
|
||||
return filtered.length - 1;
|
||||
}
|
||||
|
||||
renderDataSource = (ds: DataSourceSelectItem, index: number, keyNavProps: KeyboardNavigationProps) => {
|
||||
const { onChangeDataSource } = this.props;
|
||||
const { selected, onMouseEnter } = keyNavProps;
|
||||
const onClick = () => onChangeDataSource(ds);
|
||||
const isSelected = selected === index;
|
||||
const cssClass = classNames({
|
||||
'ds-picker-list__item': true,
|
||||
'ds-picker-list__item--selected': isSelected,
|
||||
});
|
||||
return (
|
||||
<div key={index} className={cssClass} title={ds.name} onClick={onClick} onMouseEnter={() => onMouseEnter(index)}>
|
||||
<img className="ds-picker-list__img" src={ds.meta.info.logos.small} />
|
||||
<div className="ds-picker-list__name">{ds.name}</div>
|
||||
</div>
|
||||
);
|
||||
onChange = item => {
|
||||
const ds = this.props.datasources.find(ds => ds.name === item.value);
|
||||
this.props.onChangeDataSource(ds);
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
setTimeout(() => {
|
||||
this.searchInput.focus();
|
||||
}, 300);
|
||||
}
|
||||
|
||||
onSearchQueryChange = evt => {
|
||||
const value = evt.target.value;
|
||||
this.setState(prevState => ({
|
||||
...prevState,
|
||||
searchQuery: value,
|
||||
}));
|
||||
};
|
||||
|
||||
renderFilters({ onKeyDown, selected }: KeyboardNavigationProps) {
|
||||
const { searchQuery } = this.state;
|
||||
return (
|
||||
<label className="gf-form--has-input-icon">
|
||||
<input
|
||||
type="text"
|
||||
className="gf-form-input width-13"
|
||||
placeholder=""
|
||||
ref={elem => (this.searchInput = elem)}
|
||||
onChange={this.onSearchQueryChange}
|
||||
value={searchQuery}
|
||||
onKeyDown={evt => {
|
||||
onKeyDown(evt, this.maxSelectedIndex, () => {
|
||||
const { onChangeDataSource } = this.props;
|
||||
const ds = this.getDataSources()[selected];
|
||||
onChangeDataSource(ds);
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<i className="gf-form-input-icon fa fa-search" />
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { datasources, current, autoFocus, onBlur } = this.props;
|
||||
|
||||
const options = datasources.map(ds => ({
|
||||
value: ds.name,
|
||||
label: ds.name,
|
||||
imgUrl: ds.meta.info.logos.small,
|
||||
}));
|
||||
|
||||
const value = current && {
|
||||
label: current.name,
|
||||
value: current.name,
|
||||
imgUrl: current.meta.info.logos.small,
|
||||
};
|
||||
|
||||
return (
|
||||
<KeyboardNavigation
|
||||
render={(keyNavProps: KeyboardNavigationProps) => (
|
||||
<>
|
||||
<div className="cta-form__bar">
|
||||
{this.renderFilters(keyNavProps)}
|
||||
<div className="gf-form--grow" />
|
||||
</div>
|
||||
<div className="ds-picker-list">
|
||||
{this.getDataSources().map((ds, index) => this.renderDataSource(ds, index, keyNavProps))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
<div className="gf-form-inline">
|
||||
<Select
|
||||
classNamePrefix={`gf-form-select-box`}
|
||||
isMulti={false}
|
||||
menuShouldScrollIntoView={false}
|
||||
isClearable={false}
|
||||
className="gf-form-input gf-form-input--form-dropdown ds-picker"
|
||||
onChange={item => this.onChange(item)}
|
||||
options={options}
|
||||
styles={ResetStyles}
|
||||
autoFocus={autoFocus}
|
||||
onBlur={onBlur}
|
||||
openMenuOnFocus={true}
|
||||
maxMenuHeight={500}
|
||||
placeholder="Select datasource"
|
||||
loadingMessage={() => 'Loading datasources...'}
|
||||
noOptionsMessage={() => 'No datasources found'}
|
||||
value={value}
|
||||
components={{
|
||||
Option,
|
||||
SingleValue,
|
||||
IndicatorsContainer,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,8 +5,8 @@ import { FadeIn } from 'app/core/components/Animations/FadeIn';
|
||||
interface Props {
|
||||
children: JSX.Element;
|
||||
heading: string;
|
||||
main?: EditorToolBarView;
|
||||
toolbarItems: EditorToolBarView[];
|
||||
renderToolbar?: () => JSX.Element;
|
||||
toolbarItems?: EditorToolBarView[];
|
||||
}
|
||||
|
||||
export interface EditorToolBarView {
|
||||
@ -15,7 +15,7 @@ export interface EditorToolBarView {
|
||||
icon?: string;
|
||||
disabled?: boolean;
|
||||
onClick?: () => void;
|
||||
render: (closeFunction: any) => JSX.Element | JSX.Element[];
|
||||
render: (closeFunction?: any) => JSX.Element | JSX.Element[];
|
||||
}
|
||||
|
||||
interface State {
|
||||
@ -25,6 +25,10 @@ interface State {
|
||||
}
|
||||
|
||||
export class EditorTabBody extends PureComponent<Props, State> {
|
||||
static defaultProps = {
|
||||
toolbarItems: [],
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
@ -65,16 +69,6 @@ export class EditorTabBody extends PureComponent<Props, State> {
|
||||
return state;
|
||||
}
|
||||
|
||||
renderMainSelection(view: EditorToolBarView) {
|
||||
return (
|
||||
<div className="toolbar__main" onClick={() => this.onToggleToolBarView(view)} key={view.title + view.icon}>
|
||||
<img className="toolbar__main-image" src={view.imgSrc} />
|
||||
<div className="toolbar__main-name">{view.title}</div>
|
||||
<i className="fa fa-caret-down" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderButton(view: EditorToolBarView) {
|
||||
const onClick = () => {
|
||||
if (view.onClick) {
|
||||
@ -104,16 +98,20 @@ export class EditorTabBody extends PureComponent<Props, State> {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { children, toolbarItems, main, heading } = this.props;
|
||||
const { children, renderToolbar, heading, toolbarItems } = this.props;
|
||||
const { openView, fadeIn, isOpen } = this.state;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="toolbar">
|
||||
<div className="toolbar__heading">{heading}</div>
|
||||
{main && this.renderMainSelection(main)}
|
||||
<div className="gf-form--grow" />
|
||||
{toolbarItems.map(item => this.renderButton(item))}
|
||||
{renderToolbar && renderToolbar()}
|
||||
{toolbarItems.length > 0 && (
|
||||
<>
|
||||
<div className="gf-form--grow" />
|
||||
{toolbarItems.map(item => this.renderButton(item))}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="panel-editor__scroll">
|
||||
<CustomScrollbar autoHide={false}>
|
||||
|
||||
@ -1,36 +1,39 @@
|
||||
// Libraries
|
||||
import React, { SFC, PureComponent } from 'react';
|
||||
import Remarkable from 'remarkable';
|
||||
import _ from 'lodash';
|
||||
|
||||
// Components
|
||||
import DataSourceOption from './DataSourceOption';
|
||||
import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
|
||||
import { EditorTabBody } from './EditorTabBody';
|
||||
import { DataSourcePicker } from './DataSourcePicker';
|
||||
import { PanelModel } from '../panel_model';
|
||||
import { DashboardModel } from '../dashboard_model';
|
||||
import './../../panel/metrics_tab';
|
||||
import config from 'app/core/config';
|
||||
import { QueryInspector } from './QueryInspector';
|
||||
import { TimeRangeOptions } from './TimeRangeOptions';
|
||||
import './../../panel/metrics_tab';
|
||||
import { AngularQueryComponentScope } from 'app/features/panel/metrics_tab';
|
||||
|
||||
// Services
|
||||
import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
|
||||
import { getBackendSrv, BackendSrv } from 'app/core/services/backend_srv';
|
||||
import { DataSourceSelectItem } from 'app/types';
|
||||
import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
|
||||
import config from 'app/core/config';
|
||||
|
||||
import Remarkable from 'remarkable';
|
||||
// Types
|
||||
import { PanelModel } from '../panel_model';
|
||||
import { DashboardModel } from '../dashboard_model';
|
||||
import { DataSourceSelectItem, DataQuery } from 'app/types';
|
||||
|
||||
interface Props {
|
||||
panel: PanelModel;
|
||||
dashboard: DashboardModel;
|
||||
}
|
||||
|
||||
interface Help {
|
||||
isLoading: boolean;
|
||||
helpHtml: any;
|
||||
}
|
||||
|
||||
interface State {
|
||||
currentDatasource: DataSourceSelectItem;
|
||||
help: Help;
|
||||
hideTimeOverride: boolean;
|
||||
currentDS: DataSourceSelectItem;
|
||||
helpContent: JSX.Element;
|
||||
isLoadingHelp: boolean;
|
||||
isPickerOpen: boolean;
|
||||
isAddingMixed: boolean;
|
||||
}
|
||||
|
||||
interface LoadingPlaceholderProps {
|
||||
@ -40,7 +43,7 @@ interface LoadingPlaceholderProps {
|
||||
const LoadingPlaceholder: SFC<LoadingPlaceholderProps> = ({ text }) => <h2>{text}</h2>;
|
||||
|
||||
export class QueriesTab extends PureComponent<Props, State> {
|
||||
element: any;
|
||||
element: HTMLElement;
|
||||
component: AngularComponent;
|
||||
datasources: DataSourceSelectItem[] = getDatasourceSrv().getMetricSources();
|
||||
backendSrv: BackendSrv = getBackendSrv();
|
||||
@ -50,12 +53,26 @@ export class QueriesTab extends PureComponent<Props, State> {
|
||||
const { panel } = props;
|
||||
|
||||
this.state = {
|
||||
currentDatasource: this.datasources.find(datasource => datasource.value === panel.datasource),
|
||||
help: {
|
||||
isLoading: false,
|
||||
helpHtml: null,
|
||||
},
|
||||
hideTimeOverride: false,
|
||||
currentDS: this.datasources.find(datasource => datasource.value === panel.datasource),
|
||||
isLoadingHelp: false,
|
||||
helpContent: null,
|
||||
isPickerOpen: false,
|
||||
isAddingMixed: false,
|
||||
};
|
||||
}
|
||||
|
||||
getAngularQueryComponentScope(): AngularQueryComponentScope {
|
||||
const { panel, dashboard } = this.props;
|
||||
|
||||
return {
|
||||
panel: panel,
|
||||
dashboard: dashboard,
|
||||
refresh: () => panel.refresh(),
|
||||
render: () => panel.render,
|
||||
addQuery: this.onAddQuery,
|
||||
moveQuery: this.onMoveQuery,
|
||||
removeQuery: this.onRemoveQuery,
|
||||
events: panel.events,
|
||||
};
|
||||
}
|
||||
|
||||
@ -64,15 +81,10 @@ export class QueriesTab extends PureComponent<Props, State> {
|
||||
return;
|
||||
}
|
||||
|
||||
const { panel, dashboard } = this.props;
|
||||
const loader = getAngularLoader();
|
||||
const template = '<metrics-tab />';
|
||||
const scopeProps = {
|
||||
ctrl: {
|
||||
panel: panel,
|
||||
dashboard: dashboard,
|
||||
refresh: () => panel.refresh(),
|
||||
},
|
||||
ctrl: this.getAngularQueryComponentScope(),
|
||||
};
|
||||
|
||||
this.component = loader.load(this.element, scopeProps, template);
|
||||
@ -86,7 +98,8 @@ export class QueriesTab extends PureComponent<Props, State> {
|
||||
|
||||
onChangeDataSource = datasource => {
|
||||
const { panel } = this.props;
|
||||
const { currentDatasource } = this.state;
|
||||
const { currentDS } = this.state;
|
||||
|
||||
// switching to mixed
|
||||
if (datasource.meta.mixed) {
|
||||
panel.targets.forEach(target => {
|
||||
@ -95,62 +108,58 @@ export class QueriesTab extends PureComponent<Props, State> {
|
||||
target.datasource = config.defaultDatasource;
|
||||
}
|
||||
});
|
||||
} else if (currentDatasource && currentDatasource.meta.mixed) {
|
||||
panel.targets.forEach(target => {
|
||||
delete target.datasource;
|
||||
});
|
||||
} else if (currentDS) {
|
||||
// if switching from mixed
|
||||
if (currentDS.meta.mixed) {
|
||||
for (const target of panel.targets) {
|
||||
delete target.datasource;
|
||||
}
|
||||
} else if (currentDS.meta.id !== datasource.meta.id) {
|
||||
// we are changing data source type, clear queries
|
||||
panel.targets = [{ refId: 'A' }];
|
||||
}
|
||||
}
|
||||
|
||||
panel.datasource = datasource.value;
|
||||
panel.refresh();
|
||||
|
||||
this.setState(prevState => ({
|
||||
...prevState,
|
||||
currentDatasource: datasource,
|
||||
}));
|
||||
this.setState({
|
||||
currentDS: datasource,
|
||||
});
|
||||
};
|
||||
|
||||
loadHelp = () => {
|
||||
const { currentDatasource } = this.state;
|
||||
const hasHelp = currentDatasource.meta.hasQueryHelp;
|
||||
const { currentDS } = this.state;
|
||||
const hasHelp = currentDS.meta.hasQueryHelp;
|
||||
|
||||
if (hasHelp) {
|
||||
this.setState(prevState => ({
|
||||
...prevState,
|
||||
help: {
|
||||
helpHtml: <h2>Loading help...</h2>,
|
||||
isLoading: true,
|
||||
},
|
||||
}));
|
||||
this.setState({
|
||||
helpContent: <h3>Loading help...</h3>,
|
||||
isLoadingHelp: true,
|
||||
});
|
||||
|
||||
this.backendSrv
|
||||
.get(`/api/plugins/${currentDatasource.meta.id}/markdown/query_help`)
|
||||
.get(`/api/plugins/${currentDS.meta.id}/markdown/query_help`)
|
||||
.then(res => {
|
||||
const md = new Remarkable();
|
||||
const helpHtml = md.render(res); // TODO: Clean out dangerous code? Previous: this.helpHtml = this.$sce.trustAsHtml(md.render(res));
|
||||
this.setState(prevState => ({
|
||||
...prevState,
|
||||
help: {
|
||||
helpHtml: <div className="markdown-html" dangerouslySetInnerHTML={{ __html: helpHtml }} />,
|
||||
isLoading: false,
|
||||
},
|
||||
}));
|
||||
const helpHtml = md.render(res);
|
||||
this.setState({
|
||||
helpContent: <div className="markdown-html" dangerouslySetInnerHTML={{ __html: helpHtml }} />,
|
||||
isLoadingHelp: false,
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.setState(prevState => ({
|
||||
...prevState,
|
||||
help: {
|
||||
helpHtml: 'Error occured when loading help',
|
||||
isLoading: false,
|
||||
},
|
||||
}));
|
||||
this.setState({
|
||||
helpContent: <h3>'Error occured when loading help'</h3>,
|
||||
isLoadingHelp: false,
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
renderOptions = close => {
|
||||
const { currentDatasource } = this.state;
|
||||
const { queryOptions } = currentDatasource.meta;
|
||||
const { currentDS } = this.state;
|
||||
const { queryOptions } = currentDS.meta;
|
||||
const { panel } = this.props;
|
||||
|
||||
const onChangeFn = (panelKey: string) => {
|
||||
@ -223,26 +232,83 @@ export class QueriesTab extends PureComponent<Props, State> {
|
||||
};
|
||||
|
||||
renderHelp = () => {
|
||||
const { helpHtml, isLoading } = this.state.help;
|
||||
return isLoading ? <LoadingPlaceholder text="Loading help..." /> : helpHtml;
|
||||
const { helpContent, isLoadingHelp } = this.state;
|
||||
return isLoadingHelp ? <LoadingPlaceholder text="Loading help..." /> : helpContent;
|
||||
};
|
||||
|
||||
onAddQuery = (query?: Partial<DataQuery>) => {
|
||||
this.props.panel.addQuery(query);
|
||||
this.forceUpdate();
|
||||
};
|
||||
|
||||
onAddQueryClick = () => {
|
||||
if (this.state.currentDS.meta.mixed) {
|
||||
this.setState({ isAddingMixed: true });
|
||||
return;
|
||||
}
|
||||
|
||||
this.props.panel.addQuery();
|
||||
this.component.digest();
|
||||
this.forceUpdate();
|
||||
};
|
||||
|
||||
onRemoveQuery = (query: DataQuery) => {
|
||||
const { panel } = this.props;
|
||||
|
||||
const index = _.indexOf(panel.targets, query);
|
||||
panel.targets.splice(index, 1);
|
||||
panel.refresh();
|
||||
|
||||
this.forceUpdate();
|
||||
};
|
||||
|
||||
onMoveQuery = (query: DataQuery, direction: number) => {
|
||||
const { panel } = this.props;
|
||||
|
||||
const index = _.indexOf(panel.targets, query);
|
||||
_.move(panel.targets, index, index + direction);
|
||||
|
||||
this.forceUpdate();
|
||||
};
|
||||
|
||||
renderToolbar = () => {
|
||||
const { currentDS } = this.state;
|
||||
|
||||
return (
|
||||
<DataSourcePicker
|
||||
datasources={this.datasources}
|
||||
onChangeDataSource={this.onChangeDataSource}
|
||||
current={currentDS}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
renderMixedPicker = () => {
|
||||
return (
|
||||
<DataSourcePicker
|
||||
datasources={this.datasources}
|
||||
onChangeDataSource={this.onAddMixedQuery}
|
||||
current={null}
|
||||
autoFocus={true}
|
||||
onBlur={this.onMixedPickerBlur}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
onAddMixedQuery = datasource => {
|
||||
this.onAddQuery({ datasource: datasource.name });
|
||||
this.component.digest();
|
||||
this.setState({ isAddingMixed: false });
|
||||
};
|
||||
|
||||
onMixedPickerBlur = () => {
|
||||
this.setState({ isAddingMixed: false });
|
||||
};
|
||||
|
||||
render() {
|
||||
const { currentDatasource } = this.state;
|
||||
const { hasQueryHelp } = currentDatasource.meta;
|
||||
const dsInformation = {
|
||||
title: currentDatasource.name,
|
||||
imgSrc: currentDatasource.meta.info.logos.small,
|
||||
render: closeOpenView => (
|
||||
<DataSourcePicker
|
||||
datasources={this.datasources}
|
||||
onChangeDataSource={ds => {
|
||||
closeOpenView();
|
||||
this.onChangeDataSource(ds);
|
||||
}}
|
||||
/>
|
||||
),
|
||||
};
|
||||
const { panel } = this.props;
|
||||
const { currentDS, isAddingMixed } = this.state;
|
||||
const { hasQueryHelp } = currentDS.meta;
|
||||
|
||||
const queryInspector = {
|
||||
title: 'Query Inspector',
|
||||
@ -265,10 +331,31 @@ export class QueriesTab extends PureComponent<Props, State> {
|
||||
};
|
||||
|
||||
return (
|
||||
<EditorTabBody heading="Queries" main={dsInformation} toolbarItems={[options, queryInspector, dsHelp]}>
|
||||
<>
|
||||
<div ref={element => (this.element = element)} style={{ width: '100%' }} />
|
||||
</>
|
||||
<EditorTabBody
|
||||
heading="Queries"
|
||||
renderToolbar={this.renderToolbar}
|
||||
toolbarItems={[options, queryInspector, dsHelp]}
|
||||
>
|
||||
<div className="query-editor-rows gf-form-group">
|
||||
<div ref={element => (this.element = element)} />
|
||||
|
||||
<div className="gf-form-query">
|
||||
<div className="gf-form gf-form-query-letter-cell">
|
||||
<label className="gf-form-label">
|
||||
<span className="gf-form-query-letter-cell-carret muted">
|
||||
<i className="fa fa-caret-down" />
|
||||
</span>
|
||||
<span className="gf-form-query-letter-cell-letter">{panel.getNextQueryLetter()}</span>
|
||||
</label>
|
||||
{!isAddingMixed && (
|
||||
<button className="btn btn-secondary gf-form-btn" onClick={this.onAddQueryClick}>
|
||||
Add Query
|
||||
</button>
|
||||
)}
|
||||
{isAddingMixed && this.renderMixedPicker()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</EditorTabBody>
|
||||
);
|
||||
}
|
||||
|
||||
@ -7,6 +7,7 @@ import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoa
|
||||
// Components
|
||||
import { EditorTabBody } from './EditorTabBody';
|
||||
import { VizTypePicker } from './VizTypePicker';
|
||||
import { FadeIn } from 'app/core/components/Animations/FadeIn';
|
||||
|
||||
// Types
|
||||
import { PanelModel } from '../panel_model';
|
||||
@ -21,9 +22,24 @@ interface Props {
|
||||
onTypeChanged: (newType: PanelPlugin) => void;
|
||||
}
|
||||
|
||||
export class VisualizationTab extends PureComponent<Props> {
|
||||
interface State {
|
||||
isVizPickerOpen: boolean;
|
||||
searchQuery: string;
|
||||
}
|
||||
|
||||
export class VisualizationTab extends PureComponent<Props, State> {
|
||||
element: HTMLElement;
|
||||
angularOptions: AngularComponent;
|
||||
searchInput: HTMLElement;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
isVizPickerOpen: false,
|
||||
searchQuery: '',
|
||||
};
|
||||
}
|
||||
|
||||
getPanelDefaultOptions = () => {
|
||||
const { panel, plugin } = this.props;
|
||||
@ -87,10 +103,11 @@ export class VisualizationTab extends PureComponent<Props> {
|
||||
|
||||
let template = '';
|
||||
for (let i = 0; i < panelCtrl.editorTabs.length; i++) {
|
||||
template += `
|
||||
<div class="form-section" ng-cloak>
|
||||
<div class="form-section__header">{{ctrl.editorTabs[${i}].title}}</div>
|
||||
<div class="form-section__body">
|
||||
template +=
|
||||
`
|
||||
<div class="form-section" ng-cloak>` +
|
||||
(i > 0 ? `<div class="form-section__header">{{ctrl.editorTabs[${i}].title}}</div>` : '') +
|
||||
`<div class="form-section__body">
|
||||
<panel-editor-tab editor-tab="ctrl.editorTabs[${i}]" ctrl="ctrl"></panel-editor-tab>
|
||||
</div>
|
||||
</div>
|
||||
@ -119,28 +136,81 @@ export class VisualizationTab extends PureComponent<Props> {
|
||||
this.forceUpdate();
|
||||
};
|
||||
|
||||
onOpenVizPicker = () => {
|
||||
this.setState({ isVizPickerOpen: true });
|
||||
};
|
||||
|
||||
onCloseVizPicker = () => {
|
||||
this.setState({ isVizPickerOpen: false });
|
||||
};
|
||||
|
||||
onSearchQueryChange = evt => {
|
||||
const value = evt.target.value;
|
||||
this.setState({
|
||||
searchQuery: value,
|
||||
});
|
||||
};
|
||||
|
||||
renderToolbar = (): JSX.Element => {
|
||||
const { plugin } = this.props;
|
||||
const { searchQuery } = this.state;
|
||||
|
||||
if (this.state.isVizPickerOpen) {
|
||||
return (
|
||||
<>
|
||||
<label className="gf-form--has-input-icon">
|
||||
<input
|
||||
type="text"
|
||||
className="gf-form-input width-13"
|
||||
placeholder=""
|
||||
onChange={this.onSearchQueryChange}
|
||||
value={searchQuery}
|
||||
ref={elem => elem && elem.focus()}
|
||||
/>
|
||||
<i className="gf-form-input-icon fa fa-search" />
|
||||
</label>
|
||||
<div className="flex-grow" />
|
||||
<button className="btn btn-link" onClick={this.onCloseVizPicker}>
|
||||
<i className="fa fa-chevron-up" />
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div className="toolbar__main" onClick={this.onOpenVizPicker}>
|
||||
<img className="toolbar__main-image" src={plugin.info.logos.small} />
|
||||
<div className="toolbar__main-name">{plugin.name}</div>
|
||||
<i className="fa fa-caret-down" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
onTypeChanged = (plugin: PanelPlugin) => {
|
||||
if (plugin.id === this.props.plugin.id) {
|
||||
this.setState({ isVizPickerOpen: false });
|
||||
} else {
|
||||
this.props.onTypeChanged(plugin);
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { plugin } = this.props;
|
||||
|
||||
const panelSelection = {
|
||||
title: plugin.name,
|
||||
imgSrc: plugin.info.logos.small,
|
||||
render: () => {
|
||||
// the needs to be scoped inside this closure
|
||||
const { plugin, onTypeChanged } = this.props;
|
||||
return <VizTypePicker current={plugin} onTypeChanged={onTypeChanged} />;
|
||||
},
|
||||
};
|
||||
|
||||
const panelHelp = {
|
||||
title: '',
|
||||
icon: 'fa fa-question',
|
||||
render: () => <h2>Help</h2>,
|
||||
};
|
||||
const { isVizPickerOpen, searchQuery } = this.state;
|
||||
|
||||
return (
|
||||
<EditorTabBody heading="Visualization" main={panelSelection} toolbarItems={[panelHelp]}>
|
||||
{this.renderPanelOptions()}
|
||||
<EditorTabBody heading="Visualization" renderToolbar={this.renderToolbar}>
|
||||
<>
|
||||
<FadeIn in={isVizPickerOpen} duration={200} unmountOnExit={true}>
|
||||
<VizTypePicker
|
||||
current={plugin}
|
||||
onTypeChanged={this.onTypeChanged}
|
||||
searchQuery={searchQuery}
|
||||
onClose={this.onCloseVizPicker}
|
||||
/>
|
||||
</FadeIn>
|
||||
{this.renderPanelOptions()}
|
||||
</>
|
||||
</EditorTabBody>
|
||||
);
|
||||
}
|
||||
|
||||
@ -4,27 +4,20 @@ import _ from 'lodash';
|
||||
import config from 'app/core/config';
|
||||
import { PanelPlugin } from 'app/types/plugins';
|
||||
import VizTypePickerPlugin from './VizTypePickerPlugin';
|
||||
import KeyboardNavigation, { KeyboardNavigationProps } from './KeyboardNavigation';
|
||||
|
||||
export interface Props {
|
||||
current: PanelPlugin;
|
||||
onTypeChanged: (newType: PanelPlugin) => void;
|
||||
}
|
||||
|
||||
interface State {
|
||||
searchQuery: string;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export class VizTypePicker extends PureComponent<Props, State> {
|
||||
export class VizTypePicker extends PureComponent<Props> {
|
||||
searchInput: HTMLElement;
|
||||
pluginList = this.getPanelPlugins('');
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
searchQuery: '',
|
||||
};
|
||||
}
|
||||
|
||||
get maxSelectedIndex() {
|
||||
@ -32,12 +25,6 @@ export class VizTypePicker extends PureComponent<Props, State> {
|
||||
return filteredPluginList.length - 1;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
setTimeout(() => {
|
||||
this.searchInput.focus();
|
||||
}, 300);
|
||||
}
|
||||
|
||||
getPanelPlugins(filter): PanelPlugin[] {
|
||||
const panels = _.chain(config.panels)
|
||||
.filter({ hideFromList: false })
|
||||
@ -48,27 +35,22 @@ export class VizTypePicker extends PureComponent<Props, State> {
|
||||
return _.sortBy(panels, 'sort');
|
||||
}
|
||||
|
||||
renderVizPlugin = (plugin: PanelPlugin, index: number, keyNavProps: KeyboardNavigationProps) => {
|
||||
renderVizPlugin = (plugin: PanelPlugin, index: number) => {
|
||||
const { onTypeChanged } = this.props;
|
||||
const { selected, onMouseEnter } = keyNavProps;
|
||||
const isSelected = selected === index;
|
||||
const isCurrent = plugin.id === this.props.current.id;
|
||||
|
||||
return (
|
||||
<VizTypePickerPlugin
|
||||
key={plugin.id}
|
||||
isSelected={isSelected}
|
||||
isCurrent={isCurrent}
|
||||
plugin={plugin}
|
||||
onMouseEnter={() => {
|
||||
onMouseEnter(index);
|
||||
}}
|
||||
onClick={() => onTypeChanged(plugin)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
getFilteredPluginList = (): PanelPlugin[] => {
|
||||
const { searchQuery } = this.state;
|
||||
const { searchQuery } = this.props;
|
||||
const regex = new RegExp(searchQuery, 'i');
|
||||
const pluginList = this.pluginList;
|
||||
|
||||
@ -79,57 +61,15 @@ export class VizTypePicker extends PureComponent<Props, State> {
|
||||
return filtered;
|
||||
};
|
||||
|
||||
onSearchQueryChange = evt => {
|
||||
const value = evt.target.value;
|
||||
this.setState(prevState => ({
|
||||
...prevState,
|
||||
searchQuery: value,
|
||||
}));
|
||||
};
|
||||
|
||||
renderFilters = ({ onKeyDown, selected }: KeyboardNavigationProps) => {
|
||||
const { searchQuery } = this.state;
|
||||
return (
|
||||
<>
|
||||
<label className="gf-form--has-input-icon">
|
||||
<input
|
||||
type="text"
|
||||
className="gf-form-input width-13"
|
||||
placeholder=""
|
||||
ref={elem => (this.searchInput = elem)}
|
||||
onChange={this.onSearchQueryChange}
|
||||
value={searchQuery}
|
||||
onKeyDown={evt => {
|
||||
onKeyDown(evt, this.maxSelectedIndex, () => {
|
||||
const { onTypeChanged } = this.props;
|
||||
const vizType = this.getFilteredPluginList()[selected];
|
||||
onTypeChanged(vizType);
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<i className="gf-form-input-icon fa fa-search" />
|
||||
</label>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const filteredPluginList = this.getFilteredPluginList();
|
||||
|
||||
return (
|
||||
<KeyboardNavigation
|
||||
render={(keyNavProps: KeyboardNavigationProps) => (
|
||||
<>
|
||||
<div className="cta-form__bar">
|
||||
{this.renderFilters(keyNavProps)}
|
||||
<div className="gf-form--grow" />
|
||||
</div>
|
||||
<div className="viz-picker">
|
||||
{filteredPluginList.map((plugin, index) => this.renderVizPlugin(plugin, index, keyNavProps))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
<div className="viz-picker">
|
||||
<div className="viz-picker-list">
|
||||
{filteredPluginList.map((plugin, index) => this.renderVizPlugin(plugin, index))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,32 +1,29 @@
|
||||
import React from 'react';
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { PanelPlugin } from 'app/types/plugins';
|
||||
|
||||
interface Props {
|
||||
isSelected: boolean;
|
||||
isCurrent: boolean;
|
||||
plugin: PanelPlugin;
|
||||
onClick: () => void;
|
||||
onMouseEnter: () => void;
|
||||
}
|
||||
|
||||
const VizTypePickerPlugin = React.memo(
|
||||
({ isSelected, isCurrent, plugin, onClick, onMouseEnter }: Props) => {
|
||||
({ isCurrent, plugin, onClick }: Props) => {
|
||||
const cssClass = classNames({
|
||||
'viz-picker__item': true,
|
||||
'viz-picker__item--selected': isSelected,
|
||||
'viz-picker__item--current': isCurrent,
|
||||
});
|
||||
|
||||
return (
|
||||
<div className={cssClass} onClick={onClick} title={plugin.name} onMouseEnter={onMouseEnter}>
|
||||
<div className={cssClass} onClick={onClick} title={plugin.name}>
|
||||
<div className="viz-picker__item-name">{plugin.name}</div>
|
||||
<img className="viz-picker__item-img" src={plugin.info.logos.small} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
(prevProps, nextProps) => {
|
||||
if (prevProps.isSelected === nextProps.isSelected && prevProps.isCurrent === nextProps.isCurrent) {
|
||||
if (prevProps.isCurrent === nextProps.isCurrent) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { Emitter } from 'app/core/utils/emitter';
|
||||
import _ from 'lodash';
|
||||
import { PANEL_OPTIONS_KEY_PREFIX } from 'app/core/constants';
|
||||
import { DataQuery } from 'app/types';
|
||||
|
||||
export interface GridPos {
|
||||
x: number;
|
||||
@ -237,6 +238,24 @@ export class PanelModel {
|
||||
this.restorePanelOptions(pluginId);
|
||||
}
|
||||
|
||||
addQuery(query?: Partial<DataQuery>) {
|
||||
query = query || { refId: 'A' };
|
||||
query.refId = this.getNextQueryLetter();
|
||||
query.isNew = true;
|
||||
|
||||
this.targets.push(query);
|
||||
}
|
||||
|
||||
getNextQueryLetter(): string {
|
||||
const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
|
||||
|
||||
return _.find(letters, refId => {
|
||||
return _.every(this.targets, other => {
|
||||
return other.refId !== refId;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this.events.emit('panel-teardown');
|
||||
this.events.removeAllListeners();
|
||||
|
||||
@ -1,181 +1,24 @@
|
||||
// Libraries
|
||||
import _ from 'lodash';
|
||||
import Remarkable from 'remarkable';
|
||||
|
||||
// Services & utils
|
||||
import coreModule from 'app/core/core_module';
|
||||
import config from 'app/core/config';
|
||||
import { Emitter } from 'app/core/utils/emitter';
|
||||
|
||||
// Types
|
||||
import { DashboardModel } from '../dashboard/dashboard_model';
|
||||
import { PanelModel } from '../dashboard/panel_model';
|
||||
import { DataQuery } from 'app/types';
|
||||
|
||||
export class MetricsTabCtrl {
|
||||
dsName: string;
|
||||
panel: any;
|
||||
panelCtrl: any;
|
||||
datasources: any[];
|
||||
datasourceInstance: any;
|
||||
nextRefId: string;
|
||||
export interface AngularQueryComponentScope {
|
||||
panel: PanelModel;
|
||||
dashboard: DashboardModel;
|
||||
panelDsValue: any;
|
||||
addQueryDropdown: any;
|
||||
queryTroubleshooterOpen: boolean;
|
||||
helpOpen: boolean;
|
||||
optionsOpen: boolean;
|
||||
hasQueryHelp: boolean;
|
||||
helpHtml: string;
|
||||
queryOptions: any;
|
||||
events: Emitter;
|
||||
|
||||
/** @ngInject */
|
||||
constructor($scope, private $sce, datasourceSrv, private backendSrv) {
|
||||
this.panelCtrl = $scope.ctrl;
|
||||
$scope.ctrl = this;
|
||||
|
||||
this.panel = this.panelCtrl.panel;
|
||||
this.panel.datasource = this.panel.datasource || null;
|
||||
this.panel.targets = this.panel.targets || [{}];
|
||||
|
||||
this.dashboard = this.panelCtrl.dashboard;
|
||||
this.datasources = datasourceSrv.getMetricSources();
|
||||
this.panelDsValue = this.panelCtrl.panel.datasource;
|
||||
|
||||
// added here as old query controller expects this on panelCtrl but
|
||||
// they are getting MetricsTabCtrl instead
|
||||
this.events = this.panel.events;
|
||||
|
||||
for (const ds of this.datasources) {
|
||||
if (ds.value === this.panelDsValue) {
|
||||
this.datasourceInstance = ds;
|
||||
}
|
||||
}
|
||||
|
||||
this.addQueryDropdown = { text: 'Add Query', value: null, fake: true };
|
||||
|
||||
// update next ref id
|
||||
this.nextRefId = this.dashboard.getNextQueryLetter(this.panel);
|
||||
this.updateDatasourceOptions();
|
||||
}
|
||||
|
||||
updateDatasourceOptions() {
|
||||
if (this.datasourceInstance) {
|
||||
this.hasQueryHelp = this.datasourceInstance.meta.hasQueryHelp;
|
||||
this.queryOptions = this.datasourceInstance.meta.queryOptions;
|
||||
}
|
||||
}
|
||||
|
||||
getOptions(includeBuiltin) {
|
||||
return Promise.resolve(
|
||||
this.datasources
|
||||
.filter(value => {
|
||||
return includeBuiltin || !value.meta.builtIn;
|
||||
})
|
||||
.map(ds => {
|
||||
return { value: ds.value, text: ds.name, datasource: ds };
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
datasourceChanged(option) {
|
||||
if (!option) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.setDatasource(option.datasource);
|
||||
this.updateDatasourceOptions();
|
||||
}
|
||||
|
||||
setDatasource(datasource) {
|
||||
// switching to mixed
|
||||
if (datasource.meta.mixed) {
|
||||
_.each(this.panel.targets, target => {
|
||||
target.datasource = this.panel.datasource;
|
||||
if (!target.datasource) {
|
||||
target.datasource = config.defaultDatasource;
|
||||
}
|
||||
});
|
||||
} else if (this.datasourceInstance) {
|
||||
// if switching from mixed
|
||||
if (this.datasourceInstance.meta.mixed) {
|
||||
_.each(this.panel.targets, target => {
|
||||
delete target.datasource;
|
||||
});
|
||||
} else if (this.datasourceInstance.meta.id !== datasource.meta.id) {
|
||||
// we are changing data source type, clear queries
|
||||
this.panel.targets = [{ refId: 'A' }];
|
||||
this.panelCtrl.nextRefId = this.dashboard.getNextQueryLetter(this.panel);
|
||||
}
|
||||
}
|
||||
|
||||
this.datasourceInstance = datasource;
|
||||
this.panel.datasource = datasource.value;
|
||||
this.panel.refresh();
|
||||
}
|
||||
|
||||
addMixedQuery(option) {
|
||||
if (!option) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.panelCtrl.addQuery({
|
||||
isNew: true,
|
||||
datasource: option.datasource.name,
|
||||
});
|
||||
this.addQueryDropdown = { text: 'Add Query', value: null, fake: true };
|
||||
}
|
||||
|
||||
toggleHelp() {
|
||||
this.optionsOpen = false;
|
||||
this.queryTroubleshooterOpen = false;
|
||||
this.helpOpen = !this.helpOpen;
|
||||
|
||||
this.backendSrv.get(`/api/plugins/${this.datasourceInstance.meta.id}/markdown/query_help`).then(res => {
|
||||
const md = new Remarkable();
|
||||
this.helpHtml = this.$sce.trustAsHtml(md.render(res));
|
||||
});
|
||||
}
|
||||
|
||||
toggleOptions() {
|
||||
this.helpOpen = false;
|
||||
this.queryTroubleshooterOpen = false;
|
||||
this.optionsOpen = !this.optionsOpen;
|
||||
}
|
||||
|
||||
toggleQueryTroubleshooter() {
|
||||
this.helpOpen = false;
|
||||
this.optionsOpen = false;
|
||||
this.queryTroubleshooterOpen = !this.queryTroubleshooterOpen;
|
||||
}
|
||||
|
||||
addQuery(query?) {
|
||||
query = query || {};
|
||||
query.refId = this.dashboard.getNextQueryLetter(this.panel);
|
||||
query.isNew = true;
|
||||
|
||||
this.panel.targets.push(query);
|
||||
this.nextRefId = this.dashboard.getNextQueryLetter(this.panel);
|
||||
}
|
||||
|
||||
refresh() {
|
||||
this.panel.refresh();
|
||||
}
|
||||
|
||||
render() {
|
||||
this.panel.render();
|
||||
}
|
||||
|
||||
removeQuery(target) {
|
||||
const index = _.indexOf(this.panel.targets, target);
|
||||
this.panel.targets.splice(index, 1);
|
||||
this.nextRefId = this.dashboard.getNextQueryLetter(this.panel);
|
||||
this.panel.refresh();
|
||||
}
|
||||
|
||||
moveQuery(target, direction) {
|
||||
const index = _.indexOf(this.panel.targets, target);
|
||||
_.move(this.panel.targets, index, index + direction);
|
||||
}
|
||||
refresh: () => void;
|
||||
render: () => void;
|
||||
removeQuery: (query: DataQuery) => void;
|
||||
addQuery: (query?: DataQuery) => void;
|
||||
moveQuery: (query: DataQuery, direction: number) => void;
|
||||
}
|
||||
|
||||
/** @ngInject */
|
||||
@ -185,7 +28,6 @@ export function metricsTabDirective() {
|
||||
restrict: 'E',
|
||||
scope: true,
|
||||
templateUrl: 'public/app/features/panel/partials/metrics_tab.html',
|
||||
controller: MetricsTabCtrl,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
|
||||
<div class="query-editor-rows gf-form-group" ng-if="ctrl.datasourceInstance">
|
||||
<div ng-repeat="target in ctrl.panel.targets" ng-class="{'gf-form-disabled': target.hide}">
|
||||
<rebuild-on-change property="ctrl.panel.datasource || target.datasource" show-null="true">
|
||||
<plugin-component type="query-ctrl">
|
||||
@ -7,21 +5,20 @@
|
||||
</rebuild-on-change>
|
||||
</div>
|
||||
|
||||
<div class="gf-form-query">
|
||||
<div class="gf-form gf-form-query-letter-cell">
|
||||
<label class="gf-form-label">
|
||||
<span class="gf-form-query-letter-cell-carret">
|
||||
<i class="fa fa-caret-down"></i>
|
||||
</span>
|
||||
<span class="gf-form-query-letter-cell-letter">{{ctrl.nextRefId}}</span>
|
||||
</label>
|
||||
<button class="btn btn-secondary gf-form-btn" ng-click="ctrl.addQuery()" ng-hide="ctrl.datasourceInstance.meta.mixed">
|
||||
Add Query
|
||||
</button>
|
||||
<div class="dropdown" ng-if="ctrl.datasourceInstance.meta.mixed">
|
||||
<gf-form-dropdown model="ctrl.addQueryDropdown" get-options="ctrl.getOptions(false)" on-change="ctrl.addMixedQuery($option)">
|
||||
</gf-form-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="gf-form-query"> -->
|
||||
<!-- <div class="gf-form gf-form-query-letter-cell"> -->
|
||||
<!-- <label class="gf-form-label"> -->
|
||||
<!-- <span class="gf-form-query-letter-cell-carret"> -->
|
||||
<!-- <i class="fa fa-caret-down"></i> -->
|
||||
<!-- </span> -->
|
||||
<!-- <span class="gf-form-query-letter-cell-letter">{{ctrl.nextRefId}}</span> -->
|
||||
<!-- </label> -->
|
||||
<!-- <button class="btn btn-secondary gf-form-btn" ng-click="ctrl.addQuery()" ng-hide="ctrl.datasourceInstance.meta.mixed"> -->
|
||||
<!-- Add Query -->
|
||||
<!-- </button> -->
|
||||
<!-- <div class="dropdown" ng-if="ctrl.datasourceInstance.meta.mixed"> -->
|
||||
<!-- <gf-form-dropdown model="ctrl.addQueryDropdown" get-options="ctrl.getOptions(false)" on-change="ctrl.addMixedQuery($option)"> -->
|
||||
<!-- </gf-form-dropdown> -->
|
||||
<!-- </div> -->
|
||||
<!-- </div> -->
|
||||
<!-- </div> -->
|
||||
|
||||
@ -20,7 +20,7 @@ export class QueryRowCtrl {
|
||||
this.hideEditorRowActions = this.panelCtrl.hideEditorRowActions;
|
||||
|
||||
if (!this.target.refId) {
|
||||
this.target.refId = this.panelCtrl.dashboard.getNextQueryLetter(this.panel);
|
||||
this.target.refId = this.panel.getNextQueryLetter();
|
||||
}
|
||||
|
||||
this.toggleCollapse(true);
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
</div>
|
||||
|
||||
<div class="gf-form-inline">
|
||||
<div class="gf-form max-width-26">
|
||||
<div class="gf-form">
|
||||
<label class="gf-form-label width-8">Legend format</label>
|
||||
<input type="text" class="gf-form-input" ng-model="ctrl.target.legendFormat" spellcheck='false' placeholder="legend format"
|
||||
data-min-length=0 data-items=1000 ng-model-onblur ng-change="ctrl.refreshMetricData()">
|
||||
@ -58,4 +58,4 @@
|
||||
<div class="gf-form-label gf-form-label--grow"></div>
|
||||
</div>
|
||||
</div>
|
||||
</query-editor-row>
|
||||
</query-editor-row>
|
||||
|
||||
@ -96,8 +96,6 @@
|
||||
@import 'components/empty_list_cta';
|
||||
@import 'components/popper';
|
||||
@import 'components/form_select_box';
|
||||
@import 'components/user-picker';
|
||||
@import 'components/description-picker';
|
||||
@import 'components/panel_editor';
|
||||
@import 'components/toolbar';
|
||||
@import 'components/delete_button';
|
||||
|
||||
@ -271,7 +271,7 @@ $menu-dropdown-shadow: 5px 5px 20px -5px $black;
|
||||
$tab-border-color: $dark-4;
|
||||
|
||||
// Toolbar
|
||||
$toolbar-bg: $black;
|
||||
$toolbar-bg: $input-black;
|
||||
|
||||
// Pagination
|
||||
// -------------------------
|
||||
@ -375,13 +375,14 @@ $checkbox-color: $dark-1;
|
||||
//Panel Edit
|
||||
// -------------------------
|
||||
$panel-editor-shadow: 0 0 20px black;
|
||||
$panel-editor-border: 1px solid $dark-3;
|
||||
$panel-editor-side-menu-shadow: drop-shadow(0 0 10px $black);
|
||||
$panel-editor-toolbar-view-bg: $black;
|
||||
$panel-editor-toolbar-view-bg: $input-black;
|
||||
$panel-editor-viz-item-shadow: 0 0 8px $dark-5;
|
||||
$panel-editor-viz-item-border: 1px solid $dark-5;
|
||||
$panel-editor-viz-item-shadow-hover: 0 0 4px $blue;
|
||||
$panel-editor-viz-item-border-hover: 1px solid $blue;
|
||||
$panel-editor-viz-item-bg: $black;
|
||||
$panel-editor-viz-item-bg: $input-black;
|
||||
$panel-editor-tabs-line-color: #e3e3e3;
|
||||
$panel-editor-viz-item-bg-hover: darken($blue, 47%);
|
||||
$panel-editor-viz-item-bg-hover-active: darken($orange, 45%);
|
||||
|
||||
@ -384,6 +384,7 @@ $checkbox-color: $gray-7;
|
||||
//Panel Edit
|
||||
// -------------------------
|
||||
$panel-editor-shadow: 2px 2px 8px $gray-3;
|
||||
$panel-editor-border: 1px solid $dark-4;
|
||||
$panel-editor-side-menu-shadow: drop-shadow(0 0 2px $gray-3);
|
||||
$panel-editor-toolbar-view-bg: $white;
|
||||
$panel-editor-viz-item-shadow: 0 0 4px $gray-3;
|
||||
|
||||
@ -78,6 +78,7 @@
|
||||
|
||||
.btn-link {
|
||||
color: $btn-link-color;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
// Set the backgrounds
|
||||
|
||||
@ -1,11 +0,0 @@
|
||||
.description-picker-option__button {
|
||||
position: relative;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
display: block;
|
||||
border-radius: 0;
|
||||
white-space: normal;
|
||||
i.fa-check {
|
||||
padding-left: 2px;
|
||||
}
|
||||
}
|
||||
@ -47,12 +47,17 @@ $select-input-bg-disabled: $input-bg-disabled;
|
||||
|
||||
.gf-form-select-box__input {
|
||||
padding-left: 5px;
|
||||
input {
|
||||
line-height: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.gf-form-select-box__menu {
|
||||
background: $dropdownBackground;
|
||||
background: $input-bg;
|
||||
box-shadow: $menu-dropdown-shadow;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.gf-form-select-box__menu-list {
|
||||
@ -64,16 +69,20 @@ $select-input-bg-disabled: $input-bg-disabled;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* .gf-form-select-box__single-value { */
|
||||
/* } */
|
||||
|
||||
.gf-form-select-box__multi-value {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.gf-form-select-box__option {
|
||||
border-left: 2px solid transparent;
|
||||
white-space: nowrap;
|
||||
|
||||
&.gf-form-select-box__option--is-focused {
|
||||
color: $dropdownLinkColorHover;
|
||||
background-color: $dropdownLinkBackgroundHover;
|
||||
background: $menu-dropdown-hover-bg;
|
||||
@include left-brand-border-gradient();
|
||||
}
|
||||
|
||||
@ -119,10 +128,12 @@ $select-input-bg-disabled: $input-bg-disabled;
|
||||
border-width: 0 5px 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.gf-form-input--form-dropdown {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.gf-form--has-input-icon {
|
||||
@ -130,3 +141,32 @@ $select-input-bg-disabled: $input-bg-disabled;
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.gf-form-select-box__desc-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
justify-items: center;
|
||||
cursor: pointer;
|
||||
padding: 7px 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gf-form-select-box__desc-option__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
padding-right: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.gf-form-select-box__desc-option__desc {
|
||||
font-weight: normal;
|
||||
font-size: $font-size-sm;
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
.gf-form-select-box__desc-option__img {
|
||||
width: 16px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
@ -110,7 +110,6 @@ $input-border: 1px solid $input-border-color;
|
||||
|
||||
&--grow {
|
||||
flex-grow: 1;
|
||||
min-height: 2.6rem;
|
||||
}
|
||||
|
||||
&--error {
|
||||
|
||||
@ -21,10 +21,10 @@
|
||||
display: none;
|
||||
}
|
||||
&.json-formatter-object::after {
|
||||
content: "No properties";
|
||||
content: 'No properties';
|
||||
}
|
||||
&.json-formatter-array::after {
|
||||
content: "[]";
|
||||
content: '[]';
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -33,7 +33,9 @@
|
||||
color: $json-explorer-string-color;
|
||||
white-space: normal;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.json-formatter-number {
|
||||
color: $json-explorer-number-color;
|
||||
}
|
||||
@ -87,7 +89,7 @@
|
||||
&::after {
|
||||
display: inline-block;
|
||||
transition: transform $json-explorer-rotate-time ease-in;
|
||||
content: "►";
|
||||
content: '►';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -34,7 +34,6 @@
|
||||
flex-grow: 1;
|
||||
background: $page-bg;
|
||||
margin: 0 20px 0 84px;
|
||||
border-left: 2px solid $orange;
|
||||
border-radius: 3px;
|
||||
box-shadow: $panel-editor-shadow;
|
||||
}
|
||||
@ -133,14 +132,19 @@
|
||||
}
|
||||
|
||||
.viz-picker {
|
||||
margin-top: -40px;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.viz-picker-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
|
||||
.viz-picker__item {
|
||||
background: $panel-editor-viz-item-bg;
|
||||
border: $panel-editor-viz-item-border;
|
||||
background: $panel-bg;
|
||||
border: $panel-border;
|
||||
border-radius: 3px;
|
||||
height: 100px;
|
||||
width: 150px;
|
||||
@ -162,7 +166,7 @@
|
||||
border: 1px solid $orange;
|
||||
}
|
||||
|
||||
&--selected {
|
||||
&:hover {
|
||||
box-shadow: $panel-editor-viz-item-shadow-hover;
|
||||
background: $panel-editor-viz-item-bg-hover;
|
||||
border: $panel-editor-viz-item-border-hover;
|
||||
@ -273,6 +277,20 @@
|
||||
}
|
||||
}
|
||||
|
||||
.ds-picker {
|
||||
position: relative;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.ds-picker-menu {
|
||||
min-width: 400px;
|
||||
max-width: 500px;
|
||||
position: absolute;
|
||||
background: $panel-editor-toolbar-view-bg;
|
||||
padding: 5px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.ds-picker-list__name {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
@ -306,6 +324,13 @@
|
||||
margin-bottom: 20px;
|
||||
background: $input-label-bg;
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
|
||||
.btn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-section__body {
|
||||
|
||||
@ -1,12 +0,0 @@
|
||||
.user-picker-option__button {
|
||||
position: relative;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
display: block;
|
||||
border-radius: 0;
|
||||
}
|
||||
.user-picker-option__avatar {
|
||||
width: 20px;
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
@ -83,6 +83,10 @@ button.close {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.flex-grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.center-vh {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user