feat: support fn::sub, add filtering and deafult to mxHierarchicalLayout

Author: ljacobsson

README.md

@@ -30,8 +30,7 @@ cfn-dia generate -t template.yaml
 * Select only the resource types you want to see. This lets you skip granlar things like roles and policies that might not add to the overview you want to see
 * Navigate through a new differnet layouts
 * Works for both JSON and YAML templates
+* Filter on resource type and/or resource names
 
 ## Known issues
 * Some icons are missing. Working on completing the coverage.
-* Default layouts get quite messy. In the draw.io menu, use the Arrange -> Layout menu for better options
-* Connections between resources are limited to `Ref` and `Fn::GetAtt` intrinsic functions. `Fn::Sub` is coming soon.

index.js

@@ -9,6 +9,13 @@ const inquirer = require("inquirer");
 const prompt = inquirer.createPromptModule();
 
 const package = JSON.parse(fs.readFileSync(path.join(__dirname, "package.json")));
+
+const actionOption = {
+  FilterResourceTypes: "Filter resources by type",
+  FilterResourceName: "Filter resources by name",
+  ChangeLayout: "Change layout"
+}
+
 program.version(package.version, "-v, --vers", "output the current version");
 program
   .command("generate")
@@ -34,33 +41,50 @@ program
       ? JSON.parse
       : YAML.yamlParse;
     const template = parser(templateString);
-    const resources = Object.keys(template.Resources);
+    const resources = [...Object.keys(template.Resources)].sort();
     let types = [];
     for (const resource of resources) {
       types.push(template.Resources[resource].Type);
     }
     types = [...new Set(types)].sort();
     let resourceTypes = { answer: types };
-    const filterResources = "Filter resources";
+    let resourceNames = { answer: resources };
+    let actionChoice = {};
     while (true) {
-      let layoutChoice = {};
-      while (layoutChoice.answer !== filterResources) {
-        const xml = mxGenerator.renderTemplate(template, resourceTypes.answer, layoutChoice.answer);
-        fs.writeFileSync(cmd.outputFile, xml);
-        layoutChoice = await prompt({
-            message: "Select layout",
-            choices: [{name: filterResources, value: filterResources}, ...mxGenerator.layouts],
-            type: "list",
-            name: "answer",
-          });
-    
-      }
-      resourceTypes = await prompt({
-        message: "Select resource types to include in diagram",
-        choices: types,
-        type: "checkbox",
+      const xml = mxGenerator.renderTemplate(template, resourceTypes.answer, resourceNames.answer);
+      fs.writeFileSync(cmd.outputFile, xml);
+      
+      actionChoice = await prompt({
+        message: "Options",
+        choices: [
+          actionOption.FilterResourceTypes,
+          actionOption.FilterResourceName,
+          //actionOption.ChangeLayout
+        ],
+        type: "list",
         name: "answer",
       });
+
+      switch (actionChoice.answer) {
+        case actionOption.FilterResourceTypes:
+          resourceTypes = await prompt({
+            message: "Select resource types to include",
+            choices: types,
+            default: resourceTypes.answer,
+            type: "checkbox",
+            name: "answer",
+          });
+          break;
+        case actionOption.FilterResourceName:
+          resourceNames = await prompt({
+            message: "Select resources to include",
+            choices: resources,
+            default: resourceNames.answer,
+            type: "checkbox",
+            name: "answer",
+          });
+          break;
+        }        
     }
   });
 

mxgraph/MxGenerator.js

@@ -4,14 +4,12 @@ const { JSDOM } = jsdom;
 const dom = new JSDOM();
 const jsonUtil = require("../resources/JsonUtil");
 const iconMap = require("../resources/IconMap");
-
 global.window = dom.window;
 global.document = window.document;
 global.XMLSerializer = window.XMLSerializer;
 global.navigator = window.navigator;
 
 const mxgraph = require("mxgraph")({});
