further refactoring of #13984

This commit is contained in:
Torkel Ödegaard
2018-11-07 13:55:02 +01:00
parent a24f6998f2
commit 37eb7ca62b
6 changed files with 19 additions and 12 deletions

View File

@@ -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}

View File

@@ -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>

View File

@@ -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 {

View File

@@ -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 ? (

View File

@@ -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[];
} }