123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899 |
- import {Fragment} from 'react';
- import Feature from 'sentry/components/acl/feature';
- import {Alert} from 'sentry/components/alert';
- import * as Layout from 'sentry/components/layouts/thirds';
- import NoProjectMessage from 'sentry/components/noProjectMessage';
- import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
- import {EnvironmentPageFilter} from 'sentry/components/organizations/environmentPageFilter';
- import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
- import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
- import {ProjectPageFilter} from 'sentry/components/organizations/projectPageFilter';
- import {PageHeadingQuestionTooltip} from 'sentry/components/pageHeadingQuestionTooltip';
- import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
- import {t} from 'sentry/locale';
- import useOrganization from 'sentry/utils/useOrganization';
- import {
- NumberOfPipelinesChart,
- PipelineDurationChart,
- TotalTokensUsedChart,
- } from 'sentry/views/aiMonitoring/aiMonitoringCharts';
- import {AIMonitoringOnboarding} from 'sentry/views/aiMonitoring/onboarding';
- import {PipelinesTable} from 'sentry/views/aiMonitoring/PipelinesTable';
- import {useOnboardingProject} from 'sentry/views/performance/browser/webVitals/utils/useOnboardingProject';
- import * as ModuleLayout from 'sentry/views/performance/moduleLayout';
- function NoAccessComponent() {
- return (
- <Layout.Page withPadding>
- <Alert type="warning">{t("You don't have access to this feature")}</Alert>
- </Layout.Page>
- );
- }
- export default function AiMonitoringPage() {
- const organization = useOrganization();
- const onboardingProject = useOnboardingProject();
- const isOnboarding = !!onboardingProject;
- return (
- <PageFiltersContainer>
- <SentryDocumentTitle title={`AI Monitoring — ${organization.slug}`}>
- <Layout.Page>
- <Feature
- features="ai-analytics"
- organization={organization}
- renderDisabled={NoAccessComponent}
- >
- <NoProjectMessage organization={organization}>
- <Layout.Header>
- <Layout.HeaderContent>
- <Layout.Title>
- {t('AI Monitoring')}
- <PageHeadingQuestionTooltip
- title={t('View analytics and information about your AI pipelines')}
- docsUrl="https://docs.sentry.io/product/ai-monitoring/"
- />
- </Layout.Title>
- </Layout.HeaderContent>
- </Layout.Header>
- <Layout.Body>
- <Layout.Main fullWidth>
- <ModuleLayout.Layout>
- <ModuleLayout.Full>
- <PageFilterBar condensed>
- <ProjectPageFilter />
- <EnvironmentPageFilter />
- <DatePageFilter />
- </PageFilterBar>
- </ModuleLayout.Full>
- {isOnboarding ? (
- <ModuleLayout.Full>
- <AIMonitoringOnboarding />
- </ModuleLayout.Full>
- ) : (
- <Fragment>
- <ModuleLayout.Third>
- <TotalTokensUsedChart />
- </ModuleLayout.Third>
- <ModuleLayout.Third>
- <NumberOfPipelinesChart />
- </ModuleLayout.Third>
- <ModuleLayout.Third>
- <PipelineDurationChart />
- </ModuleLayout.Third>
- <ModuleLayout.Full>
- <PipelinesTable />
- </ModuleLayout.Full>
- </Fragment>
- )}
- </ModuleLayout.Layout>
- </Layout.Main>
- </Layout.Body>
- </NoProjectMessage>
- </Feature>
- </Layout.Page>
- </SentryDocumentTitle>
- </PageFiltersContainer>
- );
- }
|