Skip to content

Commit e51f788

Browse files
robbradrobbrad
authored
Issue fixes #70 Adding standalone index.html functionality (#71)
1 parent fe23893 commit e51f788

File tree

4 files changed

+195
-0
lines changed

4 files changed

+195
-0
lines changed

‎BUILD.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
### Development Build on Windows
2+
3+
1. Install npm from https://github.com/coreybutler/nvm-windows#overview
4+
2. nvm ls
5+
3. nvm use 16.13.1
6+
4. npm install -g pkg
7+
6. npm install
8+
7. pkg index.js -o cfn-dia
9+
10+
### Running from node
11+
node index.js h -t tests/template.json

‎commands/html/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ program
2323
)
2424
.option("-co, --cdk-output [outputPath]", "CDK synth output path", `cdk.out`)
2525
.option("-s, --skip-synth", "Skips CDK synth", false)
26+
.option("-sa, --standalone", "Creates a self-contained standalone index.html", false)
2627
.description("Generates a vis.js diagram from a CloudFormation template")
2728
.action(async (cmd) => {
2829
ciMode = cmd.ciMode;
@@ -33,6 +34,7 @@ program
3334
cmd.outputPath,
3435
ciMode,
3536
false,
37+
cmd.standalone,
3638
cmd.renderAll
3739
);
3840
});

