breadcrumbs.tsx 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. import SvgIcon from 'app/icons/svgIcon';
  2. import {Color} from 'app/utils/theme';
  3. export type IconProps = React.ComponentProps<typeof SvgIcon>;
  4. export enum BreadcrumbLevelType {
  5. FATAL = 'fatal',
  6. ERROR = 'error',
  7. WARNING = 'warning',
  8. INFO = 'info',
  9. DEBUG = 'debug',
  10. UNDEFINED = 'undefined',
  11. }
  12. export enum BreadcrumbType {
  13. INFO = 'info',
  14. DEBUG = 'debug',
  15. MESSAGE = 'message',
  16. QUERY = 'query',
  17. UI = 'ui',
  18. USER = 'user',
  19. EXCEPTION = 'exception',
  20. WARNING = 'warning',
  21. ERROR = 'error',
  22. DEFAULT = 'default',
  23. HTTP = 'http',
  24. NAVIGATION = 'navigation',
  25. SYSTEM = 'system',
  26. SESSION = 'session',
  27. TRANSACTION = 'transaction',
  28. }
  29. type BreadcrumbTypeBase = {
  30. level: BreadcrumbLevelType;
  31. timestamp?: string; // it's recommended
  32. category?: string | null;
  33. message?: string;
  34. event_id?: string;
  35. };
  36. export type BreadcrumbTypeSystem = {
  37. type: BreadcrumbType.SYSTEM;
  38. action: string;
  39. extras: Record<string, any>;
  40. } & BreadcrumbTypeBase;
  41. export type BreadcrumbTypeSession = {
  42. type: BreadcrumbType.SESSION;
  43. action: string;
  44. extras: Record<string, any>;
  45. } & BreadcrumbTypeBase;
  46. export type BreadcrumbTypeNavigation = {
  47. type: BreadcrumbType.NAVIGATION;
  48. data?: {
  49. to?: string;
  50. from?: string;
  51. };
  52. } & BreadcrumbTypeBase;
  53. export type BreadcrumbTypeHTTP = {
  54. type: BreadcrumbType.HTTP;
  55. data?: {
  56. url?: string;
  57. method?:
  58. | 'POST'
  59. | 'PUT'
  60. | 'GET'
  61. | 'HEAD'
  62. | 'DELETE'
  63. | 'CONNECT'
  64. | 'OPTIONS'
  65. | 'TRACE'
  66. | 'PATCH';
  67. status_code?: number;
  68. reason?: string;
  69. };
  70. } & BreadcrumbTypeBase;
  71. export type BreadcrumbTypeDefault = {
  72. type:
  73. | BreadcrumbType.INFO
  74. | BreadcrumbType.DEBUG
  75. | BreadcrumbType.QUERY
  76. | BreadcrumbType.UI
  77. | BreadcrumbType.USER
  78. | BreadcrumbType.EXCEPTION
  79. | BreadcrumbType.WARNING
  80. | BreadcrumbType.ERROR
  81. | BreadcrumbType.DEFAULT
  82. | BreadcrumbType.SESSION
  83. | BreadcrumbType.SYSTEM
  84. | BreadcrumbType.SESSION
  85. | BreadcrumbType.TRANSACTION;
  86. data?: {[key: string]: any};
  87. } & BreadcrumbTypeBase;
  88. export type Breadcrumb =
  89. | BreadcrumbTypeNavigation
  90. | BreadcrumbTypeHTTP
  91. | BreadcrumbTypeDefault;
  92. type BreadcrumbDetails = {
  93. color?: Color | React.CSSProperties['color'];
  94. icon?: React.ComponentType<IconProps>;
  95. description: string;
  96. };
  97. export type BreadcrumbsWithDetails = Array<Breadcrumb & BreadcrumbDetails & {id: number}>;