import {Fragment, useEffect} from 'react';
import {RouteComponentProps} from 'react-router';
import styled from '@emotion/styled';
import * as Layout from 'sentry/components/layouts/thirds';
import LoadingIndicator from 'sentry/components/loadingIndicator';
import NoProjectMessage from 'sentry/components/noProjectMessage';
import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
import {t} from 'sentry/locale';
import {TeamWithProjects} from 'sentry/types';
import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
import localStorage from 'sentry/utils/localStorage';
import useOrganization from 'sentry/utils/useOrganization';
import useTeams from 'sentry/utils/useTeams';
import Header from '../header';
import TeamStatsControls from './controls';
import DescriptionCard from './descriptionCard';
import TeamAlertsTriggered from './teamAlertsTriggered';
import TeamMisery from './teamMisery';
import TeamReleases from './teamReleases';
import TeamStability from './teamStability';
import {dataDatetime} from './utils';
type Props = RouteComponentProps<{orgId: string}, {}>;
function TeamStatsHealth({location, router}: Props) {
const organization = useOrganization();
const {teams, initiallyLoaded} = useTeams({provideUserTeams: true});
const query = location?.query ?? {};
const localStorageKey = `teamInsightsSelectedTeamId:${organization.slug}`;
let localTeamId: string | null | undefined =
query.team ?? localStorage.getItem(localStorageKey);
if (localTeamId && !teams.find(team => team.id === localTeamId)) {
localTeamId = null;
}
const currentTeamId = localTeamId ?? teams[0]?.id;
const currentTeam = teams.find(team => team.id === currentTeamId) as
| TeamWithProjects
| undefined;
const projects = currentTeam?.projects ?? [];
useEffect(() => {
trackAdvancedAnalyticsEvent('team_insights.viewed', {
organization,
});
}, [organization]);
const {period, start, end, utc} = dataDatetime(query);
if (teams.length === 0) {
return (
);
}
return (
{!initiallyLoaded && }
{initiallyLoaded && (
)}
);
}
export default TeamStatsHealth;
const Body = styled(Layout.Body)`
@media (min-width: ${p => p.theme.breakpoints.medium}) {
display: block;
}
`;