Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
aos
GitHub Repository: aos/grafana-agent
 Path: blob/main/web/ui/src/pages/ComponentDetailPage.tsx
5370 views
1
import { FC, useEffect, useState } from 'react';

2
import { useParams } from 'react-router-dom';

3


4
import { ComponentView } from '../features/component/ComponentView';

5
import { ComponentDetail, componentInfoByID } from '../features/component/types';

6
import { useComponentInfo } from '../hooks/componentInfo';

7


8
const ComponentDetailPage: FC = () => {

9
  const { '*': id } = useParams();

10


11
  const components = useComponentInfo(id);

12
  const infoByID = componentInfoByID(components);

13


14
  const [component, setComponent] = useState<ComponentDetail | undefined>(undefined);

15


16
  useEffect(

17
    function () {

18
      if (id === undefined) {

19
        return;

20
      }

21


22
      const fragments = id.split('/');

23


24
      const infoRoot =

25
        fragments.length === 1

26
          ? './api/v0/web/components/'

27
          : `./api/v0/component/${fragments.slice(0, fragments.length - 1).join('/')}/components/`;

28


29
      const worker = async () => {

30
        // Request is relative to the <base> tag inside of <head>.

31
        const resp = await fetch(infoRoot + fragments[fragments.length - 1], {

32
          cache: 'no-cache',

33
          credentials: 'same-origin',

34
        });

35
        const data: ComponentDetail = await resp.json();

36


37
        // Set parent.

38
        if (fragments.length > 1) {

39
          data.parent = fragments.slice(0, fragments.length - 1).join('/');

40
        }

41


42
        // Get data from the component module API.

43
        if (data.id.startsWith('module.')) {

44
          const resp = await fetch(`./api/v0/component/${id}/components`);

45
          data.moduleInfo = await resp.json();

46
        }

47


48
        setComponent(data);

49
      };

50


51
      worker().catch(console.error);

52
    },

53
    [id]

54
  );

55


56
  return component ? <ComponentView component={component} info={infoByID} /> : <div></div>;

57
};

58


59
export default ComponentDetailPage;

60


61