[ECS] Implement LiveState UI for ECS

web/src/__fixtures__/dummy-application-live-state.ts

@@ -67,6 +67,7 @@ export const dummyApplicationLiveState: ApplicationLiveState = {
   cloudrun: { resourcesList: [] },
   lambda: {},
   terraform: {},
+  ecs: { resourcesList: [] },
   kubernetes: { resourcesList },
 };
 

web/src/components/application-detail-page/application-state-view/ecs-state-view/ecs-resource-detail/index.tsx

@@ -0,0 +1,87 @@
+import { IconButton, makeStyles, Paper, Typography } from "@material-ui/core";
+import CloseIcon from "@material-ui/icons/Close";
+import { FC } from "react";
+
+const DETAIL_WIDTH = 400;
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    width: DETAIL_WIDTH,
+    padding: "16px 24px",
+    height: "100%",
+    overflow: "auto",
+    position: "relative",
+    zIndex: 2,
+  },
+  closeButton: {
+    position: "absolute",
+    right: theme.spacing(1),
+    top: theme.spacing(1),
+    color: theme.palette.grey[500],
+  },
+  name: {
+    paddingRight: theme.spacing(4),
+    wordBreak: "break-all",
+    paddingBottom: theme.spacing(2),
+  },
+  section: {
+    paddingTop: theme.spacing(1),
+    display: "flex",
+    alignItems: "center",
+  },
+  sectionTitle: {
+    color: theme.palette.text.secondary,
+    minWidth: 120,
+  },
+  sectionBody: {
+    flex: 1,
+    wordBreak: "break-all",
+  },
+  multilineSection: {
+    paddingTop: theme.spacing(1),
+  },
+}));
+
+export interface ECSResourceDetailProps {
+  resource: {
+    name: string;
+    kind: string;
+    healthDescription: string;
+  };
+  onClose: () => void;
+}
+
+export const ECSResourceDetail: FC<ECSResourceDetailProps> = ({
+  resource,
+  onClose,
+}) => {
+  const classes = useStyles();
+  return (
+    <Paper className={classes.root} square>
+      <IconButton className={classes.closeButton} onClick={onClose}>
+        <CloseIcon />
+      </IconButton>
+      <Typography variant="h6" className={classes.name}>
+        {resource.name}
+      </Typography>
+
+      <div className={classes.section}>
+        <Typography variant="subtitle1" className={classes.sectionTitle}>
+          Kind
+        </Typography>
+        <Typography variant="body1" className={classes.sectionBody}>
+          {resource.kind}
+        </Typography>
+      </div>
+
+      <div className={classes.multilineSection}>
+        <Typography variant="subtitle1" className={classes.sectionTitle}>
+          Health Description
+        </Typography>
+        <Typography variant="body1">
+          {resource.healthDescription || "Empty"}
+        </Typography>
+      </div>
+    </Paper>
+  );
+};

web/src/components/application-detail-page/application-state-view/ecs-state-view/ecs-resource/health-status-icon/index.tsx

@@ -0,0 +1,36 @@
+import { makeStyles } from "@material-ui/core";
+import UnknownIcon from "@material-ui/icons/ErrorOutline";
+import FavoriteIcon from "@material-ui/icons/Favorite";
+import OtherIcon from "@material-ui/icons/HelpOutline";
+import { FC, memo } from "react";
+import { HealthStatus } from "~/modules/applications-live-state";
+
+const useStyles = makeStyles((theme) => ({
+  healthy: {
+    color: theme.palette.success.main,
+  },
+  unknown: {
+    color: theme.palette.warning.main,
+  },
+  other: {
+    color: theme.palette.info.main,
+  },
+}));
+
+export interface ECSResourceHealthStatusIconProps {
+  health: HealthStatus;
+}
+
+export const ECSResourceHealthStatusIcon: FC<ECSResourceHealthStatusIconProps> = memo(
+  function HealthStatusIcon({ health }) {
+    const classes = useStyles();
+    switch (health) {
+      case HealthStatus.UNKNOWN:
+        return <UnknownIcon fontSize="small" className={classes.unknown} />;
+      case HealthStatus.HEALTHY:
+        return <FavoriteIcon fontSize="small" className={classes.healthy} />;
+      case HealthStatus.OTHER:
+        return <OtherIcon fontSize="small" className={classes.other} />;
+    }
+  }
+);

