From 09cd3622daaf7eedf32b6f4e4daf10cc9d58f339 Mon Sep 17 00:00:00 2001 From: gillespi314 <73313222+gillespi314@users.noreply.github.com> Date: Tue, 25 May 2021 16:03:03 -0500 Subject: [PATCH] Fixes to new pack page (#857) - Fix "Query pack title" and "Description" input fields so they fill the full width of their container - Replace "New Pack" with "New pack" in the page header (sentence casing) - Input titles should have the font weight set to $bold - Remove the folder icon from the title - Remove bold sections from paragraphs including the "(interval = 3600s)," "targets," "individual hosts," and "labels." - Change bullet and link colors to $fleet-core-vibrant-blue - Replace differential and snapshot kolidecons with png images included in the Figma page. --- .../images/icon-plus-minus-black-16x16@2x.png | Bin 0 -> 658 bytes .../images/icon-snapshot-black-16x14@2x.png | Bin 0 -> 688 bytes .../SelectTargetsInput/SelectTargetsInput.jsx | 2 +- .../forms/packs/PackForm/PackForm.jsx | 4 +- .../forms/packs/PackForm/_styles.scss | 14 ++++++- .../PackInfoSidePanel/PackInfoSidePanel.jsx | 34 +++++++--------- .../PackInfoSidePanel/_styles.scss | 37 ++++++++++++------ 7 files changed, 55 insertions(+), 36 deletions(-) create mode 100644 assets/images/icon-plus-minus-black-16x16@2x.png create mode 100644 assets/images/icon-snapshot-black-16x14@2x.png 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 0000000000000000000000000000000000000000..67114e5d9a0797fbe5276ed205a7a5ea03af6e52 GIT binary patch literal 658 zcmV;D0&V??P)!g067700?Y|Qx@1zo4Z;n)4HIT4SSm2X z=<&2;U@atTCDu^zHT!I7_4`);-UE1Lp{rq0er*%t5dr46q*l+fzb7yQ30H$cvBU6` zLz!?4Gm@CnCLQsM8F&%B4Fjp{q^>s9jq}i0BcPAv27$0S-h^5?5$zf84zJnQ&IdOS)_JO&T;>y@vNZ3rdz7e0zYG?BWVW2j+lH z+3hQZgC}spm9y-3X7+bp#m%MO5FRg}?Emo35_nX)zSAmjt=f)Z3|uRL8uUqilM3l4 zhYxTB$`y&JaII(0fQBQ|5tQvh7lDs4hrX5-%n3}1(5%4=YjaIXOyoOQy9X&Gvg2!&tK$XNl!$T|bM zps?k1hA;bSz)&Ss;X19_;I5*!n#5qjK#|iG?AqY2%=Q7_aSZ@%jJnn7%fuewf?_|k spy2*(h*w7#gH03^KKNLN5G#VcJDjs3m~3fL5&!@I07*qoM6N<$f+j8>MF0Q* literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..f59a35257bc1c9dffb306ce5833c9bdf09713442 GIT binary patch literal 688 zcmV;h0#E&kP)L4&HW`h)qP5TA|CvXWlo%nf2r;NGBQhnEN` zQ@rY#ks@QopmP{THAMlPpSG>U( zZhM=W+G0RJoO?QeWc#&b|8Fa#g+5S3BYJ}wB@~vfghKC|Vcm>Y;xb1>4paQ30dRGU zyT+Al^};`_xLRhXDYCg6UeJbFt{XL1$jwt+g9qe6HR(liva7%u2r&Uwf~W<*D2>o0 zA^5pr{sfqIAiX$5hQCSC!P&p`+fj;d$$>tuT}Y6$7HBopb(S(wFR=TV`PM^>wGwI> zeuDc93smPrl9A}~OWzUyz`KvlIj~KOHjAx(P9&XxrU>QQ3gd}U*)*IZR>%r@X*#BPq0}Vkz>%-Kol+{f` -

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; - } } }