IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

updated styles

Browse Source
This commit is contained in:
Torkel Ödegaard
2018-12-13 21:24:41 +01:00
parent dc22beadca
commit 9c13520e97
10 changed files with 203 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

348
public/app/features/alerting/partials/alert_tab.html
View File

@@ -1,187 +1,189 @@
<div class="edit-tab-with-sidemenu" ng-if="ctrl.alert"> <div class="panel-option-section__body">
<aside class="edit-sidemenu-aside"> <div class="edit-tab-with-sidemenu" ng-if="ctrl.alert">
<ul class="edit-sidemenu"> <aside class="edit-sidemenu-aside">
<li ng-class="{active: ctrl.subTabIndex === 0}"> <ul class="edit-sidemenu">
<a ng-click="ctrl.changeTabIndex(0)">Alert Config</a> <li ng-class="{active: ctrl.subTabIndex === 0}">
</li> <a ng-click="ctrl.changeTabIndex(0)">Alert Config</a>
<li ng-class="{active: ctrl.subTabIndex === 1}"> </li>
<a ng-click="ctrl.changeTabIndex(1)"> <li ng-class="{active: ctrl.subTabIndex === 1}">
Notifications <span class="muted">({{ctrl.alertNotifications.length}})</span> <a ng-click="ctrl.changeTabIndex(1)">
</a> Notifications <span class="muted">({{ctrl.alertNotifications.length}})</span>
</li> </a>
<li ng-class="{active: ctrl.subTabIndex === 2}"> </li>
<a ng-click="ctrl.changeTabIndex(2)">State history</a> <li ng-class="{active: ctrl.subTabIndex === 2}">
</li> <a ng-click="ctrl.changeTabIndex(2)">State history</a>
<li> </li>
<a ng-click="ctrl.delete()">Delete</a> <li>
</li> <a ng-click="ctrl.delete()">Delete</a>
</ul> </li>
</aside> </ul>
</aside>
<div class="edit-tab-content"> <div class="edit-tab-content">
<div ng-if="ctrl.subTabIndex === 0"> <div ng-if="ctrl.subTabIndex === 0">
<div class="alert alert-error m-b-2" ng-show="ctrl.error"> <div class="alert alert-error m-b-2" ng-show="ctrl.error">
<i class="fa fa-warning"></i> {{ctrl.error}} <i class="fa fa-warning"></i> {{ctrl.error}}
</div> </div>
<div class="gf-form-group"> <div class="gf-form-group">
<h5 class="section-heading">Alert Config</h5> <h5 class="section-heading">Alert Config</h5>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-6">Name</span> <span class="gf-form-label width-6">Name</span>
<input type="text" class="gf-form-input width-20" ng-model="ctrl.alert.name"> <input type="text" class="gf-form-input width-20" ng-model="ctrl.alert.name">
</div> </div>
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-9">Evaluate every</span> <span class="gf-form-label width-9">Evaluate every</span>
<input class="gf-form-input max-width-6" type="text" ng-model="ctrl.alert.frequency"> <input class="gf-form-input max-width-6" type="text" ng-model="ctrl.alert.frequency">
</div> </div>
<div class="gf-form max-width-11"> <div class="gf-form max-width-11">
<label class="gf-form-label width-5">For</label> <label class="gf-form-label width-5">For</label>
<input type="text" class="gf-form-input max-width-6" ng-model="ctrl.alert.for" spellcheck='false' placeholder="5m"> <input type="text" class="gf-form-input max-width-6" ng-model="ctrl.alert.for" spellcheck='false' placeholder="5m">
<info-popover mode="right-absolute"> <info-popover mode="right-absolute">
If an alert rule has a configured For and the query violates the configured threshold it will first go from OK to Pending. If an alert rule has a configured For and the query violates the configured threshold it will first go from OK to Pending.
Going from OK to Pending Grafana will not send any notifications. Once the alert rule has been firing for more than For duration, it will change to Alerting and send alert notifications. Going from OK to Pending Grafana will not send any notifications. Once the alert rule has been firing for more than For duration, it will change to Alerting and send alert notifications.
</info-popover> </info-popover>
</div> </div>
</div> </div>
</div> </div>
<div class="gf-form-group"> <div class="gf-form-group">
<h5 class="section-heading">Conditions</h5> <h5 class="section-heading">Conditions</h5>
<div class="gf-form-inline" ng-repeat="conditionModel in ctrl.conditionModels"> <div class="gf-form-inline" ng-repeat="conditionModel in ctrl.conditionModels">
<div class="gf-form"> <div class="gf-form">
<metric-segment-model css-class="query-keyword width-5" ng-if="$index" property="conditionModel.operator.type" options="ctrl.evalOperators" custom="false"></metric-segment-model> <metric-segment-model css-class="query-keyword width-5" ng-if="$index" property="conditionModel.operator.type" options="ctrl.evalOperators" custom="false"></metric-segment-model>
<span class="gf-form-label query-keyword width-5" ng-if="$index===0">WHEN</span> <span class="gf-form-label query-keyword width-5" ng-if="$index===0">WHEN</span>
</div> </div>
<div class="gf-form"> <div class="gf-form">
<query-part-editor class="gf-form-label query-part width-9" part="conditionModel.reducerPart" handle-event="ctrl.handleReducerPartEvent(conditionModel, $event)"> <query-part-editor class="gf-form-label query-part width-9" part="conditionModel.reducerPart" handle-event="ctrl.handleReducerPartEvent(conditionModel, $event)">
</query-part-editor> </query-part-editor>
<span class="gf-form-label query-keyword">OF</span> <span class="gf-form-label query-keyword">OF</span>
</div> </div>
<div class="gf-form"> <div class="gf-form">
<query-part-editor class="gf-form-label query-part" part="conditionModel.queryPart" handle-event="ctrl.handleQueryPartEvent(conditionModel, $event)"> <query-part-editor class="gf-form-label query-part" part="conditionModel.queryPart" handle-event="ctrl.handleQueryPartEvent(conditionModel, $event)">
</query-part-editor> </query-part-editor>
</div> </div>
<div class="gf-form"> <div class="gf-form">
<metric-segment-model property="conditionModel.evaluator.type" options="ctrl.evalFunctions" custom="false" css-class="query-keyword" on-change="ctrl.evaluatorTypeChanged(conditionModel.evaluator)"></metric-segment-model> <metric-segment-model property="conditionModel.evaluator.type" options="ctrl.evalFunctions" custom="false" css-class="query-keyword" on-change="ctrl.evaluatorTypeChanged(conditionModel.evaluator)"></metric-segment-model>
<input class="gf-form-input max-width-9" type="number" step="any" ng-hide="conditionModel.evaluator.params.length === 0" ng-model="conditionModel.evaluator.params[0]" ng-change="ctrl.evaluatorParamsChanged()"> <input class="gf-form-input max-width-9" type="number" step="any" ng-hide="conditionModel.evaluator.params.length === 0" ng-model="conditionModel.evaluator.params[0]" ng-change="ctrl.evaluatorParamsChanged()">
<label class="gf-form-label query-keyword" ng-show="conditionModel.evaluator.params.length === 2">TO</label> <label class="gf-form-label query-keyword" ng-show="conditionModel.evaluator.params.length === 2">TO</label>
<input class="gf-form-input max-width-9" type="number" step="any" ng-if="conditionModel.evaluator.params.length === 2" ng-model="conditionModel.evaluator.params[1]" ng-change="ctrl.evaluatorParamsChanged()"> <input class="gf-form-input max-width-9" type="number" step="any" ng-if="conditionModel.evaluator.params.length === 2" ng-model="conditionModel.evaluator.params[1]" ng-change="ctrl.evaluatorParamsChanged()">
</div> </div>
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label"> <label class="gf-form-label">
<a class="pointer" tabindex="1" ng-click="ctrl.removeCondition($index)"> <a class="pointer" tabindex="1" ng-click="ctrl.removeCondition($index)">
<i class="fa fa-trash"></i> <i class="fa fa-trash"></i>
</a> </a>
</label> </label>
</div> </div>
</div> </div>
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label dropdown"> <label class="gf-form-label dropdown">
<a class="pointer dropdown-toggle" data-toggle="dropdown"> <a class="pointer dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-plus"></i> <i class="fa fa-plus"></i>
</a> </a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li ng-repeat="ct in ctrl.conditionTypes" role="menuitem"> <li ng-repeat="ct in ctrl.conditionTypes" role="menuitem">
<a ng-click="ctrl.addCondition(ct.value);">{{ct.text}}</a> <a ng-click="ctrl.addCondition(ct.value);">{{ct.text}}</a>
</li> </li>
</ul> </ul>
</label> </label>
</div> </div>
</div> </div>
<div class="gf-form-group"> <div class="gf-form-group">
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-18">If no data or all values are null</span> <span class="gf-form-label width-18">If no data or all values are null</span>
<span class="gf-form-label query-keyword">SET STATE TO</span> <span class="gf-form-label query-keyword">SET STATE TO</span>
<div class="gf-form-select-wrapper"> <div class="gf-form-select-wrapper">
<select class="gf-form-input" ng-model="ctrl.alert.noDataState" ng-options="f.value as f.text for f in ctrl.noDataModes"> <select class="gf-form-input" ng-model="ctrl.alert.noDataState" ng-options="f.value as f.text for f in ctrl.noDataModes">
</select> </select>
</div> </div>
</div> </div>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-18">If execution error or timeout</span> <span class="gf-form-label width-18">If execution error or timeout</span>
<span class="gf-form-label query-keyword">SET STATE TO</span> <span class="gf-form-label query-keyword">SET STATE TO</span>
<div class="gf-form-select-wrapper"> <div class="gf-form-select-wrapper">
<select class="gf-form-input" ng-model="ctrl.alert.executionErrorState" ng-options="f.value as f.text for f in ctrl.executionErrorModes"> <select class="gf-form-input" ng-model="ctrl.alert.executionErrorState" ng-options="f.value as f.text for f in ctrl.executionErrorModes">
</select> </select>
</div> </div>
</div> </div>
<div class="gf-form-button-row"> <div class="gf-form-button-row">
<button class="btn btn-inverse" ng-click="ctrl.test()"> <button class="btn btn-inverse" ng-click="ctrl.test()">
Test Rule Test Rule
</button> </button>
</div> </div>
</div> </div>
<div class="gf-form-group" ng-if="ctrl.testing"> <div class="gf-form-group" ng-if="ctrl.testing">
Evaluating rule <i class="fa fa-spinner fa-spin"></i> Evaluating rule <i class="fa fa-spinner fa-spin"></i>
</div> </div>
<div class="gf-form-group" ng-if="ctrl.testResult"> <div class="gf-form-group" ng-if="ctrl.testResult">
<json-tree root-name="result" object="ctrl.testResult" start-expanded="true"></json-tree> <json-tree root-name="result" object="ctrl.testResult" start-expanded="true"></json-tree>
</div> </div>
</div> </div>
<div class="gf-form-group" ng-if="ctrl.subTabIndex === 1"> <div class="gf-form-group" ng-if="ctrl.subTabIndex === 1">
<h5 class="section-heading">Notifications</h5> <h5 class="section-heading">Notifications</h5>
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form max-width-30"> <div class="gf-form max-width-30">
<span class="gf-form-label width-8">Send to</span> <span class="gf-form-label width-8">Send to</span>
<span class="gf-form-label" ng-repeat="nc in ctrl.alertNotifications" ng-style="{'background-color': nc.bgColor }"> <span class="gf-form-label" ng-repeat="nc in ctrl.alertNotifications" ng-style="{'background-color': nc.bgColor }">
<i class="{{nc.iconClass}}"></i>&nbsp;{{nc.name}}&nbsp; <i class="{{nc.iconClass}}"></i>&nbsp;{{nc.name}}&nbsp;
<i class="fa fa-remove pointer muted" ng-click="ctrl.removeNotification($index)" ng-if="nc.isDefault === false"></i> <i class="fa fa-remove pointer muted" ng-click="ctrl.removeNotification($index)" ng-if="nc.isDefault === false"></i>
</span> </span>
<metric-segment segment="ctrl.addNotificationSegment" get-options="ctrl.getNotifications()" on-change="ctrl.notificationAdded()"></metric-segment> <metric-segment segment="ctrl.addNotificationSegment" get-options="ctrl.getNotifications()" on-change="ctrl.notificationAdded()"></metric-segment>
</div> </div>
</div> </div>
<div class="gf-form gf-form--v-stretch"> <div class="gf-form gf-form--v-stretch">
<span class="gf-form-label width-8">Message</span> <span class="gf-form-label width-8">Message</span>
<textarea class="gf-form-input" rows="10" ng-model="ctrl.alert.message" placeholder="Notification message details..."></textarea> <textarea class="gf-form-input" rows="10" ng-model="ctrl.alert.message" placeholder="Notification message details..."></textarea>
</div> </div>
</div> </div>
<div class="gf-form-group" style="max-width: 720px;" ng-if="ctrl.subTabIndex === 2"> <div class="gf-form-group" style="max-width: 720px;" ng-if="ctrl.subTabIndex === 2">
<button class="btn btn-mini btn-danger pull-right" ng-click="ctrl.clearHistory()"><i class="fa fa-trash"></i>&nbsp;Clear history</button> <button class="btn btn-mini btn-danger pull-right" ng-click="ctrl.clearHistory()"><i class="fa fa-trash"></i>&nbsp;Clear history</button>
<h5 class="section-heading" style="whitespace: nowrap"> <h5 class="section-heading" style="whitespace: nowrap">
State history <span class="muted small">(last 50 state changes)</span> State history <span class="muted small">(last 50 state changes)</span>
</h5> </h5>
<div ng-show="ctrl.alertHistory.length === 0"> <div ng-show="ctrl.alertHistory.length === 0">
<br> <br>
<i>No state changes recorded</i> <i>No state changes recorded</i>
</div> </div>
<ol class="alert-rule-list" > <ol class="alert-rule-list" >
<li class="alert-rule-item" ng-repeat="al in ctrl.alertHistory"> <li class="alert-rule-item" ng-repeat="al in ctrl.alertHistory">
<div class="alert-rule-item__icon {{al.stateModel.stateClass}}"> <div class="alert-rule-item__icon {{al.stateModel.stateClass}}">
<i class="{{al.stateModel.iconClass}}"></i> <i class="{{al.stateModel.iconClass}}"></i>
</div> </div>
<div class="alert-rule-item__body"> <div class="alert-rule-item__body">
<div class="alert-rule-item__header"> <div class="alert-rule-item__header">
<div class="alert-rule-item__text"> <div class="alert-rule-item__text">
<span class="{{al.stateModel.stateClass}}">{{al.stateModel.text}}</span> <span class="{{al.stateModel.stateClass}}">{{al.stateModel.text}}</span>
</div> </div>
</div> </div>
<span class="alert-list-info">{{al.info}}</span> <span class="alert-list-info">{{al.info}}</span>
</div> </div>
<div class="alert-rule-item__time"> <div class="alert-rule-item__time">
<span>{{al.time}}</span> <span>{{al.time}}</span>
</div> </div>
</li> </li>
</ol> </ol>
</div> </div>
</div> </div>
</div> </div>
<div class="gf-form-group" ng-if="!ctrl.alert"> <div class="gf-form-group" ng-if="!ctrl.alert">
<div class="gf-form-button-row"> <div class="gf-form-button-row">
<button class="btn btn-inverse" ng-click="ctrl.enable()"> <button class="btn btn-inverse" ng-click="ctrl.enable()">
<i class="icon-gf icon-gf-alert"></i> <i class="icon-gf icon-gf-alert"></i>
Create Alert Create Alert
</button> </button>
</div> </div>
</div>
</div> </div>

