From 5377359fad1a3cd6328b71af8ffeed5e6b17dc8c Mon Sep 17 00:00:00 2001 From: Tabatha Zeitke Date: Wed, 6 Dec 2023 14:01:06 -0600 Subject: [PATCH] chore: remove experimental introduction-apm page --- gatsby-node.js | 6 +- .../IntroductionApm/FeaturedContent.js | 248 ------------------ .../IntroductionApm/SectionWrapper.js | 11 - .../IntroductionApm/SmallStackedContent.js | 41 --- .../IntroductionApm/StackedContent.js | 69 ----- src/components/IntroductionApm/TitleBlock.js | 133 ---------- src/components/IntroductionApm/index.js | 5 - src/i18n/translations/en/translation.json | 69 ----- src/i18n/translations/jp/translation.json | 67 ----- src/i18n/translations/kr/translation.json | 63 ----- src/nav/apm.yml | 24 +- src/pages/introduction-apm.js | 228 ---------------- 12 files changed, 15 insertions(+), 949 deletions(-) delete mode 100644 src/components/IntroductionApm/FeaturedContent.js delete mode 100644 src/components/IntroductionApm/SectionWrapper.js delete mode 100644 src/components/IntroductionApm/SmallStackedContent.js delete mode 100644 src/components/IntroductionApm/StackedContent.js delete mode 100644 src/components/IntroductionApm/TitleBlock.js delete mode 100644 src/components/IntroductionApm/index.js delete mode 100644 src/pages/introduction-apm.js diff --git a/gatsby-node.js b/gatsby-node.js index 4812bab04c1..350329284dd 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -306,10 +306,10 @@ exports.createPages = async ({ actions, graphql, reporter }) => { }); }); - // Redirect for VSU page to new Introduction to APM doc + // Redirect for old VSU Introduction to APM .js doc createRedirect({ - fromPath: '/docs/apm/new-relic-apm/getting-started/introduction-apm/', - toPath: '/introduction-apm', + fromPath: '/introduction-apm', + toPath: '/docs/apm/new-relic-apm/getting-started/introduction-apm/', isPermanent: false, redirectInBrowser: true, }); diff --git a/src/components/IntroductionApm/FeaturedContent.js b/src/components/IntroductionApm/FeaturedContent.js deleted file mode 100644 index a42826dc4ea..00000000000 --- a/src/components/IntroductionApm/FeaturedContent.js +++ /dev/null @@ -1,248 +0,0 @@ -import React, { useState } from 'react'; -import styled from '@emotion/styled'; -import { css } from '@emotion/react'; -import VisibilitySensor from 'react-visibility-sensor'; -import { animated, useTrail } from 'react-spring'; -import { useMedia } from 'react-use'; - -import { Icon, useTessen } from '@newrelic/gatsby-theme-newrelic'; - -export const FeaturedContent = ({ - alt, - category, - children, - lineIcon, - lineIconOnly, - img, - list, - offset = 0, - subTitle, - text, - title, -}) => { - const isMobileScreen = useMedia('(max-width: 1240px)'); - const [visible, setVisible] = useState(isMobileScreen); - - const tessen = useTessen(); - - const updateVisibility = (isVisible) => { - if (isVisible) { - setVisible(true); - - // Only the Sections with categories are being animated/tracked. - if (category) { - tessen.track({ - eventName: 'apmIntroVisiblityTrigger', - category, - path: location.pathname, - }); - } - } - }; - - const spring = useTrail(6, { - config: { mass: 1, tension: 400, friction: 40 }, - from: { - opacity: 0, - y: '6%', - }, - to: { - opacity: visible ? 1 : 0, - y: visible ? '0%' : '6%', - }, - }); - - return ( - - - {!lineIconOnly && ( - <> - - {title && {title}} - {subTitle && ( - - {subTitle} - - )} - {text && text.map((paragraph, i) =>

