IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-09 23:16:16 -06:00
Code Issues Packages Projects Releases Wiki Activity

styling progress

Browse Source
This commit is contained in:
Torkel Ödegaard 2018-11-22 08:46:54 +01:00
parent c7e296307a
commit 9a2b2863fb
7 changed files with 61 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -64,7 +64,7 @@ export class AlertTab extends PureComponent<Props> {
render() {
return (
<EditorTabBody toolbarItems={[]}>
<EditorTabBody heading="Alert" toolbarItems={[]}>
<div ref={element => (this.element = element)} />
</EditorTabBody>
);

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

@ -43,14 +43,8 @@ export class GeneralTab extends PureComponent<Props> {
}
render() {
const currentDataSource = {
title: 'ProductionDB',
imgSrc: 'public/app/plugins/datasource/prometheus/img/prometheus_logo.svg',
render: () => <h2>hello</h2>,
};
return (
<EditorTabBody toolbarItems={[]}>
<EditorTabBody heading="General" toolbarItems={[]}>
<div ref={element => (this.element = element)} />
</EditorTabBody>
);

23
public/app/features/dashboard/dashgrid/PanelEditor.tsx
View File

@ -72,10 +72,7 @@ export class PanelEditor extends PureComponent<PanelEditorProps> {
const { plugin } = this.props;
const activeTab = store.getState().location.query.tab || 'queries';
const tabs = [
{ id: 'queries', text: 'Queries' },
{ id: 'visualization', text: 'Visualization' },
];
const tabs = [{ id: 'queries', text: 'Queries' }, { id: 'visualization', text: 'Visualization' }];
if (config.alertingEnabled && plugin.id === 'graph') {
tabs.push({
@ -86,16 +83,18 @@ export class PanelEditor extends PureComponent<PanelEditorProps> {
return (
<div className="panel-editor-container__editor">
<div className="panel-editor-resizer">
<div className="panel-editor-resizer__handle">
<div className="panel-editor-resizer__handle-dots" />
</div>
</div>
{
// <div className="panel-editor-resizer">
// <div className="panel-editor-resizer__handle">
// <div className="panel-editor-resizer__handle-dots" />
// </div>
// </div>
}
<div className="panel-editor-tabs">
{tabs.map(tab => {
return <TabItem tab={tab} activeTab={activeTab} onClick={this.onChangeTab} key={tab.id} />;
})}
{tabs.map(tab => {
return <TabItem tab={tab} activeTab={activeTab} onClick={this.onChangeTab} key={tab.id} />;
})}
</div>
{this.renderCurrentTab(activeTab)}
</div>

70
public/app/features/panel/partials/metrics_tab.html
View File

@ -1,73 +1,3 @@
<div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label">Data Source</label>
<gf-form-dropdown model="ctrl.panelDsValue" css-class="gf-size-auto"
lookup-text="true"
get-options="ctrl.getOptions(true)"
on-change="ctrl.datasourceChanged($option)">
</gf-form-dropdown>
</div>
<div class="gf-form gf-form--grow">
<label class="gf-form-label gf-form-label--grow"></label>
</div>
<div class="gf-form" ng-if="ctrl.queryOptions">
<a class="gf-form-label" ng-click="ctrl.toggleOptions()">
<i class="fa fa-fw fa-caret-right" ng-hide="ctrl.optionsOpen"></i><i class="fa fa-fw fa-caret-down" ng-show="ctrl.optionsOpen"></i>Options
</a>
</div>
<div class="gf-form" ng-if="ctrl.hasQueryHelp">
<button class="gf-form-label" ng-click="ctrl.toggleHelp()">
<i class="fa fa-fw fa-caret-right" ng-hide="ctrl.helpOpen"></i><i class="fa fa-fw fa-caret-down" ng-show="ctrl.helpOpen"></i>Help
</button>
</div>
<div class="gf-form">
<button class="gf-form-label" ng-click="ctrl.toggleQueryTroubleshooter()" bs-tooltip="'Display query request & response'">
<i class="fa fa-fw fa-caret-right" ng-hide="ctrl.queryTroubleshooterOpen"></i><i class="fa fa-fw fa-caret-down" ng-show="ctrl.queryTroubleshooterOpen"></i>Query Inspector
</button>
</div>
</div>
<div>
<div ng-if="ctrl.optionsOpen">
<div class="gf-form gf-form--flex-end" ng-if="ctrl.queryOptions.minInterval">
<label class="gf-form-label">Min time interval</label>
<input type="text" class="gf-form-input width-6" placeholder="{{ctrl.panelCtrl.interval}}" ng-model="ctrl.panel.interval" spellcheck="false" ng-model-onblur ng-change="ctrl.panelCtrl.refresh()" />
<info-popover mode="right-absolute">
A lower limit for the auto group by time interval. Recommended to be set to write frequency,
for example <code>1m</code> if your data is written every minute. Access auto interval via variable <code>$__interval</code> for time range
string and <code>$__interval_ms</code> for numeric variable that can be used in math expressions.
</info-popover>
</div>
<div class="gf-form gf-form--flex-end" ng-if="ctrl.queryOptions.cacheTimeout">
<label class="gf-form-label width-9">Cache timeout</label>
<input type="text" class="gf-form-input width-6" placeholder="60" ng-model="ctrl.panel.cacheTimeout" ng-model-onblur ng-change="ctrl.panelCtrl.refresh()" spellcheck="false" />
<info-popover mode="right-absolute">
If your time series store has a query cache this option can override the default
cache timeout. Specify a numeric value in seconds.
</info-popover>
</div>
<div class="gf-form gf-form--flex-end" ng-if="ctrl.queryOptions.maxDataPoints">
<label class="gf-form-label width-9">Max data points</label>
<input type="text" class="gf-form-input width-6" placeholder="auto" ng-model-onblur ng-change="ctrl.panelCtrl.refresh()" ng-model="ctrl.panel.maxDataPoints" spellcheck="false" />
<info-popover mode="right-absolute">
The maximum data points the query should return. For graphs this
is automatically set to one data point per pixel.
</info-popover>
</div>
</div>
<div class="grafana-info-box" ng-if="ctrl.helpOpen">
<div class="markdown-html" ng-bind-html="ctrl.helpHtml"></div>
<a class="grafana-info-box__close" ng-click="ctrl.toggleHelp()">
<i class="fa fa-chevron-up"></i>
</a>
</div>
<query-troubleshooter panel-ctrl="ctrl.panelCtrl" is-open="ctrl.queryTroubleshooterOpen"></query-troubleshooter>
</div>
</div>
<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}">

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

@ -33,6 +33,10 @@
display: flex;
flex-direction: column;
flex-grow: 1;
background: $page-bg;
margin: 0 67px;
border-left: 2px solid #ac5224;
border-radius: 3px;
}
.panel-editor__scroll {
@ -43,7 +47,6 @@
.panel-editor__content {
padding: 40px 20px;
background: $input-label-bg;
}
.panel-in-fullscreen {
@ -158,11 +161,45 @@
z-index: 2;
display: flex;
flex-direction: column;
padding: 40px 10px 10px 10px;
position: absolute;
top: 60px;
left: 5px;
align-items: center;
&::before {
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 25px;
width: 2px;
background: #8e8e8e;
}
}
.panel-editor-tabs__item {
margin-bottom: 25px;
position: relative;
z-index: 1;
text-align: center;
&:last-child {
margin-bottom: 0;
}
}
.panel-editor-tabs__link {
display: inline-block;
&.active {
position: relative;
left: 4px;
}
img {
height: 44px;
}
}
.ds-picker-list {

3
public/sass/components/_toolbar.scss
View File

@ -6,6 +6,9 @@
position: relative;
z-index: 1;
flex: 0 0 auto;
background: $input-label-bg;
border-bottom: 1px solid $black;
border-radius: 3px;
}
.toolbar__heading {

6
public/sass/layout/_page.scss
View File

@ -14,6 +14,12 @@
background: $page-gradient;
}
.panel-in-fullscreen {
.main-view {
background: linear-gradient(180deg, #222426 10px, #090909 200px);
}
}
.page-container {
margin-left: auto;
margin-right: auto;