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

fixed logging start page

Browse Source
This commit is contained in:
Torkel Ödegaard 2018-12-04 12:59:24 +01:00
parent ac6170a7cc
commit 47523f80dd
5 changed files with 14 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/plugins/datasource/logging/components/LoggingCheatSheet.tsx
View File

@ -15,7 +15,7 @@ const CHEAT_SHEET_ITEMS = [
export default (props: any) => (
<div>
<h1>Logging Cheat Sheet</h1>
<h2>Logging Cheat Sheet</h2>
{CHEAT_SHEET_ITEMS.map(item => (
<div className="cheat-sheet-item" key={item.expression}>
<div className="cheat-sheet-item__title">{item.title}</div>

56
public/app/plugins/datasource/logging/components/LoggingStartPage.tsx
View File

@ -1,59 +1,15 @@
import React, { PureComponent } from 'react';
import classNames from 'classnames';
import LoggingCheatSheet from './LoggingCheatSheet';
const TAB_MENU_ITEMS = [
{
text: 'Start',
id: 'start',
icon: 'fa fa-rocket',
},
];
export default class LoggingStartPage extends PureComponent<any, { active: string }> {
state = {
active: 'start',
};
onClickTab = active => {
this.setState({ active });
};
interface Props {
onClickExample: () => void;
}
export default class LoggingStartPage extends PureComponent<Props> {
render() {
const { active } = this.state;
const customCss = '';
return (
<div style={{ margin: '45px 0', border: '1px solid #ddd', borderRadius: 5 }}>
<div className="page-header-canvas">
<div className="page-container">
<div className="page-header">
<nav>
<ul className={`gf-tabs ${customCss}`}>
{TAB_MENU_ITEMS.map((tab, idx) => {
const tabClasses = classNames({
'gf-tabs-link': true,
active: tab.id === active,
});
return (
<li className="gf-tabs-item" key={tab.id}>
<a className={tabClasses} onClick={() => this.onClickTab(tab.id)}>
<i className={tab.icon} />
{tab.text}
</a>
</li>
);
})}
</ul>
</nav>
</div>
</div>
</div>
<div className="page-container page-body">
{active === 'start' && <LoggingCheatSheet onClickExample={this.props.onClickExample} />}
</div>
<div className="grafana-info-box">
<LoggingCheatSheet onClickExample={this.props.onClickExample} />
</div>
);
}

2
public/app/plugins/datasource/prometheus/components/PromCheatSheet.tsx
View File

@ -21,7 +21,7 @@ const CHEAT_SHEET_ITEMS = [
export default (props: any) => (
<div>
<h1>PromQL Cheat Sheet</h1>
<h2>PromQL Cheat Sheet</h2>
{CHEAT_SHEET_ITEMS.map(item => (
<div className="cheat-sheet-item" key={item.expression}>
<div className="cheat-sheet-item__title">{item.title}</div>

7
public/app/plugins/datasource/prometheus/components/PromStart.tsx
View File

@ -1,8 +1,11 @@
import React, { PureComponent } from 'react';
import PromCheatSheet from './PromCheatSheet';
export default class PromStart extends PureComponent<any> {
interface Props {
onClickExample: () => void;
}
export default class PromStart extends PureComponent<Props> {
render() {
return (
<div className="grafana-info-box">

2
public/sass/_variables.light.scss
View File

@ -218,7 +218,7 @@ $tab-border-color: $gray-5;
$search-shadow: 0 5px 30px 0 $gray-4;
$search-filter-box-bg: $gray-7;
// ypeahead
// Typeahead
$typeahead-shadow: 0 5px 10px 0 $gray-5;
$typeahead-selected-bg: $gray-6;
$typeahead-selected-color: $yellow;