Enable to view Application live state for Cloud Run

pkg/app/web/src/components/application-detail-page/application-state-view/cloudrun-state-view/cloudrun-resource-detail/index.tsx

@@ -0,0 +1,97 @@
+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 CloudRunResourceDetailProps {
+  resource: {
+    name: string;
+    kind: string;
+    apiVersion: string;
+    healthDescription: string;
+  };
+  onClose: () => void;
+}
+
+export const CloudRunResourceDetail: FC<CloudRunResourceDetailProps> = ({
+  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.section}>
+        <Typography variant="subtitle1" className={classes.sectionTitle}>
+          Api Version
+        </Typography>
+        <Typography variant="body1" className={classes.sectionBody}>
+          {resource.apiVersion}
+        </Typography>
+      </div>
+
+      <div className={classes.multilineSection}>
+        <Typography variant="subtitle1" className={classes.sectionTitle}>
+          Health Description
+        </Typography>
+        <Typography variant="body1">
+          {resource.healthDescription || "Empty"}
+        </Typography>
+      </div>
+    </Paper>
+  );
+};

pkg/app/web/src/components/application-detail-page/application-state-view/cloudrun-state-view/cloudrun-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 CloudRunResourceHealthStatusIconProps {
+  health: HealthStatus;
+}
+
+export const CloudRunResourceHealthStatusIcon: FC<CloudRunResourceHealthStatusIconProps> = 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} />;
+    }
+  }
+);

pkg/app/web/src/components/application-detail-page/application-state-view/cloudrun-state-view/cloudrun-resource/index.tsx

@@ -0,0 +1,42 @@
+import { makeStyles, Paper, Typography } from "@material-ui/core";
+import { FC, memo } from "react";
+import { CloudRunResourceState } from "~/modules/applications-live-state";
+import { CloudRunResourceHealthStatusIcon } 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 CloudRunResourceProps {
+  resource: CloudRunResourceState.AsObject;
+  onClick: (resource: CloudRunResourceState.AsObject) => void;
+}
+
+export const CloudRunResource: FC<CloudRunResourceProps> = memo(
+  function CloudRunResource({ resource, onClick }) {
+    const classes = useStyles();
+    return (
+      <Paper square className={classes.root} onClick={() => onClick(resource)}>
+        <Typography variant="caption">{resource.kind}</Typography>
+        <div className={classes.nameLine}>
+          <CloudRunResourceHealthStatusIcon health={resource.healthStatus} />
+          <Typography variant="subtitle2" className={classes.name}>
+            {resource.name}
+          </Typography>
+        </div>
+      </Paper>
+    );
+  }
+);

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

@@ -0,0 +1,189 @@
+import { Box, makeStyles } from "@material-ui/core";
+import clsx from "clsx";
+import dagre from "dagre";
+import { FC, useState } from "react";
+import { CloudRunResourceState } from "~/modules/applications-live-state";
+import { theme } from "~/theme";
+import { uniqueArray } from "~/utils/unique-array";
+import { CloudRunResource } from "./cloudrun-resource";
+import { CloudRunResourceDetail } from "./cloudrun-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 CloudRunStateViewProps {
+  resources: CloudRunResourceState.AsObject[];
+}
+
+const NODE_HEIGHT = 72;
+const NODE_WIDTH = 300;
+const STROKE_WIDTH = 2;
+const SVG_RENDER_PADDING = STROKE_WIDTH * 2;
+
+function useGraph(
+  resources: CloudRunResourceState.AsObject[],
+  showKinds: string[]
+): dagre.graphlib.Graph<{
+  resource: CloudRunResourceState.AsObject;
+}> {
+  const graph = new dagre.graphlib.Graph<{
+    resource: CloudRunResourceState.AsObject;
+  }>();
+  graph.setGraph({ rankdir: "LR", align: "UL" });
+  graph.setDefaultEdgeLabel(() => ({}));
+
+  const service = resources.find((r) => r.parentIdsList.length === 0);
+  const serviceID = service?.id || "";
+  resources.forEach((resource) => {
+    graph.setNode(resource.id, {
+      resource,
+      height: NODE_HEIGHT,
+      width: NODE_WIDTH,
+    });
+    if (resource.parentIdsList.length > 0) {
+      graph.setEdge(serviceID, resource.id);
+    }
+  });
+
+  // Update after change graph
+  dagre.layout(graph);
+
+  return graph;
+}
+
+export const CloudRunStateView: FC<CloudRunStateViewProps> = ({
+  resources,
+}) => {
+  const classes = useStyles();
+  const [
+    selectedResource,
+    setSelectedResource,
+  ] = useState<CloudRunResourceState.AsObject | null>(null);
+
+  const kinds: string[] = uniqueArray(resources.map((r) => r.kind));
+  const [filterState] = useState<Record<string, boolean>>(
+    kinds.reduce<Record<string, boolean>>((prev, current) => {
+      prev[current] = true;
+      return prev;
+    }, {})
+  );
+  const graph = useGraph(
+    resources,
+    Object.keys(filterState).filter((key) => filterState[key])
+  );
+  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="cloudrun-resource"
+            >
+              <CloudRunResource
+                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 && (
+        <CloudRunResourceDetail
+          resource={selectedResource}
+          onClose={() => setSelectedResource(null)}
+        />
+      )}
+    </div>
+  );
+};