protected function executeWithStack(Stack $stack, InputInterface $input, OutputInterface $output) { $events = $stack->getEvents(); $groups = []; $itemsByGroup = []; foreach ($events as $event) { $groupId = $event['LogicalResourceId']; if (!isset($groups[$groupId])) { $groups[$groupId] = ['id' => $groupId, 'content' => '<strong>' . $groupId . '</strong><br /><em>' . $event["ResourceType"] . '</em>', 'first_event' => $event["Timestamp"]]; } $status = $event["ResourceStatus"]; if (isset($itemsByGroup[$groupId])) { $lastItem = end($itemsByGroup[$groupId]); $lastKey = key($itemsByGroup[$groupId]); if ($lastItem['status'] == $status) { continue; } $duration = strtotime($event["Timestamp"]) - strtotime($itemsByGroup[$groupId][$lastKey]['start']); if ($duration > 15) { $content = floor($duration / 60) . ':' . sprintf("%02d", (int) $duration % 60); $itemsByGroup[$groupId][$lastKey]['content'] = $content; } $itemsByGroup[$groupId][$lastKey]['end'] = $event["Timestamp"]; } $tmp = ['className' => strtolower($status) . ' ' . strtolower(preg_replace('/[^a-zA-Z0-9]/', '-', $event["ResourceType"])), 'group' => $groupId, 'start' => $event["Timestamp"], 'content' => ' ', 'status' => $status]; if (!preg_match('/_IN_PROGRESS$/', $status)) { $tmp['type'] = 'point'; } if (preg_match('/_IN_PROGRESS$/', $status)) { $tmp['className'] .= ' in_progress'; } if (preg_match('/_COMPLETE$/', $status)) { $tmp['className'] .= ' complete'; } if (preg_match('/_FAILED$/', $status)) { $tmp['className'] .= ' failed'; } $itemsByGroup[$groupId][] = $tmp; } $items = []; foreach ($itemsByGroup as $group) { $items = array_merge($items, $group); } $timeline = '<!DOCTYPE HTML> <html> <head> <title>AWS CloudFormation Stack Event Visualization</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.12.0/vis.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.12.0/vis.min.css" rel="stylesheet" type="text/css" /> <style> body, html { font-family: arial, sans-serif; font-size: 11pt; } #visualization { box-sizing: border-box; width: 100%; height: 300px; } .vis-item { border-width: 0; } .vis-item.in_progress { background-color: orange; } .vis-item.failed { border-color: red; border-width: 8px; border-radius: 8px; } .vis-item.complete { border-color: green; border-width: 8px; border-radius: 8px; } em { font-size: smaller; } .vis-labelset .vis-label { background-color: #eee; } .vis-item.aws--cloudformation--waitcondition.in_progress { background: repeating-linear-gradient(to right, #f6ba52, #f6ba52 10px, #ffd180 10px, #ffd180 20px); } </style> </head> <body> <h1>' . $stack->getName() . '</h1> <div id="visualization"></div> <script> var groups = new vis.DataSet(); var items = new vis.DataSet(); groups.add(' . json_encode(array_values($groups)) . '); items.add(' . json_encode(array_values($items)) . '); var timeline = new vis.Timeline(document.getElementById("visualization")); timeline.setOptions({ stack: false, groupOrder: "first_event" }); timeline.setGroups(groups); timeline.setItems(items); </script> </body> </html>'; $output->writeln($timeline); }