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

minor layout change, simple render test

Browse Source
This commit is contained in:
Peter Holmberg
2019-02-05 12:47:42 +01:00
parent e4dad78045
commit 2802569529
4 changed files with 146 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.test.tsx Normal file
View File

@@ -0,0 +1,23 @@
import React from 'react';
import { shallow } from 'enzyme';
import { AddPanelWidget, Props } from './AddPanelWidget';
import { DashboardModel, PanelModel } from '../../state';
const setup = (propOverrides?: object) => {
const props: Props = {
dashboard: {} as DashboardModel,
panel: {} as PanelModel,
};
Object.assign(props, propOverrides);
return shallow(<AddPanelWidget {...props} />);
};
describe('Render', () => {
it('should render component', () => {
const wrapper = setup();
expect(wrapper).toMatchSnapshot();
});
});

37
public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx
View File

@@ -1,8 +1,8 @@
import React from 'react';
import _ from 'lodash';
import config from 'app/core/config';
import { PanelModel } from '../../state/PanelModel';
import { DashboardModel } from '../../state/DashboardModel';
import { PanelModel } from '../../state';
import { DashboardModel } from '../../state';
import store from 'app/core/store';
import { LS_PANEL_COPY_KEY } from 'app/core/constants';
import { updateLocation } from 'app/core/actions';
@@ -57,6 +57,7 @@ export class AddPanelWidget extends React.Component<Props, State> {
copiedPanels.push(pluginCopy);
}
}
return _.sortBy(copiedPanels, 'sort');
}
@@ -65,14 +66,6 @@ export class AddPanelWidget extends React.Component<Props, State> {
this.props.dashboard.removePanel(this.props.dashboard.panels[0]);
}
copyButton(panel) {
return (
<button className="btn-inverse btn" onClick={() => this.onPasteCopiedPanel(panel)} title={panel.name}>
Paste copied Panel
</button>
);
}
moveToEdit(location) {
reduxStore.dispatch(updateLocation(location));
}
@@ -151,7 +144,7 @@ export class AddPanelWidget extends React.Component<Props, State> {
renderOptionLink = (icon, text, onClick) => {
return (
<div>
<a href="#" onClick={onClick} className="add-panel-widget__link btn-inverse">
<a href="#" onClick={onClick} className="add-panel-widget__link btn btn-inverse">
<div className="add-panel-widget__icon">
<i className={`gicon gicon-${icon}`} />
</div>
@@ -162,6 +155,8 @@ export class AddPanelWidget extends React.Component<Props, State> {
};
render() {
const { copiedPanelPlugins } = this.state;
return (
<div className="panel-container add-panel-widget-container">
<div className="add-panel-widget">
@@ -172,9 +167,25 @@ export class AddPanelWidget extends React.Component<Props, State> {
</button>
</div>
<div className="add-panel-widget__btn-container">
<div className="add-panel-widget__create">
{this.renderOptionLink('queries', 'Add query', this.onCreateNewPanel)}
{this.renderOptionLink('visualization', 'Choose Panel type', () => this.onCreateNewPanel('visualization'))}
{this.renderOptionLink('queries', 'Convert to row', this.onCreateNewRow)}
{this.renderOptionLink('visualization', 'Choose Panel type', () =>
this.onCreateNewPanel('visualization')
)}
</div>
<div className="add-panel-widget__actions">
<div className="add-panel-widget__action" onClick={this.onCreateNewRow}>
Convert to row
</div>
{copiedPanelPlugins.length === 1 && (
<div
className="add-panel-widget__action"
onClick={() => this.onPasteCopiedPanel(copiedPanelPlugins[0])}
>
Paste copied panel
</div>
)}
</div>
</div>
</div>
</div>

27
public/app/features/dashboard/components/AddPanelWidget/_AddPanelWidget.scss
View File

@@ -27,11 +27,8 @@
}
.add-panel-widget__link {
display: block;
margin: 0 8px;
width: 130px;
text-align: center;
padding: 8px 0;
width: 150px;
}
.add-panel-widget__icon {
@@ -54,14 +51,24 @@
margin-right: -10px;
}
.add-panel-widget__create {
display: inherit;
margin-bottom: 24px;
}
.add-panel-widget__actions {
display: inherit;
}
.add-panel-widget__action {
cursor: pointer;
margin: 0 4px;
}
.add-panel-widget__btn-container {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
flex-direction: row;
.btn {
margin-bottom: 10px;
}
flex-direction: column;
}

81
public/app/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap Normal file
View File

@@ -0,0 +1,81 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Render should render component 1`] = `
<div
className="panel-container add-panel-widget-container"
>
<div
className="add-panel-widget"
>
<div
className="add-panel-widget__header grid-drag-handle"
>
<i
className="gicon gicon-add-panel"
/>
<button
className="add-panel-widget__close"
onClick={[Function]}
>
<i
className="fa fa-close"
/>
</button>
</div>
<div
className="add-panel-widget__btn-container"
>
<div
className="add-panel-widget__create"
>
<div>
<a
className="add-panel-widget__link btn btn-inverse"
href="#"
onClick={[Function]}
>
<div
className="add-panel-widget__icon"
>
<i
className="gicon gicon-queries"
/>
</div>
<span>
Add query
</span>
</a>
</div>
<div>
<a
className="add-panel-widget__link btn btn-inverse"
href="#"
onClick={[Function]}
>
<div
className="add-panel-widget__icon"
>
<i
className="gicon gicon-visualization"
/>
</div>
<span>
Choose Panel type
</span>
</a>
</div>
</div>
<div
className="add-panel-widget__actions"
>
<div
className="add-panel-widget__action"
onClick={[Function]}
>
Convert to row
</div>
</div>
</div>
</div>
</div>
`;