landing.tsx 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. import {Fragment} from 'react';
  2. import Feature from 'sentry/components/acl/feature';
  3. import {Alert} from 'sentry/components/alert';
  4. import * as Layout from 'sentry/components/layouts/thirds';
  5. import NoProjectMessage from 'sentry/components/noProjectMessage';
  6. import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
  7. import {EnvironmentPageFilter} from 'sentry/components/organizations/environmentPageFilter';
  8. import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
  9. import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
  10. import {ProjectPageFilter} from 'sentry/components/organizations/projectPageFilter';
  11. import {PageHeadingQuestionTooltip} from 'sentry/components/pageHeadingQuestionTooltip';
  12. import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
  13. import {t} from 'sentry/locale';
  14. import useOrganization from 'sentry/utils/useOrganization';
  15. import {
  16. NumberOfPipelinesChart,
  17. PipelineDurationChart,
  18. TotalTokensUsedChart,
  19. } from 'sentry/views/aiMonitoring/aiMonitoringCharts';
  20. import {AIMonitoringOnboarding} from 'sentry/views/aiMonitoring/onboarding';
  21. import {PipelinesTable} from 'sentry/views/aiMonitoring/PipelinesTable';
  22. import {useOnboardingProject} from 'sentry/views/performance/browser/webVitals/utils/useOnboardingProject';
  23. import * as ModuleLayout from 'sentry/views/performance/moduleLayout';
  24. function NoAccessComponent() {
  25. return (
  26. <Layout.Page withPadding>
  27. <Alert type="warning">{t("You don't have access to this feature")}</Alert>
  28. </Layout.Page>
  29. );
  30. }
  31. export default function AiMonitoringPage() {
  32. const organization = useOrganization();
  33. const onboardingProject = useOnboardingProject();
  34. const isOnboarding = !!onboardingProject;
  35. return (
  36. <PageFiltersContainer>
  37. <SentryDocumentTitle title={`AI Monitoring — ${organization.slug}`}>
  38. <Layout.Page>
  39. <Feature
  40. features="ai-analytics"
  41. organization={organization}
  42. renderDisabled={NoAccessComponent}
  43. >
  44. <NoProjectMessage organization={organization}>
  45. <Layout.Header>
  46. <Layout.HeaderContent>
  47. <Layout.Title>
  48. {t('AI Monitoring')}
  49. <PageHeadingQuestionTooltip
  50. title={t('View analytics and information about your AI pipelines')}
  51. docsUrl="https://docs.sentry.io/product/ai-monitoring/"
  52. />
  53. </Layout.Title>
  54. </Layout.HeaderContent>
  55. </Layout.Header>
  56. <Layout.Body>
  57. <Layout.Main fullWidth>
  58. <ModuleLayout.Layout>
  59. <ModuleLayout.Full>
  60. <PageFilterBar condensed>
  61. <ProjectPageFilter />
  62. <EnvironmentPageFilter />
  63. <DatePageFilter />
  64. </PageFilterBar>
  65. </ModuleLayout.Full>
  66. {isOnboarding ? (
  67. <ModuleLayout.Full>
  68. <AIMonitoringOnboarding />
  69. </ModuleLayout.Full>
  70. ) : (
  71. <Fragment>
  72. <ModuleLayout.Third>
  73. <TotalTokensUsedChart />
  74. </ModuleLayout.Third>
  75. <ModuleLayout.Third>
  76. <NumberOfPipelinesChart />
  77. </ModuleLayout.Third>
  78. <ModuleLayout.Third>
  79. <PipelineDurationChart />
  80. </ModuleLayout.Third>
  81. <ModuleLayout.Full>
  82. <PipelinesTable />
  83. </ModuleLayout.Full>
  84. </Fragment>
  85. )}
  86. </ModuleLayout.Layout>
  87. </Layout.Main>
  88. </Layout.Body>
  89. </NoProjectMessage>
  90. </Feature>
  91. </Layout.Page>
  92. </SentryDocumentTitle>
  93. </PageFiltersContainer>
  94. );
  95. }