From 9469cb0bf17fd926f03097cf90fdcadece45aae8 Mon Sep 17 00:00:00 2001 From: RachelElysia <71795832+RachelElysia@users.noreply.github.com> Date: Tue, 1 Jun 2021 09:10:35 -0400 Subject: [PATCH] Packs pages: Edit page empty state rendering, Manage page update UI (#885) * Packs: Update empty state, tables, select targets pills, platform pills, icons, phrasing --- cypress/integration/all/app/packflow.spec.ts | 4 +- .../ConfigurePackQueryForm.jsx | 14 ++--- .../forms/ConfigurePackQueryForm/_styles.scss | 5 +- .../forms/fields/Dropdown/_styles.scss | 17 ++++- .../fields/SelectTargetsDropdown/_styles.scss | 11 ++-- .../forms/packs/EditPackForm/EditPackForm.jsx | 6 +- .../forms/packs/PackForm/PackForm.jsx | 4 +- .../components/packs/PacksList/Row/Row.jsx | 4 +- .../packs/PacksList/Row/_styles.scss | 32 +++++++--- .../components/packs/PacksList/_styles.scss | 43 +++++++++---- .../ScheduledQueriesList.jsx | 63 ++++++++++--------- .../ScheduledQueriesList.tests.jsx | 2 +- .../queries/ScheduledQueriesList/_styles.scss | 50 +++++++++------ .../PackDetailsSidePanel/_styles.scss | 8 +-- .../SearchPackQuery/SearchPackQuery.jsx | 11 +--- .../SearchPackQuery/_styles.scss | 8 +-- .../pages/packs/EditPackPage/EditPackPage.jsx | 4 ++ 17 files changed, 169 insertions(+), 117 deletions(-) diff --git a/cypress/integration/all/app/packflow.spec.ts b/cypress/integration/all/app/packflow.spec.ts index f554af062c..7144f08893 100644 --- a/cypress/integration/all/app/packflow.spec.ts +++ b/cypress/integration/all/app/packflow.spec.ts @@ -13,7 +13,7 @@ describe("Pack flow", () => { .click() .type("Errors and crashes"); - cy.findByLabelText(/query pack description/i) + cy.findByLabelText(/description/i) .click() .type("See all user errors and window crashes."); @@ -29,7 +29,7 @@ describe("Pack flow", () => { .click() .type("{selectall}{backspace}Server errors"); - cy.findByLabelText(/query pack description/i) + cy.findByLabelText(/description/i) .click() .type("{selectall}{backspace}See all server errors."); diff --git a/frontend/components/forms/ConfigurePackQueryForm/ConfigurePackQueryForm.jsx b/frontend/components/forms/ConfigurePackQueryForm/ConfigurePackQueryForm.jsx index 8ebd4204bd..ab88edbd2b 100644 --- a/frontend/components/forms/ConfigurePackQueryForm/ConfigurePackQueryForm.jsx +++ b/frontend/components/forms/ConfigurePackQueryForm/ConfigurePackQueryForm.jsx @@ -137,14 +137,14 @@ export class ConfigurePackQueryForm extends Component { return (
-

configuration

+

Configuration

, - " version", - ]} + label="Minimum osquery version" wrapperClassName={`${baseClass}__form-field ${baseClass}__form-field--osquer-vers`} /> .Select-control { .Select-value { line-height: 38px; + margin-top: 4px; + border: none; } } } @@ -98,7 +107,7 @@ content: url("../assets/images/icon-chevron-black-16x16@2x.png"); height: 16px; width: 16px; - margin-top: 6px; + margin-top: 8px; margin-left: -4px; border: none; @@ -112,7 +121,7 @@ content: url("../assets/images/icon-collapse-black-16x16@2x.png"); height: 16px; width: 16px; - margin-top: 6px; + margin-top: 14px; margin-left: -3px; border: none; @@ -200,7 +209,8 @@ color: $ui-gray; } - .Select-placeholder { + .Select-placeholder, + .Select-input { color: $core-fleet-blue; font-size: $small; line-height: 40px; @@ -218,6 +228,7 @@ .Select-multi-value-wrapper { flex-grow: 1; + padding: $pad-xsmall; } .Select-arrow-zone { diff --git a/frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss b/frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss index a16920c4e8..130ef5db42 100644 --- a/frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss +++ b/frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss @@ -80,7 +80,7 @@ } .Select-placeholder { - line-height: 46px; + line-height: 50px; font-size: $small; padding: 0 $pad-medium; } @@ -108,7 +108,7 @@ .Select-value { line-height: 34px; - border: 1px solid $core-fleet-black; + border: 1px solid $core-dark-blue-grey; margin-top: 5px; margin-bottom: 0; } @@ -164,8 +164,7 @@ content: url("../assets/images/icon-close-fleet-blue-16x16@2x.png"); transform: scale(0.5); border-radius: 0px; - margin-top: -15px; - margin-left: -15px; + margin-top: 4px; } &:hover { @@ -178,8 +177,8 @@ .Select-value-label { font-size: $small; - font-weight: $regular; - color: $core-fleet-black; + color: $core-dark-blue-grey; + font-size: $x-small; padding: 0 0 0 $pad-medium; line-height: 34px; } diff --git a/frontend/components/forms/packs/EditPackForm/EditPackForm.jsx b/frontend/components/forms/packs/EditPackForm/EditPackForm.jsx index 3c9cab23dc..d83e04623d 100644 --- a/frontend/components/forms/packs/EditPackForm/EditPackForm.jsx +++ b/frontend/components/forms/packs/EditPackForm/EditPackForm.jsx @@ -39,14 +39,14 @@ class EditPackForm extends Component {

Edit pack

diff --git a/frontend/components/forms/packs/PackForm/PackForm.jsx b/frontend/components/forms/packs/PackForm/PackForm.jsx index ac691ecbd1..cc1ad3d3a3 100644 --- a/frontend/components/forms/packs/PackForm/PackForm.jsx +++ b/frontend/components/forms/packs/PackForm/PackForm.jsx @@ -51,8 +51,8 @@ class PackForm extends Component {
diff --git a/frontend/components/packs/PacksList/Row/Row.jsx b/frontend/components/packs/PacksList/Row/Row.jsx index 540482bcb6..a7ae62b006 100644 --- a/frontend/components/packs/PacksList/Row/Row.jsx +++ b/frontend/components/packs/PacksList/Row/Row.jsx @@ -53,7 +53,7 @@ class Row extends Component { if (disabled) { return ( - + Disabled ); @@ -61,7 +61,7 @@ class Row extends Component { return ( - + Enabled ); diff --git a/frontend/components/packs/PacksList/Row/_styles.scss b/frontend/components/packs/PacksList/Row/_styles.scss index ab17fd65a2..de4769a57e 100644 --- a/frontend/components/packs/PacksList/Row/_styles.scss +++ b/frontend/components/packs/PacksList/Row/_styles.scss @@ -22,17 +22,13 @@ color: $core-fleet-black; font-weight: $regular; font-size: $x-small; - padding: 7px 0; - text-align: center; + padding: 0 $pad-large; + margin: 0; + line-height: 2.71; &:first-child { - padding-left: 14px; - text-align: left; - } - - &:last-child { - padding-right: 25px; - text-align: right; + text-align: center; + vertical-align: middle; } } @@ -46,6 +42,24 @@ margin-bottom: 0; } + &__disabled-icon { + margin-bottom: 1px; + height: 8px; + width: 8px; + background-color: $ui-fleet-black-25; + border-radius: 50%; + display: inline-block; + } + + &__enabled-icon { + margin-bottom: 1px; + height: 8px; + width: 8px; + background-color: $ui-success; + border-radius: 50%; + display: inline-block; + } + &__status-icon { &--enabled { color: $ui-success; diff --git a/frontend/components/packs/PacksList/_styles.scss b/frontend/components/packs/PacksList/_styles.scss index 99b9c8e386..7819ab2ce6 100644 --- a/frontend/components/packs/PacksList/_styles.scss +++ b/frontend/components/packs/PacksList/_styles.scss @@ -12,20 +12,41 @@ thead { background-color: $ui-off-white; border-bottom: 1px solid $ui-fleet-blue-15; - } - &__th { - font-size: $x-small; - padding: 14px; - text-align: center; - - &:first-child { - text-align: left; + th + th { + border-left: 1px solid $ui-fleet-blue-15; } - &:last-child { - padding-right: 25px; - text-align: right; + th { + font-size: $x-small; + font-weight: $bold; + text-align: left; + padding: $pad-medium $pad-large; + + &:nth-child(1) { + border-top-left-radius: 3px; + width: 20px; + } + + &:nth-child(2) { + width: calc(49% - 20px); + } + + &:nth-child(3) { + width: 17%; + } + + &:nth-child(4) { + width: 17%; + } + + &:nth-child(5) { + width: 17%; + } + + &:last-child { + border-top-right-radius: 3px; + } } } diff --git a/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesList.jsx b/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesList.jsx index 6794dd31da..a9ab2e6baf 100644 --- a/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesList.jsx +++ b/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesList.jsx @@ -85,45 +85,43 @@ class ScheduledQueriesList extends Component {
-

- First let's add a query. -

-

Then we'll set the following:

+

Your pack is empty.

+ + Use the sidebar on the right to add queries to this pack. + +

Configure your queries.

- interval: the amount of time, in seconds, the + Frequency: the amount of time, in seconds, the query waits before running

- platform: the computer platform where this query + Platform: the computer platform where this query will run (other platforms ignored)

- - minimum version: - {" "} - the minimum required osqueryd version installed - on a host + Minimum osquery version: the minimum required{" "} + osqueryd version installed on a host

- logging type: + Logging:

  • - differential: + Differential: {" "} show only what’s added from last run
  • - differential (ignore + Differential (ignore removals): {" "} show only what’s been added since the last run
  • - snapshot: + Snapshot: {" "} show everything in its current state
    • @@ -139,6 +137,7 @@ class ScheduledQueriesList extends Component { onCheckQuery, scheduledQueries, checkedScheduledQueryIDs, + isScheduledQueriesAvailable, } = this.props; const { allQueriesSelected, selectedQueryRowId } = this.state; const { @@ -157,21 +156,25 @@ class ScheduledQueriesList extends Component { - - - - - - - + {scheduledQueries.length || isScheduledQueriesAvailable ? ( + <> + + + + + + + + + ) : ( + diff --git a/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesList.tests.jsx b/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesList.tests.jsx index fb31c764a6..48f68d847c 100644 --- a/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesList.tests.jsx +++ b/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesList.tests.jsx @@ -62,6 +62,6 @@ describe("ScheduledQueriesList - component", () => { /> ); - expect(component.text()).toContain("First let's add a query"); + expect(component.text()).toContain("Your pack is empty"); }); }); diff --git a/frontend/components/queries/ScheduledQueriesList/_styles.scss b/frontend/components/queries/ScheduledQueriesList/_styles.scss index b7de4aade6..609f59516f 100644 --- a/frontend/components/queries/ScheduledQueriesList/_styles.scss +++ b/frontend/components/queries/ScheduledQueriesList/_styles.scss @@ -14,11 +14,15 @@ background-color: $ui-off-white; border-bottom: 1px solid $ui-fleet-blue-15; + th + th { + border-left: 1px solid $ui-fleet-blue-15; + } + th { font-size: $x-small; font-weight: $bold; text-align: left; - padding: 15px 10px; + padding: $pad-medium $pad-large; .form-field { margin: 0; @@ -30,20 +34,17 @@ } &:nth-child(2) { - width: calc(46% - 20px); + width: calc(49% - 20px); } - &:nth-child(3) { - width: 18%; + &:nth-child(3), + &:nth-child(7) { + width: 8%; } - - &:nth-child(4) { - width: 18%; - } - - &:nth-child(5) { - width: 18%; - text-align: center; + &:nth-child(4), + &:nth-child(5), + &:nth-child(6) { + width: 12%; } &:last-child { @@ -54,8 +55,12 @@ } tbody { + p { + font-size: $x-small; + } + td { - padding: 0 10px; + padding: 0 $pad-large; margin: 0; .form-field { @@ -69,7 +74,7 @@ &:nth-child(2) { font-size: $x-small; - font-weight: $bold; + font-weight: $regular; line-height: 2.71; letter-spacing: -0.5px; text-align: left; @@ -100,7 +105,7 @@ font-weight: $regular; line-height: 2.71; letter-spacing: -0.5px; - text-align: center; + text-align: left; color: $core-fleet-black; .kolidecon { @@ -122,16 +127,23 @@ } &__first-query { - padding: $pad-xlarge 15px 100px; + padding: 0 $pad-xxlarge 100px; text-align: left; + &-cta { + text-align: left; + font-size: $x-small; + font-weight: $bold; + color: $core-vibrant-blue; + } + h1 { color: $core-fleet-black; font-size: $large; font-weight: $regular; line-height: 1.96; - letter-spacing: -0.5px; margin: 0; + margin-top: $pad-xxlarge; } h2 { @@ -144,7 +156,7 @@ } p { - font-size: $small; + font-size: $x-small; font-weight: $regular; line-height: 2.5; color: $core-fleet-black; @@ -159,7 +171,7 @@ li { margin-left: 15px; - font-size: $small; + font-size: $x-small; font-weight: $regular; line-height: 2.5; color: $core-fleet-black; diff --git a/frontend/components/side_panels/PackDetailsSidePanel/_styles.scss b/frontend/components/side_panels/PackDetailsSidePanel/_styles.scss index c340b50925..af31b8d74f 100644 --- a/frontend/components/side_panels/PackDetailsSidePanel/_styles.scss +++ b/frontend/components/side_panels/PackDetailsSidePanel/_styles.scss @@ -8,9 +8,9 @@ } &__section-label { - font-size: $medium; + font-size: $x-small; font-weight: $bold; - margin: $pad-large 0 $pad-medium; + margin: $pad-large 0 $pad-small; } &__edit-pack-link { @@ -25,7 +25,7 @@ &__pack-name { @include ellipsis(250px); color: $core-fleet-black; - font-size: $small; + font-size: $x-small; font-weight: $regular; margin: 0; } @@ -44,7 +44,7 @@ &__query-name { @include ellipsis(240px); - font-size: $small; + font-size: $x-small; color: $core-vibrant-blue; text-decoration: none; } diff --git a/frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/SearchPackQuery.jsx b/frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/SearchPackQuery.jsx index 43557745ed..069513b1d3 100644 --- a/frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/SearchPackQuery.jsx +++ b/frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/SearchPackQuery.jsx @@ -97,10 +97,8 @@ class SearchPackQuery extends Component { if (selectedQuery) { return (
    -

    description

    -

    - {selectedQuery.description || No description available.} -

    +

    Description

    +

    {selectedQuery.description || <>No description available.}

    ); } @@ -119,10 +117,7 @@ class SearchPackQuery extends Component { , - " Select query", - ]} + placeholder={"Select query"} /> {renderQuery()} {renderDescription()} diff --git a/frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/_styles.scss b/frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/_styles.scss index 281f7885a9..f553d10e7e 100644 --- a/frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/_styles.scss +++ b/frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/_styles.scss @@ -1,7 +1,7 @@ .search-pack-query { &__title { @include ellipsis(250px); - font-size: 18px; + font-size: $x-small; font-weight: $bold; letter-spacing: -0.5px; color: $core-fleet-black; @@ -21,13 +21,11 @@ word-wrap: break-word; h2 { - font-size: $small; + font-size: $x-small; font-weight: $bold; letter-spacing: -0.5px; color: $core-fleet-black; - border-bottom: 1px solid #eaeefb; - padding: 0 0 9px; - margin: 0 0 9px; + margin: 0 0 $pad-small; } p { diff --git a/frontend/pages/packs/EditPackPage/EditPackPage.jsx b/frontend/pages/packs/EditPackPage/EditPackPage.jsx index 45bfb21f3f..702360d393 100644 --- a/frontend/pages/packs/EditPackPage/EditPackPage.jsx +++ b/frontend/pages/packs/EditPackPage/EditPackPage.jsx @@ -169,11 +169,13 @@ export class EditPackPage extends Component { .then(() => { this.setState({ selectedScheduledQuery: null, selectedQuery: null }); dispatch(renderFlash("success", "Scheduled Query updated!")); + window.scrollTo(0, 0); }) .catch(() => { dispatch( renderFlash("error", "Unable to update your Scheduled Query.") ); + window.scrollTo(0, 0); }); }; @@ -196,6 +198,7 @@ export class EditPackPage extends Component { return Promise.all(promises).then(() => { this.setState({ selectedScheduledQuery: null, selectedQuery: null }); dispatch(renderFlash("success", "Scheduled queries removed")); + window.scrollTo(0, 0); }); }; @@ -210,6 +213,7 @@ export class EditPackPage extends Component { dispatch(create(scheduledQueryData)).catch(() => { dispatch(renderFlash("error", "Unable to schedule your query.")); }); + window.scrollTo(0, 0); return false; };
    - - Query nameInterval(s)Platform - Ver. - ShardLogging + + Query nameFrequencyPlatformOsquery ver.ShardLogging + )}