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

Removed some split complexity

Browse Source
This commit is contained in:
Hugo Häggmark 2019-01-24 12:00:10 +01:00
parent 0a094a13f2
commit 21df0c90a9
2 changed files with 44 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
public/app/features/explore/ExploreToolbar.tsx
View File

@ -3,18 +3,6 @@ import { ExploreId } from 'app/types/explore';
import { DataSourceSelectItem, RawTimeRange, TimeRange } from '@grafana/ui'; import { DataSourceSelectItem, RawTimeRange, TimeRange } from '@grafana/ui';
import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker'; import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker';
const createDatasourcePicker = (props: Props) => {
const { exploreDatasources, selectedDatasource } = props;
return (
<DataSourcePicker
onChange={props.onChangeDatasource}
datasources={exploreDatasources}
current={selectedDatasource}
/>
);
};
const createResponsiveButton = (options: { const createResponsiveButton = (options: {
splitted: boolean; splitted: boolean;
title: string; title: string;
@ -32,12 +20,6 @@ const createResponsiveButton = (options: {
); );
}; };
const createSplittedClassName = (options: { splitted: boolean; className: string }) => {
const { className, splitted } = options;
return splitted ? `${className}-splitted` : className;
};
interface Props { interface Props {
datasourceMissing: boolean; datasourceMissing: boolean;
exploreDatasources: DataSourceSelectItem[]; exploreDatasources: DataSourceSelectItem[];
@ -61,18 +43,20 @@ export class ExploreToolbar extends PureComponent<Props, {}> {
} }
render() { render() {
const { datasourceMissing, exploreId, loading, splitted, timepicker } = this.props; const {
const toolbar = createSplittedClassName({ splitted, className: 'toolbar' }); datasourceMissing,
const toolbarItem = createSplittedClassName({ splitted, className: 'toolbar-item' }); exploreDatasources,
const toolbarHeader = createSplittedClassName({ splitted, className: 'toolbar-header' }); exploreId,
const toolbarContent = createSplittedClassName({ splitted, className: 'toolbar-content' }); loading,
const toolbarContentItem = createSplittedClassName({ splitted, className: 'toolbar-content-item' }); selectedDatasource,
const timepickerClasses = createSplittedClassName({ splitted, className: 'timepicker toolbar-content-item' }); splitted,
timepicker,
} = this.props;
return ( return (
<div className={toolbar}> <div className={splitted ? 'toolbar splitted' : 'toolbar'}>
<div className={toolbarItem}> <div className="toolbar-item">
<div className={toolbarHeader}> <div className="toolbar-header">
<div className="toolbar-header-title"> <div className="toolbar-header-title">
{exploreId === 'left' && ( {exploreId === 'left' && (
<a className="navbar-page-btn"> <a className="navbar-page-btn">
@ -90,15 +74,21 @@ export class ExploreToolbar extends PureComponent<Props, {}> {
</div> </div>
</div> </div>
</div> </div>
<div className={toolbarItem}> <div className="toolbar-item">
<div className={toolbarContent}> <div className="toolbar-content">
{!datasourceMissing ? ( {!datasourceMissing ? (
<div className={toolbarContentItem}> <div className="toolbar-content-item">
<div className="datasource-picker">{createDatasourcePicker(this.props)}</div> <div className="datasource-picker">
<DataSourcePicker
onChange={this.props.onChangeDatasource}
datasources={exploreDatasources}
current={selectedDatasource}
/>
</div>
</div> </div>
) : null} ) : null}
{exploreId === 'left' && !splitted ? ( {exploreId === 'left' && !splitted ? (
<div className={toolbarContentItem}> <div className="toolbar-content-item">
{createResponsiveButton({ {createResponsiveButton({
splitted, splitted,
title: 'Split', title: 'Split',
@ -107,13 +97,13 @@ export class ExploreToolbar extends PureComponent<Props, {}> {
})} })}
</div> </div>
) : null} ) : null}
<div className={timepickerClasses}>{timepicker}</div> <div className="toolbar-content-item timepicker">{timepicker}</div>
<div className={toolbarContentItem}> <div className="toolbar-content-item">
<button className="btn navbar-button navbar-button--no-icon" onClick={this.props.onClearAll}> <button className="btn navbar-button navbar-button--no-icon" onClick={this.props.onClearAll}>
Clear All Clear All
</button> </button>
</div> </div>
<div className={toolbarContentItem}> <div className="toolbar-content-item">
{createResponsiveButton({ {createResponsiveButton({
splitted, splitted,
title: 'Run Query', title: 'Run Query',

36
public/sass/pages/_explore.scss
View File

@ -14,7 +14,6 @@
} }
.sidemenu-open { .sidemenu-open {
.toolbar-header-splitted,
.toolbar-header { .toolbar-header {
padding: 0; padding: 0;
margin-left: 0; margin-left: 0;
@ -27,7 +26,6 @@
} }
} }
.toolbar-splitted,
.toolbar { .toolbar {
background: inherit; background: inherit;
display: flex; display: flex;
@ -41,21 +39,26 @@
transition-property: box-shadow, border-bottom; transition-property: box-shadow, border-bottom;
} }
.toolbar-item-splitted,
.toolbar-item { .toolbar-item {
position: relative; position: relative;
align-self: center; align-self: center;
} }
.toolbar-item-splitted { .toolbar.splitted {
flex: 1 1 100%; .toolbar-item {
flex: 1 1 100%;
}
.toolbar-content-item:first-child {
padding-left: 0;
margin-right: auto;
}
} }
.toolbar-item:last-child { .toolbar-item:last-child {
flex: auto; flex: auto;
} }
.toolbar-header-splitted,
.toolbar-header { .toolbar-header {
display: flex; display: flex;
flex: 1 1 0; flex: 1 1 0;
@ -90,7 +93,6 @@
margin-left: auto; margin-left: auto;
} }
.toolbar-content-splitted,
.toolbar-content { .toolbar-content {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
@ -107,14 +109,11 @@
margin-right: auto; margin-right: auto;
} }
.toolbar-content-item-splitted:first-child {
padding-left: 0;
margin-right: auto;
}
@media only screen and (max-width: 1545px) { @media only screen and (max-width: 1545px) {
.timepicker-rangestring { .toolbar.splitted {
display: none; .timepicker-rangestring {
display: none;
}
} }
} }
@ -125,14 +124,15 @@
} }
} }
.toolbar-content-splitted,
.toolbar-content { .toolbar-content {
justify-content: flex-start; justify-content: flex-start;
} }
.toolbar-content-item-splitted { .toolbar.splitted {
padding: 2px 0; .toolbar-content-item {
margin: 0; padding: 2px 0;
margin: 0;
}
} }
.toolbar-content-item { .toolbar-content-item {