From 01c297418ed7b13405964f81d76800fd9b9061c9 Mon Sep 17 00:00:00 2001 From: Jorge Padilla Date: Wed, 24 Jan 2024 17:28:39 -0500 Subject: [PATCH] feat(frontend): add help info in settings pages (#3558) --- .../Settings/DataStore/DataStore.styled.ts | 4 ++- web/src/components/Settings/Demo/Demo.tsx | 32 ++++++++++++------- web/src/components/Settings/Linter/Linter.tsx | 5 +-- .../components/Settings/Polling/Polling.tsx | 12 +++++-- .../Settings/TestRunner/TestRunner.tsx | 7 ++-- .../Settings/common/Settings.styled.ts | 12 +++++-- web/src/constants/Common.constants.ts | 5 ++- .../TracetestAttributes.constants.ts | 2 +- 8 files changed, 56 insertions(+), 23 deletions(-) diff --git a/web/src/components/Settings/DataStore/DataStore.styled.ts b/web/src/components/Settings/DataStore/DataStore.styled.ts index 9e600196ab..3faa39ef72 100644 --- a/web/src/components/Settings/DataStore/DataStore.styled.ts +++ b/web/src/components/Settings/DataStore/DataStore.styled.ts @@ -10,9 +10,11 @@ export const Title = styled(Typography.Title)` `; export const Wrapper = styled.div` + background: ${({theme}) => theme.color.white}; + border-radius: 2px; + border: ${({theme}) => `1px solid ${theme.color.borderLight}`}; display: flex; flex-direction: column; - background: ${({theme}) => theme.color.white}; `; export const FormContainer = styled.div` diff --git a/web/src/components/Settings/Demo/Demo.tsx b/web/src/components/Settings/Demo/Demo.tsx index 0fc82a927c..07395a9dc9 100644 --- a/web/src/components/Settings/Demo/Demo.tsx +++ b/web/src/components/Settings/Demo/Demo.tsx @@ -1,20 +1,30 @@ -import {OTEL_DEMO_GITHUB, POKESHOP_GITHUB} from 'constants/Common.constants'; +import DocsBanner from 'components/DocsBanner'; +import {DEMO_DOCUMENTATION_URL, OTEL_DEMO_GITHUB, POKESHOP_GITHUB} from 'constants/Common.constants'; import DemoForm from './DemoForm'; import * as S from '../common/Settings.styled'; const Demo = () => ( + Demo - Tracetest has the option to enable Test examples for our{' '} - - Pokeshop Demo App - {' '} - or the{' '} - - OpenTelemetry Astronomy Shop Demo - - . You will require an instance of those applications running alongside your Tracetest server to be able to use - them. You can adjust the demo values below: +

+ Tracetest has the option to enable Test examples for our{' '} + + Pokeshop Demo App + {' '} + or the{' '} + + OpenTelemetry Astronomy Shop Demo + + . You will require an instance of those applications running alongside your Tracetest server to be able to use + them. +

+ + Need more information about the Demos?{' '} + + Learn more in our docs + + diff --git a/web/src/components/Settings/Linter/Linter.tsx b/web/src/components/Settings/Linter/Linter.tsx index 19980467f8..c577e28a39 100644 --- a/web/src/components/Settings/Linter/Linter.tsx +++ b/web/src/components/Settings/Linter/Linter.tsx @@ -5,6 +5,7 @@ import * as S from '../common/Settings.styled'; const Linter = () => ( + Analyzer (Beta)

The Tracetest Analyzer is a plugin based framework used to audit OpenTelemetry traces to help teams improve @@ -13,9 +14,9 @@ const Linter = () => ( Add to this Issue or call us on Slack!

- Need more information about Analyzer?{' '} + Need more information about the Analyzer?{' '} - Go to our docs + Learn more in our docs diff --git a/web/src/components/Settings/Polling/Polling.tsx b/web/src/components/Settings/Polling/Polling.tsx index de18dcfd63..3f538310d4 100644 --- a/web/src/components/Settings/Polling/Polling.tsx +++ b/web/src/components/Settings/Polling/Polling.tsx @@ -1,11 +1,19 @@ +import DocsBanner from 'components/DocsBanner'; +import {TRACE_POLLING_DOCUMENTATION_URL} from 'constants/Common.constants'; import PollingForm from './PollingForm'; import * as S from '../common/Settings.styled'; const Polling = () => ( + Trace Polling - Tracetest uses polling to gather the distributed trace associated with each test run. You can adjust the polling - values below: +

Tracetest uses polling to gather the distributed trace associated with each test run.

+ + Need more information about Trace Polling?{' '} + + Learn more in our docs + + diff --git a/web/src/components/Settings/TestRunner/TestRunner.tsx b/web/src/components/Settings/TestRunner/TestRunner.tsx index e3b96ffdd5..5b4c7da055 100644 --- a/web/src/components/Settings/TestRunner/TestRunner.tsx +++ b/web/src/components/Settings/TestRunner/TestRunner.tsx @@ -6,12 +6,13 @@ import TestRunnerForm from './TestRunnerForm'; const TestRunner = () => { return ( + Test Runner -

The Test Runner allows you to configure the behavior used to execute your tests and generate the results

+

The Test Runner allows you to configure the behavior used to execute your tests and generate the results.

- Need more information about Test Runner?{' '} + Need more information about the Test Runner?{' '} - Go to our docs + Learn more in our docs diff --git a/web/src/components/Settings/common/Settings.styled.ts b/web/src/components/Settings/common/Settings.styled.ts index 11369155b3..1dbf304162 100644 --- a/web/src/components/Settings/common/Settings.styled.ts +++ b/web/src/components/Settings/common/Settings.styled.ts @@ -3,10 +3,12 @@ import styled from 'styled-components'; export const Container = styled.div` background: ${({theme}) => theme.color.white}; + border: ${({theme}) => `1px solid ${theme.color.borderLight}`}; + border-radius: 2px; display: flex; flex-direction: column; margin-bottom: 24px; - padding: 16px; + padding: 24px; `; export const FormContainer = styled.div` @@ -21,7 +23,7 @@ export const FooterContainer = styled.div` border-top: 1px solid ${({theme}) => theme.color.borderLight}; `; -export const Description = styled(Typography.Text)` +export const Description = styled(Typography.Paragraph)` && { color: ${({theme}) => theme.color.textSecondary}; } @@ -50,3 +52,9 @@ export const SwitchLabel = styled.label<{$disabled?: boolean}>` cursor: ${({$disabled}) => ($disabled ? 'not-allowed' : 'pointer')}; margin-bottom: 24px; `; + +export const Title = styled(Typography.Title)` + && { + margin-bottom: 16px; + } +`; diff --git a/web/src/constants/Common.constants.ts b/web/src/constants/Common.constants.ts index 7b29bb61d7..2ed902622c 100644 --- a/web/src/constants/Common.constants.ts +++ b/web/src/constants/Common.constants.ts @@ -30,8 +30,11 @@ export const TEST_RUNNER_DOCUMENTATION_URL = 'https://docs.tracetest.io/configur export const ANALYZER_RULES_DOCUMENTATION_URL = 'https://docs.tracetest.io/analyzer/rules'; export const EXPRESSIONS_DOCUMENTATION_URL = 'https://docs.tracetest.io/concepts/expressions'; export const VARIABLE_SET_DOCUMENTATION_URL = 'https://docs.tracetest.io/concepts/variable-sets'; -export const GITHUB_ACTION_URL = 'https://github.com/kubeshop/tracetest-github-action/tree/main/examples/tracetest-cli-with-tracetest-core'; +export const GITHUB_ACTION_URL = + 'https://github.com/kubeshop/tracetest-github-action/tree/main/examples/tracetest-cli-with-tracetest-core'; export const CLI_DOCS_URL = 'https://docs.tracetest.io/cli/cli-installation-reference'; +export const TRACE_POLLING_DOCUMENTATION_URL = 'https://docs.tracetest.io/configuration/trace-polling/'; +export const DEMO_DOCUMENTATION_URL = 'https://docs.tracetest.io/configuration/demo/'; export const SELECTOR_LANGUAGE_CHEAT_SHEET_URL = `${process.env.PUBLIC_URL}/SL_cheat_sheet.pdf`; diff --git a/web/src/constants/TracetestAttributes.constants.ts b/web/src/constants/TracetestAttributes.constants.ts index 1d11176fd3..5ba333603c 100644 --- a/web/src/constants/TracetestAttributes.constants.ts +++ b/web/src/constants/TracetestAttributes.constants.ts @@ -16,7 +16,7 @@ export default { }, 'tracetest.span.type': { description: - 'Tracetest attribute based on the [OTel Trace Semantic Conventions](https://github.com/open-telemetry/opentelemetry-specification/tree/main/specification/trace/semantic_conventions)', + 'Tracetest attribute based on the [OTel Trace Semantic Conventions](https://github.com/open-telemetry/semantic-conventions/blob/main/docs/README.md)', note: '', tags: ['general', 'http', 'database', 'rpc', 'messaging', 'faas', 'exception'], },