prometheus

1
import React, { FC, ComponentType } from 'react';
2
import { Progress, Alert } from 'reactstrap';
3

4
import { useFetchReadyInterval } from '../hooks/useFetch';
5
import { WALReplayData } from '../types/types';
6
import { usePathPrefix } from '../contexts/PathPrefixContext';
7
import { useReady } from '../contexts/ReadyContext';
8

9
interface StartingContentProps {
10
  isUnexpected: boolean;
11
  status?: WALReplayData;
12
}
13

14
export const StartingContent: FC<StartingContentProps> = ({ status, isUnexpected }) => {
15
  if (isUnexpected) {
16
    return (
17
      <Alert color="danger">
18
        <strong>Error:</strong> Server is not responding
19
      </Alert>
20
    );
21
  }
22

23
  return (
24
    <div className="text-center m-3">
25
      <div className="m-4">
26
        <h2>Starting up...</h2>
27
        {status && status.max > 0 ? (
28
          <div>
29
            <p>
30
              Replaying WAL ({status.current}/{status.max})
31
            </p>
32
            <Progress
33
              animated
34
              value={status.current - status.min + 1}
35
              min={status.min}
36
              max={status.max - status.min + 1}
37
              color={status.max === status.current ? 'success' : undefined}
38
              style={{ width: '10%', margin: 'auto' }}
39
            />
40
          </div>
41
        ) : null}
42
      </div>
43
    </div>
44
  );
45
};
46

47
export const withStartingIndicator =
48
  <T extends Record<string, unknown>>(Page: ComponentType<T>): FC<T> =>
49
  ({ ...rest }) => {
50
    const pathPrefix = usePathPrefix();
51
    const { ready, walReplayStatus, isUnexpected } = useFetchReadyInterval(pathPrefix);
52
    const staticReady = useReady();
53

54
    if (staticReady || ready) {
55
      return <Page {...(rest as T)} />;
56
    }
57

58
    return <StartingContent isUnexpected={isUnexpected} status={walReplayStatus.data} />;
59
  };
60