1import React, { useEffect, useState } from 'react';
2import { getBackendSrv } from '@grafana/runtime';
3import { useStyles } from '@grafana/ui';
4import Page from 'app/core/components/Page/Page';
5import { useNavModel } from 'app/core/hooks/useNavModel';
6import { css } from '@emotion/css';
7import { GrafanaTheme } from '@grafana/data';
8import { GrafanaCloudBackend } from './types';
9
10export default function CloudAdminPage() {
11  const navModel = useNavModel('live-cloud');
12  const [cloud, setCloud] = useState<GrafanaCloudBackend[]>([]);
13  const [error, setError] = useState<string>();
14  const styles = useStyles(getStyles);
15
16  useEffect(() => {
17    getBackendSrv()
18      .get(`api/live/write-configs`)
19      .then((data) => {
20        setCloud(data.writeConfigs);
21      })
22      .catch((e) => {
23        if (e.data) {
24          setError(JSON.stringify(e.data, null, 2));
25        }
26      });
27  }, []);
28
29  return (
30    <Page navModel={navModel}>
31      <Page.Contents>
32        {error && <pre>{error}</pre>}
33        {!cloud && <>Loading cloud definitions</>}
34        {cloud &&
35          cloud.map((v) => {
36            return (
37              <div key={v.uid}>
38                <h2>{v.uid}</h2>
39                <pre className={styles.row}>{JSON.stringify(v.settings, null, 2)}</pre>
40              </div>
41            );
42          })}
43      </Page.Contents>
44    </Page>
45  );
46}
47
48const getStyles = (theme: GrafanaTheme) => {
49  return {
50    row: css`
51      cursor: pointer;
52    `,
53  };
54};
55