web/src/components/application-detail-page/application-state-view/ecs-state-view/ecs-resource/index.tsx

@@ -0,0 +1,43 @@
+import { makeStyles, Paper, Typography } from "@material-ui/core";
+import { FC, memo } from "react";
+import { ECSResourceState } from "~/modules/applications-live-state";
+import { ECSResourceHealthStatusIcon } from "./health-status-icon";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: "inline-flex",
+    flexDirection: "column",
+    padding: theme.spacing(2),
+    width: 300,
+    cursor: "pointer",
+  },
+  nameLine: {
+    display: "flex",
+  },
+  name: {
+    marginLeft: theme.spacing(0.5),
+  },
+}));
+
+export interface ECSResourceProps {
+  resource: ECSResourceState.AsObject;
+  onClick: (resource: ECSResourceState.AsObject) => void;
+}
+
+export const ECSResource: FC<ECSResourceProps> = memo(function ECSResource({
+  resource,
+  onClick,
+}) {
+  const classes = useStyles();
+  return (
+    <Paper square className={classes.root} onClick={() => onClick(resource)}>
+      <Typography variant="caption">{resource.kind}</Typography>
+      <div className={classes.nameLine}>
+        <ECSResourceHealthStatusIcon health={resource.healthStatus} />
+        <Typography variant="subtitle2" className={classes.name}>
+          {resource.name}
+        </Typography>
+      </div>
+    </Paper>
+  );
+});

web/src/components/application-detail-page/application-state-view/ecs-state-view/index.tsx

@@ -0,0 +1,176 @@
+import { Box, makeStyles } from "@material-ui/core";
+import clsx from "clsx";
+import dagre from "dagre";
+import { FC, useState } from "react";
+import { ECSResourceState } from "~/modules/applications-live-state";
+import { theme } from "~/theme";
+import { ECSResource } from "./ecs-resource";
+import { ECSResourceDetail } from "./ecs-resource-detail";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: "flex",
+    flex: 1,
+    justifyContent: "center",
+    overflow: "hidden",
+  },
+  stateViewWrapper: {
+    flex: 1,
+    display: "flex",
+    justifyContent: "center",
+    overflow: "hidden",
+  },
+  stateView: {
+    position: "relative",
+    overflow: "auto",
+  },
+  closeDetailButton: {
+    position: "absolute",
+    right: theme.spacing(1),
+    top: theme.spacing(1),
+    color: theme.palette.grey[500],
+  },
+}));
+
+export interface ECSStateViewProps {
+  resources: ECSResourceState.AsObject[];
+}
+
+const NODE_HEIGHT = 72;
+const NODE_WIDTH = 300;
+const STROKE_WIDTH = 2;
+const SVG_RENDER_PADDING = STROKE_WIDTH * 2;
+
+function useGraph(
+  resources: ECSResourceState.AsObject[]
+): dagre.graphlib.Graph<{
+  resource: ECSResourceState.AsObject;
+}> {
+  const graph = new dagre.graphlib.Graph<{
+    resource: ECSResourceState.AsObject;
+  }>();
+  graph.setGraph({ rankdir: "LR", align: "UL" });
+  graph.setDefaultEdgeLabel(() => ({}));
+
+  resources.forEach((resource) => {
+    graph.setNode(resource.id, {
+      resource,
+      height: NODE_HEIGHT,
+      width: NODE_WIDTH,
+    });
+    // 'Service' does not need parent nodes.
+    if (resource.kind != "Service" && resource.parentIdsList.length > 0) {
+      resource.parentIdsList.forEach((parentId) => {
+        graph.setEdge(parentId, resource.id);
+      });
+    }
+  });
+
+  // Update after change graph
+  dagre.layout(graph);
+
+  return graph;
+}
+
+export const ECSStateView: FC<ECSStateViewProps> = ({ resources }) => {
+  const classes = useStyles();
+  const [
+    selectedResource,
+    setSelectedResource,
+  ] = useState<ECSResourceState.AsObject | null>(null);
+
+  const graph = useGraph(resources);
+  const nodes = graph
+    .nodes()
+    .map((v) => graph.node(v))
+    .filter(Boolean);
+
+  const graphInstance = graph.graph();
+
+  return (
+    <div className={clsx(classes.root)}>
+      <div className={classes.stateViewWrapper}>
+        <div className={classes.stateView}>
+          {nodes.map((node) => (
+            <Box
+              key={`${node.resource.kind}-${node.resource.name}`}
+              position="absolute"
+              top={node.y}
+              left={node.x}
+              zIndex={1}
+              data-testid="ecs-resource"
+            >
+              <ECSResource
+                resource={node.resource}
+                onClick={setSelectedResource}
+              />
+            </Box>
+          ))}
+          {
+            // render edges
+            graph.edges().map((v, i) => {
+              const edge = graph.edge(v);
+              let baseX = Infinity;
+              let baseY = Infinity;
+              let svgWidth = 0;
+              let svgHeight = 0;
+              edge.points.forEach((p) => {
+                baseX = Math.min(baseX, p.x);
+                baseY = Math.min(baseY, p.y);
+                svgWidth = Math.max(svgWidth, p.x);
+                svgHeight = Math.max(svgHeight, p.y);
+              });
+              baseX = Math.round(baseX);
+              baseY = Math.round(baseY);
+              // NOTE: Add padding to SVG sizes for showing edges completely.
+              // If you use the same size as the polyline points, it may hide the some strokes.
+              svgWidth = Math.ceil(svgWidth - baseX) + SVG_RENDER_PADDING;
+              svgHeight = Math.ceil(svgHeight - baseY) + SVG_RENDER_PADDING;
+              return (
+                <svg
+                  key={`edge-${i}`}
+                  style={{
+                    position: "absolute",
+                    top: baseY + NODE_HEIGHT / 2,
+                    left: baseX + NODE_WIDTH / 2,
+                  }}
+                  width={svgWidth}
+                  height={svgHeight}
+                >
+                  <polyline
+                    points={edge.points.reduce((prev, current) => {
+                      return (
+                        prev +
+                        `${Math.round(current.x - baseX) + STROKE_WIDTH},${
+                          Math.round(current.y - baseY) + STROKE_WIDTH
+                        } `
+                      );
+                    }, "")}
+                    strokeWidth={STROKE_WIDTH}
+                    stroke={theme.palette.divider}
+                    fill="transparent"
+                  />
+                </svg>
+              );
+            })
+          }
+          {graphInstance && (
+            <div
+              style={{
+                width: (graphInstance.width ?? 0) + NODE_WIDTH,
+                height: (graphInstance.height ?? 0) + NODE_HEIGHT,
+              }}
+            />
+          )}
+        </div>
+      </div>
+
+      {selectedResource && (
+        <ECSResourceDetail
+          resource={selectedResource}
+          onClose={() => setSelectedResource(null)}
+        />
+      )}
+    </div>
+  );
+};

