Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Updated ENV_PLATFORM flag #818

Merged
merged 5 commits into from
Mar 31, 2023
Merged

Updated ENV_PLATFORM flag #818

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6cdcc10
moved flag to footer, removed enum and corresponding conditional styling
martinkuba Mar 29, 2023
078f280
maintain flag resizing based on viewport width
martinkuba Mar 30, 2023
03ae709
Remove old PlatformFlag import
Mar 31, 2023
900d733
Merge branch 'main' into env-platform-flag
cartersocha Mar 31, 2023
57f0ff9
updated changelog
martinkuba Mar 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ release.
([#798](https:/open-telemetry/opentelemetry-demo/pull/798))
* Updated frontend web tracer to us batch processor
([#819](https:/open-telemetry/opentelemetry-demo/pull/819))
* Moved env platform flag to the footer, changed it to free text
([#818](https:/open-telemetry/opentelemetry-demo/pull/818))

## v0.1.0

Expand Down
1 change: 1 addition & 0 deletions src/frontend/components/Footer/Footer.styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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};

Expand Down
2 changes: 2 additions & 0 deletions src/frontend/components/Footer/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand All @@ -39,6 +40,7 @@ const Footer = () => {
<p>
@ {currentYear} OpenTelemetry (<a href="https:/open-telemetry/opentelemetry-demo">Source Code</a>)
</p>
<PlatformFlag />
</S.Footer>
);
};
Expand Down
2 changes: 0 additions & 2 deletions src/frontend/components/Layout/Layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@
// limitations under the License.

import Header from '../Header';
import PlatformFlag from '../PlatformFlag';

interface IProps {
children: React.ReactNode;
Expand All @@ -22,7 +21,6 @@ interface IProps {
const Layout = ({ children }: IProps) => {
return (
<>
<PlatformFlag />
<Header />
<main>{children}</main>
</>
Expand Down
45 changes: 5 additions & 40 deletions src/frontend/components/PlatformFlag/PlatformFlag.styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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};
Expand Down
6 changes: 2 additions & 4 deletions src/frontend/components/PlatformFlag/PlatformFlag.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
};

Expand Down