detail.tsx 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. /* eslint-disable no-alert */
  2. import {Fragment} from 'react';
  3. import styled from '@emotion/styled';
  4. import {Button, LinkButton} from 'sentry/components/button';
  5. import {Flex} from 'sentry/components/container/flex';
  6. import {DateTime} from 'sentry/components/dateTime';
  7. import {KeyValueTable, KeyValueTableRow} from 'sentry/components/keyValueTable';
  8. import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
  9. import TimeSince from 'sentry/components/timeSince';
  10. import {ActionsProvider} from 'sentry/components/workflowEngine/layout/actions';
  11. import {BreadcrumbsProvider} from 'sentry/components/workflowEngine/layout/breadcrumbs';
  12. import DetailLayout from 'sentry/components/workflowEngine/layout/detail';
  13. import Section from 'sentry/components/workflowEngine/ui/section';
  14. import {useWorkflowEngineFeatureGate} from 'sentry/components/workflowEngine/useWorkflowEngineFeatureGate';
  15. import {IconEdit} from 'sentry/icons';
  16. import {t} from 'sentry/locale';
  17. import {space} from 'sentry/styles/space';
  18. import AutomationHistoryList from 'sentry/views/automations/components/automationHistoryList';
  19. import ConditionsPanel from 'sentry/views/automations/components/conditionsPanel';
  20. import ConnectedMonitorsList from 'sentry/views/automations/components/connectedMonitorsList';
  21. function HistoryAndConnectedMonitors() {
  22. return (
  23. <div>
  24. <Section title={t('History')}>
  25. <AutomationHistoryList history={[]} />
  26. </Section>
  27. <Section title={t('Connected Monitors')}>
  28. <ConnectedMonitorsList monitors={[]} />
  29. </Section>
  30. </div>
  31. );
  32. }
  33. function Details() {
  34. return (
  35. <div>
  36. <Flex column gap={space(1)}>
  37. <SectionHeading>{t('Last Triggered')}</SectionHeading>
  38. <span>
  39. <TimeSince date={new Date()} />
  40. </span>
  41. </Flex>
  42. <Flex column gap={space(1)}>
  43. <SectionHeading>{t('Conditions')}</SectionHeading>
  44. <ConditionsPanel
  45. when_conditions={[
  46. t('An issue escalates'),
  47. t('A new event is captured for an issue'),
  48. ]}
  49. if_conditions={[
  50. t('Issue is assigned to no one'),
  51. t('Current issue priority is high'),
  52. ]}
  53. actions={[
  54. t(
  55. 'Notify Suggested Assignees and if none can be found then notify Recently Active Members'
  56. ),
  57. ]}
  58. />
  59. </Flex>
  60. <Flex column gap={space(1)}>
  61. <SectionHeading>{t('Details')}</SectionHeading>
  62. <KeyValueTable>
  63. <KeyValueTableRow
  64. keyName={t('Date created')}
  65. value={<DateTime date={new Date()} dateOnly year />}
  66. />
  67. <KeyValueTableRow keyName={t('Created by')} value="Jane Doe" />
  68. <KeyValueTableRow
  69. keyName={t('Last modified')}
  70. value={<TimeSince date={new Date()} />}
  71. />
  72. <KeyValueTableRow keyName={t('Team')} value="Platform" />
  73. </KeyValueTable>
  74. </Flex>
  75. </div>
  76. );
  77. }
  78. export default function AutomationDetail() {
  79. useWorkflowEngineFeatureGate({redirect: true});
  80. return (
  81. <SentryDocumentTitle title={t('Automation')} noSuffix>
  82. <BreadcrumbsProvider crumb={{label: t('Automations'), to: '/automations'}}>
  83. <ActionsProvider actions={<Actions />}>
  84. <DetailLayout>
  85. <DetailLayout.Main>
  86. <HistoryAndConnectedMonitors />
  87. </DetailLayout.Main>
  88. <DetailLayout.Sidebar>
  89. <Details />
  90. </DetailLayout.Sidebar>
  91. </DetailLayout>
  92. </ActionsProvider>
  93. </BreadcrumbsProvider>
  94. </SentryDocumentTitle>
  95. );
  96. }
  97. function Actions() {
  98. const disable = () => {
  99. window.alert('disable');
  100. };
  101. return (
  102. <Fragment>
  103. <Button onClick={disable} size="sm">
  104. {t('Disable')}
  105. </Button>
  106. <LinkButton to="/monitors/edit" priority="primary" icon={<IconEdit />} size="sm">
  107. {t('Edit')}
  108. </LinkButton>
  109. </Fragment>
  110. );
  111. }
  112. export const SectionHeading = styled('h4')`
  113. font-size: ${p => p.theme.fontSizeMedium};
  114. margin: 0;
  115. `;