From 883ee4d80a98cf7d7309f4bb3d9c332c76f25b3e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adnan=20Rahi=C4=87?= Date: Mon, 19 Feb 2024 16:19:49 +0100 Subject: [PATCH] docs(landing pages): edit components based on user behavior (#3660) --- docs/docs/examples-tutorials/overview.mdx | 2 - docs/docs/getting-started/installation.mdx | 36 +++-------- docs/docs/getting-started/open.mdx | 6 +- docs/docs/getting-started/overview.mdx | 25 ++++++-- docs/docusaurus.config.js | 4 +- docs/sidebars.js | 64 +++++++++---------- .../ExamplesTutorialsOverview/index.tsx | 36 +++++------ .../components/GettingStartedGuide/index.tsx | 19 +++++- 8 files changed, 101 insertions(+), 91 deletions(-) diff --git a/docs/docs/examples-tutorials/overview.mdx b/docs/docs/examples-tutorials/overview.mdx index 991241b9f7..055dec5259 100644 --- a/docs/docs/examples-tutorials/overview.mdx +++ b/docs/docs/examples-tutorials/overview.mdx @@ -13,8 +13,6 @@ image: https://res.cloudinary.com/djwdcmwdz/image/upload/v1698686403/docs/Blog_T breadcrumb_label: Nothing --- -import CodeBlock from '@theme/CodeBlock'; - Find tutorials and guides to help you get started with Tracetest. ```mdx-code-block diff --git a/docs/docs/getting-started/installation.mdx b/docs/docs/getting-started/installation.mdx index 1538f6833c..c36f60732a 100644 --- a/docs/docs/getting-started/installation.mdx +++ b/docs/docs/getting-started/installation.mdx @@ -24,24 +24,20 @@ This page showcases getting started with [Tracetest](https://app.tracetest.io/) ## Install the Tracetest Agent -[Tracetest Agent](../concepts/agent) runs as a standalone process. It runs either locally on your machine or as a container. Once started, Tracetest Agent exposes OTLP ports `4317` (gRPC) and `4318` (HTTP) for trace ingestion. It executes tests in the environment where it is running and returns the response from triggered tests. +[Tracetest Agent](/concepts/agent) runs as a standalone process. It runs either locally on your machine or as a container. Once started, Tracetest Agent exposes OTLP ports `4317` (gRPC) and `4318` (HTTP) for trace ingestion. It executes tests in the environment where it is running and returns the response from triggered tests. + +[Sign in to Tracetest](https://app.tracetest.io/), and get your [Tracetest Agent API Key](/configuration/agent). - + -tracetest start +{`tracetest start --api-key `} -The Agent will start and open a browser. Sign in to Tracetest. - -![](https://res.cloudinary.com/djwdcmwdz/image/upload/v1695990166/docs/screely-1695990151905_eb8yiw.png) - -Once signed in, return to the terminal. - - + + -The Agent will start and open a browser. Sign in to Tracetest. - -![](https://res.cloudinary.com/djwdcmwdz/image/upload/v1695990166/docs/screely-1695990151905_eb8yiw.png) - -Once signed in, return to the terminal. - = 18.03) and Linux (docker version >= 20.10.0): `host.docker.internal:8080` ::: - - + + `} -The Agent will start and open a browser. Sign in to Tracetest. - -![](https://res.cloudinary.com/djwdcmwdz/image/upload/v1695990166/docs/screely-1695990151905_eb8yiw.png) - -Once signed in, return to the terminal. - = 18.03) and Linux (docker version >= 20.10.0): `host.docker.internal:8080` ::: - + :::tip Don't have OpenTelemetry installed? diff --git a/docs/docs/getting-started/open.mdx b/docs/docs/getting-started/open.mdx index e04b240fdb..42dca9e11f 100644 --- a/docs/docs/getting-started/open.mdx +++ b/docs/docs/getting-started/open.mdx @@ -11,7 +11,7 @@ keywords: image: https://res.cloudinary.com/djwdcmwdz/image/upload/v1698686403/docs/Blog_Thumbnail_14_rsvkmo.jpg --- -This page showcases opening the Tracetest Web UI and creating a test against the [sample Pokeshop API](/live-examples/pokeshop/overview). +This page showcases opening the Tracetest Web UI and creating a test against the [microservice sample Pokeshop API](/live-examples/pokeshop/overview). Once you've installed Tracetest, as explained in the [installation guide](./installation.mdx), the Tracetest Agent is running on `localhost` ports `4317` and `4318`. You then access the Tracetest Web UI on [`app.tracetest.io`](https://app.tracetest.io). Here's what will greet you after a fresh install. @@ -79,7 +79,7 @@ In the Web UI go to **Settings > Demo**, toggle **Enable Pokeshop**, and add: ![Settings](https://res.cloudinary.com/djwdcmwdz/image/upload/v1696251763/docs/screely-1696251756346_ptxb9m.png) -With the CLI, create a file called `tracetest-provision.yaml`. +Create a file called `tracetest-provision.yaml`. ```yaml title=tracetest-provision.yaml --- @@ -93,7 +93,7 @@ spec: grpcEndpoint: localhost:8082 ``` -Run the command below to enable the `demo` resource. +With the CLI, run the command below to enable the `demo` resource. ```bash tracetest apply demo -f tracetest-provision.yaml diff --git a/docs/docs/getting-started/overview.mdx b/docs/docs/getting-started/overview.mdx index 095ded30fc..9161938e0b 100644 --- a/docs/docs/getting-started/overview.mdx +++ b/docs/docs/getting-started/overview.mdx @@ -16,14 +16,29 @@ keywords: image: https://res.cloudinary.com/djwdcmwdz/image/upload/v1698686403/docs/Blog_Thumbnail_14_rsvkmo.jpg --- -Tracetest is a cloud-native application, packaged and distributed as a Docker image and designed to run in a containerized environment. +```mdx-code-block +import {TracetestGettingStartedGuideCardsRow, TracetestCoreGettingStartedGuideCardsRow} from '@site/src/components/GettingStartedGuide'; +``` + +Tracetest is a cloud-native application, designed to run in the cloud. Get started with Tracetest in two ways: + +- [Tracetest managed platform](https://app.tracetest.io/) and use managed infrastructure with collaboration for teams. +- Deploy [Tracetest Core](/core/getting-started/overview) to your own infrastructure with Docker or Kubernetes. + +## Getting Started with Tracetest Managed Platform -We recommend using our managed platform for [Tracetest](https://app.tracetest.io/), because it's the easiest way to build and test with OpenTelemetry. Tracetest includes features such as collaboration for teams and comes with a free tier for development. +**We recommend using our managed platform for [Tracetest](https://app.tracetest.io/)**. It's the easiest way to test microservices and distributed apps with OpenTelemetry distributed traces. Tracetest provides managed infrastructure, [collaboration for teams](/concepts/environments), [RBAC](/concepts/roles-and-permissions), [organizations](/concepts/organizations), [dependency-free config](/concepts/agent), [agentless serverless config](/concepts/cloud-agent), and much more. -Alternatively, you can run Tracetest Core on your own infrastructure with Docker or Kubernetes. +Get started with the installation guide below, tailored for microservice and distributed app developers. You may find it insightful even if you have [one of many other supported use cases](/examples-tutorials/recipes). ```mdx-code-block -import {GettingStartedGuideCardsRow} from '@site/src/components/GettingStartedGuide'; + +``` + +## Getting Started with Tracetest Core - +Tracetest Core is a cloud-native application, packaged and distributed as a Docker image and designed to run in a containerized environment. + +```mdx-code-block + ``` diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index c5506166ba..57f6b16997 100644 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -119,7 +119,7 @@ const config = { // content: // 'Tracetest is the official testing harness for the OpenTelemetry Demo! 🚀', content: - 'Tracetest Open Beta is Live. Try it! Give us feedback! 🙌', + 'Tracetest Open Beta is Live. Try it! Give us feedback! 🙌', isCloseable: false, }, navbar: { @@ -194,7 +194,7 @@ const config = { { type: "html", position: "left", - value: ``, + value: ``, }, { type: "search", diff --git a/docs/sidebars.js b/docs/sidebars.js index c0c47909f0..983cc624ac 100644 --- a/docs/sidebars.js +++ b/docs/sidebars.js @@ -113,11 +113,6 @@ const sidebars = { id: "examples-tutorials/overview", label: "Overview", }, - { - type: "doc", - id: "examples-tutorials/tutorials", - label: "Tutorials", - }, { type: "category", link: { @@ -325,31 +320,6 @@ const sidebars = { }, ], }, - { - type: "category", - label: "CI/CD Automation", - link: { - type: "doc", - id: "ci-cd-automation/overview", - }, - items: [ - { - type: "doc", - id: "ci-cd-automation/github-actions-pipeline", - label: "GitHub Actions Pipeline", - }, - { - type: "doc", - id: "ci-cd-automation/testkube-pipeline", - label: "Testkube Kubernetes-native Test Runner Pipeline", - }, - { - type: "doc", - id: "ci-cd-automation/tekton-pipeline", - label: "Tekton Cloud-native Pipeline", - }, - ], - }, { type: "category", label: "Tools & Integrations", @@ -395,6 +365,36 @@ const sidebars = { }, ], }, + { + type: "category", + label: "CI/CD Automation", + link: { + type: "doc", + id: "ci-cd-automation/overview", + }, + items: [ + { + type: "doc", + id: "ci-cd-automation/github-actions-pipeline", + label: "GitHub Actions Pipeline", + }, + { + type: "doc", + id: "ci-cd-automation/testkube-pipeline", + label: "Testkube Kubernetes-native Test Runner Pipeline", + }, + { + type: "doc", + id: "ci-cd-automation/tekton-pipeline", + label: "Tekton Cloud-native Pipeline", + }, + ], + }, + { + type: "doc", + id: "examples-tutorials/videos", + label: "Videos & Recordings", + }, { type: "doc", id: "examples-tutorials/webinars", @@ -402,8 +402,8 @@ const sidebars = { }, { type: "doc", - id: "examples-tutorials/videos", - label: "Videos", + id: "examples-tutorials/tutorials", + label: "Blog Post Tutorials", }, ], diff --git a/docs/src/components/ExamplesTutorialsOverview/index.tsx b/docs/src/components/ExamplesTutorialsOverview/index.tsx index 7e25055109..a953772f92 100644 --- a/docs/src/components/ExamplesTutorialsOverview/index.tsx +++ b/docs/src/components/ExamplesTutorialsOverview/index.tsx @@ -8,24 +8,24 @@ import Heading from '@theme/Heading'; const ExamplesTutorialsOverview = [ { - name: '👨‍💻 Tutorials', - url: '/examples-tutorials/tutorials', + name: '🍱 Recipes', + url: '/examples-tutorials/recipes', description: ( - - Check out the following blog posts with Tracetest-related content. + + Self-contained guides to popular use cases. ), - button: 'Learn more', + button: 'Start building', }, { - name: '🍱 Recipes', - url: '/examples-tutorials/recipes', + name: '🛠️ Tools & Integrations', + url: '/tools-and-integrations/overview', description: ( - Short, self-contained, and runnable solutions to popular use cases. + Tools and integrations examples with Tracetest. ), - button: 'Start building', + button: 'Integrate', }, { name: '⚙️ CI/CD Automation', @@ -38,14 +38,14 @@ const ExamplesTutorialsOverview = [ button: 'Automate', }, { - name: '🛠️ Tools & Integrations', - url: '/tools-and-integrations/overview', + name: '📽️ Videos & Recordings', + url: '/examples-tutorials/videos', description: ( - Check out tools and integrations with Tracetest. + Tracetest video guides and conference talks! ), - button: 'Integrate', + button: 'Watch now', }, { name: '🎙️ Webinars', @@ -58,14 +58,14 @@ const ExamplesTutorialsOverview = [ button: 'Watch now', }, { - name: '📽️ Videos', - url: '/examples-tutorials/videos', + name: '👨‍💻 Blog Post Tutorials', + url: '/examples-tutorials/tutorials', description: ( - - Check out Tracetest video guides and conference talks! + + Check out the following blog posts with Tracetest-related content. ), - button: 'Watch now', + button: 'Learn more', }, ]; diff --git a/docs/src/components/GettingStartedGuide/index.tsx b/docs/src/components/GettingStartedGuide/index.tsx index 0ee55ead04..d7d181d379 100644 --- a/docs/src/components/GettingStartedGuide/index.tsx +++ b/docs/src/components/GettingStartedGuide/index.tsx @@ -5,7 +5,7 @@ import Link from '@docusaurus/Link'; import Translate from '@docusaurus/Translate'; import Heading from '@theme/Heading'; -const GettingStartedGuides = [ +const TracetestGettingStartedGuides = [ { name: 'Tracetest 🚀', url: '/getting-started/installation', @@ -16,6 +16,9 @@ const GettingStartedGuides = [ ), button: 'Start', }, +]; + +const TracetestCoreGettingStartedGuides = [ { name: 'Tracetest Core 🪨 ', url: '/core/getting-started/installation', @@ -52,10 +55,20 @@ function GettingStartedGuideCard({name, url, description, button}: Props) { ); } -export function GettingStartedGuideCardsRow(): JSX.Element { +export function TracetestGettingStartedGuideCardsRow(): JSX.Element { + return ( +
+ {TracetestGettingStartedGuides.map((gettingStartedGuide) => ( + + ))} +
+ ); +} + +export function TracetestCoreGettingStartedGuideCardsRow(): JSX.Element { return (
- {GettingStartedGuides.map((gettingStartedGuide) => ( + {TracetestCoreGettingStartedGuides.map((gettingStartedGuide) => ( ))}