mirror of
https://github.com/fleetdm/fleet
synced 2026-05-23 08:58:41 +00:00
Remove Add Hosts page (#1035)
This commit is contained in:
Kyle Knight
Jason Meller
parent
2381dbd8ae
commit
2a6ccfe4f6
8 changed files with 2 additions and 317 deletions
|
|
@ -44,7 +44,7 @@
|
|||
width: 600px;
|
||||
z-index: 3;
|
||||
padding: 30px;
|
||||
box-shadow: 0 3px 3px rgba(0,0,0,0.07), 0 16px 24px rgba(50,50,93,0.14), inset 0 0 0 1px rgba(74,144,226,0.1);
|
||||
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.07), 0 16px 24px rgba(50, 50, 93, 0.14), inset 0 0 0 1px rgba(74, 144, 226, 0.1);
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,24 +36,7 @@ export default (admin) => {
|
|||
regex: /^\/hosts/,
|
||||
pathname: '/hosts/manage',
|
||||
},
|
||||
subItems: [
|
||||
{
|
||||
icon: 'hosts',
|
||||
name: 'Manage Hosts',
|
||||
location: {
|
||||
regex: /\/hosts\/manage/,
|
||||
pathname: '/hosts/manage',
|
||||
},
|
||||
},
|
||||
{
|
||||
icon: 'add-plus',
|
||||
name: 'Add Hosts',
|
||||
location: {
|
||||
regex: /\/hosts\/new/,
|
||||
pathname: '/hosts/new',
|
||||
},
|
||||
},
|
||||
],
|
||||
subItems: [],
|
||||
},
|
||||
{
|
||||
icon: 'query',
|
||||
|
|
|
|||
|
|
@ -1,131 +0,0 @@
|
|||
import React, { Component, PropTypes } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { noop } from 'lodash';
|
||||
import classnames from 'classnames';
|
||||
|
||||
import { renderFlash } from 'redux/nodes/notifications/actions';
|
||||
import Icon from 'components/icons/Icon';
|
||||
import { copyText } from './helpers';
|
||||
import AnsibleImage from '../../../../assets/images/Ansible.png';
|
||||
import ChefImage from '../../../../assets/images/Chef.png';
|
||||
import PuppetImage from '../../../../assets/images/Puppet.png';
|
||||
|
||||
const HOST_TABS = {
|
||||
FIRST: 'What Does This Script Do?',
|
||||
SECOND: 'Additional Script Options',
|
||||
};
|
||||
|
||||
const baseClass = 'new-host';
|
||||
|
||||
export class NewHostPage extends Component {
|
||||
static propTypes = {
|
||||
dispatch: PropTypes.func,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
dispatch: noop,
|
||||
};
|
||||
|
||||
constructor (props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
method1Text: 'curl https://kolide.acme.com/install/osquery.sh | sudo sh',
|
||||
method1TextCopied: false,
|
||||
selectedTab: HOST_TABS.FIRST,
|
||||
};
|
||||
}
|
||||
|
||||
onCopyText = (text, elementId) => {
|
||||
return (evt) => {
|
||||
evt.preventDefault();
|
||||
|
||||
const { dispatch } = this.props;
|
||||
const { method1Text } = this.state;
|
||||
|
||||
if (copyText(elementId)) {
|
||||
dispatch(renderFlash('success', 'Text copied to clipboard'));
|
||||
} else {
|
||||
dispatch(renderFlash('error', 'Text not copied. Use CMD + C to copy text'));
|
||||
}
|
||||
|
||||
if (text === method1Text) {
|
||||
this.setState({
|
||||
method1TextCopied: true,
|
||||
});
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
this.setState({
|
||||
method1TextCopied: false,
|
||||
});
|
||||
|
||||
return false;
|
||||
}, 1500);
|
||||
|
||||
return false;
|
||||
};
|
||||
}
|
||||
|
||||
render () {
|
||||
const { method1Text, method1TextCopied } = this.state;
|
||||
const { onCopyText } = this;
|
||||
|
||||
const method1IconClasses = classnames(
|
||||
`${baseClass}__clipboard-icon`,
|
||||
{
|
||||
[`${baseClass}__clipboard-icon--copied`]: method1TextCopied,
|
||||
}
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={baseClass}>
|
||||
<section className={`${baseClass}__section-wrap body-wrap`}>
|
||||
<h1 className={`${baseClass}__title`}>Kolide Installation Instructions</h1>
|
||||
<div className={`${baseClass}__input-wrap`}>
|
||||
<input id="method1" className={`${baseClass}__input`} value={method1Text} readOnly />
|
||||
{method1TextCopied && <span className={`${baseClass}__clipboard-text`}>copied!</span>}
|
||||
<a href="#copyMethod1" onClick={onCopyText(method1Text, '#method1')}><Icon name="clipboard" className={method1IconClasses} /></a>
|
||||
</div>
|
||||
|
||||
<div className={`${baseClass}__text`}>
|
||||
<p>This script does the following:</p>
|
||||
<ol className="kolide-ol">
|
||||
<li>Detects operating system.</li>
|
||||
<li>Checks for any existing osqueryd installation.</li>
|
||||
<li>Installs osqueryd and ships your config to communicate with Kolide.</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<p className={`${baseClass}__view-script`}><button className="button button--unstyled">View The Script</button></p>
|
||||
</section>
|
||||
|
||||
<section className={`${baseClass}__section-wrap body-wrap`}>
|
||||
<h1 className={`${baseClass}__title`}>Need More Methods?</h1>
|
||||
|
||||
<p className={`${baseClass}__text`}>Many IT automation frameworks offer direct recipes and scripts for deploying osquery. <br />Choose a method below to learn more.</p>
|
||||
|
||||
<ul className={`${baseClass}__more-methods`}>
|
||||
<li>
|
||||
<button className="button button--unstyled" title="Chef">
|
||||
<img src={ChefImage} alt="Chef" />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button className="button button--unstyled" title="Ansible">
|
||||
<img src={AnsibleImage} alt="Ansible" />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button className="button button--unstyled" title="Puppet">
|
||||
<img src={PuppetImage} alt="Puppet" />
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default connect()(NewHostPage);
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
import React from 'react';
|
||||
import expect from 'expect';
|
||||
import { mount } from 'enzyme';
|
||||
|
||||
import { connectedComponent, reduxMockStore } from '../../../test/helpers';
|
||||
import ConnectedNewHostPage, { NewHostPage } from './NewHostPage';
|
||||
|
||||
describe('New Host Page - component', () => {
|
||||
it('saves text to the clipboard when clipboard icons are clicked', () => {
|
||||
const mockStore = reduxMockStore();
|
||||
const page = mount(
|
||||
connectedComponent(ConnectedNewHostPage, { mockStore })
|
||||
);
|
||||
const icon = page.find('.kolidecon-clipboard').first();
|
||||
icon.simulate('click');
|
||||
|
||||
const dispatchedActionMessages = mockStore.getActions().map((action) => { return action.payload.message; });
|
||||
expect(dispatchedActionMessages).toInclude('Text copied to clipboard');
|
||||
});
|
||||
|
||||
it('saves the copied text in state', () => {
|
||||
const page = mount(<NewHostPage />);
|
||||
const method1Icon = page.find('.kolidecon-clipboard').first();
|
||||
|
||||
method1Icon.simulate('click');
|
||||
|
||||
expect(page.state().method1TextCopied).toEqual(true);
|
||||
});
|
||||
});
|
||||
|
|
@ -1,111 +0,0 @@
|
|||
.new-host {
|
||||
&__section-wrap {
|
||||
margin-bottom: $pad-base;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin: 0 0 32px;
|
||||
}
|
||||
|
||||
&__input-wrap {
|
||||
position: relative;
|
||||
margin: 0 0 23px;
|
||||
}
|
||||
|
||||
&__input {
|
||||
color: $text-ultradark;
|
||||
border-radius: 3px;
|
||||
background-color: $white;
|
||||
border: solid 1px $accent-dark;
|
||||
box-shadow: inset 0 0 8px 0 rgba($black, 0.12);
|
||||
box-sizing: border-box;
|
||||
font-family: SourceCodePro, Oxygen;
|
||||
font-size: $medium;
|
||||
height: 60px;
|
||||
letter-spacing: 1.2px;
|
||||
opacity: 0.8;
|
||||
padding-left: 28px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__clipboard-text {
|
||||
color: $brand;
|
||||
font-size: $xsmall;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&__clipboard-icon {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
cursor: pointer;
|
||||
top: 18px;
|
||||
font-size: $large;
|
||||
color: $text-medium;
|
||||
|
||||
&--copied {
|
||||
color: $brand-light;
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
color: $text-ultradark;
|
||||
font-size: 16px;
|
||||
line-height: 32px;
|
||||
margin: 0 0 $large;
|
||||
max-width: 860px;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.kolide-ol {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__view-script {
|
||||
@include clearfix;
|
||||
margin: 0;
|
||||
|
||||
.button {
|
||||
float: right;
|
||||
color: $link;
|
||||
font-weight: $normal;
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__more-methods {
|
||||
@include display(flex);
|
||||
@include justify-content(space-between);
|
||||
@include align-content(center);
|
||||
@include align-items(center);
|
||||
margin: 0;
|
||||
padding: 42px 0;
|
||||
list-style: none;
|
||||
border-radius: 3px;
|
||||
background-color: $white;
|
||||
box-shadow: inset 0 0 8px 0 rgba(0, 0, 0, 0.08);
|
||||
border: solid 1px $accent-medium;
|
||||
|
||||
li {
|
||||
&:first-child,
|
||||
&:last-child {
|
||||
@include flex-grow(1);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 130px;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
color: $brand;
|
||||
font-family: SourceCodePro, Oxygen;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
import select from 'select';
|
||||
|
||||
const removeSelectedText = () => {
|
||||
return global.window.getSelection().removeAllRanges();
|
||||
};
|
||||
|
||||
export const copyText = (elementId) => {
|
||||
const element = global.document.querySelector(elementId);
|
||||
|
||||
select(element);
|
||||
|
||||
const canCopy = global.document.queryCommandEnabled('copy');
|
||||
|
||||
if (!canCopy) {
|
||||
return false;
|
||||
}
|
||||
|
||||
global.document.execCommand('copy');
|
||||
removeSelectedText();
|
||||
return true;
|
||||
};
|
||||
|
||||
export default { copyText };
|
||||
|
|
@ -1 +0,0 @@
|
|||
export default from './NewHostPage';
|
||||
|
|
@ -17,7 +17,6 @@ import LoginRoutes from 'components/LoginRoutes';
|
|||
import LogoutPage from 'pages/LogoutPage';
|
||||
import ManageHostsPage from 'pages/hosts/ManageHostsPage';
|
||||
import ManageQueriesPage from 'pages/queries/ManageQueriesPage';
|
||||
import NewHostPage from 'pages/hosts/NewHostPage';
|
||||
import PackPageWrapper from 'components/packs/PackPageWrapper';
|
||||
import PackComposerPage from 'pages/packs/PackComposerPage';
|
||||
import QueryPage from 'pages/queries/QueryPage';
|
||||
|
|
@ -52,7 +51,6 @@ const routes = (
|
|||
<Route path="options" component={ConfigOptionsPage} />
|
||||
</Route>
|
||||
<Route path="hosts">
|
||||
<Route path="new" component={NewHostPage} />
|
||||
<Route path="manage" component={ManageHostsPage} />
|
||||
</Route>
|
||||
<Route path="packs" component={PackPageWrapper}>
|
||||
|
|
@ -64,7 +62,6 @@ const routes = (
|
|||
</Route>
|
||||
</Route>
|
||||
<Route path="hosts">
|
||||
<Route path="new" component={NewHostPage} />
|
||||
<Route path="manage(/:active_label)" component={ManageHostsPage} />
|
||||
</Route>
|
||||
<Route path="queries" component={QueryPageWrapper}>
|
||||
|
|
|
|||
Loading…
Reference in a new issue