8
public/app/features/dashboard/dashgrid/DashboardPanel.tsx
View File

@@ -76,16 +76,16 @@ export class DashboardPanel extends PureComponent<Props, State> {
// unmount angular panel // unmount angular panel
this.cleanUpAngularPanel(); this.cleanUpAngularPanel();
if (panel.type !== pluginId) {
this.props.panel.changeType(pluginId, fromAngularPanel);
}
if (plugin.exports) { if (plugin.exports) {
this.setState({ plugin: plugin }); this.setState({ plugin: plugin });
} else { } else {
plugin.exports = await importPluginModule(plugin.module); plugin.exports = await importPluginModule(plugin.module);
this.setState({ plugin: plugin }); this.setState({ plugin: plugin });
} }
if (panel.type !== pluginId) {
this.props.panel.changeType(pluginId, fromAngularPanel);
}
} }
} }

5
public/app/features/dashboard/dashgrid/EditorTabBody.tsx
View File

@@ -10,7 +10,8 @@ interface Props {
} }
export interface EditorToolBarView { export interface EditorToolBarView {
title: string; title?: string;
heading?: string;
imgSrc?: string; imgSrc?: string;
icon?: string; icon?: string;
disabled?: boolean; disabled?: boolean;
@@ -90,7 +91,7 @@ export class EditorTabBody extends PureComponent<Props, State> {
return ( return (
<div className="panel-option-section"> <div className="panel-option-section">
<div className="panel-option-section__header"> <div className="panel-option-section__header">
{view.title} {view.title || view.heading}
<button className="btn btn-link" onClick={this.onCloseOpenView}> <button className="btn btn-link" onClick={this.onCloseOpenView}>
<i className="fa fa-remove" /> <i className="fa fa-remove" />
</button> </button>

10
public/app/features/dashboard/dashgrid/QueriesTab.tsx
View File

@@ -246,7 +246,7 @@ export class QueriesTab extends PureComponent<Props, State> {
}; };
const dsHelp = { const dsHelp = {
title: '', heading: 'Help',
icon: 'fa fa-question', icon: 'fa fa-question',
disabled: !hasQueryHelp, disabled: !hasQueryHelp,
onClick: this.loadHelp, onClick: this.loadHelp,
@@ -254,11 +254,11 @@ export class QueriesTab extends PureComponent<Props, State> {
}; };
return ( return (
<EditorTabBody heading="Data" renderToolbar={this.renderToolbar} toolbarItems={[queryInspector, dsHelp]}> <EditorTabBody heading="Queries" renderToolbar={this.renderToolbar} toolbarItems={[queryInspector, dsHelp]}>
<> <>
<div className="panel-option-section"> <div className="panel-option-section">
<div className="panel-option-section__header">Queries</div> {/*<div className="panel-option-section__header">Queries</div>*/}
<div className="panel-option-section__body panel-option-section__body--queries"> <div className="panel-option-section__body">
<div className="query-editor-rows gf-form-group"> <div className="query-editor-rows gf-form-group">
<div ref={element => (this.element = element)} /> <div ref={element => (this.element = element)} />
@@ -282,7 +282,7 @@ export class QueriesTab extends PureComponent<Props, State> {
</div> </div>
</div> </div>
<div className="panel-option-section"> <div className="panel-option-section">
<div className="panel-option-section__header">Options</div> {/*<div className="panel-option-section__header">Options</div>*/}
<div className="panel-option-section__body"> <div className="panel-option-section__body">
<QueryOptions panel={panel} datasource={currentDS} /> <QueryOptions panel={panel} datasource={currentDS} />
</div> </div>

10
public/app/features/dashboard/dashgrid/QueryInspector.tsx
View File

@@ -1,4 +1,4 @@
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { JSONFormatter } from 'app/core/components/JSONFormatter/JSONFormatter'; import { JSONFormatter } from 'app/core/components/JSONFormatter/JSONFormatter';
import appEvents from 'app/core/app_events'; import appEvents from 'app/core/app_events';
import { CopyToClipboard } from 'app/core/components/CopyToClipboard/CopyToClipboard'; import { CopyToClipboard } from 'app/core/components/CopyToClipboard/CopyToClipboard';
@@ -187,16 +187,10 @@ export class QueryInspector extends PureComponent<Props, State> {
return ( return (
<> <>
<div> <div className="pull-right">
{/*
<button className="btn btn-transparent btn-p-x-0 m-r-1" onClick={this.onToggleMocking}>
Mock response
</button>
*/}
<button className="btn btn-transparent btn-p-x-0 m-r-1" onClick={this.onToggleExpand}> <button className="btn btn-transparent btn-p-x-0 m-r-1" onClick={this.onToggleExpand}>
{this.renderExpandCollapse()} {this.renderExpandCollapse()}
</button> </button>
<CopyToClipboard <CopyToClipboard
className="btn btn-transparent btn-p-x-0" className="btn btn-transparent btn-p-x-0"
text={this.getTextForClipboard} text={this.getTextForClipboard}

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

@@ -106,7 +106,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
template += template +=
` `
<div class="panel-option-section" ng-cloak>` + <div class="panel-option-section" ng-cloak>` +
(i > -1 ? `<div class="panel-option-section__header">{{ctrl.editorTabs[${i}].title}}</div>` : '') + (i > 0 ? `<div class="panel-option-section__header">{{ctrl.editorTabs[${i}].title}}</div>` : '') +
`<div class="panel-option-section__body"> `<div class="panel-option-section__body">
<panel-editor-tab editor-tab="ctrl.editorTabs[${i}]" ctrl="ctrl"></panel-editor-tab> <panel-editor-tab editor-tab="ctrl.editorTabs[${i}]" ctrl="ctrl"></panel-editor-tab>
</div> </div>

6
public/app/features/datasources/settings/DataSourceSettings.tsx
View File

@@ -177,6 +177,9 @@ export class DataSourceSettings extends PureComponent<Props, State> {
<div className="page-container page-body"> <div className="page-container page-body">
<div> <div>
<form onSubmit={this.onSubmit}> <form onSubmit={this.onSubmit}>
{this.isReadOnly() && this.renderIsReadOnlyMessage()}
{this.shouldRenderInfoBox() && <div className="grafana-info-box">{this.getInfoText()}</div>}
<BasicSettings <BasicSettings
dataSourceName={dataSource.name} dataSourceName={dataSource.name}
isDefault={dataSource.isDefault} isDefault={dataSource.isDefault}
@@ -184,9 +187,6 @@ export class DataSourceSettings extends PureComponent<Props, State> {
onNameChange={name => setDataSourceName(name)} onNameChange={name => setDataSourceName(name)}
/> />
{this.shouldRenderInfoBox() && <div className="grafana-info-box">{this.getInfoText()}</div>}
{this.isReadOnly() && this.renderIsReadOnlyMessage()}
{dataSourceMeta.module && ( {dataSourceMeta.module && (
<PluginSettings <PluginSettings
dataSource={dataSource} dataSource={dataSource}

2
public/app/features/panel/partials/general_tab.html
View File

@@ -1,5 +1,5 @@
<div class="panel-option-section"> <div class="panel-option-section">
<div class="panel-option-section__header">Information</div> <!-- <div class="panel&#45;option&#45;section__header">Information</div> -->
<div class="panel-option-section__body"> <div class="panel-option-section__body">
<div class="section"> <div class="section">
<div class="gf-form"> <div class="gf-form">

12
public/app/plugins/panel/graph/tab_display.html
View File

@@ -22,10 +22,10 @@
</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 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> </gf-form-switch>
<div class="gf-form"> <div class="gf-form" ng-if="ctrl.panel.points">
<label class="gf-form-label width-8">Point Radius</label> <label class="gf-form-label width-8">Point Radius</label>
<div class="gf-form-select-wrapper max-width-5"> <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()" ng-disabled="!ctrl.panel.points"></select> <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>
</div> </div>
@@ -66,7 +66,7 @@
</div> </div>
</div> </div>
<div class="gf-form-group"> <div>
<div class="gf-form-inline" ng-repeat="override in ctrl.panel.seriesOverrides" ng-controller="SeriesOverridesCtrl"> <div class="gf-form-inline" ng-repeat="override in ctrl.panel.seriesOverrides" ng-controller="SeriesOverridesCtrl">
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label">alias or regex</label> <label class="gf-form-label">alias or regex</label>
@@ -85,16 +85,16 @@
</span> </span>
</label> </label>
</div> </div>
<div class="gf-form"> <div class="gf-form">
<span class="dropdown" dropdown-typeahead="overrideMenu" dropdown-typeahead-on-select="setOverride($item, $subItem)"> <span class="dropdown" dropdown-typeahead="overrideMenu" dropdown-typeahead-on-select="setOverride($item, $subItem)">
</span> </span>
</div> </div>
<div class="gf-form gf-form--grow"> <div class="gf-form gf-form--grow">
<div class="gf-form-label gf-form-label--grow"></div> <div class="gf-form-label gf-form-label--grow"></div>
</div> </div>
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label"> <label class="gf-form-label">
<i class="fa fa-trash pointer" ng-click="ctrl.removeSeriesOverride(override)"></i> <i class="fa fa-trash pointer" ng-click="ctrl.removeSeriesOverride(override)"></i>

6
public/sass/components/_panel_editor.scss
View File

@@ -127,7 +127,7 @@
} }
.viz-picker { .viz-picker {
padding: 20px; padding: 0px 20px;
position: relative; position: relative;
} }
@@ -141,7 +141,7 @@
border: $panel-editor-viz-item-border; border: $panel-editor-viz-item-border;
border-radius: 3px; border-radius: 3px;
height: 100px; height: 100px;
width: 150px; width: 145px;
flex-shrink: 0; flex-shrink: 0;
flex-direction: column; flex-direction: column;
text-align: center; text-align: center;
@@ -266,6 +266,6 @@
background: $page-bg; background: $page-bg;
&--queries { &--queries {
min-height: 300px; min-height: 200px;
} }
} }