/* * Copyright 2020 The Backstage Authors * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ import Typography from '@material-ui/core/Typography'; import useAsync from 'react-use/esm/useAsync'; import { useCostInsightsStyles } from '../../utils/styles'; import { Group } from '@backstage-community/plugin-cost-insights-common'; import { identityApiRef, useApi } from '@backstage/core-plugin-api'; function useDisplayName(): string { const identityApi = useApi(identityApiRef); const state = useAsync(() => identityApi.getProfileInfo(), [identityApi]); return state.loading ? '' : state.value?.displayName || 'Mysterious Stranger'; } type CostInsightsHeaderProps = { groupId: string; groups: Group[]; hasCostData: boolean; alerts: number; }; const CostInsightsHeaderNoData = ({ groupId, groups, }: CostInsightsHeaderProps) => { const displayName = useDisplayName(); const classes = useCostInsightsStyles(); const hasMultipleGroups = groups.length > 1; const ownerName = groups.find(({ id }) => id === groupId)?.name ?? groupId; return ( <> 😳 {' '} Well this is awkward Hey, {displayName}! {ownerName} doesn't seem to have any cloud costs. {hasMultipleGroups && ( Maybe we picked the wrong team, choose another from the menu above? )} ); }; const CostInsightsHeaderAlerts = ({ groupId, groups, alerts, }: CostInsightsHeaderProps) => { const displayName = useDisplayName(); const classes = useCostInsightsStyles(); const ownerName = groups.find(({ id }) => id === groupId)?.name ?? groupId; return ( <> 🔎 {' '} You have {alerts} thing{alerts > 1 && 's'} to look into Hey, {displayName}! We've identified{' '} {alerts > 1 ? 'a few things ' : 'one thing '} {ownerName} should look into next. ); }; const CostInsightsHeaderNoAlerts = ({ groupId, groups, }: CostInsightsHeaderProps) => { const displayName = useDisplayName(); const classes = useCostInsightsStyles(); const ownerName = groups.find(({ id }) => id === groupId)?.name ?? groupId; return ( <> 👍 {' '} Your team is doing great Hey, {displayName}! {ownerName} is doing well. No major changes this month. ); }; export const CostInsightsHeaderNoGroups = () => { const displayName = useDisplayName(); const classes = useCostInsightsStyles(); return ( <> 😳 {' '} Well this is awkward Hey, {displayName}! It doesn't look like you belong to any teams. ); }; export const CostInsightsHeader = (props: CostInsightsHeaderProps) => { if (!props.hasCostData) { return ; } if (props.alerts) { return ; } return ; };