mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
further refactoring of #13984
This commit is contained in:
@@ -7,7 +7,6 @@ import { getTimeSrv } from '../time_srv';
|
|||||||
// Components
|
// Components
|
||||||
import { PanelHeader } from './PanelHeader/PanelHeader';
|
import { PanelHeader } from './PanelHeader/PanelHeader';
|
||||||
import { DataPanel } from './DataPanel';
|
import { DataPanel } from './DataPanel';
|
||||||
import { PanelHeaderMenu } from './PanelHeader/PanelHeaderMenu';
|
|
||||||
|
|
||||||
// Types
|
// Types
|
||||||
import { PanelModel } from '../panel_model';
|
import { PanelModel } from '../panel_model';
|
||||||
@@ -79,9 +78,7 @@ export class PanelChrome extends PureComponent<Props, State> {
|
|||||||
console.log('panelChrome render');
|
console.log('panelChrome render');
|
||||||
return (
|
return (
|
||||||
<div className="panel-container">
|
<div className="panel-container">
|
||||||
<PanelHeader title={panel.title}>
|
<PanelHeader panel={panel} dashboard={dashboard} />
|
||||||
<PanelHeaderMenu panel={panel} dashboard={dashboard} />
|
|
||||||
</PanelHeader>
|
|
||||||
<div className="panel-content">
|
<div className="panel-content">
|
||||||
<DataPanel
|
<DataPanel
|
||||||
datasource={datasource}
|
datasource={datasource}
|
||||||
|
|||||||
@@ -1,8 +1,14 @@
|
|||||||
import React, { PureComponent } from 'react';
|
import React, { PureComponent } from 'react';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
|
|
||||||
interface Props {
|
import { PanelHeaderMenu } from './PanelHeaderMenu';
|
||||||
title: string;
|
|
||||||
|
import { DashboardModel } from 'app/features/dashboard/dashboard_model';
|
||||||
|
import { PanelModel } from 'app/features/dashboard/panel_model';
|
||||||
|
|
||||||
|
export interface Props {
|
||||||
|
panel: PanelModel;
|
||||||
|
dashboard: DashboardModel;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class PanelHeader extends PureComponent<Props> {
|
export class PanelHeader extends PureComponent<Props> {
|
||||||
@@ -10,7 +16,7 @@ export class PanelHeader extends PureComponent<Props> {
|
|||||||
const isFullscreen = false;
|
const isFullscreen = false;
|
||||||
const isLoading = false;
|
const isLoading = false;
|
||||||
const panelHeaderClass = classNames({ 'panel-header': true, 'grid-drag-handle': !isFullscreen });
|
const panelHeaderClass = classNames({ 'panel-header': true, 'grid-drag-handle': !isFullscreen });
|
||||||
const { title } = this.props;
|
const { panel, dashboard } = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={panelHeaderClass}>
|
<div className={panelHeaderClass}>
|
||||||
@@ -29,10 +35,11 @@ export class PanelHeader extends PureComponent<Props> {
|
|||||||
<div className="panel-title">
|
<div className="panel-title">
|
||||||
<span className="icon-gf panel-alert-icon" />
|
<span className="icon-gf panel-alert-icon" />
|
||||||
<span className="panel-title-text" data-toggle="dropdown">
|
<span className="panel-title-text" data-toggle="dropdown">
|
||||||
{title} <span className="fa fa-caret-down panel-menu-toggle" />
|
{panel.title} <span className="fa fa-caret-down panel-menu-toggle" />
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
{this.props.children}
|
<PanelHeaderMenu panel={panel} dashboard={dashboard} />
|
||||||
|
|
||||||
<span className="panel-time-info">
|
<span className="panel-time-info">
|
||||||
<i className="fa fa-clock-o" /> 4m
|
<i className="fa fa-clock-o" /> 4m
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
|
|||||||
import { DashboardModel } from 'app/features/dashboard/dashboard_model';
|
import { DashboardModel } from 'app/features/dashboard/dashboard_model';
|
||||||
import { PanelModel } from 'app/features/dashboard/panel_model';
|
import { PanelModel } from 'app/features/dashboard/panel_model';
|
||||||
import { PanelHeaderMenuItem } from './PanelHeaderMenuItem';
|
import { PanelHeaderMenuItem } from './PanelHeaderMenuItem';
|
||||||
import { getPanelMenu } from 'app/features/dashboard/utils/panel_menu';
|
import { getPanelMenu } from 'app/features/dashboard/utils/getPanelMenu';
|
||||||
import { PanelMenuItem } from 'app/types/panel';
|
import { PanelMenuItem } from 'app/types/panel';
|
||||||
|
|
||||||
export interface Props {
|
export interface Props {
|
||||||
|
|||||||
@@ -1,7 +1,11 @@
|
|||||||
import React, { SFC } from 'react';
|
import React, { SFC } from 'react';
|
||||||
import { PanelMenuItem } from 'app/types/panel';
|
import { PanelMenuItem } from 'app/types/panel';
|
||||||
|
|
||||||
export const PanelHeaderMenuItem: SFC<PanelMenuItem> = props => {
|
interface Props {
|
||||||
|
children: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const PanelHeaderMenuItem: SFC<Props & PanelMenuItem> = props => {
|
||||||
const isSubMenu = props.type === 'submenu';
|
const isSubMenu = props.type === 'submenu';
|
||||||
const isDivider = props.type === 'divider';
|
const isDivider = props.type === 'divider';
|
||||||
return isDivider ? (
|
return isDivider ? (
|
||||||
|
|||||||
@@ -19,6 +19,5 @@ export interface PanelMenuItem {
|
|||||||
iconClassName?: string;
|
iconClassName?: string;
|
||||||
onClick?: () => void;
|
onClick?: () => void;
|
||||||
shortcut?: string;
|
shortcut?: string;
|
||||||
children?: any;
|
|
||||||
subMenu?: PanelMenuItem[];
|
subMenu?: PanelMenuItem[];
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user