cdk-pretty-diff
Version:
Formatting tool for CDK Diff output. Inspired by Terraform prettyplan (https://github.com/chrislewisdev/prettyplan)
3 lines (2 loc) • 11.2 kB
TypeScript
declare const _default: "\n\n<html>\n <head>\n <meta charset=\"utf-8\" />\n <title>prettyplan</title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n <link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css\" />\n <style>\n body {\n font-family: Arial, Helvetica, sans-serif;\n text-rendering: optimizeLegibility;\n background: #ecf7fe;\n color: #000000c0;\n font-size: 15px;\n margin: 0;\n }\n @keyframes fade-in {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n\n .stripe {\n width: 100%;\n height: 5px;\n background: #5c4ce4;\n animation-name: wipe-in;\n animation-duration: 1s;\n }\n @keyframes wipe-in {\n 0% {\n width: 0%;\n }\n 100% {\n width: 100%;\n }\n }\n\n #release-notification {\n background: #5c4ce4;\n color: white;\n font-weight: bold;\n text-align: center;\n overflow: hidden;\n padding: 10px 0 15px 0;\n height: 20px;\n animation-name: notification-pop-in;\n animation-duration: 2s;\n }\n #release-notification a {\n color: white;\n }\n #release-notification.dismissed {\n animation-name: notification-pop-out;\n animation-duration: 0.5s;\n height: 0;\n padding: 0;\n }\n @keyframes notification-pop-in {\n 0% {\n height: 0;\n padding: 0;\n }\n 50% {\n height: 0;\n padding: 0;\n }\n }\n @keyframes notification-pop-out {\n 0% {\n height: 20px;\n padding: 10px 0 15px 0;\n }\n 100% {\n height: 0;\n padding: 0;\n }\n }\n\n #modal-container {\n animation-name: fade-in;\n animation-duration: 0.2s;\n }\n .modal-pane {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: #ffffffe6;\n z-index: 10;\n }\n .modal-content {\n position: fixed;\n width: 60%;\n height: 60%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background: #ffffff;\n box-shadow: 0 2px 6px 0 hsla(0, 0%, 0%, 0.2);\n z-index: 20;\n }\n .modal-close {\n position: absolute;\n right: 0;\n padding: 10px;\n }\n .modal-close button.text-button {\n color: #4526ac;\n text-decoration: none;\n font-weight: normal;\n }\n .release-notes {\n max-width: 80%;\n margin: 0 auto 0 auto;\n overflow-y: auto;\n max-height: 100%;\n }\n\n #branding {\n float: right;\n padding-top: 10px;\n padding-right: 10px;\n font-size: 10px;\n color: #4526ac;\n text-align: right;\n }\n #branding a {\n color: #4526ac;\n }\n\n .container {\n margin: 10px 10px 0 10px;\n animation-name: fade-in;\n animation-duration: 1s;\n }\n @media only screen and (min-width: 600px) {\n .container {\n max-width: 80%;\n margin-left: auto;\n margin-right: auto;\n }\n }\n\n h1,\n h2 {\n text-align: center;\n color: #4526ac;\n }\n\n #terraform-plan {\n width: 100%;\n min-height: 300px;\n border: none;\n box-shadow: 0 2px 6px 0 hsla(0, 0%, 0%, 0.2);\n padding: 10px;\n margin-bottom: 10px;\n resize: none;\n background: #ffffffe6;\n }\n\n button {\n font-size: 18px;\n background: #5c4ce4;\n color: #fff;\n box-shadow: 0 2px 6px 0 hsla(0, 0%, 0%, 0.2);\n border: none;\n border-radius: 2px;\n min-width: 170px;\n height: 40px;\n }\n button:hover {\n background: #6567ea;\n cursor: pointer;\n }\n button:active {\n background: #5037ca;\n }\n button.text-button {\n background: none;\n box-shadow: none;\n border-radius: 0;\n width: auto;\n height: auto;\n text-decoration: underline;\n font-size: inherit;\n font-weight: inherit;\n font-family: Arial, Helvetica, sans-serif;\n color: inherit;\n text-align: inherit;\n padding: 0;\n }\n\n #parsing-error-message {\n background-color: #ffffff;\n padding: 10px;\n color: #000000c0;\n margin: 4px;\n box-shadow: 0 2px 6px 0 hsla(0, 0%, 0%, 0.2);\n font-weight: bold;\n border-left: 2px solid red;\n animation-name: error;\n animation-duration: 1s;\n }\n\n @keyframes error {\n 0% {\n background-color: red;\n }\n 100% {\n background-color: white;\n }\n }\n\n .prettyplan ul {\n padding-left: 0;\n font-size: 13px;\n }\n\n .prettyplan li {\n list-style: none;\n background: #ffffffe6;\n padding: 10px;\n color: #000000c0;\n margin: 4px;\n box-shadow: 0 2px 6px 0 hsla(0, 0%, 0%, 0.2);\n }\n\n .prettyplan ul.warnings li {\n border-left: 3px solid #757575;\n }\n\n .prettyplan ul.actions li.update {\n border-left: 3px solid #ff8f00;\n }\n .prettyplan ul.actions li.create {\n border-left: 3px solid #2e7d32;\n }\n .prettyplan ul.actions li.addition {\n border-left: 3px solid #2e7d32;\n }\n .prettyplan ul.actions li.destroy {\n border-left: 3px solid #b71c1c;\n }\n .prettyplan ul.actions li.removal {\n border-left: 3px solid #b71c1c;\n }\n .prettyplan ul.actions li.recreate {\n border-left: 3px solid #1565c0;\n }\n .prettyplan ul.actions li.read {\n border-left: 3px solid #519bf0;\n }\n\n .badge {\n display: inline-block;\n text-transform: uppercase;\n margin-right: 10px;\n padding: 3px;\n font-size: 12px;\n font-weight: bold;\n }\n .warnings .badge {\n color: #757575;\n }\n li.update .badge {\n color: #ff8f00;\n }\n li.create .badge {\n color: #2e7d32;\n }\n li.addition .badge {\n color: #2e7d32;\n }\n li.destroy .badge {\n color: #b71c1c;\n }\n li.removal .badge {\n color: #b71c1c;\n }\n li.recreate .badge {\n color: #1565c0;\n }\n li.read .badge {\n color: #519bf0;\n }\n\n .id-segment:not(:last-child)::after {\n content: ' > ';\n }\n .id-segment.name,\n .id-segment.type {\n font-weight: bold;\n }\n\n .change-count {\n float: right;\n }\n\n .summary {\n cursor: pointer;\n }\n\n .no-diff-changes-breakdown {\n margin: 5px auto 0 auto;\n padding: 5px;\n }\n .no-diff-changes-breakdown table {\n width: 100%;\n word-break: break-all;\n font-size: 13px;\n }\n .no-diff-changes-breakdown table td {\n padding: 10px;\n width: 40%;\n }\n pre {\n white-space: pre-wrap;\n background: #f3f3f3;\n }\n .no-diff-changes-breakdown table td.property {\n width: 20%;\n text-align: right;\n font-weight: bold;\n }\n .no-diff-changes-breakdown table tr:nth-child(even) {\n background-color: #f5f5f5;\n }\n\n .forces-new-resource {\n color: #b71c1c;\n }\n\n .collapsed,\n .hidden {\n display: none;\n }\n\n .actions button {\n background: none;\n border: none;\n text-decoration: underline;\n color: black;\n box-shadow: none;\n font-weight: bold;\n font-size: 14px;\n }\n\n .d2h-icon {\n display: none;\n }\n </style>\n </head>\n <body>\n <div class=\"stripe\"></div>\n <div class=\"container\">\n <h1>prettyplan</h1>\n <div id=\"parsing-error-message\" class=\"hidden\">\n That doesn't look like a Terraform plan. Did you copy the entire output (without colouring) from the plan\n command?\n </div>\n <div id=\"prettyplan\" class=\"prettyplan\">\n <ul id=\"errors\" class=\"errors\"></ul>\n <ul id=\"warnings\" class=\"warnings\"></ul>\n <button class=\"expand-all\" onclick=\"expandAll()\">Expand all</button>\n <button class=\"collapse-all hidden\" onclick=\"collapseAll()\">Collapse all</button>\n <div id=\"stacks\"></div>\n <ul id=\"actions\" class=\"actions\"></ul>\n <pre id=\"diff\"></pre>\n </div>\n </div>\n <script>\n function accordion(element) {\n const changes = element.parentElement.getElementsByClassName('changes');\n for (var i = 0; i < changes.length; i++) {\n toggleClass(changes[i], 'collapsed');\n }\n }\n\n function toggleClass(element, className) {\n if (!element.className.match(className)) {\n element.className += ' ' + className;\n } else {\n element.className = element.className.replace(className, '');\n }\n }\n\n function addClass(element, className) {\n if (!element.className.match(className)) element.className += ' ' + className;\n }\n\n function removeClass(element, className) {\n element.className = element.className.replace(className, '');\n }\n\n function expandAll() {\n const sections = document.querySelectorAll('.changes.collapsed');\n\n for (var i = 0; i < sections.length; i++) {\n toggleClass(sections[i], 'collapsed');\n }\n\n toggleClass(document.querySelector('.expand-all'), 'hidden');\n toggleClass(document.querySelector('.collapse-all'), 'hidden');\n }\n\n function collapseAll() {\n const sections = document.querySelectorAll('.changes:not(.collapsed)');\n\n for (var i = 0; i < sections.length; i++) {\n toggleClass(sections[i], 'collapsed');\n }\n\n toggleClass(document.querySelector('.expand-all'), 'hidden');\n toggleClass(document.querySelector('.collapse-all'), 'hidden');\n }\n\n function removeChildren(element) {\n while (element.lastChild) {\n element.removeChild(element.lastChild);\n }\n }\n\n function createModalContainer() {\n const modalElement = document.createElement('div');\n modalElement.id = 'modal-container';\n\n document.body.appendChild(modalElement);\n\n return modalElement;\n }\n\n function closeModal() {\n const modalElement = document.getElementById('modal-container');\n document.body.removeChild(modalElement);\n }\n </script>\n </body>\n</html>\n";
export default _default;