From a27d993b13ad06eb70be0f78223aadcefa9e4541 Mon Sep 17 00:00:00 2001 From: sundowndev Date: Tue, 8 Jun 2021 17:14:28 +0200 Subject: [PATCH] refactor: html output custom style --- pkg/cmd/scan/output/assets/index.tmpl | 38 +- pkg/cmd/scan/output/assets/style.css | 70 ++- pkg/cmd/scan/output/html.go | 41 +- pkg/cmd/scan/output/html_test.go | 27 ++ pkg/cmd/scan/output/testdata/output.html | 138 ++++-- .../scan/output/testdata/output_empty.html | 458 ++++++++++++++++++ pkg/cmd/scan/output/testdata/output_sync.html | 428 ++++++++++++++++ 7 files changed, 1129 insertions(+), 71 deletions(-) create mode 100644 pkg/cmd/scan/output/testdata/output_empty.html create mode 100644 pkg/cmd/scan/output/testdata/output_sync.html diff --git a/pkg/cmd/scan/output/assets/index.tmpl b/pkg/cmd/scan/output/assets/index.tmpl index b5d40a67..cbe884e8 100644 --- a/pkg/cmd/scan/output/assets/index.tmpl +++ b/pkg/cmd/scan/output/assets/index.tmpl @@ -4,16 +4,28 @@ Driftctl scan report +
-

Driftctl scan report

+

Driftctl scan report

Coverage {{.Coverage}}%
-

{{ .ScanDate }}

+
+

{{ .ScanDate }}

