All files / src/components/Integration/connectors/assets DatadogAssets.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import {
  Accordion,
  AccordionDetails,
  AccordionSummary,
  CircularProgress,
  List,
  ListItem,
  ListItemText,
  Typography,
} from "@mui/material";
import { KeyboardArrowDownRounded } from "@mui/icons-material";
 
export const DataDogAssets = ({ assets }) => {
  Iif (assets?.length === 0) {
    return <CircularProgress />;
  }
 
  const services = assets
    ?.filter((e) => e.datadog_service !== undefined)
    .map((e) => e.datadog_service);
  return (
    <div className="flex flex-col gap-2">
      {services && services.length > 0 && (
        <Accordion className="!rounded !shadow-none !border before:!content-none overflow-hidden aria-expanded:!m-0">
          <AccordionSummary
            expandIcon={<KeyboardArrowDownRounded />}
            className="!bg-gray-100 !shadow-none !border-none hover:!bg-gray-50 !transition-all">
            <Typography>
              <p style={{ fontSize: "16px" }}>Services ({services.length})</p>{" "}
            </Typography>
          </AccordionSummary>
 
          <AccordionDetails>
            {services.map((item, index) => (
              <Accordion
                className="!rounded !shadow-none !border before:!content-none overflow-hidden aria-expanded:!m-0"
                key={index}>
                <AccordionSummary
                  expandIcon={<KeyboardArrowDownRounded />}
                  className="!bg-gray-100 !shadow-none !border-none hover:!bg-gray-50 !transition-all">
                  <Typography>
                    <p style={{ fontSize: "16px" }}>{item.service_name}</p>
                  </Typography>
                </AccordionSummary>
                <AccordionDetails>
                  <Typography>Metric Families</Typography>
                  {Object.entries(
                    item.metrics.reduce((acc, curr) => {
                      Iif (!acc[curr.metric_family]) {
                        acc[curr.metric_family] = [];
                      }
                      acc[curr.metric_family].push(curr.metric);
                      return acc;
                    }, {}),
                  ).map((metric, i) => (
                    <Accordion
                      className="!rounded !shadow-none !border before:!content-none overflow-hidden aria-expanded:!m-0"
                      key={i}>
                      <AccordionSummary
                        expandIcon={<KeyboardArrowDownRounded />}
                        className="!bg-gray-100 !shadow-none !border-none hover:!bg-gray-50 !transition-all">
                        <Typography>
                          <p style={{ fontSize: "16px" }}>{metric[0]}</p>
                        </Typography>
                      </AccordionSummary>
                      <AccordionDetails>
                        <List>
                          {(metric as any)?.[1]?.map((metric_name) => (
                            <ListItem>
                              <ListItemText primary={metric_name} />
                            </ListItem>
                          ))}
                        </List>
                      </AccordionDetails>
                    </Accordion>
                  ))}
                </AccordionDetails>
              </Accordion>
            ))}
          </AccordionDetails>
        </Accordion>
      )}
    </div>
  );
};