web/src/components/application-detail-page/application-state-view/index.tsx

@@ -23,11 +23,13 @@ import {
 } from "~/modules/applications-live-state";
 import { KubernetesStateView } from "./kubernetes-state-view";
 import { CloudRunStateView } from "./cloudrun-state-view";
+import { ECSStateView } from "./ecs-state-view";
 
 const isDisplayLiveState = (app: Application.AsObject | undefined): boolean => {
   return (
     app?.kind === ApplicationKind.KUBERNETES ||
-    app?.kind === ApplicationKind.CLOUDRUN
+    app?.kind === ApplicationKind.CLOUDRUN ||
+    app?.kind === ApplicationKind.ECS
   );
 };
 
@@ -77,12 +79,12 @@ export const ApplicationStateView: FC<ApplicationStateViewProps> = memo(
 
     useInterval(
       () => {
-        // Only fetch kubernetes or cloud run application.
+        // Fetch only supported kind applications.
         if (app && isDisplayLiveState(app)) {
           dispatch(fetchApplicationStateById(app.id));
         }
       },
-      // Only fetch kubernetes or cloud run application.
+      // Fetch only supported kind applications.
       isDisplayLiveState(app) && hasError === false ? FETCH_INTERVAL : null
     );
 
@@ -149,6 +151,10 @@ export const ApplicationStateView: FC<ApplicationStateViewProps> = memo(
         const resources = liveState.cloudrun?.resourcesList || [];
         return <CloudRunStateView resources={resources} />;
       }
+      case ApplicationKind.ECS: {
+        const resources = liveState.ecs?.resourcesList || [];
+        return <ECSStateView resources={resources} />;
+      }
       default:
     }