From 5c02250aae9d6bacd2b1ad5f59edf02286e216c9 Mon Sep 17 00:00:00 2001 From: Yunus M Date: Mon, 28 Oct 2024 18:33:56 +0530 Subject: [PATCH] feat: feedback updates --- .../AboutSigNozQuestions.tsx | 4 +- .../OnboardingHeader/OnboardingHeader.tsx | 14 -- .../OptimiseSignozNeeds.tsx | 194 +++++++++++++----- .../OrgQuestions/OrgQuestions.tsx | 8 +- .../OnboardingQuestionaire/index.tsx | 9 +- 5 files changed, 152 insertions(+), 77 deletions(-) diff --git a/frontend/src/container/OnboardingQuestionaire/AboutSigNozQuestions/AboutSigNozQuestions.tsx b/frontend/src/container/OnboardingQuestionaire/AboutSigNozQuestions/AboutSigNozQuestions.tsx index c6f0320d1a..8ebddd3430 100644 --- a/frontend/src/container/OnboardingQuestionaire/AboutSigNozQuestions/AboutSigNozQuestions.tsx +++ b/frontend/src/container/OnboardingQuestionaire/AboutSigNozQuestions/AboutSigNozQuestions.tsx @@ -33,7 +33,7 @@ const hearAboutSignozOptions: Record = { const interestedInOptions: Record = { savingCosts: 'Saving costs', otelNativeStack: 'Interested in Otel-native stack', - allInOne: 'All in one', + allInOne: 'All in one (Logs, Metrics & Traces)', }; export function AboutSigNozQuestions({ @@ -144,7 +144,7 @@ export function AboutSigNozQuestions({ { - if (window.Intercom) { - window.Intercom('showNewMessage', ''); - } - }; - return (
SigNoz SigNoz
-
); } diff --git a/frontend/src/container/OnboardingQuestionaire/OptimiseSignozNeeds/OptimiseSignozNeeds.tsx b/frontend/src/container/OnboardingQuestionaire/OptimiseSignozNeeds/OptimiseSignozNeeds.tsx index a801c2784e..b3fdb9f4e7 100644 --- a/frontend/src/container/OnboardingQuestionaire/OptimiseSignozNeeds/OptimiseSignozNeeds.tsx +++ b/frontend/src/container/OnboardingQuestionaire/OptimiseSignozNeeds/OptimiseSignozNeeds.tsx @@ -1,4 +1,4 @@ -import { Button, Slider, SliderSingleProps, Typography } from 'antd'; +import { Button, Slider, Typography } from 'antd'; import logEvent from 'api/common/logEvent'; import { ArrowLeft, ArrowRight, Loader2, Minus } from 'lucide-react'; import { useEffect, useState } from 'react'; @@ -9,6 +9,28 @@ export interface OptimiseSignozDetails { services: number; } +// Define exponential range +const logsMin = 1; // Set to your minimum value in the exponential range +const logsMax = 10000; // Set to your maximum value in the exponential range + +const hostsMin = 1; +const hostsMax = 10000; + +const servicesMin = 1; +const servicesMax = 5000; + +// Function to convert linear slider value to exponential scale +const linearToExponential = ( + value: number, + min: number, + max: number, +): number => { + const expMin = Math.log10(min); + const expMax = Math.log10(max); + const expValue = 10 ** (expMin + ((expMax - expMin) * value) / 100); + return Math.round(expValue); +}; + interface OptimiseSignozNeedsProps { optimiseSignozDetails: OptimiseSignozDetails; setOptimiseSignozDetails: (details: OptimiseSignozDetails) => void; @@ -19,29 +41,28 @@ interface OptimiseSignozNeedsProps { isNextDisabled: boolean; } -const logMarks: SliderSingleProps['marks'] = { - 0: '0 GB', - 25: '25 GB', - 50: '50 GB', - 100: '100 GB', +const marks = { + 0: `${linearToExponential(0, logsMin, logsMax).toLocaleString()} GB`, + 25: `${linearToExponential(25, logsMin, logsMax).toLocaleString()} GB`, + 50: `${linearToExponential(50, logsMin, logsMax).toLocaleString()} GB`, + 75: `${linearToExponential(75, logsMin, logsMax).toLocaleString()} GB`, + 100: `${linearToExponential(100, logsMin, logsMax).toLocaleString()} GB`, }; -const hostMarks: SliderSingleProps['marks'] = { - 0: '0', - 20: '20', - 40: '40', - 60: '60', - 80: '80', - 100: '100', +const hostMarks = { + 0: `${linearToExponential(0, hostsMin, hostsMax).toLocaleString()}`, + 25: `${linearToExponential(25, hostsMin, hostsMax).toLocaleString()}`, + 50: `${linearToExponential(50, hostsMin, hostsMax).toLocaleString()}`, + 75: `${linearToExponential(75, hostsMin, hostsMax).toLocaleString()}`, + 100: `${linearToExponential(100, hostsMin, hostsMax).toLocaleString()}`, }; -const serviceMarks: SliderSingleProps['marks'] = { - 0: '0', - 20: '20', - 40: '40', - 60: '60', - 80: '80', - 100: '100', +const serviceMarks = { + 0: `${linearToExponential(0, servicesMin, servicesMax).toLocaleString()}`, + 25: `${linearToExponential(25, servicesMin, servicesMax).toLocaleString()}`, + 50: `${linearToExponential(50, servicesMin, servicesMax).toLocaleString()}`, + 75: `${linearToExponential(75, servicesMin, servicesMax).toLocaleString()}`, + 100: `${linearToExponential(100, servicesMin, servicesMax).toLocaleString()}`, }; function OptimiseSignozNeeds({ @@ -108,6 +129,52 @@ function OptimiseSignozNeeds({ }); }; + // Internal state for the linear slider + const [sliderValues, setSliderValues] = useState({ + logsPerDay: 0, + hostsPerDay: 0, + services: 0, + }); + + const handleSliderChange = (key: string, value: number): void => { + console.log('value', value); + setSliderValues({ + ...sliderValues, + [key]: value, + }); + + switch (key) { + case 'logsPerDay': + setLogsPerDay(value); + break; + case 'hostsPerDay': + setHostsPerDay(value); + break; + case 'services': + setServices(value); + break; + default: + break; + } + }; + + // Calculate the exponential value based on the current slider position + const logsPerDayValue = linearToExponential( + sliderValues.logsPerDay, + logsMin, + logsMax, + ); + const hostsPerDayValue = linearToExponential( + sliderValues.hostsPerDay, + hostsMin, + hostsMax, + ); + const servicesValue = linearToExponential( + sliderValues.services, + servicesMin, + servicesMax, + ); + return (
@@ -128,16 +195,25 @@ function OptimiseSignozNeeds({ Logs / Day
- setLogsPerDay(value)} - styles={{ - track: { - background: '#4E74F8', - }, - }} - /> +
+ + handleSliderChange('logsPerDay', value) + } + styles={{ + track: { + background: '#4E74F8', + }, + }} + tooltip={{ + formatter: (): string => `${logsPerDayValue.toLocaleString()} GB`, // Show whole number + }} + /> +
@@ -146,16 +222,25 @@ function OptimiseSignozNeeds({ Metrics Number of Hosts
- setHostsPerDay(value)} - styles={{ - track: { - background: '#4E74F8', - }, - }} - /> +
+ + handleSliderChange('hostsPerDay', value) + } + styles={{ + track: { + background: '#4E74F8', + }, + }} + tooltip={{ + formatter: (): string => `${hostsPerDayValue.toLocaleString()}`, // Show whole number + }} + /> +
@@ -164,16 +249,25 @@ function OptimiseSignozNeeds({ Number of services
- setServices(value)} - styles={{ - track: { - background: '#4E74F8', - }, - }} - /> +
+ + handleSliderChange('services', value) + } + styles={{ + track: { + background: '#4E74F8', + }, + }} + tooltip={{ + formatter: (): string => `${servicesValue.toLocaleString()}`, // Show whole number + }} + /> +
diff --git a/frontend/src/container/OnboardingQuestionaire/OrgQuestions/OrgQuestions.tsx b/frontend/src/container/OnboardingQuestionaire/OrgQuestions/OrgQuestions.tsx index ea6bad53d6..17822c2342 100644 --- a/frontend/src/container/OnboardingQuestionaire/OrgQuestions/OrgQuestions.tsx +++ b/frontend/src/container/OnboardingQuestionaire/OrgQuestions/OrgQuestions.tsx @@ -42,9 +42,9 @@ const observabilityTools = { }; const o11yFamiliarityOptions: Record = { - beginner: 'Basic Understanding', - intermediate: 'Somewhat Familiar', - expert: 'Very Familiar', + beginner: 'Beginner', + intermediate: 'Intermediate', + expert: 'Expert', notFamiliar: "I'm not familiar with it", }; @@ -254,7 +254,7 @@ function OrgQuestions({
- Are you familiar with setting upobservability (o11y)? + Are you familiar with setting up observability (o11y)?
{Object.keys(o11yFamiliarityOptions).map((option: string) => ( diff --git a/frontend/src/container/OnboardingQuestionaire/index.tsx b/frontend/src/container/OnboardingQuestionaire/index.tsx index 77bde17848..ade99c099f 100644 --- a/frontend/src/container/OnboardingQuestionaire/index.tsx +++ b/frontend/src/container/OnboardingQuestionaire/index.tsx @@ -28,7 +28,6 @@ import { SignozDetails, } from './AboutSigNozQuestions/AboutSigNozQuestions'; import InviteTeamMembers from './InviteTeamMembers/InviteTeamMembers'; -import { OnboardingFooter } from './OnboardingFooter/OnboardingFooter'; import { OnboardingHeader } from './OnboardingHeader/OnboardingHeader'; import OptimiseSignozNeeds, { OptimiseSignozDetails, @@ -148,8 +147,8 @@ function OnboardingQuestionaire(): JSX.Element { }, [org]); const isNextDisabled = - optimiseSignozDetails.logsPerDay === 0 || - optimiseSignozDetails.hostsPerDay === 0 || + optimiseSignozDetails.logsPerDay === 0 && + optimiseSignozDetails.hostsPerDay === 0 && optimiseSignozDetails.services === 0; const [isLoading, setIsLoading] = useState(false); @@ -316,10 +315,6 @@ function OnboardingQuestionaire(): JSX.Element { )}
- -
- -
); }