From 6cdcc1053a1d7ab2c7e9256e3c7a41c92f1df45d Mon Sep 17 00:00:00 2001 From: Martin Kuba Date: Wed, 29 Mar 2023 16:08:30 -0700 Subject: [PATCH 1/4] moved flag to footer, removed enum and corresponding conditional styling --- .../components/Footer/Footer.styled.ts | 1 + src/frontend/components/Footer/Footer.tsx | 2 + src/frontend/components/Layout/Layout.tsx | 1 - .../PlatformFlag/PlatformFlag.styled.ts | 52 +++---------------- .../components/PlatformFlag/PlatformFlag.tsx | 6 +-- 5 files changed, 13 insertions(+), 49 deletions(-) diff --git a/src/frontend/components/Footer/Footer.styled.ts b/src/frontend/components/Footer/Footer.styled.ts index 0e8e482422..8a612eefdc 100644 --- a/src/frontend/components/Footer/Footer.styled.ts +++ b/src/frontend/components/Footer/Footer.styled.ts @@ -15,6 +15,7 @@ import styled from 'styled-components'; export const Footer = styled.footer` + position: relative; padding: 65px 9%; background-color: ${({ theme }) => theme.colors.otelGray}; diff --git a/src/frontend/components/Footer/Footer.tsx b/src/frontend/components/Footer/Footer.tsx index cdc6b97ae7..92786d7c7c 100644 --- a/src/frontend/components/Footer/Footer.tsx +++ b/src/frontend/components/Footer/Footer.tsx @@ -16,6 +16,7 @@ import { useEffect, useState } from 'react'; import * as S from './Footer.styled'; import SessionGateway from '../../gateways/Session.gateway'; import { CypressFields } from '../../utils/Cypress'; +import PlatformFlag from '../PlatformFlag'; const currentYear = new Date().getFullYear(); @@ -39,6 +40,7 @@ const Footer = () => {

@ {currentYear} OpenTelemetry (Source Code)

+ ); }; diff --git a/src/frontend/components/Layout/Layout.tsx b/src/frontend/components/Layout/Layout.tsx index 08d99936a1..00e83d5ac9 100644 --- a/src/frontend/components/Layout/Layout.tsx +++ b/src/frontend/components/Layout/Layout.tsx @@ -22,7 +22,6 @@ interface IProps { const Layout = ({ children }: IProps) => { return ( <> -
{children}
diff --git a/src/frontend/components/PlatformFlag/PlatformFlag.styled.ts b/src/frontend/components/PlatformFlag/PlatformFlag.styled.ts index 67064ca9a3..c3399ffe65 100644 --- a/src/frontend/components/PlatformFlag/PlatformFlag.styled.ts +++ b/src/frontend/components/PlatformFlag/PlatformFlag.styled.ts @@ -12,45 +12,11 @@ // See the License for the specific language governing permissions and // limitations under the License. -import styled, { DefaultTheme } from 'styled-components'; +import styled from 'styled-components'; -export enum Platform { - AWS = 'aws-platform', - ON_PREM = 'onprem-platform', - GCP = 'gcp-platform', - AZURE = 'azure-platform', - ALIBABA = 'alibaba-platform', - LOCAL = 'local', -} - -const getPlatformMap = (platform: Platform, theme: DefaultTheme) => { - const map = { - [Platform.AWS]: '#ff9900', - [Platform.ON_PREM]: '#34A853', - [Platform.GCP]: '#4285f4', - [Platform.AZURE]: '#f35426', - [Platform.ALIBABA]: '#ffC300', - [Platform.LOCAL]: theme.colors.otelYellow, - }; - - return map[platform] || map[Platform.LOCAL]; -}; - -export const PlatformFlag = styled.div<{ $platform: Platform }>` - position: fixed; - top: 0; - left: 0; - width: 2px; - height: 100vh; - z-index: 999; - - background: ${({ $platform, theme }) => getPlatformMap($platform, theme)}; -`; - -export const Block = styled.span<{ $platform: Platform }>` +export const Block = styled.div` position: absolute; - top: 80px; - left: 0; + right: 0; width: 100px; height: 27px; display: flex; @@ -60,12 +26,10 @@ export const Block = styled.span<{ $platform: Platform }>` font-weight: ${({ theme }) => theme.fonts.regular}; color: ${({ theme }) => theme.colors.white}; - background: ${({ $platform, theme }) => getPlatformMap($platform, theme)}; + background: ${({ theme }) => theme.colors.otelYellow}; - ${({ theme }) => theme.breakpoints.desktop} { - top: 100px; - width: 190px; - height: 50px; - font-size: ${({ theme }) => theme.sizes.dSmall}; - } + bottom: 0; + width: 190px; + height: 50px; + font-size: ${({ theme }) => theme.sizes.dSmall}; `; diff --git a/src/frontend/components/PlatformFlag/PlatformFlag.tsx b/src/frontend/components/PlatformFlag/PlatformFlag.tsx index 17d81cc628..19688860df 100644 --- a/src/frontend/components/PlatformFlag/PlatformFlag.tsx +++ b/src/frontend/components/PlatformFlag/PlatformFlag.tsx @@ -16,13 +16,11 @@ import * as S from './PlatformFlag.styled'; const { NEXT_PUBLIC_PLATFORM = 'local' } = typeof window !== 'undefined' ? window.ENV : {}; -const platform = NEXT_PUBLIC_PLATFORM as S.Platform; +const platform = NEXT_PUBLIC_PLATFORM; const PlatformFlag = () => { return ( - - local - + {platform} ); }; From 078f2803dc7f04414d0e174792c1838aaf66b6ff Mon Sep 17 00:00:00 2001 From: Martin Kuba Date: Thu, 30 Mar 2023 13:45:56 -0700 Subject: [PATCH 2/4] maintain flag resizing based on viewport width --- .../components/PlatformFlag/PlatformFlag.styled.ts | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/frontend/components/PlatformFlag/PlatformFlag.styled.ts b/src/frontend/components/PlatformFlag/PlatformFlag.styled.ts index c3399ffe65..072ebc7aa0 100644 --- a/src/frontend/components/PlatformFlag/PlatformFlag.styled.ts +++ b/src/frontend/components/PlatformFlag/PlatformFlag.styled.ts @@ -16,6 +16,7 @@ import styled from 'styled-components'; export const Block = styled.div` position: absolute; + bottom: 0; right: 0; width: 100px; height: 27px; @@ -24,12 +25,12 @@ export const Block = styled.div` align-items: center; font-size: ${({ theme }) => theme.sizes.mSmall}; font-weight: ${({ theme }) => theme.fonts.regular}; - color: ${({ theme }) => theme.colors.white}; background: ${({ theme }) => theme.colors.otelYellow}; - bottom: 0; - width: 190px; - height: 50px; - font-size: ${({ theme }) => theme.sizes.dSmall}; + ${({ theme }) => theme.breakpoints.desktop} { + width: 190px; + height: 50px; + font-size: ${({ theme }) => theme.sizes.dSmall}; + } `; From 03ae709998aff06e04db08108ebbfa9b49d81420 Mon Sep 17 00:00:00 2001 From: Juliano Costa Date: Fri, 31 Mar 2023 07:38:01 +0200 Subject: [PATCH 3/4] Remove old PlatformFlag import --- src/frontend/components/Layout/Layout.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/frontend/components/Layout/Layout.tsx b/src/frontend/components/Layout/Layout.tsx index 00e83d5ac9..4099ff75f4 100644 --- a/src/frontend/components/Layout/Layout.tsx +++ b/src/frontend/components/Layout/Layout.tsx @@ -13,7 +13,6 @@ // limitations under the License. import Header from '../Header'; -import PlatformFlag from '../PlatformFlag'; interface IProps { children: React.ReactNode; From 57f0ff9cec217cef1388db458a22df6d7e0b4e62 Mon Sep 17 00:00:00 2001 From: Martin Kuba Date: Fri, 31 Mar 2023 10:20:55 -0700 Subject: [PATCH 4/4] updated changelog --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index cdfc137440..3bd8762369 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -33,6 +33,8 @@ release. ([#798](https://github.com/open-telemetry/opentelemetry-demo/pull/798)) * Updated frontend web tracer to us batch processor ([#819](https://github.com/open-telemetry/opentelemetry-demo/pull/819)) +* Moved env platform flag to the footer, changed it to free text + ([#818](https://github.com/open-telemetry/opentelemetry-demo/pull/818)) ## v0.1.0