empayre/fleet
14
0
Fork 0
mirror of https://github.com/empayre/fleet.git synced 2024-11-06 08:55:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update app settings page and osquery options page styles. (#107)

Browse Source 
The goal of this PR is to implement the new global styling (colors, buttons, and fonts) to the "App settings" and "Osquery options" pages. These pages are only visible to users granted an admin role.
This commit is contained in:
noahtalerman 2020-12-08 12:08:59 -08:00 committed by GitHub
parent 5dd9b75e9c
commit 523d596c77
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 108 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/fleet-avatar-24x24@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
assets/images/open-new-tab-12x12@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 452 B

2
frontend/components/YamlAce/_styles.scss
View File

@ -7,7 +7,7 @@
letter-spacing: -0.5px;
color: $core-dark-blue-grey;
display: block;
margin-bottom: 4px;
margin: 0 0 4px;
min-height: 25px;
&--error {

9
frontend/components/forms/admin/AppConfigForm/AppConfigForm.jsx
View File

@ -171,7 +171,6 @@ class AppConfigForm extends Component {
</div>
<div className={`${baseClass}__details ${baseClass}__avatar-preview`}>
<OrgLogoIcon src={fields.org_logo_url.value} />
<p>Avatar Preview</p>
</div>
</div>
<div className={`${baseClass}__section`}>
@ -184,7 +183,7 @@ class AppConfigForm extends Component {
/>
</div>
<div className={`${baseClass}__details`}>
<p>The base URL of this instance for use in <strong>Fleet</strong> links.</p>
<p>The base URL of this instance for use in Fleet links.</p>
</div>
</div>
@ -217,7 +216,7 @@ class AppConfigForm extends Component {
/>
</div>
<div className={`${baseClass}__details`}>
<p>The required entity ID is a URI that you use to identify <strong>Fleet</strong> when configuring the identity provider.</p>
<p>The required entity ID is a URI that you use to identify Fleet when configuring the identity provider.</p>
</div>
<div className={`${baseClass}__inputs`}>
@ -281,7 +280,7 @@ class AppConfigForm extends Component {
/>
</div>
<div className={`${baseClass}__details`}>
<p>The address email recipients will see all messages that are sent from the <strong>Fleet</strong> application.</p>
<p>The sender address for emails from Fleet.</p>
</div>
<div className={`${baseClass}__inputs ${baseClass}__inputs--smtp`}>
<InputField
@ -333,7 +332,7 @@ class AppConfigForm extends Component {
type="submit"
variant="brand"
>
UPDATE SETTINGS
Update settings
</Button>
</form>
);

71
frontend/components/forms/admin/AppConfigForm/_styles.scss
View File

@ -8,7 +8,6 @@
font-weight: $regular;
float: right;
height: 23px;
letter-spacing: -0.5px;
text-transform: none;
}
@ -17,6 +16,18 @@
}
}
.form-field {
&__label {
font-weight: $bold;
margin-bottom: 4px;
}
&__hint {
font-size: $x-small;
font-style: italic;
}
}
&__section {
@include clearfix;
margin: 0 0 30px;
@ -24,8 +35,6 @@
.smtp-options {
font-size: 15px;
font-weight: $bold;
line-height: 3.2;
letter-spacing: 0.6px;
color: $core-dark-blue-grey;
padding-left: 15px;
@ -83,11 +92,9 @@
width: 40%;
p {
font-size: 15px;
font-weight: $regular;
line-height: 1.6;
letter-spacing: 0.5px;
color: $core-dark-blue-grey;
font-size: $x-small;
font-style: italic;
margin: 32px 0;
}
.hint {
@ -103,10 +110,12 @@
text-align: center;
img {
border-radius: 80px;
height: 160px;
width: 160px;
border-radius: 20%;
height: 120px;
width: 120px;
border: 1px solid $ui-borders;
background-color: $ui-light-grey;
transform: translate(-100px, 20px);
}
p {
@ -117,53 +126,13 @@
}
}
&__show-options {
color: $core-dark-blue-grey;
}
&__smtp-section {
@include clearfix;
border-radius: 2px;
background-color: $core-medium-blue-grey;
border: solid 1px $ui-borders;
padding: 30px;
.form-field {
@include clearfix;
&__label {
float: left;
font-size: 15px;
font-weight: $bold;
letter-spacing: 0.6px;
text-align: right;
color: $core-dark-blue-grey;
width: 32%;
margin: 0;
line-height: 40px;
@media (min-width: $medium-width + 1) and (max-width: 1195px) {
line-height: 18px;
}
}
&:last-child {
margin: 0;
}
}
.input-field,
.Select,
.kolide-slider__wrapper {
width: 60%;
float: right;
}
.slide-wrapper {
.slider-option {
font-size: 18px;
font-weight: $regular;
letter-spacing: 1.3px;
text-align: left;
vertical-align: text-bottom;

5
frontend/components/forms/admin/OsqueryOptionsForm/OsqueryOptionsForm.jsx
View File

@ -40,9 +40,6 @@ class OsqueryOptionsForm extends Component {
return (
<form onSubmit={handleSubmit} className={baseClass}>
<p className={`${baseClass}__header`}>The YAML code editor allows control over osquery configuration options.
Options specified in the code editor below will overwrite existing osquery options.
</p>
<YamlAce
{...fields.osquery_options}
error={fields.osquery_options.error}
@ -53,7 +50,7 @@ class OsqueryOptionsForm extends Component {
type="submit"
variant="brand"
>
UPDATE OPTIONS
Update options
</Button>
</form>
);

12
frontend/components/forms/admin/OsqueryOptionsForm/_styles.scss
View File

@ -2,15 +2,7 @@
display: flex;
flex-direction: column;
align-items: flex-end;
width: 60%;
padding-right: 40px;
&__header {
font-size: 16px;
margin: 15px 0;
display: inline-block;
color: $core-dark-blue-grey;
}
width: 100%;
&__button-wrap {
text-align: right;
@ -26,7 +18,7 @@
}
&__text-editor-wrapper {
margin: $pad-base 0;
width: 100%;
margin-bottom: 16px;
}
}

1
frontend/components/forms/fields/Slider/_styles.scss
View File

@ -51,7 +51,6 @@
letter-spacing: 1.3px;
text-align: left;
vertical-align: text-bottom;
text-transform: uppercase;
margin-right: 10px;
color: $core-medium-blue-grey;

10
frontend/components/icons/OrgLogoIcon/OrgLogoIcon.jsx
View File

@ -1,7 +1,7 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import fleetLogo from '../../../../assets/images/fleet-logo.svg';
import fleetAvatar from '../../../../assets/images/fleet-avatar-24x24@2x.png';
class OrgLogoIcon extends Component {
static propTypes = {
@ -10,13 +10,13 @@ class OrgLogoIcon extends Component {
};
static defaultProps = {
src: fleetLogo,
src: fleetAvatar,
};
constructor (props) {
super(props);
this.state = { imageSrc: fleetLogo };
this.state = { imageSrc: fleetAvatar };
}
componentWillMount () {
@ -44,7 +44,7 @@ class OrgLogoIcon extends Component {
const { imageSrc } = this.state;
const { unchangedSourceProp } = this;
if (unchangedSourceProp(nextProps) && (imageSrc === fleetLogo)) {
if (unchangedSourceProp(nextProps) && (imageSrc === fleetAvatar)) {
return false;
}
@ -52,7 +52,7 @@ class OrgLogoIcon extends Component {
}
onError = () => {
this.setState({ imageSrc: fleetLogo });
this.setState({ imageSrc: fleetAvatar });
return false;
}

4
frontend/components/icons/OrgLogoIcon/OrgLogoIcon.tests.jsx
View File

@ -1,14 +1,14 @@
import React from 'react';
import { mount } from 'enzyme';
import fleetLogo from '../../../../assets/images/fleet-logo.svg';
import fleetAvatar from '../../../../assets/images/fleet-avatar-24x24@2x.png';
import OrgLogoIcon from './OrgLogoIcon';
describe('OrgLogoIcon - component', () => {
it('renders the Kolide Logo by default', () => {
const component = mount(<OrgLogoIcon />);
expect(component.state('imageSrc')).toEqual(fleetLogo);
expect(component.state('imageSrc')).toEqual(fleetAvatar);
});
it('renders the image source when it is valid', () => {

1
frontend/components/side_panels/SiteNavHeader/_styles.scss
View File

@ -16,6 +16,7 @@
&__logo {
@include size(24px);
margin-right: 24px;
border-radius: 20%;
@at-root .site-nav--small & {
margin: 24px 5px 10px;

11
frontend/pages/admin/AppSettingsPage/_styles.scss
View File

@ -1,5 +1,5 @@
.app-settings {
padding: 30px;
padding: 50px 30px;
h1 {
margin: 0 0 22px;
@ -8,11 +8,10 @@
h2 {
font-size: 20px;
font-weight: $regular;
line-height: 2.4;
letter-spacing: 0.8px;
color: $core-dark-blue-grey;
color: $core-black;
border-bottom: solid 1px $ui-borders;
margin: 0 0 15px;
padding: 0 0 8px;
a {
text-decoration: none;
@ -25,10 +24,8 @@
}
small {
font-size: 15px;
font-size: $x-small;
font-weight: $regular;
line-height: 1.6;
letter-spacing: 0.5px;
color: $core-dark-blue-grey;
}
}

61
frontend/pages/admin/OsqueryOptionsPage/OsqueryOptionsPage.jsx
View File

@ -6,8 +6,8 @@ import { noop } from 'lodash';
import osqueryOptionsActions from 'redux/nodes/osquery/actions';
import validateYaml from 'components/forms/validators/validate_yaml';
import OsqueryOptionsForm from 'components/forms/admin/OsqueryOptionsForm';
import Icon from 'components/icons/Icon';
import { renderFlash } from 'redux/nodes/notifications/actions';
import OpenNewTabIcon from '../../../../assets/images/open-new-tab-12x12@2x.png';
const yaml = require('js-yaml');
@ -64,37 +64,38 @@ export class OsqueryOptionsPage extends Component {
const { onSaveOsqueryOptionsFormSubmit } = this;
return (
<div className={`${baseClass} body-wrap`}>
<h1>Osquery Options</h1>
<div className={`${baseClass}__form-wrapper`}>
<OsqueryOptionsForm
formData={formData}
handleSubmit={onSaveOsqueryOptionsFormSubmit}
/>
<div className={`${baseClass}__form-details`}>
<p>This file describes options returned to osqueryd when it checks for configuration.</p>
<p>See Fleet documentation for an example file that includes the overrides option.</p>
<a
href="https://github.com/fleetdm/fleet/blob/master/docs/cli/file-format.md#osquery-configuration-options"
target="_blank"
rel="noreferrer"
className="button button--muted"
>
GO TO FLEET DOCS
<Icon name="right-arrow" />
</a>
<p>See osquery documentation for all available options.</p>
<a
href="https://osquery.readthedocs.io/en/stable/deployment/configuration/#options"
target="_blank"
rel="noreferrer"
className="button button--muted"
>
GO TO OSQUERY DOCS
<Icon name="right-arrow" />
</a>
<div className={`${baseClass}__page-wrap has-sidebar`}>
<div className={`${baseClass} body-wrap`}>
<h1>Osquery Options</h1>
<div className={`${baseClass}__form-wrapper`}>
<OsqueryOptionsForm
formData={formData}
handleSubmit={onSaveOsqueryOptionsFormSubmit}
/>
</div>
</div>
<div className={`${baseClass}__side-panel secondary-side-panel-container`}>
<h2>Help</h2>
<p>This file describes options returned to osqueryd when it checks for configuration.</p>
<p>See Fleet documentation for an example file that includes the overrides option.</p>
<a
href="https://github.com/fleetdm/fleet/blob/master/docs/cli/file-format.md#osquery-configuration-options"
target="_blank"
rel="noreferrer"
>
Go to Fleet docs
<img src={OpenNewTabIcon} alt="open new tab" />
</a>
<p>See osquery documentation for all available options.</p>
<a
href="https://osquery.readthedocs.io/en/stable/deployment/configuration/#options"
target="_blank"
rel="noreferrer"
>
Go to osquery docs
<img src={OpenNewTabIcon} alt="open new tab" />
</a>
</div>
</div>
);
}

40
frontend/pages/admin/OsqueryOptionsPage/_styles.scss
View File

@ -1,8 +1,14 @@
.osquery-options {
padding: 30px;
padding: 50px 30px;
flex-grow: 1;
&__page-wrap {
display: flex;
min-height: 100vh;
}
h1 {
margin: 0 0 22px;
margin: 0 0 24px;
}
a {
@ -15,7 +21,7 @@
&__form-details {
margin-top: 133px;
width: 40%;
width: 1000%;
p {
font-size: 15px;
@ -29,4 +35,32 @@
i {
margin-left: 8px;
}
&__side-panel {
padding: 40px 28px;
h2 {
font-size: $x-small;
font-weight: $bold;
}
p {
font-size: $x-small;
font-style: italic;
color: $core-dark-blue-grey;
}
a {
color: $core-blue;
font-size: $x-small;
font-weight: $bold;
text-decoration: none;
}
img {
width: 12px;
height: 12px;
margin-left: 6px;
}
}
}