diff --git a/assets/images/icon-plus-minus-black-16x16@2x.png b/assets/images/icon-plus-minus-black-16x16@2x.png new file mode 100644 index 0000000000..67114e5d9a Binary files /dev/null and b/assets/images/icon-plus-minus-black-16x16@2x.png differ diff --git a/assets/images/icon-snapshot-black-16x14@2x.png b/assets/images/icon-snapshot-black-16x14@2x.png new file mode 100644 index 0000000000..f59a35257b Binary files /dev/null and b/assets/images/icon-snapshot-black-16x14@2x.png differ diff --git a/frontend/components/forms/fields/SelectTargetsDropdown/SelectTargetsInput/SelectTargetsInput.jsx b/frontend/components/forms/fields/SelectTargetsDropdown/SelectTargetsInput/SelectTargetsInput.jsx index 09ca67557d..36f6d58e91 100644 --- a/frontend/components/forms/fields/SelectTargetsDropdown/SelectTargetsInput/SelectTargetsInput.jsx +++ b/frontend/components/forms/fields/SelectTargetsDropdown/SelectTargetsInput/SelectTargetsInput.jsx @@ -68,7 +68,7 @@ class SelectTargetsInput extends Component { onOpen={onOpen} onFocus={onFocus} onInputChange={handleInputChange} - placeholder="Label Name, Host Name, IP Address, etc." + placeholder="Label name, host name, IP address, etc." resetValue={[]} scrollMenuIntoView={false} tabSelectsValue={false} diff --git a/frontend/components/forms/packs/PackForm/PackForm.jsx b/frontend/components/forms/packs/PackForm/PackForm.jsx index c5e25e177c..ac691ecbd1 100644 --- a/frontend/components/forms/packs/PackForm/PackForm.jsx +++ b/frontend/components/forms/packs/PackForm/PackForm.jsx @@ -40,7 +40,7 @@ class PackForm extends Component { return (
-

New Pack

+

New pack

{baseError &&
{baseError}
}
diff --git a/frontend/components/forms/packs/PackForm/_styles.scss b/frontend/components/forms/packs/PackForm/_styles.scss index 098c81c003..95ea764cad 100644 --- a/frontend/components/forms/packs/PackForm/_styles.scss +++ b/frontend/components/forms/packs/PackForm/_styles.scss @@ -3,15 +3,25 @@ margin: 0 0 20px; } + label { + font-weight: $bold; + } + &__pack-title { .input-field { - width: 50%; + width: 100%; } } &__pack-description { .input-field { - width: 75%; + width: 100%; + } + } + + &__pack-targets { + .target-select__label { + font-weight: $bold; } } diff --git a/frontend/components/side_panels/PackInfoSidePanel/PackInfoSidePanel.jsx b/frontend/components/side_panels/PackInfoSidePanel/PackInfoSidePanel.jsx index 8ff13d520d..236129b6d0 100644 --- a/frontend/components/side_panels/PackInfoSidePanel/PackInfoSidePanel.jsx +++ b/frontend/components/side_panels/PackInfoSidePanel/PackInfoSidePanel.jsx @@ -1,53 +1,49 @@ import React from "react"; -import KolideIcon from "components/icons/KolideIcon"; import SecondarySidePanelContainer from "../SecondarySidePanelContainer"; +import DifferentialIcon from "../../../../assets/images/icon-plus-minus-black-16x16@2x.png"; +import SnapshotIcon from "../../../../assets/images/icon-snapshot-black-16x14@2x.png"; const baseClass = "pack-info-side-panel"; const PackInfoSidePanel = () => { return ( -

- -   What's a query pack? -

+

What's a query pack?

- Osquery supports grouping of queries (called query packs) which - run on a scheduled basis and log the results to a configurable - destination. + Osquery supports grouping of queries (called query packs) which run on a + scheduled basis and log the results to a configurable destination.

Query Packs are useful for monitoring specific attributes of hosts over time and can be used for alerting and incident response investigations. - By default, queries added to packs run every hour ( - interval = 3600s). + By default, queries added to packs run every hour (interval = 3600s).

Queries can be run in two modes:

- Differential + plus-minus + Differential
-
Only record data that has changed.
- Snapshot + snapshot + Snapshot
-
Record full query result each time.

Where do I find results?

- Packs are distributed to specified targets. Targets may be{" "} - individual hosts or groups of hosts called labels. + Packs are distributed to specified targets. Targets may be individual + hosts or groups of hosts called labels.

The results of queries run via query packs are stored in log files for - your convenience. We recommend forwarding this logs to a log aggregation - tool or other actionable tool for further analysis. These logs can be - found in the following locations: + your convenience. We recommend forwarding these logs to a log + aggregation tool or other actionable tool for further analysis. These + logs can be found in the following locations:

  • diff --git a/frontend/components/side_panels/PackInfoSidePanel/_styles.scss b/frontend/components/side_panels/PackInfoSidePanel/_styles.scss index 3fcd3a0e19..ed23724d86 100644 --- a/frontend/components/side_panels/PackInfoSidePanel/_styles.scss +++ b/frontend/components/side_panels/PackInfoSidePanel/_styles.scss @@ -12,15 +12,18 @@ color: $core-fleet-black; border-bottom: 1px solid $ui-fleet-blue-15; padding-bottom: 8px; - margin: 0 0 $pad-xsmall; + margin: 0 0 7px; } &__subtitle { font-size: $small; - font-weight: $regular; + font-weight: $bold; color: $core-fleet-black; - margin: 0 0 10px; - padding-top: 15px; + } + + a { + color: $core-vibrant-blue; + text-decoration: none; } p, @@ -29,15 +32,30 @@ color: $core-fleet-black; } + p { + margin: 24px 0 24px 0; + } + + ul { + margin-left: 16px; + padding-left: 0px; + } + + li::marker { + color: $core-vibrant-blue; + } + dl { dt { font-weight: $bold; font-size: $x-small; color: $core-fleet-black; + margin-bottom: 24px; - .kolidecon { - font-size: $medium; - margin-right: 5px; + img { + height: 16px; + width: auto; + margin-right: 8px; } span { @@ -45,10 +63,5 @@ } } - dd { - font-size: 13px; - color: $core-fleet-black; - margin-left: 30px; - } } }