‎graph/Vis.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -178,6 +178,7 @@ async function renderTemplate(
178178
filePath,
179179
ciMode,
180180
reset,
181+
standaloneIndex,
181182
renderAll
182183
) {
183184
useJson = isJson;
@@ -194,6 +195,20 @@ async function renderTemplate(
194195
if (!fs.existsSync(uiPath)) {
195196
fs.mkdirSync(uiPath);
196197
}
198+
if (standaloneIndex) {
199+
fs.readFile(path.join(__dirname, "ui", "index_standalone.template"), 'utf8', function (err, data) {
200+
if (err) {
201+
return console.log(err);
202+
}
203+
var result = data.replace(/%DATA_JS%/g, fileContent);
204+
205+
fs.writeFile(path.join(uiPath, "index.html"), result, 'utf8', function (err) {
206+
if (err) return console.log(err);
207+
});
208+
});
209+
}
210+
else
211+
{
197212
fs.copyFileSync(
198213
path.join(__dirname, "ui", "index.html"),
199214
path.join(uiPath, "index.html")
@@ -203,6 +218,7 @@ async function renderTemplate(
203218
path.join(uiPath, "icons.js")
204219
);
205220
fs.writeFileSync(path.join(uiPath, "data.js"), fileContent);
221+
}
206222
if (!ciMode) {
207223
open(path.join(uiPath, "index.html"));
208224
}

‎graph/ui/index_standalone.template‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2+
<html>
3+
<head>
4+
<style type="text/css">
5+
#mynetwork {
6+
width: 100%;
7+
height: 100vh;
8+
border: 1px solid lightgray;
9+
}
10+
.body {
11+
font-family: Arial, Helvetica, sans-serif;
12+
}
13+
#filtersContainer {
14+
left: 0px;
15+
top: 0px;
16+
height: 100vh;
17+
width: 400px;
18+
background-color: rgba(80, 197, 251, 0.7);
19+
border: blue 4px;
20+
padding: 3px 3px 3px 3px;
21+
z-index: 2999;
22+
position: absolute;
23+
font-family: "Courier New", Courier, monospace;
24+
overflow: scroll;
25+
}
26+
</style>
27+
<script
28+
type="text/javascript"
29+
src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"
30+
></script>
31+
32+
<script type="text/javascript">
33+
%DATA_JS%
34+
</script>
35+
36+
<script type="text/javascript">
37+
let network;
38+
const rule = {
39+
EventPattern: '{"source":["aws.events"]}',
40+
EventBusName: "default",
41+
Target: "MyFunction",
42+
Name: "AllAWSEvents -> MyFunction",
43+
InputPath: undefined,
44+
Input: undefined,
45+
InputTransformer: {
46+
InputPathsMap: {
47+
source: "$.source",
48+
detailType: "$.detail-type",
49+
time: "$.time",
50+
},
51+
InputTemplate:
52+
'{"source": <source>, "detail-type": <detailType>, "time": <time> }',
53+
},
54+
};
55+
function preTitle(text) {
56+
const container = document.createElement("pre");
57+
container.innerText = text; // You may also use innerHTML if your source is trusted.
58+
return container;
59+
}
60+
61+
function draw() {
62+
// create a network
63+
var container = document.getElementById("mynetwork");
64+
nodes.forEach((node => {
65+
node.title = preTitle(node.title);
66+
}));
67+
var data = {
68+
nodes: nodes,
69+
edges: edges,
70+
};
71+
72+
var options = {
73+
nodes: {
74+
shape: "dot",
75+
size: 16,
76+
},
77+
edges: {
78+
arrows: {
79+
to: {
80+
enabled: true,
81+
imageHeight: undefined,
82+
imageWidth: undefined,
83+
scaleFactor: 1,
84+
src: undefined,
85+
type: "arrow",
86+
},
87+
},
88+
},
89+
physics: {
90+
forceAtlas2Based: {
91+
gravitationalConstant: -26,
92+
centralGravity: 0.005,
93+
springLength: 230,
94+
springConstant: 0.18,
95+
},
96+
maxVelocity: 146,
97+
solver: "forceAtlas2Based",
98+
timestep: 0.35,
99+
stabilization: { iterations: 150 },
100+
},
101+
};
102+
network = new vis.Network(container, data, options);
103+
network.body.emitter.emit("_dataChanged");
104+
}
105+
function populateFilters(conatainerName, data, checked, func) {
106+
var container = document.getElementById(conatainerName);
107+
if (!data.length) {
108+
container.style.visibility = "hidden";
109+
}
110+
for (const name of data) {
111+
var checkbox = document.createElement("input");
112+
checkbox.type = "checkbox";
113+
checkbox.id = name;
114+
checkbox.checked = checked;
115+
checkbox.name = conatainerName;
116+
checkbox.value = name;
117+
checkbox.addEventListener("click", func);
118+
var label = document.createElement("label");
119+
label.htmlFor = name;
120+
label.appendChild(document.createTextNode(name));
121+
122+
var br = document.createElement("br");
123+
124+
container.appendChild(checkbox);
125+
container.appendChild(label);
126+
container.appendChild(br);
127+
}
128+
}
129+
</script>
130+
</head>
131+
132+
<body>
133+
<div id="mynetwork"></div>
134+
<div id="filtersContainer">
135+
<div id="resource-types">
136+
<strong>Include resource types:</strong><br />
137+
</div>
138+
<div id="nested-stacks">
139+
<hr />
140+
<strong>Include nested stack(s):</strong><br />
141+
</div>
142+
</div>
143+
<script>
144+
window.onload = function (event) {
145+
if (!showSidebar) {
146+
document.getElementById("filtersContainer").hidden = true;
147+
}
148+
populateFilters("nested-stacks", nested, renderAll, (x) => {
149+
const ns = nodes.get({ filter: (p) => p.prefix === x.target.value });
150+
for (const n of ns) {
151+
nodes.update({ id: n.id, hidden: !x.target.checked });
152+
}
153+
network.redraw();
154+
});
155+
populateFilters("resource-types", types, true, (x) => {
156+
const ns = nodes.get({ filter: (p) => p.type === x.target.value });
157+
for (const n of ns) {
158+
nodes.update({ id: n.id, hidden: !x.target.checked });
159+
}
160+
network.redraw();
161+
});
162+
draw();
163+
};
164+
</script>
165+
</body>
166+
</html>

0 commit comments

Comments
 (0)