From 57950a964552ff2072ae6e1b93dd2f1d7c45db37 Mon Sep 17 00:00:00 2001 From: noahtalerman <47070608+noahtalerman@users.noreply.github.com> Date: Mon, 30 Nov 2020 09:17:55 -0800 Subject: [PATCH] Update host side panel. New styles for labels. (#72) The goal of this PR is to implement the new styles in the mockups and update the right-side panel on the hosts page. This right-side panel includes built-in labels, custom labels, and filtering for custom labels. --- .../components/buttons/Button/_styles.scss | 2 +- .../hosts/HostDetails/HostDetails.jsx | 6 +- .../HostSidePanel/HostSidePanel.jsx | 29 +++--- .../HostSidePanel/PanelGroup/PanelGroup.jsx | 4 +- .../HostSidePanel/PanelGroup/_styles.scss | 30 ++++++ .../PanelGroupItem/PanelGroupItem.jsx | 14 +-- .../HostSidePanel/PanelGroupItem/_styles.scss | 21 ++-- .../side_panels/HostSidePanel/_styles.scss | 97 ++++++------------- .../SecondarySidePanelContainer/_styles.scss | 2 - frontend/kolide/helpers.js | 6 +- 10 files changed, 96 insertions(+), 115 deletions(-) create mode 100644 frontend/components/side_panels/HostSidePanel/PanelGroup/_styles.scss diff --git a/frontend/components/buttons/Button/_styles.scss b/frontend/components/buttons/Button/_styles.scss index 6739fd5f58..91fb8a5bc6 100644 --- a/frontend/components/buttons/Button/_styles.scss +++ b/frontend/components/buttons/Button/_styles.scss @@ -38,7 +38,7 @@ $base-class: 'button'; font-family: 'Nunito Sans', sans-serif; font-weight: $bold; display: inline-block; - padding: 0 $pad-large; + padding: 9px 15px; top: 0; border: 0; cursor: pointer; diff --git a/frontend/components/hosts/HostDetails/HostDetails.jsx b/frontend/components/hosts/HostDetails/HostDetails.jsx index 078a4bf174..8199917cb3 100644 --- a/frontend/components/hosts/HostDetails/HostDetails.jsx +++ b/frontend/components/hosts/HostDetails/HostDetails.jsx @@ -10,9 +10,9 @@ import { humanMemory, humanUptime, humanLastSeen } from './helpers'; const baseClass = 'host-details'; -export const STATUSES = { - online: 'ONLINE', - offline: 'OFFLINE', +export const statuses = { + online: 'Online', + offline: 'Offline', }; const ActionButton = ({ host, onDestroyHost, onQueryHost }) => { diff --git a/frontend/components/side_panels/HostSidePanel/HostSidePanel.jsx b/frontend/components/side_panels/HostSidePanel/HostSidePanel.jsx index 6c2bcb57d6..bb8c0b3466 100644 --- a/frontend/components/side_panels/HostSidePanel/HostSidePanel.jsx +++ b/frontend/components/side_panels/HostSidePanel/HostSidePanel.jsx @@ -52,7 +52,13 @@ class HostSidePanel extends Component { }); return ( - + + + + +

Status

- - -
-
+ +

Operating Systems

- {hostPlatformLabels.length > 0 &&
} -
- - LABELS -
+ +

Labels

-
+ ); diff --git a/frontend/components/side_panels/HostSidePanel/PanelGroup/PanelGroup.jsx b/frontend/components/side_panels/HostSidePanel/PanelGroup/PanelGroup.jsx index 16c5871bf2..fc898c4900 100644 --- a/frontend/components/side_panels/HostSidePanel/PanelGroup/PanelGroup.jsx +++ b/frontend/components/side_panels/HostSidePanel/PanelGroup/PanelGroup.jsx @@ -41,12 +41,12 @@ class PanelGroup extends Component { } render () { - const { groupItems } = this.props; + const { groupItems, type } = this.props; const { renderGroupItem } = this; const baseClass = 'panel-group'; return ( -
+
{groupItems.map((item) => { return renderGroupItem(item); })} diff --git a/frontend/components/side_panels/HostSidePanel/PanelGroup/_styles.scss b/frontend/components/side_panels/HostSidePanel/PanelGroup/_styles.scss new file mode 100644 index 0000000000..3e1b399ccc --- /dev/null +++ b/frontend/components/side_panels/HostSidePanel/PanelGroup/_styles.scss @@ -0,0 +1,30 @@ +.panel-group { + &__label { + max-height: 280px; + overflow-y: scroll; + position: relative; + + &:before { + content: ''; + position: sticky; + display: block; + z-index: 1; + top: -2px; + left: 0; + width: 100%; + height: 17px; + background-image: linear-gradient(to bottom, #f9fafc, transparent); + } + + &:after { + content: ''; + position: sticky; + display: block; + bottom: -1px; + left: 0; + width: 100%; + height: 17px; + background-image: linear-gradient(to bottom, transparent, #f9fafc); + } + } +} diff --git a/frontend/components/side_panels/HostSidePanel/PanelGroupItem/PanelGroupItem.jsx b/frontend/components/side_panels/HostSidePanel/PanelGroupItem/PanelGroupItem.jsx index 4b7013fe5b..aad15d1380 100644 --- a/frontend/components/side_panels/HostSidePanel/PanelGroupItem/PanelGroupItem.jsx +++ b/frontend/components/side_panels/HostSidePanel/PanelGroupItem/PanelGroupItem.jsx @@ -48,19 +48,8 @@ class PanelGroupItem extends Component { return ; } - renderDescription = () => { - const { item } = this.props; - const { title_description: titleDescription, type } = item; - - if (!titleDescription || type === 'custom') { - return false; - } - - return {titleDescription}; - } - render () { - const { displayCount, renderDescription, renderIcon } = this; + const { displayCount, renderIcon } = this; const { item, onLabelClick, isSelected } = this.props; const { display_text: displayText, @@ -83,7 +72,6 @@ class PanelGroupItem extends Component { {renderIcon()} {displayText} - {renderDescription()} {displayCount()}
diff --git a/frontend/components/side_panels/HostSidePanel/PanelGroupItem/_styles.scss b/frontend/components/side_panels/HostSidePanel/PanelGroupItem/_styles.scss index 5f094adc49..d07c33196f 100644 --- a/frontend/components/side_panels/HostSidePanel/PanelGroupItem/_styles.scss +++ b/frontend/components/side_panels/HostSidePanel/PanelGroupItem/_styles.scss @@ -4,29 +4,29 @@ $base-class: 'panel-group-item'; transition: color 75ms ease-in-out, background 75ms ease-in-out; width: 100%; font-size: $x-small; - line-height: 2.25; - letter-spacing: 0.5px; font-weight: $regular; - color: $core-black; + color: $black; text-align: left; - padding: 0 $pad-large; + padding: 10px 0; + margin: 2px 0; + border-radius: 8px; &:hover { background-color: $core-blue-selected; - .#{$base-class}__icon { - color: $core-black; - } } &.#{$base-class}--selected { - color: $core-black; font-weight: $bold; background-color: $core-blue-selected; .#{$base-class}__icon { color: $white; } + + .#{$base-class}__count { + font-weight: $bold; + } } &__flexy { @@ -36,7 +36,7 @@ $base-class: 'panel-group-item'; &__icon { transition: color 75ms ease-in-out; - margin-right: 23px; + padding: 0 16px 0 8px; font-size: 18px; } @@ -53,8 +53,9 @@ $base-class: 'panel-group-item'; &__count { transition: color 75ms ease-in-out; - font-weight: $bold; + font-weight: $regular; text-align: right; + padding-right: 12px; font-size: 14px; } } diff --git a/frontend/components/side_panels/HostSidePanel/_styles.scss b/frontend/components/side_panels/HostSidePanel/_styles.scss index 42516767ac..fbfc9dd7f5 100644 --- a/frontend/components/side_panels/HostSidePanel/_styles.scss +++ b/frontend/components/side_panels/HostSidePanel/_styles.scss @@ -1,62 +1,53 @@ .host-side-panel { + color: $core-dark-blue-grey; + padding: 14px 20px 22px; + + .input-icon-field { + margin-top: 0; + + &__label { + display: none; + } + + &__icon { + top: 6px; + } + } + + h3 { + font-size: $x-small; + font-weight: $bold; + color: $black; + margin: 24px 0 10px 8px; + } + &__add-label-btn { color: $white; + font-size: $small; + font-weight: $bold; background-color: $core-medium-blue-grey; - font-weight: $regular; - line-height: 2.25; - letter-spacing: 0.5px; - padding: 0 30px; + padding: 9px 75px; width: 100%; text-align: center; + margin-top: 24px; &:hover { - background-color: rgba($success, 0.1); + background-color: darken($core-medium-blue-grey, 5%); } } - &__add-label-icon { - margin: 0 0 0 $pad-small; - } - - &__wrapper { - color: $core-dark-blue-grey; - padding: 0; - - .input-icon-field { - margin-top: 0; - - &__label { - display: none; - } - - &__icon { - top: 6px; - } - } - } - - &__hr { - color: $core-dark-blue-grey; - margin: $pad-base $pad-auto; - width: 80%; - height: 1px; - background-color: #ececec; - border: 0; - } - &__panel-group-item { - background-color: $white; color: $core-dark-blue-grey; - padding: $pad-half $pad-large; + width: 100%; &--filter { position: relative; .kolidecon { position: absolute; - top: calc(#{$pad-half} + 8px); - left: calc(#{$pad-large} + 10px); - font-size: 22px; + top: 10px; + left: 12px; + font-size: 20px; color: $core-medium-blue-grey; } } @@ -68,35 +59,11 @@ } &__filter-labels { - margin: 0; + margin-bottom: 16px; .input-field { padding-left: 42px; width: 100%; } } - - &__add-hosts { - padding: 0 $pad-large; - width: 100%; - line-height: 2.25; - margin-top: 10px; - text-align: left; - - span { - font-size: 16px; - font-weight: $regular; - line-height: normal; - letter-spacing: -0.5px; - color: $core-purple; - text-transform: none; - } - - .kolidecon { - margin-right: 20px; - font-size: 26px; - vertical-align: middle; - margin-left: -3px; - } - } } diff --git a/frontend/components/side_panels/SecondarySidePanelContainer/_styles.scss b/frontend/components/side_panels/SecondarySidePanelContainer/_styles.scss index e202ffa675..99bd5560ab 100644 --- a/frontend/components/side_panels/SecondarySidePanelContainer/_styles.scss +++ b/frontend/components/side_panels/SecondarySidePanelContainer/_styles.scss @@ -6,8 +6,6 @@ overflow: auto; width: $sidepanel-width; margin-left: $pad-base; - padding-top: $pad-base; - min-height: calc(100vh - #{$pad-base}); @include breakpoint(smalldesk) { width: $sidepanel-tablet-width; diff --git a/frontend/kolide/helpers.js b/frontend/kolide/helpers.js index 3305daf4cc..56a30d6006 100644 --- a/frontend/kolide/helpers.js +++ b/frontend/kolide/helpers.js @@ -30,7 +30,7 @@ const labelStubs = [ { id: 'new', count: 0, - display_text: 'NEW', + display_text: 'New', slug: 'new', statusLabelKey: 'new_count', title_description: '(added in last 24hrs)', @@ -40,7 +40,7 @@ const labelStubs = [ id: 'online', count: 0, description: 'Hosts that have recently checked-in to kolide and are ready to run queries.', - display_text: 'ONLINE', + display_text: 'Online', slug: 'online', statusLabelKey: 'online_count', type: 'status', @@ -49,7 +49,7 @@ const labelStubs = [ id: 'offline', count: 0, description: 'Hosts that have not checked-in to kolide recently.', - display_text: 'OFFLINE', + display_text: 'Offline', slug: 'offline', statusLabelKey: 'offline_count', type: 'status',