+ Scan duration {{.ScanDuration}} +
+
+
+ Total resources: {{.Summary.TotalResources}} + Managed: {{rate .Summary.TotalManaged}}% + Changed: {{.Summary.TotalDrifted}}/{{.Summary.TotalManaged}} + Unmanaged: {{rate .Summary.TotalUnmanaged}}% + Missing: {{rate .Summary.TotalDeleted}}%
{{ if (lt .Coverage 100) }} @@ -56,16 +68,24 @@
{{ if (gt (len .Unmanaged) 0) }}
+
+ Resource id + Resource type +
{{range $res := .Unmanaged}}
{{$res.TerraformId}} - {{$res.TerraformType}} + {{$res.TerraformType}}
{{end}}
{{end}} {{ if (gt (len .Differences) 0) }}
+
+ Resource id + Resource type +
{{range $diff := .Differences}}
{{$diff.Res.TerraformId}} @@ -74,17 +94,21 @@
{{ formatChange $change }}
{{end}}
- {{$diff.Res.TerraformType}} + {{$diff.Res.TerraformType}}
{{end}}
{{end}} {{ if (gt (len .Deleted) 0) }}
+
+ Resource id + Resource type +
{{range $res := .Deleted}}
{{$res.TerraformId}} - {{$res.TerraformType}} + {{$res.TerraformType}}
{{end}}
@@ -94,8 +118,8 @@ {{range $type, $messages := .Alerts}} {{range $el := $messages}}
- {{ $type }} - - {{ $el.Message }} + {{ $type }} + {{ $el.Message }}
{{end}} {{end}} diff --git a/pkg/cmd/scan/output/assets/style.css b/pkg/cmd/scan/output/assets/style.css index fe7b9506..a3f89e68 100644 --- a/pkg/cmd/scan/output/assets/style.css +++ b/pkg/cmd/scan/output/assets/style.css @@ -1,5 +1,3 @@ -@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600&display=swap'); - /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) @@ -20,7 +18,6 @@ time, mark, audio, video { margin: 0; padding: 0; border: 0; - font-size: 100%; font: inherit; vertical-align: baseline; } @@ -45,7 +42,6 @@ blockquote, q { blockquote:before, blockquote:after, q:before, q:after { - content: ''; content: none; } @@ -62,7 +58,7 @@ table { } body { - font-family: 'Source Sans Pro', sans-serif; + font-family: "Helvetica", sans-serif; color: #1C1E21; background-color: #F7F7F9; padding-bottom: 50px; @@ -127,6 +123,26 @@ div.container { margin-bottom: 10px; } +.pa-1 { + padding: 10px; +} + +.pl-1 { + padding-left: 10px; +} + +.pr-1 { + padding-right: 10px; +} + +.pt-1 { + padding-top: 10px; +} + +.pb-1 { + padding-bottom: 10px; +} + input[type="text"], select { padding: 8px; @@ -144,6 +160,7 @@ select:focus { input[name="resource-id-filter"], select[name="resource-type-filter"] { width: 300px; + border-radius: 3px; } h1 { @@ -157,21 +174,32 @@ h2 { } .heading-title { - margin-bottom: 10px; + display: block; +} + +.heading-subtitle { + font-size: 14px; + display: block; } .app-content { padding: 25px; border-top: 3px solid #71B2C3; background-color: #ffffff; - border-radius: 0 0 10px 10px; + box-shadow: 0 0 5px #0000000a; } .resource-item { - border: 1px solid #ececec; - padding: 10px; - margin-top: 10px; + border-top: 1px solid #ececec; + border-left: 1px solid #ececec; + border-right: 1px solid #ececec; + padding: 15px; color: #6e7071; + font-size: 14px; +} + +.resource-item:last-child { + border-bottom: 1px solid #ececec; } .resource-item:hover { @@ -182,6 +210,22 @@ h2 { font-weight: bold; } +.text--grey { + color: #747578; +} + +.text--right { + text-align: right; +} + +.card { + padding: 15px; + font-size: 15px; + background: #ffffff; + box-shadow: 0 0 5px #0000000a; + border-radius: 3px; +} + .reset-filter-btn { border: none; padding: 8px; @@ -206,6 +250,7 @@ h2 { display: inline-block; color: #747578; transition: background-color 200ms; + border-radius: 3px; } .tab:hover { @@ -251,9 +296,8 @@ h2 { #two:checked ~ .tabs #two-tab, #three:checked ~ .tabs #three-tab, #four:checked ~ .tabs #four-tab { - background: transparent; - color: #747578; - border-bottom: 2px solid #71b2c3; + background: #71b2c3; + color: #ffffff; } .empty-message-container { diff --git a/pkg/cmd/scan/output/html.go b/pkg/cmd/scan/output/html.go index 34fd7cb3..50916a99 100644 --- a/pkg/cmd/scan/output/html.go +++ b/pkg/cmd/scan/output/html.go @@ -4,6 +4,7 @@ import ( "embed" "fmt" "html/template" + "math" "os" "strings" "time" @@ -26,14 +27,15 @@ type HTML struct { } type HTMLTemplateParams struct { - ScanDate string - Coverage int - Summary analyser.Summary - Unmanaged []resource.Resource - Differences []analyser.Difference - Deleted []resource.Resource - Alerts alerter.Alerts - Stylesheet template.CSS + ScanDate string + Coverage int + Summary analyser.Summary + Unmanaged []resource.Resource + Differences []analyser.Difference + Deleted []resource.Resource + Alerts alerter.Alerts + Stylesheet template.CSS + ScanDuration string } func NewHTML(path string) *HTML { @@ -92,6 +94,12 @@ func (c *HTML) Write(analysis *analyser.Analysis) error { return fmt.Sprintf("%s %s: %s => %s %s", prefix, strings.Join(ch.Path, "."), prettify(ch.From), prettify(ch.To), suffix) }, + "rate": func(count int) float64 { + if analysis.Summary().TotalResources == 0 { + return 0 + } + return math.Round(100 * float64(count) / float64(analysis.Summary().TotalResources)) + }, } tmpl, err := template.New("main").Funcs(funcMap).Parse(string(tmplFile)) @@ -100,14 +108,15 @@ func (c *HTML) Write(analysis *analyser.Analysis) error { } data := &HTMLTemplateParams{ - ScanDate: time.Now().Format("Jan 02, 2006"), - Summary: analysis.Summary(), - Coverage: analysis.Coverage(), - Unmanaged: analysis.Unmanaged(), - Differences: analysis.Differences(), - Deleted: analysis.Deleted(), - Alerts: analysis.Alerts(), - Stylesheet: template.CSS(styleFile), + ScanDate: time.Now().Format("Jan 02, 2006"), + Summary: analysis.Summary(), + Coverage: analysis.Coverage(), + Unmanaged: analysis.Unmanaged(), + Differences: analysis.Differences(), + Deleted: analysis.Deleted(), + Alerts: analysis.Alerts(), + Stylesheet: template.CSS(styleFile), + ScanDuration: analysis.Duration.Round(time.Second).String(), } err = tmpl.Execute(file, data) diff --git a/pkg/cmd/scan/output/html_test.go b/pkg/cmd/scan/output/html_test.go index 06f30905..c53ee5f0 100644 --- a/pkg/cmd/scan/output/html_test.go +++ b/pkg/cmd/scan/output/html_test.go @@ -4,6 +4,7 @@ import ( "io/ioutil" "path" "testing" + "time" "github.com/cloudskiff/driftctl/pkg/resource" testresource "github.com/cloudskiff/driftctl/test/resource" @@ -21,12 +22,38 @@ func TestHTML_Write(t *testing.T) { analysis func() *analyser.Analysis err error }{ + { + name: "test html output when there's no resources", + goldenfile: "output_empty.html", + analysis: func() *analyser.Analysis { + a := &analyser.Analysis{} + return a + }, + err: nil, + }, + { + name: "test html output when infrastructure is in sync", + goldenfile: "output_sync.html", + analysis: func() *analyser.Analysis { + a := &analyser.Analysis{} + a.Duration = 72 * time.Second + a.AddManaged( + &testresource.FakeResource{ + Id: "deleted-id-3", + Type: "aws_deleted_resource", + }, + ) + return a + }, + err: nil, + }, { name: "test html output", goldenfile: "output.html", analysis: func() *analyser.Analysis { a := fakeAnalysisWithAlerts() + a.Duration = 91 * time.Second a.AddDeleted( &testresource.FakeResource{ Id: "deleted-id-3", diff --git a/pkg/cmd/scan/output/testdata/output.html b/pkg/cmd/scan/output/testdata/output.html index 75bce948..ba320065 100644 --- a/pkg/cmd/scan/output/testdata/output.html +++ b/pkg/cmd/scan/output/testdata/output.html @@ -4,9 +4,9 @@ Driftctl scan report - + + +
+
+
+

Driftctl scan report

+ Coverage 0% +
+
+

Jun 08, 2021

+ Scan duration 0s +
+
+
+ Total resources: 0 + Managed: 0% + Changed: 0/0 + Unmanaged: 0% + Missing: 0% +
+
+ +
+
+ + + +
+
+ +
+ + + + +
+ + + + +
+
+ + + + +
+
+ +
+

There's nothing to see there...

+
+ +
+
+ + + diff --git a/pkg/cmd/scan/output/testdata/output_sync.html b/pkg/cmd/scan/output/testdata/output_sync.html new file mode 100644 index 00000000..a0989829 --- /dev/null +++ b/pkg/cmd/scan/output/testdata/output_sync.html @@ -0,0 +1,428 @@ + + + + Driftctl scan report + + + + + + +
+
+
+

Driftctl scan report

+ Coverage 100% +
+
+

Jun 08, 2021

+ Scan duration 1m12s +
+
+
+ Total resources: 1 + Managed: 100% + Changed: 0/1 + Unmanaged: 0% + Missing: 0% +
+
+ +
+

Congrats! Your infrastructure is in sync

+
+ +
+
+ + +