-
 const { mxGraph, mxCodec, mxUtils } = mxgraph;
 
 const layouts = [
@@ -21,120 +19,173 @@ const layouts = [
   { name: "Radial Tree", value: "mxRadialTreeLayout" },
 ];
 
-function makeGraph(template, resourceTypesToInclude, layoutChoice) {
-  const resources = Object.keys(template.Resources);
+const graph = new mxGraph();
+
+let currentLayout = "mxHierarchicalLayout";
 
-  const graph = new mxGraph();
-  const layout = new mxgraph[layoutChoice || "mxFastOrganicLayout"](graph);
-  layout.radius = 300;
-  layout.forceConstant = 120;
-  const parent = graph.getDefaultParent();
-  const vertices = [];
+let vertices = [];
+let forceLayoutRender = true;
+let locationCache = {};
+const parent = graph.getDefaultParent();
+function makeGraph(template, resourceTypesToInclude, resourceNamesToInclude) {
+  let layout = new mxgraph[currentLayout](graph, true, 500);
+  const resources = Object.keys(template.Resources);
+  layout.orientation = "west";
+  layout.intraCellSpacing = 50;
+  layout.interRankCellSpacing = 200;
+  layout.interHierarchySpacing = 100;
+  layout.parallelEdgeSpacing = 20;
+  layout.leftMargin = 200;
+  layout.resizeParent = true;
   graph.getModel().beginUpdate();
   try {
     for (const resource of resources) {
       const type = template.Resources[resource].Type;
-      if (!resourceTypesToInclude.includes(type)) {
+      if (
+        !resourceTypesToInclude.includes(type) ||
+        !resourceNamesToInclude.includes(resource)
+      ) {
+        updateFilters(type, resource);
         continue;
       }
-      const dependencies = [];
-      jsonUtil.findAllValues(template.Resources[resource], dependencies, "Ref");
-      jsonUtil.findAllValues(
-        template.Resources[resource],
-        dependencies,
-        "Fn::GetAtt"
-      );
 
-      for (const dependency of dependencies) {
-        dependency.value = dependency.value.filter(
-          (p) =>
-            template.Resources[p] &&
-            resourceTypesToInclude.includes(template.Resources[p].Type)
-        );
-      }
+      const dependencies = getDependencies(
+        template,
+        resource,
+        resourceTypesToInclude
+      );
 
-      vertices.push({
-        name: resource,
-        dependencies: dependencies,
-        vertex: graph.insertVertex(
-          parent,
-          null,
-          resource,
-          70,
-          1,
-          50,
-          50,
-          iconMap.getIcon(type)
-        ),
-      });
+      addVertices(resource, dependencies, type);
     }
 
-    for (const vertex of vertices) {
-      for (const dependencyNode of vertex.dependencies) {
+    for (const sourceVertex of vertices) {
+      for (const dependencyNode of sourceVertex.dependencies) {
         for (const dependency of dependencyNode.value) {
-          const target = vertices.filter((p) => p.name === dependency)[0];
-          let from = vertex.vertex;
-          let to = target.vertex;
-
-          if (from && to) {
-            if (dependencyNode.path.indexOf("Properties.Events") > 0) {
-              graph.insertEdge(
-                parent,
-                null,
-                "Event",
-                to,
-                from,
-                "edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;fillColor=#1ba1e2;strokeColor=#006EAF;labelBackgroundColor=none;fontColor=#7EA6E0;"
-              );
-            } else {
-              const edges = graph.getEdges(from);
-              const existing = edges.filter((p) => p.target.value === to.value);
-              if (existing.length > 0) {
-                const edgeValue = pathToDescriptor(dependencyNode.path);
-                if (edgeValue !== null) {
-                  existing[0].setValue(
-                    `${
-                      existing[0].getValue()
-                        ? existing[0].getValue() + "\n"
-                        : ""
-                    }${edgeValue}`
-                  );
-                }
-              } else {
-                graph.insertEdge(
-                  parent,
-                  null,
-                  pathToDescriptor(dependencyNode.path),
-                  from,
-                  to,
-                  "edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;labelBackgroundColor=none;fontColor=#EA6B66;"
-                );
-              }
-            }
+          const targets = vertices.filter((p) => p.name === dependency);
+          const targetVertex = targets[0];
+          if (!targetVertex) {
+            continue;
           }
+          let from = sourceVertex.vertex;
+          let to = targetVertex.vertex;
+          addEdges(from, to, dependencyNode);
         }
       }
     }
   } catch (err) {
     console.log(err);
   } finally {
+    layout.execute(parent);
+    forceLayoutRender = false;
     graph.getModel().endUpdate();
   }
-
-  layout.execute(parent);
   return graph;
 }
 
+function addEdges(from, to, dependencyNode) {
+  if (from && to) {
+    const existingEdges = Object.keys(graph.model.cells).filter(
+      (c) => c === edgeId(to, from)
+    );
+    if (existingEdges.length > 0) {
+      const existingEdge = graph.model.cells[existingEdges[0]];
+      if (!existingEdge.value.includes(pathToDescriptor(dependencyNode.path))) {
+        existingEdge.value += `\n${pathToDescriptor(dependencyNode.path)}`;
+      }
+      return;
+    }
+    if (dependencyNode.path.indexOf("Properties.Events") > 0) {
+      graph.insertEdge(
+        parent,
+        edgeId(to, from),
+        "Invoke",
+        to,
+        from,
+        "edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;fillColor=#1ba1e2;strokeColor=#006EAF;labelBackgroundColor=none;fontColor=#7EA6E0;"
+      );
+    } else {
+      graph.insertEdge(
+        parent,
+        edgeId(to, from),
+        pathToDescriptor(dependencyNode.path),
+        from,
+        to,
+        "edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;labelBackgroundColor=none;fontColor=#EA6B66;"
+      );
+    }
+  }
+}
+
+function addVertices(resource, dependencies, type) {
+  if (vertices.filter((p) => p.name === resource).length === 0) {
+    vertices.push({
+      name: resource,
+      dependencies: dependencies,
+      type: type,
+      vertex: graph.insertVertex(
+        parent,
+        null,
+        resource,
+        locationCache[resource] ? locationCache[resource].x : 70,
+        locationCache[resource] ? locationCache[resource].y : 0,
+        50,
+        50,
+        iconMap.getIcon(type)
+      ),
+    });
+  }
+}
+
+function getDependencies(template, resource, resourceTypesToInclude) {
+  const dependencies = [];
+  jsonUtil.findAllValues(template.Resources[resource], dependencies, "Ref");
+  jsonUtil.findAllValues(
+    template.Resources[resource],
+    dependencies,
+    "Fn::GetAtt"
+  );
+  for (const dependency of dependencies) {
+    dependency.value = dependency.value.filter(
+      (p) =>
+        template.Resources[p] &&
+        resourceTypesToInclude.includes(template.Resources[p].Type)
+    );
+  }
+  return dependencies;
+}
+
+function updateFilters(type, resource) {
+  const cells = graph.model.cells;
+  const keys = Object.keys(cells);
+  keys.map(
+    (p) =>
+      (locationCache[cells[p].value] = cells[p].geometry
+        ? { x: cells[p].geometry.x, y: cells[p].geometry.y }
+        : null)
+  );
+  if (vertices.filter((p) => p.type === type).length) {
+    const item = vertices.filter((p) => p.name === resource)[0];
+    if (item) {
+      graph.removeCells([item.vertex], true);
+    }
+    vertices = vertices.filter((p) => p.name != resource);
+  }
+}
+
+function edgeId(to, from) {
+  return `${to.value}|${from.value}`; //|${pathToDescriptor(dependencyNode.path)}`;
+}
+
 function pathToDescriptor(path) {
   if (path.startsWith("$.Properties.Environment")) {
-    //return "Variable";
+    return path.split(".").slice(-1)[0];
   }
 
   if (path.startsWith("$.Properties.Policies")) {
     const split = path.split(".");
     return split[3];
   }
-  return null;
+  return "";
 }
 
 function graphToXML(graph) {
@@ -143,8 +194,8 @@ function graphToXML(graph) {
   return mxUtils.getXml(result);
 }
 
-function renderTemplate(template, resources, layout) {
-  const xml = graphToXML(makeGraph(template, resources, layout));
+function renderTemplate(template, resourceTypes, resourceNames) {
+  const xml = graphToXML(makeGraph(template, resourceTypes, resourceNames));
   return xml;
 }