Style osquery config page (#968)

2017-01-17 11:38:56 -05:00
parent 25c41cda94
commit f169b68bdf
11 changed files with 125 additions and 40 deletions
@@ -99,6 +99,10 @@ $base-class: 'button';
  &--disabled {
    opacity: 0.4;
    cursor: default;
+
+    &:hover {
+      cursor: default;
+    }
  }

  &--small {
@@ -9,11 +9,11 @@ import formFieldInterface from 'interfaces/form_field';
 import Icon from 'components/icons/Icon';
 import InputField from 'components/forms/fields/InputField';

-const baseClass = 'config-option-form';
 const fieldNames = ['name', 'value'];

 class ConfigOptionForm extends Component {
  static propTypes = {
+    baseClass: PropTypes.string,
    configNameOptions: PropTypes.arrayOf(dropdownOptionInterface),
    fields: PropTypes.shape({
      name: formFieldInterface,
@@ -32,7 +32,7 @@ class ConfigOptionForm extends Component {
  }

  render () {
-    const { configNameOptions, fields, formData } = this.props;
+    const { baseClass, configNameOptions, fields, formData } = this.props;
    const { handleRemove } = this;
    const { name, read_only: readOnly, value } = formData;
    const inputType = formData.type === 'int' ? 'number' : 'input';
@@ -40,8 +40,8 @@ class ConfigOptionForm extends Component {
    const disabled = readOnly || !!(name && value);

    return (
-      <form className={baseClass}>
-        <Button disabled={readOnly} onClick={handleRemove} variant="unstyled">
+      <form className={`${baseClass}__form`}>
+        <Button disabled={readOnly} onClick={handleRemove} variant="unstyled" className={`${baseClass}__remove`}>
          <Icon name="x" onClick={handleRemove} />
        </Button>
        <Dropdown
@@ -1,7 +0,0 @@
-.config-option-form {
-  @include display(flex);
-
-  &__field {
-    width: 340px;
-  }
-}
@@ -4,6 +4,8 @@ import ConfigOptionForm from 'components/forms/ConfigOptionsForm/ConfigOptionFor
 import configOptionInterface from 'interfaces/config_option';
 import dropdownOptionInterface from 'interfaces/dropdownOption';

+const baseClass = 'config-options-form';
+
 class ConfigOptionsForm extends Component {
  static propTypes = {
    completedOptions: PropTypes.arrayOf(configOptionInterface),
@@ -32,14 +34,17 @@ class ConfigOptionsForm extends Component {
    const configErrors = errors[option.id] || {};

    return (
-      <ConfigOptionForm
-        configNameOptions={configNameOptions}
-        formData={option}
-        key={`config-option-form-${option.id}-${idx}`}
-        onChangeFunc={handleFormUpdate(option)}
-        onRemove={onRemoveOption}
-        serverErrors={configErrors}
-      />
+      <li className={`${baseClass}__option`} key={`${idx}-config-form-option`}>
+        <ConfigOptionForm
+          configNameOptions={configNameOptions}
+          formData={option}
+          key={`config-option-form-${option.id}-${idx}`}
+          onChangeFunc={handleFormUpdate(option)}
+          onRemove={onRemoveOption}
+          serverErrors={configErrors}
+          baseClass={baseClass}
+        />
+      </li>
    );
  }

@@ -48,10 +53,17 @@ class ConfigOptionsForm extends Component {
    const { renderConfigOptionForm } = this;

    return (
-      <div>
-        {completedOptions.map((option, idx) => {
-          return renderConfigOptionForm(option, idx);
-        })}
+      <div className={baseClass}>
+        <ul className={`${baseClass}__options`}>
+          <li className={`${baseClass}__option-header`}>
+            <span className={`${baseClass}__option-header-name`}>Option Name</span>
+            <span className={`${baseClass}__option-header-value`}>Value</span>
+          </li>
+
+          {completedOptions.map((option, idx) => {
+            return renderConfigOptionForm(option, idx);
+          })}
+        </ul>
      </div>
    );
  }
@@ -0,0 +1,58 @@
+.config-options-form {
+  clear: both;
+  padding-top: 25px;
+
+  &__options {
+    @include clearfix;
+    margin: 0;
+    padding: 25px 0 0;
+    list-style: none;
+    border-top: 1px solid $accent-medium;
+  }
+
+  &__option {
+    border-bottom: 1px dashed $accent-medium;
+    margin: 0 0 $pad-small;
+  }
+
+  &__option-header {
+    span {
+      font-size: 15px;
+      font-weight: $normal;
+      line-height: 2.5;
+      letter-spacing: 0.6px;
+      color: $text-medium;
+      text-transform: uppercase;
+      display: inline-block;
+    }
+
+    &-name {
+      padding: 0 50px 0 40px;
+      width: 300px;
+    }
+  }
+
+  &__form {
+    @include display(flex);
+
+    .form-field--dropdown {
+      width: 300px;
+      margin-right: 50px;
+      margin-left: 15px;
+    }
+
+    .form-field--input {
+      @include flex-grow(1);
+    }
+  }
+
+  &__remove {
+    height: 40px;
+    color: $alert;
+    font-size: 24px;
+  }
+
+  &__field {
+    width: 100%;
+  }
+}
@@ -136,14 +136,12 @@ export default (WrappedComponent, { fields, validate = defaultValidate }) => {
      const { errors } = this.state;

      return (
-        <div>
-          <WrappedComponent
-            {...props}
-            baseError={errors.base}
-            fields={getFields()}
-            handleSubmit={onSubmit}
-          />
-        </div>
+        <WrappedComponent
+          {...props}
+          baseError={errors.base}
+          fields={getFields()}
+          handleSubmit={onSubmit}
+        />
      );
    }
  }
@@ -44,6 +44,7 @@ class QuerySidePanel extends Component {
  }

  onSelectTable = (value) => {
+    console.log('onSelectTable');
    const { onOsqueryTableSelect } = this.props;

    onOsqueryTableSelect(value);
@@ -92,6 +92,10 @@
    @include position(absolute, null 0 $pad-small null);
    color: $accent-medium;
    font-size: 9px;
+
+    @include breakpoint(smalldesk) {
+      display: none;
+    }
  }
 }

@@ -5,6 +5,7 @@ import { differenceWith, find, filter, isEqual, noop } from 'lodash';
 import Button from 'components/buttons/Button';
 import configOptionActions from 'redux/nodes/entities/config_options/actions';
 import ConfigOptionsForm from 'components/forms/ConfigOptionsForm';
+import Icon from 'components/icons/Icon';
 import configOptionInterface from 'interfaces/config_option';
 import debounce from 'utilities/debounce';
 import defaultConfigOptions from 'pages/config/ConfigOptionsPage/default_config_options';
@@ -159,10 +160,10 @@ export class ConfigOptionsPage extends Component {
    return (
      <div className={`body-wrap ${baseClass}`}>
        <div className={`${baseClass}__header-wrapper`}>
-          <div>
+          <div className={`${baseClass}__header-content`}>
            <h1>Manage Additional Osquery Options</h1>
            <p>
-              Osquery allows you to set a number of configuration options (Osquery Documentation).
+              Osquery allows you to set a number of configuration options (<a href="https://osquery.io/docs/" target="_blank" rel="noopener noreferrer">Osquery Documentation</a>).
              Since Kolide manages your Osquery configuration, you can set these additional desired
              options on this screen. Some options that Kolide needs to function correctly will be ignored.
            </p>
@@ -183,7 +184,7 @@ export class ConfigOptionsPage extends Component {
          onFormUpdate={onOptionUpdate}
          onRemoveOption={onRemoveOption}
        />
-        <Button onClick={onAddNewOption} variant="unstyled">Add New Option</Button>
+        <Button onClick={onAddNewOption} variant="unstyled" className={`${baseClass}__add-new`}><Icon name="add-plus" /> Add New Option</Button>
      </div>
    );
  }
@@ -1,13 +1,16 @@
 .config-options-page {
+  padding: 30px;
+  padding-bottom: 120px;
+  margin-bottom: $pad-small;
+
  &__btn-wrapper {
    min-width: 214px;
+    float: right;
  }

-  &__header-wrapper {
-    @include display(flex);
-    @include justify-content(space-around);
-
-    padding: 31px 35px;
+  &__header-content {
+    max-width: 75%;
+    float: left;
  }

  &__options-wrapper {
@@ -19,6 +22,16 @@
    margin-bottom: 32px;
  }

+  &__add-new {
+    color: $success;
+
+    .kolidecon {
+      font-size: 24px;
+      vertical-align: text-bottom;
+      margin-right: 15px;
+    }
+  }
+
  h1 {
    color: $text-dark;
    font-size: 24px;
@@ -61,7 +61,7 @@ a {
  background-color: $white;
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.1);
  border: solid 1px $silver;
-  min-width: 610px;
+  min-width: 951px;
  max-width: calc(100vw - #{$nav-width} - #{$pad-base});
  box-sizing: border-box;
  margin-top: $pad-base;
@@ -73,6 +73,7 @@ a {

  @at-root .has-sidebar & {
    margin-right: 0;
+    min-width: 610px;
    max-width: calc(100vw - #{$nav-width} - #{$pad-base} - #{$pad-base} - #{$sidepanel-width});

    @include breakpoint(smalldesk) {