Prometheus.tsx 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. import React, { createContext, useContext, useEffect, useState } from 'react';
  2. import { useTranslation } from 'react-i18next';
  3. import { authContext, rootContext } from '@/context';
  4. import { PrometheusContextType } from './Types';
  5. import {
  6. LAST_TIME_WITH_PROMETHEUS,
  7. LAST_TIME_PROMETHEUS_ADDRESS,
  8. LAST_TIME_PROMETHEUS_INSTANCE,
  9. LAST_TIME_PROMETHEUS_NAMESPACE,
  10. PROMETHEUS_ADDRESS,
  11. PROMETHEUS_INSTANCE_NAME,
  12. PROMETHEUS_NAMESPACE,
  13. WITH_PROMETHEUS,
  14. } from '@/consts';
  15. import { formatPrometheusAddress } from '@/utils';
  16. import { PrometheusHttp } from '@/http/Prometheus';
  17. export const prometheusContext = createContext<PrometheusContextType>({
  18. withPrometheus: false,
  19. setWithPrometheus: () => {},
  20. isPrometheusReady: false,
  21. prometheusAddress: '',
  22. prometheusInstance: '',
  23. prometheusNamespace: '',
  24. setPrometheusAddress: () => {},
  25. setPrometheusInstance: () => {},
  26. setPrometheusNamespace: () => {},
  27. });
  28. const { Provider } = prometheusContext;
  29. export const PrometheusProvider = (props: { children: React.ReactNode }) => {
  30. const { isAuth } = useContext(authContext);
  31. const [withPrometheus, setWithPrometheus] = useState(
  32. !!(
  33. window.localStorage.getItem(LAST_TIME_WITH_PROMETHEUS) || WITH_PROMETHEUS
  34. )
  35. );
  36. const [prometheusAddress, setPrometheusAddress] = useState(
  37. window.localStorage.getItem(LAST_TIME_PROMETHEUS_ADDRESS) ||
  38. PROMETHEUS_ADDRESS
  39. );
  40. const [prometheusInstance, setPrometheusInstance] = useState(
  41. window.localStorage.getItem(LAST_TIME_PROMETHEUS_INSTANCE) ||
  42. PROMETHEUS_INSTANCE_NAME
  43. );
  44. const [prometheusNamespace, setPrometheusNamespace] = useState(
  45. window.localStorage.getItem(LAST_TIME_PROMETHEUS_NAMESPACE) ||
  46. PROMETHEUS_NAMESPACE
  47. );
  48. const [isPrometheusReady, setIsPrometheusReady] = useState(false);
  49. const { openSnackBar } = useContext(rootContext);
  50. const { t: prometheusTrans } = useTranslation('prometheus');
  51. useEffect(() => {
  52. if (!isAuth) return;
  53. if (withPrometheus) {
  54. const prometheusAddressformat =
  55. formatPrometheusAddress(prometheusAddress);
  56. PrometheusHttp.setPrometheus({
  57. prometheusAddress: prometheusAddressformat,
  58. prometheusInstance,
  59. prometheusNamespace,
  60. })
  61. .then(({ isReady }: { isReady: boolean }) => {
  62. if (isReady) {
  63. window.localStorage.setItem(LAST_TIME_WITH_PROMETHEUS, 'true');
  64. window.localStorage.setItem(
  65. LAST_TIME_PROMETHEUS_ADDRESS,
  66. prometheusAddress
  67. );
  68. window.localStorage.setItem(
  69. LAST_TIME_PROMETHEUS_INSTANCE,
  70. prometheusInstance
  71. );
  72. window.localStorage.setItem(
  73. LAST_TIME_PROMETHEUS_NAMESPACE,
  74. prometheusNamespace
  75. );
  76. } else {
  77. openSnackBar(prometheusTrans('invalid'), 'error');
  78. }
  79. setIsPrometheusReady(isReady);
  80. })
  81. .catch(err => {
  82. openSnackBar(prometheusTrans('invalid'), 'error');
  83. setIsPrometheusReady(false);
  84. });
  85. } else {
  86. setIsPrometheusReady(false);
  87. }
  88. }, [isAuth, setIsPrometheusReady]);
  89. return (
  90. <Provider
  91. value={{
  92. withPrometheus,
  93. setWithPrometheus,
  94. isPrometheusReady,
  95. prometheusAddress,
  96. prometheusInstance,
  97. prometheusNamespace,
  98. setPrometheusAddress,
  99. setPrometheusInstance,
  100. setPrometheusNamespace,
  101. }}
  102. >
  103. {props.children}
  104. </Provider>
  105. );
  106. };