2021-06-01 09:38:47 +00:00
|
|
|
<!doctype html>
|
2021-06-17 14:53:54 +00:00
|
|
|
<html lang="en">
|
2021-04-22 16:21:00 +00:00
|
|
|
<head>
|
2021-06-17 14:53:54 +00:00
|
|
|
<title>driftctl Scan Report</title>
|
2021-06-01 09:38:47 +00:00
|
|
|
<meta charset="UTF-8"/>
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
2021-06-08 15:14:28 +00:00
|
|
|
<link rel="shortcut icon"
|
|
|
|
|
href="https://raw.githubusercontent.com/cloudskiff/driftctl-docs/main/static/img/favicon.ico"/>
|
2021-06-17 14:53:54 +00:00
|
|
|
<style>html, body, div, span, h1, h2, p, pre, a, code, img, ul, li, form, label, table, tbody, thead, tr, th, td, header, section, button {
|
2021-06-07 15:47:21 +00:00
|
|
|
border: 0;
|
|
|
|
|
font: inherit;
|
2021-06-17 14:53:54 +00:00
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
2021-06-07 15:47:21 +00:00
|
|
|
vertical-align: baseline;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body {
|
2021-06-17 14:53:54 +00:00
|
|
|
background-color: #f7f7f9;
|
|
|
|
|
color: #1c1e21;
|
|
|
|
|
font-family: Helvetica, sans-serif;
|
|
|
|
|
padding-bottom: 50px;
|
2021-06-07 15:47:21 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
form {
|
|
|
|
|
align-items: center;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
margin-bottom: 20px;
|
2021-06-07 15:47:21 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
h1 {
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
margin-bottom: 5px;
|
2021-06-07 15:47:21 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
h2 {
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
margin-bottom: 5px;
|
2021-06-07 15:47:21 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
header {
|
|
|
|
|
align-items: center;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
height: 130px;
|
|
|
|
|
justify-content: center;
|
2021-06-07 15:47:21 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
img {
|
|
|
|
|
margin-right: 20px;
|
2021-06-07 15:47:21 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
input::placeholder {
|
|
|
|
|
color: #ccc;
|
|
|
|
|
opacity: 1;
|
2021-06-01 09:38:47 +00:00
|
|
|
}
|
2021-04-22 16:21:00 +00:00
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
main {
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
border-top: 3px solid #71b2c3;
|
|
|
|
|
box-shadow: 0 0 5px #0000000a;
|
|
|
|
|
padding: 25px;
|
2021-06-07 15:47:21 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
section {
|
|
|
|
|
background: #fff;
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
box-shadow: 0 0 5px #0000000a;
|
|
|
|
|
color: #747578;
|
2021-06-07 15:47:21 +00:00
|
|
|
display: flex;
|
2021-06-17 14:53:54 +00:00
|
|
|
flex-direction: column;
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
padding: 15px;
|
2021-06-07 15:47:21 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
select {
|
|
|
|
|
-webkit-appearance: none;
|
|
|
|
|
-moz-appearance: none;
|
|
|
|
|
appearance: none;
|
|
|
|
|
background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 97% 50%;
|
2021-06-07 15:47:21 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
table {
|
|
|
|
|
border-collapse: collapse;
|
|
|
|
|
border-spacing: 0;
|
|
|
|
|
width: 100%;
|
2021-06-07 15:47:21 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
tbody, ul, .table-body {
|
|
|
|
|
border-left: 1px solid #ececec;
|
|
|
|
|
border-right: 1px solid #ececec;
|
|
|
|
|
border-top: 1px solid #ececec;
|
2021-06-21 12:42:57 +00:00
|
|
|
border-radius: 3px;
|
|
|
|
|
display: block;
|
2021-06-07 15:47:21 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
ul {
|
|
|
|
|
list-style: none;
|
2021-06-07 15:47:21 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
[role="tab"] {
|
|
|
|
|
background: transparent;
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
color: #747578;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
margin: 4px;
|
|
|
|
|
padding: 10px 20px;
|
2021-06-07 15:47:21 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
[role="tab"]:hover {
|
|
|
|
|
background-color: #f9f9f9;
|
2021-06-07 15:47:21 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
[role="tab"][aria-selected="true"] {
|
|
|
|
|
background: #71b2c3;
|
|
|
|
|
color: #fff;
|
2021-06-07 15:47:21 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
[role="tablist"] {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
2021-06-07 15:47:21 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
[role="tabpanel"] {
|
|
|
|
|
-webkit-animation: fadein .8s;
|
|
|
|
|
animation: fadein .8s;
|
|
|
|
|
width: 100%;
|
2021-06-07 15:47:21 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
[role="tabpanel"].is-hidden {
|
|
|
|
|
opacity: 0;
|
2021-06-08 15:14:28 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
input[type="reset"] {
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
border: none;
|
|
|
|
|
color: #5faabd;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
height: 34px;
|
|
|
|
|
margin: 5px;
|
|
|
|
|
width: 100px;
|
2021-06-08 15:14:28 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
input[type="search"], select {
|
|
|
|
|
border: 1px solid #ececec;
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
color: #6e7071;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
height: 36px;
|
|
|
|
|
margin: 5px;
|
|
|
|
|
max-width: 300px;
|
|
|
|
|
padding: 8px;
|
|
|
|
|
width: 100%;
|
2021-06-08 15:14:28 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
.card {
|
|
|
|
|
align-items: center;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
margin: 5px 0;
|
2021-06-08 15:14:28 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
.code-box {
|
|
|
|
|
background: #eee;
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
color: #747578;
|
|
|
|
|
display: flex;
|
|
|
|
|
margin-top: 20px;
|
2021-06-08 15:14:28 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
.code-box-line {
|
|
|
|
|
line-height: 30px;
|
|
|
|
|
overflow-x: auto;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
width: 100%;
|
2021-06-07 15:47:21 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
.code-box-line-create {
|
|
|
|
|
background-color: #22863a1a;
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
color: #22863a;
|
|
|
|
|
padding: 3px;
|
2021-06-07 15:47:21 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
.code-box-line-delete {
|
|
|
|
|
background-color: #bf404a17;
|
2021-06-08 15:14:28 +00:00
|
|
|
border-radius: 3px;
|
2021-06-17 14:53:54 +00:00
|
|
|
color: #bf404a;
|
|
|
|
|
padding: 3px;
|
|
|
|
|
text-decoration: line-through;
|
2021-06-07 15:47:21 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
.congrats {
|
|
|
|
|
color: #4d9221;
|
|
|
|
|
text-align: center;
|
|
|
|
|
margin: 50px 0;
|
2021-06-07 15:47:21 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
.container {
|
|
|
|
|
margin: auto;
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
width: 1280px;
|
2021-06-07 15:47:21 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
.empty-panel {
|
|
|
|
|
color: #747578;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
padding: 25px;
|
2021-06-08 15:14:28 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
.fraction {
|
|
|
|
|
background: #e8e8e8;
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
color: #555;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
margin-left: 5px;
|
|
|
|
|
padding: 4px 5px;
|
2021-06-07 15:47:21 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
.panels {
|
|
|
|
|
padding: 10px;
|
|
|
|
|
width: 100%;
|
2021-06-07 15:47:21 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.resource-item {
|
2021-06-17 14:53:54 +00:00
|
|
|
border-bottom: 1px solid #ececec;
|
2021-06-07 15:47:21 +00:00
|
|
|
color: #6e7071;
|
2021-06-08 15:14:28 +00:00
|
|
|
font-size: 14px;
|
2021-06-17 14:53:54 +00:00
|
|
|
padding: 15px;
|
2021-06-07 15:47:21 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.resource-item:hover {
|
|
|
|
|
background-color: #f9f9f9;
|
|
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
.row {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
justify-content: space-between;
|
2021-06-10 16:35:13 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
.strong {
|
|
|
|
|
color: #333;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
margin-left: 5px;
|
2021-06-07 15:47:21 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
.table-header {
|
2021-06-08 15:14:28 +00:00
|
|
|
color: #747578;
|
2021-06-17 14:53:54 +00:00
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
padding: 10px;
|
2021-06-08 15:14:28 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-07 15:47:21 +00:00
|
|
|
.tabs-wrapper {
|
2021-06-17 14:53:54 +00:00
|
|
|
align-items: center;
|
2021-06-07 15:47:21 +00:00
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
.visuallyhidden {
|
|
|
|
|
border: 0;
|
|
|
|
|
clip: rect(0 0 0 0);
|
|
|
|
|
height: 1px;
|
|
|
|
|
margin: -1px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
padding: 0;
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 1px;
|
2021-06-07 15:47:21 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
.is-hidden {
|
2021-06-07 15:47:21 +00:00
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
@-webkit-keyframes fadein {
|
2021-06-07 15:47:21 +00:00
|
|
|
from {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
to {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
@keyframes fadein {
|
|
|
|
|
from {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
to {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
2021-06-07 15:47:21 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
@media (min-width: 768px) {
|
|
|
|
|
form {
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
}
|
2021-06-07 15:47:21 +00:00
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
header {
|
|
|
|
|
padding: 0 50px;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
}
|
2021-06-07 17:26:39 +00:00
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
section {
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
}
|
2021-06-10 16:35:13 +00:00
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
[role="tab"] {
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
}
|
2021-06-10 16:35:13 +00:00
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
[role="tablist"] {
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
}
|
2021-06-10 16:35:13 +00:00
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
.card {
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
2021-06-10 16:35:13 +00:00
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
.panels {
|
|
|
|
|
padding: 20px;
|
|
|
|
|
}
|
2021-06-10 16:35:13 +00:00
|
|
|
}
|
2021-06-17 14:53:54 +00:00
|
|
|
</style>
|
2021-04-22 16:21:00 +00:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2021-06-07 15:47:21 +00:00
|
|
|
<div class="container">
|
2021-06-17 14:53:54 +00:00
|
|
|
<header>
|
2021-06-21 12:42:57 +00:00
|
|
|
<img src="https://raw.githubusercontent.com/cloudskiff/driftctl-docs/main/static/img/driftctl_light.svg"
|
2021-06-17 14:53:54 +00:00
|
|
|
width="100px" height="81px" alt="driftctl logo"/>
|
2021-04-22 16:21:00 +00:00
|
|
|
<div>
|
2021-06-17 14:53:54 +00:00
|
|
|
<h1>Scan Report</h1>
|
|
|
|
|
<h2>Jun 10, 2021</h2>
|
|
|
|
|
<p>Scan Duration: 1m31s</p>
|
2021-04-22 16:21:00 +00:00
|
|
|
</div>
|
2021-06-17 14:53:54 +00:00
|
|
|
</header>
|
|
|
|
|
<section>
|
|
|
|
|
<div class="card">
|
|
|
|
|
<span>Total Resources:</span>
|
|
|
|
|
<span class="strong">13</span>
|
2021-06-08 15:14:28 +00:00
|
|
|
</div>
|
2021-06-17 14:53:54 +00:00
|
|
|
<div class="card">
|
|
|
|
|
<span>Coverage:</span>
|
|
|
|
|
<span class="strong">15%</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card">
|
|
|
|
|
<span>Managed:</span>
|
|
|
|
|
<span class="strong">15%</span>
|
|
|
|
|
<span class="fraction">2/13</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card">
|
|
|
|
|
<span>Unmanaged:</span>
|
|
|
|
|
<span class="strong">38%</span>
|
|
|
|
|
<span class="fraction">5/13</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card">
|
|
|
|
|
<span>Missing:</span>
|
|
|
|
|
<span class="strong">46%</span>
|
|
|
|
|
<span class="fraction">6/13</span>
|
2021-06-07 15:47:21 +00:00
|
|
|
</div>
|
2021-06-17 14:53:54 +00:00
|
|
|
</section>
|
|
|
|
|
<main>
|
|
|
|
|
|
|
|
|
|
<form role="search">
|
|
|
|
|
<label for="search" class="visuallyhidden">Search Resources:</label>
|
|
|
|
|
<input type="search" id="search" name="search" placeholder="Search Resources...">
|
|
|
|
|
<label for="select" class="visuallyhidden">Select Resource Type:</label>
|
|
|
|
|
<select id="select" name="select">
|
|
|
|
|
<option value="">Resource Type</option>
|
|
|
|
|
|
|
|
|
|
<option value="aws_unmanaged_resource">aws_unmanaged_resource</option>
|
|
|
|
|
|
|
|
|
|
<option value="aws_deleted_resource">aws_deleted_resource</option>
|
|
|
|
|
|
|
|
|
|
<option value="aws_diff_resource">aws_diff_resource</option>
|
|
|
|
|
|
|
|
|
|
</select>
|
|
|
|
|
<input type="reset" value="Reset Filters">
|
|
|
|
|
</form>
|
2021-04-22 16:21:00 +00:00
|
|
|
|
2021-06-07 15:47:21 +00:00
|
|
|
<div class="tabs-wrapper">
|
2021-06-17 14:53:54 +00:00
|
|
|
<div role="tablist" aria-label="List of tabs">
|
2021-06-07 15:47:21 +00:00
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
<button type="button" role="tab" aria-selected="true" aria-controls="unmanaged-tab" id="unmanaged">
|
|
|
|
|
Unmanaged Resources (<span data-count="resource-unmanaged">5</span>)
|
|
|
|
|
</button>
|
2021-06-07 15:47:21 +00:00
|
|
|
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
<button type="button" role="tab" aria-selected="false" aria-controls="changed-tab" id="changed"
|
|
|
|
|
tabindex="-1">
|
|
|
|
|
Changed Resources (<span data-count="resource-changed">2</span>)
|
|
|
|
|
</button>
|
2021-06-07 15:47:21 +00:00
|
|
|
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
<button type="button" role="tab" aria-selected="false" aria-controls="missing-tab" id="missing"
|
|
|
|
|
tabindex="-1">
|
|
|
|
|
Missing Resources (<span data-count="resource-deleted">6</span>)
|
|
|
|
|
</button>
|
2021-06-07 15:47:21 +00:00
|
|
|
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
<button type="button" role="tab" aria-selected="false" aria-controls="alerts-tab" id="alerts"
|
|
|
|
|
tabindex="-1">
|
2021-06-17 15:59:44 +00:00
|
|
|
Alerts (<span data-count="resource-alerts">0</span>)
|
2021-06-17 14:53:54 +00:00
|
|
|
</button>
|
2021-06-07 15:47:21 +00:00
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="panels">
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
<div tabindex="0" role="tabpanel" id="unmanaged-tab" aria-labelledby="unmanaged">
|
|
|
|
|
<table>
|
|
|
|
|
<thead>
|
|
|
|
|
<tr class="table-header">
|
|
|
|
|
<th>Resource ID</th>
|
|
|
|
|
<th>Resource Type</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
|
|
|
|
|
<tr data-kind="resource-unmanaged" class="resource-item row">
|
|
|
|
|
<td data-type="resource-id">unmanaged-id-1</td>
|
|
|
|
|
<td data-type="resource-type">aws_unmanaged_resource</td>
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<tr data-kind="resource-unmanaged" class="resource-item row">
|
|
|
|
|
<td data-type="resource-id">unmanaged-id-2</td>
|
|
|
|
|
<td data-type="resource-type">aws_unmanaged_resource</td>
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<tr data-kind="resource-unmanaged" class="resource-item row">
|
|
|
|
|
<td data-type="resource-id">unmanaged-id-3</td>
|
|
|
|
|
<td data-type="resource-type">aws_unmanaged_resource</td>
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<tr data-kind="resource-unmanaged" class="resource-item row">
|
|
|
|
|
<td data-type="resource-id">unmanaged-id-4</td>
|
|
|
|
|
<td data-type="resource-type">aws_unmanaged_resource</td>
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<tr data-kind="resource-unmanaged" class="resource-item row">
|
|
|
|
|
<td data-type="resource-id">unmanaged-id-5</td>
|
|
|
|
|
<td data-type="resource-type">aws_unmanaged_resource</td>
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
<div class="empty-panel is-hidden">
|
|
|
|
|
<p>No results matched your filters</p>
|
2021-06-07 17:26:39 +00:00
|
|
|
</div>
|
2021-06-07 15:47:21 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
<div class="is-hidden" tabindex="0" role="tabpanel" id="changed-tab" aria-labelledby="changed">
|
|
|
|
|
<div role="table">
|
|
|
|
|
<div role="rowgroup">
|
|
|
|
|
<div role="row" class="table-header">
|
|
|
|
|
<span role="columnheader">Resource ID</span>
|
|
|
|
|
<span role="columnheader">Resource Type</span>
|
|
|
|
|
</div>
|
2021-06-10 16:35:13 +00:00
|
|
|
</div>
|
2021-06-17 14:53:54 +00:00
|
|
|
<div role="rowgroup" class="table-body">
|
|
|
|
|
|
|
|
|
|
<div role="row" data-kind="resource-changed" class="resource-item">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<span role="cell" data-type="resource-id">diff-id-1</span>
|
|
|
|
|
<span role="cell" data-type="resource-type">aws_diff_resource</span>
|
|
|
|
|
</div>
|
|
|
|
|
<pre class="code-box">
|
|
|
|
|
<code class="code-box-line"> ~ updated.field: <span class="code-box-line-delete">"foobar"</span> => <span class="code-box-line-create">"barfoo"</span><br> + new.field: <span class="code-box-line-create">"newValue"</span><br> - a: <span class="code-box-line-delete">"oldValue"</span><br></code>
|
|
|
|
|
</pre>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div role="row" data-kind="resource-changed" class="resource-item">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<span role="cell" data-type="resource-id">diff-id-2</span>
|
|
|
|
|
<span role="cell" data-type="resource-type">aws_diff_resource</span>
|
|
|
|
|
</div>
|
|
|
|
|
<pre class="code-box">
|
|
|
|
|
<code class="code-box-line"> - path.to.fields.[0]: <span class="code-box-line-delete">"value"</span><br> ~ path.to.fields.[1]: <span class="code-box-line-delete">12</span> => <span class="code-box-line-create">"12"</span><br> - group_ids: <span class="code-box-line-delete">["a071314398026"]</span><br> ~ Policies.[0]: <span class="code-box-line-delete">{
|
2021-06-11 16:43:51 +00:00
|
|
|
Id: "",
|
|
|
|
|
Type: ""
|
|
|
|
|
}</span> => <span class="code-box-line-create">{
|
|
|
|
|
Id: "093cd6ba-cf6d-4800-b252-6a50ca8903cd",
|
|
|
|
|
Type: "aws_iam_policy"
|
2021-06-21 12:42:57 +00:00
|
|
|
}</span><br> + Tags.[0].Name: <span class="code-box-line-create">"test"</span><br> ~ InstanceInitiatedShutdownBehavior: <span class="code-box-line-delete">""</span> => <span class="code-box-line-create">null</span><br></code>
|
2021-06-17 14:53:54 +00:00
|
|
|
</pre>
|
|
|
|
|
</div>
|
|
|
|
|
|
2021-06-07 17:26:39 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2021-06-17 14:53:54 +00:00
|
|
|
<div class="empty-panel is-hidden">
|
|
|
|
|
<p>No results matched your filters</p>
|
|
|
|
|
</div>
|
2021-06-07 15:47:21 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
<div class="is-hidden" tabindex="0" role="tabpanel" id="missing-tab" aria-labelledby="missing">
|
|
|
|
|
<table>
|
|
|
|
|
<thead>
|
|
|
|
|
<tr class="table-header">
|
|
|
|
|
<th>Resource ID</th>
|
|
|
|
|
<th>Resource Type</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
|
|
|
|
|
<tr data-kind="resource-deleted" class="resource-item row">
|
|
|
|
|
<td data-type="resource-id">deleted-id-1</td>
|
|
|
|
|
<td data-type="resource-type">aws_deleted_resource</td>
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<tr data-kind="resource-deleted" class="resource-item row">
|
|
|
|
|
<td data-type="resource-id">deleted-id-2</td>
|
|
|
|
|
<td data-type="resource-type">aws_deleted_resource</td>
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<tr data-kind="resource-deleted" class="resource-item row">
|
|
|
|
|
<td data-type="resource-id">deleted-id-3</td>
|
|
|
|
|
<td data-type="resource-type">aws_deleted_resource</td>
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<tr data-kind="resource-deleted" class="resource-item row">
|
|
|
|
|
<td data-type="resource-id">deleted-id-4</td>
|
|
|
|
|
<td data-type="resource-type">aws_deleted_resource</td>
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<tr data-kind="resource-deleted" class="resource-item row">
|
|
|
|
|
<td data-type="resource-id">deleted-id-5</td>
|
|
|
|
|
<td data-type="resource-type">aws_deleted_resource</td>
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<tr data-kind="resource-deleted" class="resource-item row">
|
|
|
|
|
<td data-type="resource-id">deleted-id-6</td>
|
|
|
|
|
<td data-type="resource-type">aws_deleted_resource</td>
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
<div class="empty-panel is-hidden">
|
|
|
|
|
<p>No results matched your filters</p>
|
2021-06-07 17:26:39 +00:00
|
|
|
</div>
|
2021-06-07 15:47:21 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
<div class="is-hidden" tabindex="0" role="tabpanel" id="alerts-tab" aria-labelledby="alerts">
|
|
|
|
|
<ul>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li data-kind="resource-alerts" class="resource-item">
|
|
|
|
|
|
|
|
|
|
<span>Ignoring aws_vpc from drift calculation: Listing aws_vpc is forbidden.</span>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li data-kind="resource-alerts" class="resource-item">
|
|
|
|
|
|
|
|
|
|
<span>Ignoring aws_sqs from drift calculation: Listing aws_sqs is forbidden.</span>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li data-kind="resource-alerts" class="resource-item">
|
|
|
|
|
|
|
|
|
|
<span>Ignoring aws_sns from drift calculation: Listing aws_sns is forbidden.</span>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
|
<div class="empty-panel is-hidden">
|
|
|
|
|
<p>No results matched your filters</p>
|
2021-06-07 15:47:21 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2021-06-07 17:26:39 +00:00
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
</main>
|
2021-04-22 16:21:00 +00:00
|
|
|
</div>
|
2021-06-17 14:53:54 +00:00
|
|
|
<script>
|
|
|
|
|
const form = document.querySelector("form");
|
|
|
|
|
|
|
|
|
|
form.addEventListener("submit", (event) => event.preventDefault());
|
|
|
|
|
|
|
|
|
|
const resources = document.querySelectorAll("[data-kind^='resource-']");
|
|
|
|
|
const searchInput = document.querySelector('[type="search"]');
|
|
|
|
|
const selectBox = document.querySelector("select");
|
|
|
|
|
const resetButton = document.querySelector('[type="reset"]');
|
|
|
|
|
|
|
|
|
|
searchInput.addEventListener("input", filterResources);
|
|
|
|
|
selectBox.addEventListener("input", filterResources);
|
|
|
|
|
resetButton.addEventListener("click", resetResources);
|
|
|
|
|
|
|
|
|
|
function refreshPanel(count, el) {
|
|
|
|
|
const panel = document.getElementById(
|
|
|
|
|
el.parentElement.getAttribute("aria-controls")
|
|
|
|
|
);
|
|
|
|
|
if (!panel) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
if (count === 0) {
|
|
|
|
|
panel.firstElementChild.classList.add("is-hidden");
|
|
|
|
|
panel.children[1].classList.remove("is-hidden");
|
|
|
|
|
} else {
|
|
|
|
|
panel.firstElementChild.classList.remove("is-hidden");
|
|
|
|
|
panel.children[1].classList.add("is-hidden");
|
|
|
|
|
}
|
2021-04-22 16:21:00 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
function refreshCounters() {
|
|
|
|
|
const map = {
|
|
|
|
|
"[data-kind='resource-unmanaged']": "[data-count='resource-unmanaged']",
|
|
|
|
|
"[data-kind='resource-changed']": "[data-count='resource-changed']",
|
|
|
|
|
"[data-kind='resource-deleted']": "[data-count='resource-deleted']",
|
|
|
|
|
"[data-kind='resource-alerts']": "[data-count='resource-alerts']",
|
|
|
|
|
};
|
|
|
|
|
for (const key in map) {
|
|
|
|
|
const countEl = document.querySelector(map[key]);
|
|
|
|
|
if (countEl) {
|
|
|
|
|
const count = Array.from(document.querySelectorAll(key)).filter(
|
|
|
|
|
(el) => !el.classList.contains("is-hidden")
|
|
|
|
|
).length;
|
|
|
|
|
countEl.textContent = count;
|
|
|
|
|
refreshPanel(count, countEl);
|
|
|
|
|
}
|
|
|
|
|
}
|
2021-04-22 16:21:00 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
function resourceIdContains(res, id) {
|
|
|
|
|
if (id === "") {
|
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
const el = res.querySelector("[data-type='resource-id']");
|
2021-04-22 16:21:00 +00:00
|
|
|
if (!el) {
|
2021-06-17 14:53:54 +00:00
|
|
|
return false;
|
2021-04-22 16:21:00 +00:00
|
|
|
}
|
2021-06-17 14:53:54 +00:00
|
|
|
return el.innerText.toLowerCase().includes(id.toLowerCase());
|
2021-04-22 16:21:00 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
function resourceTypeEquals(res, type) {
|
|
|
|
|
if (type === "") {
|
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
const el = res.querySelector("[data-type='resource-type']");
|
2021-04-22 16:21:00 +00:00
|
|
|
if (!el) {
|
2021-06-17 14:53:54 +00:00
|
|
|
return false;
|
2021-04-22 16:21:00 +00:00
|
|
|
}
|
2021-06-17 14:53:54 +00:00
|
|
|
return el.innerText === type;
|
2021-04-22 16:21:00 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
function filterResources() {
|
|
|
|
|
const id = searchInput.value;
|
|
|
|
|
const type = selectBox.value;
|
|
|
|
|
for (const res of resources) {
|
|
|
|
|
const matchId = resourceIdContains(res, id);
|
|
|
|
|
const matchType = resourceTypeEquals(res, type);
|
|
|
|
|
if (matchId && matchType) {
|
|
|
|
|
res.classList.remove("is-hidden");
|
|
|
|
|
} else {
|
|
|
|
|
res.classList.add("is-hidden");
|
2021-06-01 09:38:47 +00:00
|
|
|
}
|
|
|
|
|
}
|
2021-06-17 14:53:54 +00:00
|
|
|
refreshCounters();
|
2021-06-01 09:38:47 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
function resetResources() {
|
|
|
|
|
for (const res of resources) {
|
|
|
|
|
res.classList.remove("is-hidden");
|
2021-06-07 17:26:39 +00:00
|
|
|
}
|
2021-06-17 14:53:54 +00:00
|
|
|
refreshCounters();
|
|
|
|
|
}
|
2021-06-17 15:59:44 +00:00
|
|
|
|
|
|
|
|
resetResources()
|
2021-06-17 14:53:54 +00:00
|
|
|
</script>
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
const tablist = document.querySelector('[role="tablist"]')
|
|
|
|
|
const tabs = document.querySelectorAll('[role="tab"]')
|
|
|
|
|
const panels = document.querySelectorAll('[role="tabpanel"]')
|
|
|
|
|
const keys = {left: 37, right: 39}
|
|
|
|
|
const direction = {37: -1, 39: 1}
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < tabs.length; ++i) {
|
|
|
|
|
addListeners(i)
|
2021-06-07 17:26:39 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
function addListeners(index) {
|
|
|
|
|
tabs[index].addEventListener('click', clickEventListener)
|
|
|
|
|
tabs[index].addEventListener('keyup', keyupEventListener)
|
|
|
|
|
tabs[index].index = index
|
|
|
|
|
}
|
2021-04-22 16:21:00 +00:00
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
function clickEventListener(event) {
|
|
|
|
|
let tab
|
|
|
|
|
if (event.target.getAttribute("role") === "tab") {
|
|
|
|
|
tab = event.target
|
|
|
|
|
} else {
|
|
|
|
|
tab = event.target.closest("button")
|
|
|
|
|
}
|
|
|
|
|
const selected = tab.getAttribute("aria-selected")
|
|
|
|
|
if (selected === "false") {
|
|
|
|
|
activateTab(tab, false)
|
|
|
|
|
}
|
|
|
|
|
}
|
2021-04-22 16:21:00 +00:00
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
function keyupEventListener(event) {
|
|
|
|
|
const key = event.keyCode
|
|
|
|
|
switch (key) {
|
|
|
|
|
case keys.left:
|
|
|
|
|
case keys.right:
|
|
|
|
|
switchTabOnArrowPress(event)
|
|
|
|
|
break
|
|
|
|
|
}
|
|
|
|
|
}
|
2021-04-22 16:21:00 +00:00
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
function switchTabOnArrowPress(event) {
|
|
|
|
|
const pressed = event.keyCode
|
|
|
|
|
for (let x = 0; x < tabs.length; x++) {
|
|
|
|
|
tabs[x].addEventListener('focus', focusEventHandler)
|
|
|
|
|
}
|
|
|
|
|
if (direction[pressed]) {
|
|
|
|
|
const target = event.target
|
|
|
|
|
if (target.index !== undefined) {
|
|
|
|
|
if (tabs[target.index + direction[pressed]]) {
|
|
|
|
|
tabs[target.index + direction[pressed]].focus()
|
|
|
|
|
} else if (pressed === keys.left) {
|
|
|
|
|
tabs[tabs.length - 1].focus()
|
|
|
|
|
} else if (pressed === keys.right) {
|
|
|
|
|
tabs[0].focus()
|
|
|
|
|
}
|
|
|
|
|
}
|
2021-04-22 16:21:00 +00:00
|
|
|
}
|
2021-06-17 14:53:54 +00:00
|
|
|
}
|
2021-06-01 09:38:47 +00:00
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
function activateTab(tab, setFocus) {
|
|
|
|
|
setFocus = setFocus || true
|
|
|
|
|
deactivateTabs()
|
|
|
|
|
tab.removeAttribute('tabindex')
|
|
|
|
|
tab.setAttribute('aria-selected', 'true')
|
|
|
|
|
const controls = tab.getAttribute('aria-controls')
|
|
|
|
|
document.getElementById(controls).classList.remove('is-hidden')
|
|
|
|
|
if (setFocus) {
|
|
|
|
|
tab.focus()
|
|
|
|
|
}
|
2021-04-22 16:21:00 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
function deactivateTabs() {
|
|
|
|
|
for (let t = 0; t < tabs.length; t++) {
|
|
|
|
|
tabs[t].setAttribute('tabindex', '-1')
|
|
|
|
|
tabs[t].setAttribute('aria-selected', 'false')
|
|
|
|
|
tabs[t].removeEventListener('focus', focusEventHandler)
|
|
|
|
|
}
|
|
|
|
|
for (let p = 0; p < panels.length; p++) {
|
|
|
|
|
panels[p].classList.add('is-hidden')
|
|
|
|
|
}
|
2021-06-07 15:47:21 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-17 14:53:54 +00:00
|
|
|
function focusEventHandler(event) {
|
|
|
|
|
const target = event.target
|
|
|
|
|
if (target === document.activeElement) {
|
|
|
|
|
activateTab(target, false)
|
|
|
|
|
}
|
|
|
|
|
}
|
2021-04-22 16:21:00 +00:00
|
|
|
</script>
|
2021-06-17 14:53:54 +00:00
|
|
|
</body>
|
2021-06-01 09:38:47 +00:00
|
|
|
</html>
|
