From c1c11000c18a214713927e4669e2b6b0321d430a Mon Sep 17 00:00:00 2001 From: Yahor Yuzefovich Date: Tue, 25 Feb 2020 22:14:55 -0800 Subject: [PATCH 1/6] coldata: minor tweak of flat bytes This commit changes `maybeBackfillOffsets` to update `maxSetIndex` accordingly (this might be a minor performance improvement). In a sense, when we're backfilling offsets, we *are* setting indices to point to empty `[]byte` slices. Also, the logic for `Set` method is slightly refactored. Release note: None --- pkg/col/coldata/bytes.go | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/pkg/col/coldata/bytes.go b/pkg/col/coldata/bytes.go index 0d1042d46c65..a1d0f0413efe 100644 --- a/pkg/col/coldata/bytes.go +++ b/pkg/col/coldata/bytes.go @@ -87,7 +87,7 @@ func (b *Bytes) UpdateOffsetsToBeNonDecreasing(n uint64) { // maybeBackfillOffsets is an optimized version of // UpdateOffsetsToBeNonDecreasing that assumes that all offsets up to -// b.maxSetIndex+1 are non-decreasing. Note that this method can be a noop when +// b.maxSetIndex+1 are non-decreasing. Note that this method is a noop when // i <= b.maxSetIndex+1. func (b *Bytes) maybeBackfillOffsets(i int) { // Note that we're not checking whether this Bytes is a window because @@ -96,6 +96,9 @@ func (b *Bytes) maybeBackfillOffsets(i int) { for j := b.maxSetIndex + 2; j <= i; j++ { b.offsets[j] = b.offsets[b.maxSetIndex+1] } + if i > b.maxSetIndex { + b.maxSetIndex = i - 1 + } } // Get returns the ith []byte in Bytes. Note that the returned byte slice is @@ -123,17 +126,12 @@ func (b *Bytes) Set(i int, v []byte) { ), ) } - if i == b.maxSetIndex { - // We are overwriting an element at the end of b.data, truncate so we can - // append in every path. - b.data = b.data[:b.offsets[i]] - } else { - // We're maybe setting an element not right after the last already present - // element (i.e. there might be gaps in b.offsets). This is probably due to - // NULL values that are stored separately. In order to maintain the - // assumption of non-decreasing offsets, we need to backfill them. - b.maybeBackfillOffsets(i) - } + // We're maybe setting an element not right after the last already present + // element (i.e. there might be gaps in b.offsets). This is probably due to + // NULL values that are stored separately. In order to maintain the + // assumption of non-decreasing offsets, we need to backfill them. + b.maybeBackfillOffsets(i) + b.data = b.data[:b.offsets[i]] b.offsets[i] = int32(len(b.data)) b.data = append(b.data, v...) b.offsets[i+1] = int32(len(b.data)) From 04a0f6888058b957679ae15b8e56398030747a66 Mon Sep 17 00:00:00 2001 From: Andrii Vorobiov Date: Mon, 17 Feb 2020 14:31:01 +0200 Subject: [PATCH 2/6] ui: Integrate Subscription with Cluster Overview page Add Release notes signup form to Cluster Overview page right after page title. Release Notes signup view is created in `src/views/dashboard` directory because it will be the main page where we display this view. And Cluster Overview page is a temporary place while Dashboard view doesn't exist. These changes integrate three main parts: ReleaseNotesForm, AlertNotification component and custom analytics saga. Release note (admin ui): Display Release Notes subscription form on Cluster Overview page --- .../dashboard/email_signup_background.svg | 29 +++++++ pkg/ui/src/components/core/typography.styl | 1 + .../containers/clusterOverview/index.tsx | 2 + .../views/dashboard/emailSubscription.styl | 63 ++++++++++++++ .../src/views/dashboard/emailSubscription.tsx | 87 +++++++++++++++++++ 5 files changed, 182 insertions(+) create mode 100644 pkg/ui/assets/dashboard/email_signup_background.svg create mode 100644 pkg/ui/src/views/dashboard/emailSubscription.styl create mode 100644 pkg/ui/src/views/dashboard/emailSubscription.tsx diff --git a/pkg/ui/assets/dashboard/email_signup_background.svg b/pkg/ui/assets/dashboard/email_signup_background.svg new file mode 100644 index 000000000000..cb6f4415d338 --- /dev/null +++ b/pkg/ui/assets/dashboard/email_signup_background.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/pkg/ui/src/components/core/typography.styl b/pkg/ui/src/components/core/typography.styl index 3517a7f8dc2f..2077846a2610 100644 --- a/pkg/ui/src/components/core/typography.styl +++ b/pkg/ui/src/components/core/typography.styl @@ -17,6 +17,7 @@ $font-family--bold = SourceSansPro-Bold $font-family--semi-bold = SourceSansPro-SemiBold $font-family--monospace = SFMono +$font-weight--extra-bold = 900 $font-weight--bold = 600 $font-weight--medium = 500 $font-weight--light = 400 diff --git a/pkg/ui/src/views/cluster/containers/clusterOverview/index.tsx b/pkg/ui/src/views/cluster/containers/clusterOverview/index.tsx index c983ed7c2d13..b46fd708c05e 100644 --- a/pkg/ui/src/views/cluster/containers/clusterOverview/index.tsx +++ b/pkg/ui/src/views/cluster/containers/clusterOverview/index.tsx @@ -22,6 +22,7 @@ import createChartComponent from "src/views/shared/util/d3-react"; import capacityChart from "./capacity"; import spinner from "assets/spinner.gif"; import { refreshNodes, refreshLiveness } from "src/redux/apiReducers"; +import EmailSubscription from "src/views/dashboard/emailSubscription"; import "./cluster.styl"; // tslint:disable-next-line:variable-name @@ -217,6 +218,7 @@ export default class ClusterOverview extends React.Component { return (
+
diff --git a/pkg/ui/src/views/dashboard/emailSubscription.styl b/pkg/ui/src/views/dashboard/emailSubscription.styl new file mode 100644 index 000000000000..b135705cc94e --- /dev/null +++ b/pkg/ui/src/views/dashboard/emailSubscription.styl @@ -0,0 +1,63 @@ +// Copyright 2020 The Cockroach Authors. +// +// Use of this software is governed by the Business Source License +// included in the file licenses/BSL.txt. +// +// As of the Change Date specified in that file, in accordance with +// the Business Source License, use of this software will be governed +// by the Apache License, Version 2.0, included in the file +// licenses/APL.txt. + +@require '~src/components/core/index.styl' + +.crl-email-subscription + border-radius 5px + box-shadow: 0 0 1px 0 rgba(67, 90, 111, 0.41) + display flex + flex-direction row + align-items center + justify-content flex-end + height 90px + background-color $colors--white + background-image url("../../../assets/dashboard/email_signup_background.svg") + background-repeat no-repeat + background-position center + padding-left $spacing-large + + &__text + font-size $font-size--large + font-family $font-family--base + line-height 1.6 + letter-spacing -0.2px + color $colors--neutral-6 + flex-grow 1 + & > div + max-width 320px + + &__controls + flex-grow 0 + + &__close-button + flex-grow 0 + color $colors--neutral-7 + align-self flex-start + margin $spacing-smaller $spacing-small $spacing-small $spacing-medium + cursor pointer + font-size $font-size--large + line-height $spacing-smaller + font-weight $font-weight--extra-bold + + + @media (max-width: 920px) { + .crl-email-subscription__text { + font-size $font-size--tall + font-family $font-family--base + line-height 1.6 + } + } + + @media (max-width: 800px) { + .crl-email-subscription__text { + display none + } + } diff --git a/pkg/ui/src/views/dashboard/emailSubscription.tsx b/pkg/ui/src/views/dashboard/emailSubscription.tsx new file mode 100644 index 000000000000..66db364e6bc5 --- /dev/null +++ b/pkg/ui/src/views/dashboard/emailSubscription.tsx @@ -0,0 +1,87 @@ +// Copyright 2020 The Cockroach Authors. +// +// Use of this software is governed by the Business Source License +// included in the file licenses/BSL.txt. +// +// As of the Change Date specified in that file, in accordance with +// the Business Source License, use of this software will be governed +// by the Apache License, Version 2.0, included in the file +// licenses/APL.txt. + +import React from "react"; +import { connect } from "react-redux"; + +import { EmailSubscriptionForm } from "src/views/shared/components/emailSubscriptionForm"; +import { signUpForEmailSubscription } from "src/redux/customAnalytics"; +import { AdminUIState } from "src/redux/state"; +import { clusterIdSelector } from "src/redux/nodes"; +import { LocalSetting } from "src/redux/localsettings"; + +import "./emailSubscription.styl"; + +type EmailSubscriptionProps = MapDispatchToProps & MapStateToProps; + +class EmailSubscription extends React.Component { + handleEmailSubscriptionSubmit = (email: string) => { + this.props.signUpForEmailSubscription(this.props.clusterId, email); + } + + handlePanelHide = () => { + this.props.hidePanel(); + } + + render() { + const { isHiddenPanel } = this.props; + + if (isHiddenPanel) { + return null; + } + + return ( +
+
+
+
+ Keep up-to-date with CockroachDB + software releases and best practices. +
+
+
+ +
+
+ × +
+
+
+ ); + } +} + +const hidePanelLocalSetting = new LocalSetting( + "dashboard/release_notes_signup/hide", (s) => s.localSettings, false, +); + +interface MapDispatchToProps { + signUpForEmailSubscription: (clusterId: string, email: string) => void; + hidePanel: () => void; +} + +const mapDispatchToProps = { + signUpForEmailSubscription, + hidePanel: () => hidePanelLocalSetting.set(true), +}; + +interface MapStateToProps { + isHiddenPanel: boolean; + clusterId: string; +} +const mapStateToProps = (state: AdminUIState) => ({ + isHiddenPanel: hidePanelLocalSetting.selector(state), + clusterId: clusterIdSelector(state), +}); + +export default connect(mapStateToProps, mapDispatchToProps)(EmailSubscription); From 17db09e1b5e678f02f4d33ac30645d2ab242728a Mon Sep 17 00:00:00 2001 From: Andrii Vorobiov Date: Wed, 19 Feb 2020 17:12:02 +0200 Subject: [PATCH 3/6] ui: Adjust styles for Release notes signup panel Resolves: #45187 - Change background image - Change partial background to green - Justify panel when resizing window Release note: None --- .../dashboard/email_signup_background.svg | 45 ++++++++----------- .../views/dashboard/emailSubscription.styl | 28 +++++++++--- 2 files changed, 41 insertions(+), 32 deletions(-) diff --git a/pkg/ui/assets/dashboard/email_signup_background.svg b/pkg/ui/assets/dashboard/email_signup_background.svg index cb6f4415d338..dea0ca3da0c1 100644 --- a/pkg/ui/assets/dashboard/email_signup_background.svg +++ b/pkg/ui/assets/dashboard/email_signup_background.svg @@ -1,29 +1,22 @@ - - - + + + - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + diff --git a/pkg/ui/src/views/dashboard/emailSubscription.styl b/pkg/ui/src/views/dashboard/emailSubscription.styl index b135705cc94e..50c6edf8222d 100644 --- a/pkg/ui/src/views/dashboard/emailSubscription.styl +++ b/pkg/ui/src/views/dashboard/emailSubscription.styl @@ -10,6 +10,8 @@ @require '~src/components/core/index.styl' +$text-width = 352px + .crl-email-subscription border-radius 5px box-shadow: 0 0 1px 0 rgba(67, 90, 111, 0.41) @@ -21,21 +23,31 @@ background-color $colors--white background-image url("../../../assets/dashboard/email_signup_background.svg") background-repeat no-repeat - background-position center - padding-left $spacing-large + background-position-x $text-width &__text font-size $font-size--large font-family $font-family--base line-height 1.6 letter-spacing -0.2px - color $colors--neutral-6 + color $colors--white flex-grow 1 + height inherit + border-radius inherit & > div - max-width 320px + max-width $text-width + background $colors--primary-green-3 + padding-left $spacing-large + height inherit + border-bottom-left-radius: inherit; + border-top-left-radius: inherit; + display flex + align-items center + &__controls flex-grow 0 + margin-left $spacing-medium &__close-button flex-grow 0 @@ -48,7 +60,9 @@ font-weight $font-weight--extra-bold - @media (max-width: 920px) { + @media (max-width: 1055px) { + background-position center + .crl-email-subscription__text { font-size $font-size--tall font-family $font-family--base @@ -56,7 +70,9 @@ } } - @media (max-width: 800px) { + @media (max-width: 940px) { + background-position left + .crl-email-subscription__text { display none } From 19923491ee2e211e79cc314b25e73ad933ab7e23 Mon Sep 17 00:00:00 2001 From: Andrii Vorobiov Date: Tue, 25 Feb 2020 23:43:17 +0200 Subject: [PATCH 4/6] ui: Extend Segment traits for Custom analytics event Release note: None --- pkg/ui/src/redux/customAnalytics/customAnalyticsSagas.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/pkg/ui/src/redux/customAnalytics/customAnalyticsSagas.ts b/pkg/ui/src/redux/customAnalytics/customAnalyticsSagas.ts index 1ced91ad9dad..2c99954024eb 100644 --- a/pkg/ui/src/redux/customAnalytics/customAnalyticsSagas.ts +++ b/pkg/ui/src/redux/customAnalytics/customAnalyticsSagas.ts @@ -44,6 +44,8 @@ export function* signUpEmailSubscription(action: PayloadAction Date: Fri, 28 Feb 2020 09:21:12 +0200 Subject: [PATCH 5/6] ui: Dispatch action to display alert message after email subscription Alert notification has to be showed after user subscribed to release notes. Release note: None --- pkg/ui/src/redux/customAnalytics/customAnalyticsSagas.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/pkg/ui/src/redux/customAnalytics/customAnalyticsSagas.ts b/pkg/ui/src/redux/customAnalytics/customAnalyticsSagas.ts index 2c99954024eb..23156b5c0d60 100644 --- a/pkg/ui/src/redux/customAnalytics/customAnalyticsSagas.ts +++ b/pkg/ui/src/redux/customAnalytics/customAnalyticsSagas.ts @@ -13,6 +13,8 @@ import Analytics from "analytics-node"; import { PayloadAction } from "src/interfaces/action"; import { COCKROACHLABS_ADDR } from "src/util/cockroachlabsAPI"; +import { emailSubscriptionAlertLocalSetting } from "src/redux/alerts"; + import { completeEmailSubscriptionSignUp, EMAIL_SUBSCRIPTION_SIGN_UP, @@ -49,6 +51,7 @@ export function* signUpEmailSubscription(action: PayloadAction Date: Fri, 28 Feb 2020 22:44:58 +0200 Subject: [PATCH 6/6] ui: Remove unnecessary EMAIL_SUBSCRIPTION_SIGN_UP_COMPLETE action Release note: None --- .../redux/customAnalytics/customAnalyticsSagas.spec.ts | 2 -- pkg/ui/src/redux/customAnalytics/customAnalyticsSagas.ts | 2 -- .../src/redux/customAnalytics/customAnanlyticsActions.ts | 9 --------- 3 files changed, 13 deletions(-) diff --git a/pkg/ui/src/redux/customAnalytics/customAnalyticsSagas.spec.ts b/pkg/ui/src/redux/customAnalytics/customAnalyticsSagas.spec.ts index 9e70d0cde700..c1303130b069 100644 --- a/pkg/ui/src/redux/customAnalytics/customAnalyticsSagas.spec.ts +++ b/pkg/ui/src/redux/customAnalytics/customAnalyticsSagas.spec.ts @@ -14,7 +14,6 @@ import Analytics from "analytics-node"; import { signUpEmailSubscription } from "./customAnalyticsSagas"; import { - completeEmailSubscriptionSignUp, signUpForEmailSubscription, } from "./customAnanlyticsActions"; @@ -33,7 +32,6 @@ describe("customAnalyticsSagas", () => { const action = signUpForEmailSubscription(clusterId, email); return expectSaga(signUpEmailSubscription, action) - .put(completeEmailSubscriptionSignUp()) .dispatch(action) .run() .then(() => { diff --git a/pkg/ui/src/redux/customAnalytics/customAnalyticsSagas.ts b/pkg/ui/src/redux/customAnalytics/customAnalyticsSagas.ts index 23156b5c0d60..57eb9c94714f 100644 --- a/pkg/ui/src/redux/customAnalytics/customAnalyticsSagas.ts +++ b/pkg/ui/src/redux/customAnalytics/customAnalyticsSagas.ts @@ -16,7 +16,6 @@ import { COCKROACHLABS_ADDR } from "src/util/cockroachlabsAPI"; import { emailSubscriptionAlertLocalSetting } from "src/redux/alerts"; import { - completeEmailSubscriptionSignUp, EMAIL_SUBSCRIPTION_SIGN_UP, EmailSubscriptionSignUpPayload, } from "./customAnanlyticsActions"; @@ -50,7 +49,6 @@ export function* signUpEmailSubscription(action: PayloadAction