Updated ENV_PLATFORM flag (open-telemetry#818)

juliangiuca · Apr 12, 2023 · bc95145 · bc95145
1 parent cf1500b
commit bc95145
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 46 deletions.
diff --git 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
 

diff --git 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
@@ -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 = () => {
       <p>
         @ {currentYear} OpenTelemetry (<a href="https://github.com/open-telemetry/opentelemetry-demo">Source Code</a>)
       </p>
+      <PlatformFlag />
     </S.Footer>
   );
 };

diff --git 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;
@@ -22,7 +21,6 @@ interface IProps {
 const Layout = ({ children }: IProps) => {
   return (
     <>
-      <PlatformFlag />
       <Header />
       <main>{children}</main>
     </>

diff --git a/src/frontend/components/PlatformFlag/PlatformFlag.styled.ts b/src/frontend/components/PlatformFlag/PlatformFlag.styled.ts
@@ -12,58 +12,23 @@
 // 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;
+  bottom: 0;
+  right: 0;
   width: 100px;
   height: 27px;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: ${({ theme }) => theme.sizes.mSmall};
   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};

diff --git 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 (
-    <S.PlatformFlag $platform={platform}>
-      <S.Block $platform={platform}>local</S.Block>
-    </S.PlatformFlag>
+    <S.Block>{platform}</S.Block>
   );
 };