{paragraph}

)} - {list && ( - - {list.map((item, i) => ( - - -
  • {item}
    • -     - ))} -     - )} -     - {img && ( - - {alt} - - )} - - )} - {lineIcon && ( - <> - - - - - - - - - {children} - - )} -     -     - ); -}; - -const Container = styled.div` -cubic-bezier(0, 0.3, 0.4, 1); -display: flex; -margin-left: ${(p) => (p.addMargin ? '24px' : '0')}; -padding: 48px 40px; -position: relative; -width: 100%; - -&.no-animate { - opacity: 1; -} - - @media screen and (max-width: 1240px) { - flex-direction: column; - margin-left: 0; - margin-top: 0; - padding: 0; - } -`; - -const GreenLine = styled.div` - background-color: var(--brand-button-primary-accent); - height: ${(p) => (p.visible ? '100%' : '0px')}; - position: absolute; - top: 0; - transition: height 750ms; - width: 2px; - z-index: 0; - - @media screen and (max-width: 1240px) { - display: none; - } -`; - -const ImageWrapper = styled.div` - align-items: center; - display: flex; - justify-content: center; - ${(p) => p.separator && `padding-left: 32px`}; - width: 30%; - - img { - object-fit: contain; - width: 100%; - } - - @media screen and (max-width: 1240px) { - width: 100%; - } -`; - -const IconBorder = styled.div` - background: var(--primary-background-color); - padding: 1rem 0; - z-index: 10; -`; - -const LineIcon = styled(Icon)` - color: var(--secondary-text-color); - height: 33px; - width: 33px; -`; - -const LineIconWrapper = styled.div` - align-items: center; - background: var(--primary-background-color); - border: 4px solid var(--secondary-text-color); - display: flex; - justify-content: center; - padding: 8px; -`; - -const ListItem = styled.li` - align-items: center; - display: flex; - margin-bottom: 16px; -`; - -const ListWrapper = styled.ul` - list-style-type: none; - padding: 0; -`; - -const SubTitle = styled.h2` - font-size: 28px; - margin-bottom: 32px; -`; - -const TextContainer = styled.div` - display: flex; - flex-direction: column; - justify-content: center; - padding: 36px 0; - padding-right: ${(p) => (p.separator ? `32px` : `16px`)}; - width: 66%; - - @media screen and (max-width: 1240px) { - border: 0; - padding: 0; - width: 100%; - } -`; - -const Spacer = styled.div` - align-items: center; - background: var(--primary-background-color); - bottom: 0; - display: flex; - height: 100%; - justify-content: center; - left: -48px; - padding: 12px; - position: absolute; - - @media screen and (max-width: 1240px) { - display: none; - } -`; - -const Title = styled.h1` - font-size: 44px; - - @media screen and (max-width: 1240px) { - font-size: 32px; - } -`; diff --git a/src/components/IntroductionApm/SectionWrapper.js b/src/components/IntroductionApm/SectionWrapper.js deleted file mode 100644 index 5a031a563de..00000000000 --- a/src/components/IntroductionApm/SectionWrapper.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import styled from '@emotion/styled'; - -export const SectionWrapper = ({ children, column }) => ( - {children} -); - -const Wrapper = styled.div` - display: flex; - flex-direction: ${(p) => (p.column ? `column` : `row`)}; -`; diff --git a/src/components/IntroductionApm/SmallStackedContent.js b/src/components/IntroductionApm/SmallStackedContent.js deleted file mode 100644 index 54b7199a2ad..00000000000 --- a/src/components/IntroductionApm/SmallStackedContent.js +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react'; -import styled from '@emotion/styled'; - -export const SmallStackedContent = ({ alt, img, subTitle, text }) => ( - - - {alt} - - {subTitle} - {text} - -); - -const Container = styled.div` - display: flex; - flex-direction: column; - justify-content: center; - margin: 32px; -`; - -const ImageWrapper = styled.div` - align-items: center; - display: flex; - justify-content: center; - margin: 32px 0; - - img { - object-fit: contain; - width: 100%; - } -`; - -const SubTitle = styled.h2` - font-size: 18px; - text-align: center; -`; - -const Text = styled.p` - font-size: 14px; - text-align: center; -`; diff --git a/src/components/IntroductionApm/StackedContent.js b/src/components/IntroductionApm/StackedContent.js deleted file mode 100644 index 0acf9f4dd30..00000000000 --- a/src/components/IntroductionApm/StackedContent.js +++ /dev/null @@ -1,69 +0,0 @@ -import React from 'react'; -import styled from '@emotion/styled'; -import { css } from '@emotion/react'; - -import { Icon } from '@newrelic/gatsby-theme-newrelic'; - -export const StackedContent = ({ alt, img, list, subTitle }) => ( - - {subTitle && {subTitle}} - - {alt} - - {list && ( - - {list.map((item, i) => ( - - - {item} - - ))} - - )} - -); - -const Container = styled.div` - display: flex; - flex-direction: column; - margin: 0 40px; - width: 80%; -`; - -const ListItem = styled.li` - width: 85%; -`; - -const ListItemWrapper = styled.div` - align-items: center; - display: flex; - margin-bottom: 16px; -`; - -const ListWrapper = styled.ul` - list-style-type: none; - padding: 0; -`; - -const ImageWrapper = styled.div` - align-items: center; - display: flex; - justify-content: center; - margin: 32px 0; - - img { - object-fit: contain; - width: 100%; - } -`; - -const SubTitle = styled.h2` - font-size: 28px; - text-align: center; -`; diff --git a/src/components/IntroductionApm/TitleBlock.js b/src/components/IntroductionApm/TitleBlock.js deleted file mode 100644 index 69f5dffff43..00000000000 --- a/src/components/IntroductionApm/TitleBlock.js +++ /dev/null @@ -1,133 +0,0 @@ -import React, { useState } from 'react'; -import styled from '@emotion/styled'; -import { css } from '@emotion/react'; -import { animated, useTrail } from 'react-spring'; -import VisibilitySensor from 'react-visibility-sensor'; -import { useMedia } from 'react-use'; - -import { Icon, useTessen } from '@newrelic/gatsby-theme-newrelic'; - -export const TitleBlock = ({ list, text, title }) => { - const isMobileScreen = useMedia('(max-width: 1240px)'); - const [visible, setVisible] = useState(isMobileScreen); - - const tessen = useTessen(); - - const updateVisibility = (isVisible) => { - if (isVisible) { - setVisible(true); - - !visible && - tessen.track({ - eventName: 'apmIntroVisiblityTrigger', - category: 'MoreThanJustAPM', - path: location.pathname, - }); - } - }; - - const spring = useTrail(5, { - from: { - opacity: 0, - y: '6%', - }, - to: { - opacity: visible ? 1 : 0, - y: visible ? '0%' : '6%', - }, - }); - - return ( - - - - - {title} - - - {text} - - - {list.map((item, i) => ( - - -
  • {item}
    • -     - ))} -     -     - -     -     - ); -}; - -const Container = styled.div` - display: flex; - justify-content: center; - padding: 48px 40px; - position: relative; - width: 100%; - - @media screen and (max-width: 1240px) { - margin: 32px 0; - padding: 0; - } -`; - -const GreenLine = styled.div` - background-color: var(--brand-button-primary-accent); - height: ${(p) => (p.visible ? '100%' : '0%')}; - left: 17px; - position: absolute; - top: 0; - transition: height 750ms; - width: 2px; - z-index: 0; - - @media screen and (max-width: 1240px) { - display: none; - } -`; - -const ListItem = styled.div` - align-items: center; - display: flex; - margin-right: 8px; -`; - -const ListWrapper = styled.ul` - display: flex; - justify-content: center; - list-style-type: none; - margin-top: 1rem; - padding: 0; - - @media screen and (max-width: 1240px) { - flex-direction: column; - } -`; - -const Text = styled.p` - font-size: 14px; - text-align: center; -`; - -const TextContainer = styled.div` - width: 80%; -`; - -const Title = styled.h1` - font-size: 44px; - text-align: center; - - @media screen and (max-width: 1240px) { - font-size: 28px; - } -`; diff --git a/src/components/IntroductionApm/index.js b/src/components/IntroductionApm/index.js deleted file mode 100644 index dad948235e5..00000000000 --- a/src/components/IntroductionApm/index.js +++ /dev/null @@ -1,5 +0,0 @@ -export { FeaturedContent } from './FeaturedContent'; -export { SectionWrapper } from './SectionWrapper'; -export { StackedContent } from './StackedContent'; -export { SmallStackedContent } from './SmallStackedContent'; -export { TitleBlock } from './TitleBlock'; diff --git a/src/i18n/translations/en/translation.json b/src/i18n/translations/en/translation.json index 17922a5502c..74557d0a1b1 100644 --- a/src/i18n/translations/en/translation.json +++ b/src/i18n/translations/en/translation.json @@ -91,75 +91,6 @@ "submitButton": "Submit comment", "submitMessage": "Thank you for your feedback!" }, - "apm": { - "intro": { - "title": "Improve your app performance with APM", - "text": [ - "Our application performance monitoring (APM) provides a unified monitoring service for all your apps and microservices.", - "Monitor everything from the hundreds of dependencies of a modern stack down to simple web-transaction times and throughput of an app. Keep track of your app's health in real-time by monitoring your metrics, events, logs, and transactions (MELT) through pre-built and custom dashboards." - ] - }, - "block1": { - "list": [ - "Observe the performance of your application by installing one of our agents - it takes just minutes!", - "Monitor the performance and health of all your services in one place", - "Pair New Relic with OpenTelemetry or other open source tools" - ], - "subTitle": "See the health of all your services in a glance" - }, - "block2": { - "list": [ - "Metrics, events, and traces", - "Instant log management", - "Vulnerability reporting" - ], - "title": "Monitor more than just your app's performance.", - "text": "Our agents automatically instrument and report:" - }, - "block3": [ - { - "list": [ - "Ingest all your logs automatically with our APM agents", - "See all your logs in one place.", - "Find problems faster, reduce context switching." - ], - "subTitle": "Log Management" - }, - { - "list": [ - "Ingest common vulnerabilities and exposures (CVEs) automatically with our APM agents", - "Manage the security of your services with zero config.", - "Overcome security blindspots and collaborate on remediation by assigning CVEs." - ], - "subTitle": "Vulnerability management" - } - ], - "block4": { - "list": [ - "Monitor latency, errors, traffic, saturation, and Apdex scores to identify bottlenecks and optimize performance for your users", - "Use prebuilt dashboards to identify and triage errors and other poor user experiences" - ], - "subTitle": "Ensure a great user experience" - }, - "block5": [ - { - "subTitle": "Proactive error management", - "text": "Is your early-access software still slightly unstable? Proactively monitor and solve those errors before they affect your users with errors inbox." - }, - { - "subTitle": "Measure user satisfaction", - "text": "Do your users always comment on how speedy your web app is and you want to quantify that feedback? Measure their satisfaction by monitoring your Apdex at a glance." - }, - { - "subTitle": "Automatic log ingest", - "text": "Need somewhere to store your logs? Our agents automatically ingest them." - }, - { - "subTitle": "Track dependancies", - "text": "Does your modern stack has dozens or even hundreds of dependencies to keep track of? Easily track them with automap and external services." - } - ] - }, "quickstartChooser": { "blurbLineOne": "Choose your app's language below to install an APM agent.", "blurbLineTwo": "It takes just a few minutes!", diff --git a/src/i18n/translations/jp/translation.json b/src/i18n/translations/jp/translation.json index d38cc05b81e..77f3a8ff085 100644 --- a/src/i18n/translations/jp/translation.json +++ b/src/i18n/translations/jp/translation.json @@ -97,73 +97,6 @@ "submitButton": "コメントを送信", "submitMessage": "フィードバックを頂きありがとうございました。" }, - "apm": { - "intro": { - "title": "完璧な可視性と分析を指先で簡単に", - "text": [ - "当社のAPM(Application Performance Monitoring)は、貴社の全てのアプリケーションとマイクロサービスについて統合されたモニタリングサービスを提供します。", - "最新のスタックの数百もの依存関係から、アプリのシンプルなウェブトランザクションタイムとスループットまで、すべての項目を監視します。事前に構築されたカスタムダッシュボードを通じて、メトリクス、イベント、ログ、トランザクション（MELT）を監視することで、アプリの健全性をリアルタイムで追跡します。" - ] - }, - "block1": { - "list": [ - "エージェントをインストールしてアプリケーションのパフォーマンスを観察してください。数分で完了します！", - "すべてのサービスのパフォーマンスと健全性を1か所でモニタリング", - "New RelicをOpenTelemetryまたはその他のオープンソースツールとペアリング" - ], - "subTitle": "すべてのサービスの健全性を一目で確認" - }, - "block2": { - "list": [ - "メトリクス、イベント、トレース", - "即時的なログ管理", - "脆弱性報告" - ], - "title": "単なるAPMではありません", - "text": "当社のエージェントは、自動的に以下のインストゥルメントとレポートを行います。" - }, - "block3": [ - { - "list": [ - "APMエージェントですべてのログを自動的にインジェスト", - "すべてのログを1か所で表示" - ], - "subTitle": "ログ管理" - }, - { - "list": [ - "当社のAPMエージェントを使用して、一般的な脆弱性とエクスポージャー（CVE）を自動的にインジェスト", - "ゼロ設定でサービスのセキュリティを管理" - ], - "subTitle": "脆弱性管理" - } - ], - "block4": { - "list": [ - "レイテンシ、エラー、トラフィック、飽和度、Apdexスコアをモニタリングしてボトルネックを特定し、ユーザーのパフォーマンスを最適化", - "事前に構築されたダッシュボードを使用して、エラーやその他の不十分なユーザーエクスペリエンスを特定してトリアージ" - ], - "subTitle": "優れたユーザーエクスペリエンスを保証" - }, - "block5": [ - { - "subTitle": "先回りしたエラーの管理", - "text": "早期アクセスソフトウェアはまだ完全には安定していませんか？エラー受信トレイでユーザーに影響を与える前に、エラーをプロアクティブに監視して解決します。" - }, - { - "subTitle": "ユーザー満足度の測定", - "text": "ウェブアプリの速度についてユーザーが常にコメントし、お客様はそのフィードバックを定量化していますか？Apdexを一目で監視して、満足度を測定します。" - }, - { - "subTitle": "自動ログ取込み", - "text": "ログを保存する場所が必要ですか？当社のエージェントは自動的にそれらを取り込みます。" - }, - { - "subTitle": "依存関係の追跡", - "text": "最新のスタックに追跡する数十、あるいは数百の依存関係がありますか？自動マップと外部サービスで簡単に追跡できます。" - } - ] - }, "quickstartChooser": { "blurbLineOne": "ロゴをクリックしてAPMを開始してください。", "blurbLineTwo": "数分で完了します！", diff --git a/src/i18n/translations/kr/translation.json b/src/i18n/translations/kr/translation.json index 44ca5d84b6a..2581bfdecc4 100644 --- a/src/i18n/translations/kr/translation.json +++ b/src/i18n/translations/kr/translation.json @@ -91,69 +91,6 @@ "submitButton": "의견 보내기", "submitMessage": "피드백을 주셔서 감사합니다!" }, - "apm": { - "intro": { - "title": "간단하게 완전한 가시성 및 분석 확보", - "text": [ - "애플리케이션 성능 모니터링의 약자인 APM은 모든 애플리케이션과 마이크로서비스에 대한 통합 모니터링 서비스를 제공합니다.", - "최신 스택의 수백여 개 종속성부터 간단한 웹 트랜잭션 시간과 앱 처리량에 이르기까지 모든 것을 모니터링할 수 있습니다. 사전 구축된 커스텀 대시보드를 통해 메트릭, 이벤트, 로그 및 트랜잭션을 모니터링하여 앱의 상태를 실시간으로 추적할 수 있습니다." - ] - }, - "block1": { - "list": [ - "에이전트를 설치하면 단 몇 분 내에 애플리케이션의 성능에 대한 가시성을 확보할 수 있습니다.", - "모든 서비스의 성능과 상태를 한 곳에서 모니터링", - "OpenTelemetry 또는 기타 오픈소스 툴과 뉴렐릭 결합" - ], - "subTitle": "모든 서비스의 상태를 한눈에 확인" - }, - "block2": { - "list": ["메트릭, 이벤트, 트레이스", "즉각적인 로그 관리", "취약점 보고"], - "title": "APM 그 이상", - "text": "뉴렐릭의 에이전트는 다음을 자동으로 계측하고 보고합니다." - }, - "block3": [ - { - "list": [ - "APM 에이전트로 모든 로그를 자동으로 인제스트", - "모든 로그를 한 곳에 확인" - ], - "subTitle": "로그 관리" - }, - { - "list": [ - "APM 에이전트를 사용해 일반적인 취약점 및 노출(CVE)을 자동으로 수집", - "구성이 필요하지 않은 서비스 보안 관리" - ], - "subTitle": "취약점 관리" - } - ], - "block4": { - "list": [ - "레이턴시, 오류, 트래픽, 포화도 및 Apdex 점수를 모니터링하여 병목 지점을 식별하고 사용자 성능 최적화", - "사전 구축된 대시보드를 사용해 오류와 기타 열악한 사용자 경험을 파악 및 분류" - ], - "subTitle": "탁월한 사용자 경험 보장" - }, - "block5": [ - { - "subTitle": "선제적 오류 관리", - "text": "조기 액세스 소프트웨어가 아직도 조금 불안정한가요? 에러스 인박스(errors inbox) 기능을 사용하면 사용자에게 영향을 미치기 전에 이러한 오류를 선제적으로 모니터링하고 해결할 수 있습니다." - }, - { - "subTitle": "사용자 만족도 측정", - "text": "사용자들이 항상 웹 앱의 속도에 대해 언급하고 있고, 그러한 피드백을 정량화하고 싶으신가요? Apdex를 한눈에 모니터링하여 만족도를 측정하십시오." - }, - { - "subTitle": "자동 로그 인제스트", - "text": "로그를 저장할 공간이 필요하신가요? 뉴렐릭 에이전트가 자동으로 인제스트해줍니다." - }, - { - "subTitle": "종속성 추적", - "text": "최신 스택에 추적해야 할 종속성이 수십 개 또는 수백 개에 달하나요? automap과 외부 서비스로 쉽게 추적할 수 있습니다." - } - ] - }, "quickstartChooser": { "blurbLineOne": "APM을 시작하려면 로고를 클릭하세요.", "blurbLineTwo": "몇 분이면 가능합니다.", diff --git a/src/nav/apm.yml b/src/nav/apm.yml index 58f0cfc30ac..086452eaedd 100644 --- a/src/nav/apm.yml +++ b/src/nav/apm.yml @@ -2,20 +2,20 @@ title: Application performance monitoring path: /docs/apm pages: - title: Get started with APM - path: /introduction-apm + path: /docs/apm/new-relic-apm/getting-started/introduction-apm - title: My app is slow label: Tutorial path: /docs/tutorial-app-slow/root-causes - title: Guides pages: - - title: Troubleshoot with the summary page - path: /docs/apm/agents/manage-apm-agents/agent-data/triage-run-diagnostics - - title: APM best practice guide - path: /docs/new-relic-solutions/best-practices-guides/full-stack-observability/apm-best-practices-guide - - title: 'Measure user satisfaction with Apdex' - path: /docs/apm/new-relic-apm/apdex/apdex-measure-user-satisfaction - - title: APM data security - path: /docs/apm/new-relic-apm/getting-started/apm-agent-data-security + - title: Troubleshoot with the summary page + path: /docs/apm/agents/manage-apm-agents/agent-data/triage-run-diagnostics + - title: APM best practice guide + path: /docs/new-relic-solutions/best-practices-guides/full-stack-observability/apm-best-practices-guide + - title: 'Measure user satisfaction with Apdex' + path: /docs/apm/new-relic-apm/apdex/apdex-measure-user-satisfaction + - title: APM data security + path: /docs/apm/new-relic-apm/getting-started/apm-agent-data-security - title: Installation and configuration pages: - title: Go monitoring @@ -849,7 +849,7 @@ pages: - title: Browser and Django templates path: /docs/apm/agents/python-agent/supported-features/optional-manual-browser-instrumentation-django-templates - title: Browser monitoring - path: /docs/apm/agents/python-agent/supported-features/browser-monitoring-python-agent + path: /docs/apm/agents/python-agent/supported-features/browser-monitoring-python-agent - title: Certificate Bundle path: /docs/apm/agents/python-agent/supported-features/certificate-bundle - title: Code-level metrics @@ -867,7 +867,7 @@ pages: - title: Python message queues path: /docs/apm/agents/python-agent/supported-features/python-message-queues - title: Python runtime metrics - path: /docs/apm/agents/python-agent/supported-features/python-runtime-metrics + path: /docs/apm/agents/python-agent/supported-features/python-runtime-metrics - title: Python tips and tricks path: /docs/apm/agents/python-agent/supported-features/python-tips-tricks - title: Backend services @@ -1385,7 +1385,7 @@ pages: path: /docs/apm/applications-menu/events/view-alert-history - title: Thread profiler tool path: /docs/apm/apm-ui-pages/events/thread-profiler-tool - - title: Errors + - title: Errors path: /docs/errors-inbox/apm-tab - title: Legacy errors path: /docs/apm/apm-ui-pages/error-analytics/errors-page-find-fix-verify-problems diff --git a/src/pages/introduction-apm.js b/src/pages/introduction-apm.js deleted file mode 100644 index 90405c05c27..00000000000 --- a/src/pages/introduction-apm.js +++ /dev/null @@ -1,228 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import { - Side, - SideBySide, - useTessen, - useTranslation, -} from '@newrelic/gatsby-theme-newrelic'; -import { animated, useTrail } from 'react-spring'; -import VisibilitySensor from 'react-visibility-sensor'; -import { useMedia } from 'react-use'; -import styled from '@emotion/styled'; - -import { - FeaturedContent, - SmallStackedContent, - StackedContent, - TitleBlock, -} from '../components/IntroductionApm'; -import QuickstartChooser from '../components/QuickstartChooser'; -import ErrorBoundary from '../components/ErrorBoundary'; - -import introImage from 'images/new-apm-images/intro.webp'; -import entitiesImage from 'images/new-apm-images/entities.webp'; -import logManagement from 'images/new-apm-images/log-management.webp'; -import vulnerabilityManagement from 'images/new-apm-images/vulnerability-management.webp'; -import apdex from 'images/new-apm-images/apdex.webp'; -import errorManagement from 'images/new-apm-images/error-management.webp'; -import userSatisfaction from 'images/new-apm-images/user-satisfaction.webp'; -import autoLogInjest from 'images/new-apm-images/auto-log-injest.webp'; -import trackDeps from 'images/new-apm-images/track-deps.webp'; - -const IntroductionApm = () => { - const { t } = useTranslation(); - const isMobileScreen = useMedia('(max-width: 1240px)'); - const [twoColumnVisible, setTwoColumnVisible] = useState(isMobileScreen); - const [fourColumnVisible, setFourColumnVisible] = useState(isMobileScreen); - - const tessen = useTessen(); - - const twoColumn = useTrail(2, { - config: { mass: 1, tension: 500, friction: 100 }, - delay: 500, - from: { - opacity: 0, - y: '6%', - }, - to: { - opacity: twoColumnVisible ? 1 : 0, - y: twoColumnVisible ? '0%' : '6%', - }, - }); - - const handleTwoColumn = (isVisible) => { - if (isVisible) { - setTwoColumnVisible(true); - - !twoColumnVisible && - tessen.track({ - eventName: 'apmIntroVisiblityTrigger', - category: 'TwoColumnSection', - path: location.pathname, - }); - } - }; - - const fourColumn = useTrail(4, { - config: { mass: 1, tension: 500, friction: 100 }, - from: { - opacity: 0, - y: '6%', - }, - to: { - opacity: fourColumnVisible ? 1 : 0, - y: fourColumnVisible ? '0%' : '6%', - }, - }); - - const handleFourColumn = (isVisible) => { - if (isVisible) { - setFourColumnVisible(true); - - !fourColumnVisible && - tessen.track({ - eventName: 'apmIntroVisiblityTrigger', - category: 'FourColumnSection', - path: location.pathname, - }); - } - }; - - useEffect(() => { - const gatsbyFocusWrapper = document.querySelectorAll( - '#gatsby-focus-wrapper' - ); - - if (gatsbyFocusWrapper.length > 1) { - gatsbyFocusWrapper[1].remove(); - } - }, []); - - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -export default IntroductionApm; - -const SectionWrapper = styled.div` - display: flex; - flex-direction: column; -`;