refactor: diffs custom style
parent
76613149c1
commit
21747180d9
|
@ -87,14 +87,44 @@
|
|||
<span>Resource type</span>
|
||||
</div>
|
||||
{{range $diff := .Differences}}
|
||||
<div class="resource-item resource-item-changed d-flex justify-space-between">
|
||||
<span class="resource-item-id">{{$diff.Res.TerraformId}}</span>
|
||||
<div>
|
||||
{{range $change := $diff.Changelog}}
|
||||
<div>{{ formatChange $change }}</div>
|
||||
{{end}}
|
||||
<div class="resource-item resource-item-changed">
|
||||
<div class="d-flex justify-space-between">
|
||||
<span class="resource-item-id">{{$diff.Res.TerraformId}}</span>
|
||||
<span class="resource-item-type">{{$diff.Res.TerraformType}}</span>
|
||||
</div>
|
||||
<div class="code-box mt-2">
|
||||
<ol>
|
||||
{{range $change := $diff.Changelog}}
|
||||
<li class="code-box-line">
|
||||
{{ range $index, $path := $change.Path }}
|
||||
<div style="margin-top:5px;">
|
||||
{{/* Add indentation for each YAML field */}}
|
||||
{{ repeatString " " $index }}
|
||||
{{ if eq (isInt .) true }}-{{ else }}
|
||||
{{ $path }}:
|
||||
{{end}}
|
||||
|
||||
{{/* If it's the last path key, display value difference */}}
|
||||
{{ if eq (len $change.Path) (sum $index 1) }}
|
||||
{{ if eq $change.Type "delete" }}
|
||||
<span class="code-box-line-delete">{{ prettify $change.From }}</span>
|
||||
{{end}}
|
||||
|
||||
{{ if eq $change.Type "create" }}
|
||||
<span class="code-box-line-create">{{ prettify $change.To }}</span>
|
||||
{{end}}
|
||||
|
||||
{{ if eq $change.Type "update" }}
|
||||
<span class="code-box-line-delete">{{ prettify $change.From }}</span> => <span
|
||||
class="code-box-line-create">{{ prettify $change.To }}</span>
|
||||
{{end}}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{end}}
|
||||
</li>
|
||||
{{end}}
|
||||
</ol>
|
||||
</div>
|
||||
<span class="resource-item-type">{{$diff.Res.TerraformType}}</span>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
|
|
|
@ -206,6 +206,10 @@ h2 {
|
|||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.resource-item.resource-item-changed:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.text--bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
@ -302,4 +306,37 @@ h2 {
|
|||
|
||||
.empty-message-container {
|
||||
color: #747578;
|
||||
}
|
||||
|
||||
.code-box {
|
||||
padding: 5px;
|
||||
background: #f6f8fa;
|
||||
color: #747578;
|
||||
margin-top: 21px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.code-box ol {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.code-box .code-box-line {
|
||||
padding: 8px;
|
||||
border-radius: 2px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
span.code-box-line-create {
|
||||
background-color: #22863a1a;
|
||||
color: #22863a;
|
||||
padding: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
span.code-box-line-delete {
|
||||
text-decoration: line-through;
|
||||
background-color: #bf404a17;
|
||||
color: #bf404a;
|
||||
padding: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
|
@ -168,7 +168,7 @@ func (c Console) writeSummary(analysis *analyser.Analysis) {
|
|||
func prettify(resource interface{}) string {
|
||||
res := reflect.ValueOf(resource)
|
||||
if resource == nil || res.Kind() == reflect.Ptr && res.IsNil() {
|
||||
return "<nil>"
|
||||
return "<null>"
|
||||
}
|
||||
|
||||
return awsutil.Prettify(resource)
|
||||
|
|
|
@ -6,6 +6,7 @@ import (
|
|||
"html/template"
|
||||
"math"
|
||||
"os"
|
||||
"strconv"
|
||||
"strings"
|
||||
"time"
|
||||
|
||||
|
@ -100,6 +101,26 @@ func (c *HTML) Write(analysis *analyser.Analysis) error {
|
|||
}
|
||||
return math.Round(100 * float64(count) / float64(analysis.Summary().TotalResources))
|
||||
},
|
||||
"isInt": func(str string) bool {
|
||||
_, err := strconv.ParseInt(str, 10, 32)
|
||||
if err != nil {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
},
|
||||
"prettify": func(res interface{}) string {
|
||||
return prettify(res)
|
||||
},
|
||||
"sum": func(n ...int) int {
|
||||
total := 0
|
||||
for _, v := range n {
|
||||
total += v
|
||||
}
|
||||
return total
|
||||
},
|
||||
"repeatString": func(s string, count int) template.HTML {
|
||||
return template.HTML(strings.Repeat(s, count))
|
||||
},
|
||||
}
|
||||
|
||||
tmpl, err := template.New("main").Funcs(funcMap).Parse(string(tmplFile))
|
||||
|
|
|
@ -90,15 +90,47 @@ func TestHTML_Write(t *testing.T) {
|
|||
},
|
||||
)
|
||||
a.AddDifference(analyser.Difference{Res: &testresource.FakeResource{
|
||||
Id: "diff-id-1",
|
||||
Id: "diff-id-2",
|
||||
Type: "aws_diff_resource",
|
||||
}, Changelog: []analyser.Change{
|
||||
{
|
||||
Change: diff.Change{
|
||||
Type: diff.DELETE,
|
||||
Path: []string{"path", "to", "field"},
|
||||
Path: []string{"path", "to", "fields", "0"},
|
||||
From: []string{"value"},
|
||||
To: nil,
|
||||
},
|
||||
},
|
||||
{
|
||||
Change: diff.Change{
|
||||
Type: diff.DELETE,
|
||||
Path: []string{"path", "to", "fields", "1"},
|
||||
From: []string{"test"},
|
||||
To: nil,
|
||||
},
|
||||
},
|
||||
{
|
||||
Change: diff.Change{
|
||||
Type: diff.DELETE,
|
||||
Path: []string{"group_id"},
|
||||
From: []string{"a071314398026"},
|
||||
To: nil,
|
||||
},
|
||||
},
|
||||
{
|
||||
Change: diff.Change{
|
||||
Type: diff.CREATE,
|
||||
Path: []string{"Tags", "Name"},
|
||||
From: nil,
|
||||
To: []string{"value"},
|
||||
To: "aws-www-1-root",
|
||||
},
|
||||
},
|
||||
{
|
||||
Change: diff.Change{
|
||||
Type: diff.UPDATE,
|
||||
Path: []string{"InstanceInitiatedShutdownBehavior"},
|
||||
From: "",
|
||||
To: nil,
|
||||
},
|
||||
},
|
||||
}})
|
||||
|
|
|
@ -214,6 +214,10 @@ h2 {
|
|||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.resource-item.resource-item-changed:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.text--bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
@ -310,6 +314,39 @@ h2 {
|
|||
|
||||
.empty-message-container {
|
||||
color: #747578;
|
||||
}
|
||||
|
||||
.code-box {
|
||||
padding: 5px;
|
||||
background: #f6f8fa;
|
||||
color: #747578;
|
||||
margin-top: 21px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.code-box ol {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.code-box .code-box-line {
|
||||
padding: 8px;
|
||||
border-radius: 2px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
span.code-box-line-create {
|
||||
background-color: #22863a1a;
|
||||
color: #22863a;
|
||||
padding: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
span.code-box-line-delete {
|
||||
text-decoration: line-through;
|
||||
background-color: #bf404a17;
|
||||
color: #bf404a;
|
||||
padding: 3px;
|
||||
border-radius: 3px;
|
||||
}</style>
|
||||
</head>
|
||||
<body>
|
||||
|
@ -415,28 +452,300 @@ h2 {
|
|||
<span>Resource type</span>
|
||||
</div>
|
||||
|
||||
<div class="resource-item resource-item-changed d-flex justify-space-between">
|
||||
<span class="resource-item-id">diff-id-1</span>
|
||||
<div>
|
||||
|
||||
<div>~ updated.field: "foobar" => "barfoo" </div>
|
||||
|
||||
<div>+ new.field: <nil> => "newValue" </div>
|
||||
|
||||
<div>- a: "oldValue" => <nil> </div>
|
||||
|
||||
<div class="resource-item resource-item-changed">
|
||||
<div class="d-flex justify-space-between">
|
||||
<span class="resource-item-id">diff-id-1</span>
|
||||
<span class="resource-item-type">aws_diff_resource</span>
|
||||
</div>
|
||||
<div class="code-box mt-2">
|
||||
<ol>
|
||||
|
||||
<li class="code-box-line">
|
||||
|
||||
<div style="margin-top:5px;">
|
||||
|
||||
|
||||
|
||||
updated:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div style="margin-top:5px;">
|
||||
|
||||
 
|
||||
|
||||
field:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<span class="code-box-line-delete">"foobar"</span> => <span
|
||||
class="code-box-line-create">"barfoo"</span>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li class="code-box-line">
|
||||
|
||||
<div style="margin-top:5px;">
|
||||
|
||||
|
||||
|
||||
new:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div style="margin-top:5px;">
|
||||
|
||||
 
|
||||
|
||||
field:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<span class="code-box-line-create">"newValue"</span>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li class="code-box-line">
|
||||
|
||||
<div style="margin-top:5px;">
|
||||
|
||||
|
||||
|
||||
a:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<span class="code-box-line-delete">"oldValue"</span>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
</div>
|
||||
<span class="resource-item-type">aws_diff_resource</span>
|
||||
</div>
|
||||
|
||||
<div class="resource-item resource-item-changed d-flex justify-space-between">
|
||||
<span class="resource-item-id">diff-id-1</span>
|
||||
<div>
|
||||
|
||||
<div>- path.to.field: <nil> => ["value"] </div>
|
||||
|
||||
<div class="resource-item resource-item-changed">
|
||||
<div class="d-flex justify-space-between">
|
||||
<span class="resource-item-id">diff-id-2</span>
|
||||
<span class="resource-item-type">aws_diff_resource</span>
|
||||
</div>
|
||||
<div class="code-box mt-2">
|
||||
<ol>
|
||||
|
||||
<li class="code-box-line">
|
||||
|
||||
<div style="margin-top:5px;">
|
||||
|
||||
|
||||
|
||||
path:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div style="margin-top:5px;">
|
||||
|
||||
 
|
||||
|
||||
to:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div style="margin-top:5px;">
|
||||
|
||||
  
|
||||
|
||||
fields:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div style="margin-top:5px;">
|
||||
|
||||
   
|
||||
-
|
||||
|
||||
|
||||
|
||||
|
||||
<span class="code-box-line-delete">["value"]</span>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li class="code-box-line">
|
||||
|
||||
<div style="margin-top:5px;">
|
||||
|
||||
|
||||
|
||||
path:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div style="margin-top:5px;">
|
||||
|
||||
 
|
||||
|
||||
to:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div style="margin-top:5px;">
|
||||
|
||||
  
|
||||
|
||||
fields:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div style="margin-top:5px;">
|
||||
|
||||
   
|
||||
-
|
||||
|
||||
|
||||
|
||||
|
||||
<span class="code-box-line-delete">["test"]</span>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li class="code-box-line">
|
||||
|
||||
<div style="margin-top:5px;">
|
||||
|
||||
|
||||
|
||||
group_id:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<span class="code-box-line-delete">["a071314398026"]</span>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li class="code-box-line">
|
||||
|
||||
<div style="margin-top:5px;">
|
||||
|
||||
|
||||
|
||||
Tags:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div style="margin-top:5px;">
|
||||
|
||||
 
|
||||
|
||||
Name:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<span class="code-box-line-create">"aws-www-1-root"</span>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li class="code-box-line">
|
||||
|
||||
<div style="margin-top:5px;">
|
||||
|
||||
|
||||
|
||||
InstanceInitiatedShutdownBehavior:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<span class="code-box-line-delete">""</span> => <span
|
||||
class="code-box-line-create"><null></span>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
</div>
|
||||
<span class="resource-item-type">aws_diff_resource</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
@ -16,8 +16,8 @@ Found resources not covered by IaC:
|
|||
Found changed resources:
|
||||
- diff-id-1 (aws_diff_resource):
|
||||
~ updated.field: "foobar" => "barfoo"
|
||||
+ new.field: <nil> => "newValue"
|
||||
- a: "oldValue" => <nil>
|
||||
+ new.field: <null> => "newValue"
|
||||
- a: "oldValue" => <null>
|
||||
Found 10 resource(s)
|
||||
- 20% coverage
|
||||
- 2 covered by IaC
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
Found changed resources:
|
||||
- diff-id-1 (aws_diff_resource):
|
||||
~ updated.field: "foobar" => "barfoo" (computed)
|
||||
+ new.field: <nil> => "newValue"
|
||||
- a: "oldValue" => <nil> (computed)
|
||||
+ new.field: <null> => "newValue"
|
||||
- a: "oldValue" => <null> (computed)
|
||||
~ struct.0.array.0: "foo" => "oof" (computed)
|
||||
~ struct.0.string: "one" => "two" (computed)
|
||||
Found 1 resource(s)
|
||||
|
|
|
@ -214,6 +214,10 @@ h2 {
|
|||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.resource-item.resource-item-changed:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.text--bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
@ -310,6 +314,39 @@ h2 {
|
|||
|
||||
.empty-message-container {
|
||||
color: #747578;
|
||||
}
|
||||
|
||||
.code-box {
|
||||
padding: 5px;
|
||||
background: #f6f8fa;
|
||||
color: #747578;
|
||||
margin-top: 21px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.code-box ol {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.code-box .code-box-line {
|
||||
padding: 8px;
|
||||
border-radius: 2px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
span.code-box-line-create {
|
||||
background-color: #22863a1a;
|
||||
color: #22863a;
|
||||
padding: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
span.code-box-line-delete {
|
||||
text-decoration: line-through;
|
||||
background-color: #bf404a17;
|
||||
color: #bf404a;
|
||||
padding: 3px;
|
||||
border-radius: 3px;
|
||||
}</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
@ -214,6 +214,10 @@ h2 {
|
|||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.resource-item.resource-item-changed:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.text--bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
@ -310,6 +314,39 @@ h2 {
|
|||
|
||||
.empty-message-container {
|
||||
color: #747578;
|
||||
}
|
||||
|
||||
.code-box {
|
||||
padding: 5px;
|
||||
background: #f6f8fa;
|
||||
color: #747578;
|
||||
margin-top: 21px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.code-box ol {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.code-box .code-box-line {
|
||||
padding: 8px;
|
||||
border-radius: 2px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
span.code-box-line-create {
|
||||
background-color: #22863a1a;
|
||||
color: #22863a;
|
||||
padding: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
span.code-box-line-delete {
|
||||
text-decoration: line-through;
|
||||
background-color: #bf404a17;
|
||||
color: #bf404a;
|
||||
padding: 3px;
|
||||
border-radius: 3px;
|
||||
}</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
Loading…
Reference in New Issue