Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[UI Framework] [K7] Add Kibana sandbox. #13200

Merged
merged 2 commits into from
Jul 29, 2017
Merged

[UI Framework] [K7] Add Kibana sandbox. #13200

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d945ae8
Improve Sandbox Generator.
cjcenizal Jul 28, 2017
40abfd7
Add Kibana sandbox.
cjcenizal Jul 28, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion ui_framework/doc_site/src/services/routes/routes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ import HeaderExample
import KeyPadMenuExample
from '../../views/key_pad_menu/key_pad_menu_example';

import KibanaSandbox
from '../../views/kibana/kibana_sandbox';

import PageExample
from '../../views/page/page_example';

Expand All @@ -21,6 +24,7 @@ import PopoverExample
import TypographyExample
from '../../views/typography/typography_example';


// Component route names should match the component name exactly.
const components = [{
name: 'Accessibility',
Expand Down Expand Up @@ -52,7 +56,11 @@ const components = [{
hasReact: true,
}];

const sandboxes = [];
const sandboxes = [{
name: 'Kibana',
component: KibanaSandbox,
hasReact: true,
}];

const allRoutes = components.concat(sandboxes);

Expand Down
332 changes: 332 additions & 0 deletions ui_framework/doc_site/src/views/kibana/kibana.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,332 @@
import React, {
Component,
} from 'react';

import {
KuiHeader,
KuiHeaderBreadcrumb,
KuiHeaderBreadcrumbCollapsed,
KuiHeaderBreadcrumbs,
KuiHeaderLogo,
KuiHeaderSection,
KuiHeaderSectionItem,
KuiHeaderSectionItemButton,
KuiIcon,
KuiKeyPadMenu,
KuiKeyPadMenuItem,
KuiPage,
KuiPageBody,
KuiPageContent,
KuiPageContentBody,
KuiPageContentHeader,
KuiPageContentHeaderSection,
KuiPageHeader,
KuiPageHeaderSection,
KuiPageSidebar,
KuiPopover,
KuiTitle,
} from '../../../../components';

export default class extends Component {
constructor(props) {
super(props);

this.state = {
isUserMenuOpen: false,
isAppMenuOpen: false,
};
}

onUserMenuButtonClick() {
this.setState({
isUserMenuOpen: !this.state.isUserMenuOpen,
});
}

onAppMenuButtonClick() {
this.setState({
isAppMenuOpen: !this.state.isAppMenuOpen,
});
}

closeUserMenu() {
this.setState({
isUserMenuOpen: false,
});
}

closeAppMenu() {
this.setState({
isAppMenuOpen: false,
});
}

renderLogo() {
return (
<KuiHeaderLogo href="#" />
);
}

renderBreadcrumbs() {
return (
<KuiHeaderBreadcrumbs>
<KuiHeaderBreadcrumb href="#">
Management
</KuiHeaderBreadcrumb>

<KuiHeaderBreadcrumb href="#">
Truncation test is here
</KuiHeaderBreadcrumb>

<KuiHeaderBreadcrumbCollapsed />

<KuiHeaderBreadcrumb href="#">
Users
</KuiHeaderBreadcrumb>

<KuiHeaderBreadcrumb href="#" isActive>
Create
</KuiHeaderBreadcrumb>
</KuiHeaderBreadcrumbs>
);
}

renderSearch() {
return (
<KuiHeaderSectionItemButton>
<KuiIcon type="search" size="medium" />
</KuiHeaderSectionItemButton>
);
}

renderUserMenu() {
const button = (
<KuiHeaderSectionItemButton onClick={this.onUserMenuButtonClick.bind(this)}>
<KuiIcon type="user" size="medium" />
<span className="kuiHeader__notification">3</span>
</KuiHeaderSectionItemButton>
);

return (
<KuiPopover
button={button}
isOpen={this.state.isUserMenuOpen}
anchorPosition="right"
closePopover={this.closeUserMenu.bind(this)}
bodyClassName="kuiHeaderPopover"
>
<div className="kuiHeaderProfile kui--flexRow kui--flexAlignItemsCenter">
<div className="kui--flexShrink1 kui--paddingRight">
<div
className="kuiAvatar kuiAvatar--large"
style={{ background: `url('http://lorempixel.com/64/64/cats/')` }}
/>
</div>
<div className="kui--flexGrow1">
<p className="kui--marginBottom">John Username</p>
<div className="kui--flexRow">
<div className="kui--flexGrow1">
<a href="" className="kuiLink">Edit profile</a>
</div>
<div className="kui--flexGrow1 kui--textAlignRight">
<a href="" className="kuiLink">Log out</a>
</div>
</div>
</div>
</div>
<div className="kuiHeaderAlert">
<svg tabIndex="0" className="kuiIcon kuiIcon--medium kuiHeaderAlert__dismiss">
<use href="#cross" />
</svg>
<p className="kuiHeaderAlert__title">Here's a notification title</p>
<p className="kuiHeaderAlert__text">I am the hat judge. Show me a hat and I will tell you if it's a good hat or bad hat.</p>
<div className="kui--flexRow">
<div className="kui--flexGrow1">
<a href="" className="kuiHeaderAlert__action kuiLink">Download your thing here</a>
</div>
<div className="kui--flexGrow1 kuiHeaderAlert__date">
Nov. 14, 02:14PM.
</div>
</div>
</div>
<div className="kuiHeaderAlert">
<svg tabIndex="0" className="kuiIcon kuiIcon--medium kuiHeaderAlert__dismiss">
<use href="#cross" />
</svg>
<p className="kuiHeaderAlert__title">Here's a really long notification title with nonsense beneath it.</p>
<p className="kuiHeaderAlert__text">Walk the cow through a warm room, and then bring it to my plate.</p>
<div className="kui--flexRow">
<div className="kui--flexGrow1">
<a href="" className="kuiHeaderAlert__action kuiLink">Download your thing here</a>
</div>
<div className="kui--flexGrow1 kuiHeaderAlert__date">
Nov. 14, 02:14PM.
</div>
</div>
</div>
<div className="kuiHeaderAlert">
<svg tabIndex="0" className="kuiIcon kuiIcon--medium kuiHeaderAlert__dismiss">
<use href="#cross" />
</svg>
<p className="kuiHeaderAlert__title">Here's a notification title</p>
<p className="kuiHeaderAlert__text">
Only usable on grilled cheese sandwiches.
That is the only application of Kraft Singles as far as I'm concerned.
</p>
<div className="kui--flexRow">
<div className="kui--flexGrow1">
<a href="" className="kuiHeaderAlert__action kuiLink">Download your thing here</a>
</div>
<div className="kui--flexGrow1 kuiHeaderAlert__date">
Nov. 14, 02:14PM.
</div>
</div>
</div>
</KuiPopover>
);
}

renderAppMenu() {
const button = (
<KuiHeaderSectionItemButton onClick={this.onAppMenuButtonClick.bind(this)}>
<KuiIcon type="apps" size="medium" />
</KuiHeaderSectionItemButton>
);

return (
<KuiPopover
button={button}
isOpen={this.state.isAppMenuOpen}
anchorPosition="right"
closePopover={this.closeAppMenu.bind(this)}
bodyClassName="kuiHeaderPopover"
>
<KuiKeyPadMenu>
<KuiKeyPadMenuItem
label="Discover"
href="#"
>
<KuiIcon type="discoverApp" size="large" />
</KuiKeyPadMenuItem>

<KuiKeyPadMenuItem
label="Dashboard"
href="#"
>
<KuiIcon type="dashboardApp" size="large" />
</KuiKeyPadMenuItem>

<KuiKeyPadMenuItem
label="Dev Tools"
href="#"
>
<KuiIcon type="devToolsApp" size="large" />
</KuiKeyPadMenuItem>

<KuiKeyPadMenuItem
label="Machine Learning"
href="#"
>
<KuiIcon type="machineLearningApp" size="large" />
</KuiKeyPadMenuItem>

<KuiKeyPadMenuItem
label="Graph"
href="#"
>
<KuiIcon type="graphApp" size="large" />
</KuiKeyPadMenuItem>

<KuiKeyPadMenuItem
label="Visualize"
href="#"
>
<KuiIcon type="visualizeApp" size="large" />
</KuiKeyPadMenuItem>

<KuiKeyPadMenuItem
label="Timelion"
href="#"
>
<KuiIcon type="timelionApp" size="large" />
</KuiKeyPadMenuItem>
</KuiKeyPadMenu>
</KuiPopover>
);
}

renderHeader() {
return (
<KuiHeader>
<KuiHeaderSection>
<KuiHeaderSectionItem border="right">
{this.renderLogo()}
</KuiHeaderSectionItem>

{this.renderBreadcrumbs()}
</KuiHeaderSection>

<KuiHeaderSection side="right">
<KuiHeaderSectionItem>
{this.renderSearch()}
</KuiHeaderSectionItem>

<KuiHeaderSectionItem>
{this.renderUserMenu()}
</KuiHeaderSectionItem>

<KuiHeaderSectionItem>
{this.renderAppMenu()}
</KuiHeaderSectionItem>
</KuiHeaderSection>
</KuiHeader>
);
}

renderPage() {
return (
<KuiPage>
<KuiPageHeader>
<KuiPageHeaderSection>
<KuiTitle size="large">
<h1>Page title</h1>
</KuiTitle>
</KuiPageHeaderSection>
<KuiPageHeaderSection>
Page abilities
</KuiPageHeaderSection>
</KuiPageHeader>
<KuiPageBody>
<KuiPageSidebar>
Sidebar nav
</KuiPageSidebar>
<KuiPageContent>
<KuiPageContentHeader>
<KuiPageContentHeaderSection>
<KuiTitle>
<h2>Content title</h2>
</KuiTitle>
</KuiPageContentHeaderSection>
<KuiPageContentHeaderSection>
Content abilities
</KuiPageContentHeaderSection>
</KuiPageContentHeader>
<KuiPageContentBody>
Content body
</KuiPageContentBody>
</KuiPageContent>
</KuiPageBody>
</KuiPage>
);
}

render() {
return (
<div>
{this.renderHeader()}
{this.renderPage()}
</div>
);
}
}

33 changes: 33 additions & 0 deletions ui_framework/doc_site/src/views/kibana/kibana_sandbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import React from 'react';

import { renderToHtml } from '../../services';

import {
GuideDemo,
GuideSandbox,
GuideSandboxCodeToggle,
GuideSectionTypes,
} from '../../components';

import Kibana from './kibana';
const kibanaSource = require('!!raw!./kibana');
const kibanaHtml = renderToHtml(Kibana);

export default props => (
<GuideSandbox>
<GuideDemo isFullScreen={true}>
<Kibana />
</GuideDemo>

<GuideSandboxCodeToggle
title={props.route.name}
source={[{
type: GuideSectionTypes.JS,
code: kibanaSource,
}, {
type: GuideSectionTypes.HTML,
code: kibanaHtml,
}]}
/>
</GuideSandbox>
);
Loading