Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: adding display of multiple CRDs on a single webpage #111

Merged
merged 1 commit into from
Oct 3, 2024
Merged

feat: adding display of multiple CRDs on a single webpage #111

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,11 @@ cty generate -c delivery.krok.app_krokcommands --comments --format html
![parsed1_cli](./imgs/parsed1_cli.png)
![parsed2_cli](./imgs/parsed2_cli.png)

In case of multiple CRD files being parsed using a `folder` target, the CRDs will be listed
in collapsed drop-down menus where their KIND is the title.

![parsed3_cli](./imgs/parsed3_cli.png)

### Minimal required CRD sample

It's possible to generate a sample YAML for a CRD that will make the CRD validation pass. Meaning, it will only contain
Expand Down
21 changes: 15 additions & 6 deletions cmd/generate.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,21 @@ func runGenerate(_ *cobra.Command, _ []string) error {

var w io.WriteCloser

if args.format == FormatHTML {
if args.stdOut {
w = os.Stdout
} else {
w, err = os.Create(args.output)
if err != nil {
return fmt.Errorf("failed to create output file: %w", err)
}

defer w.Close()
}

return pkg.RenderContent(w, crds, args.comments, args.minimal)
}

var errs []error //nolint:prealloc // nope
for _, crd := range crds {
if args.stdOut {
Expand All @@ -112,12 +127,6 @@ func runGenerate(_ *cobra.Command, _ []string) error {
w = outputFile
}

if args.format == FormatHTML {
errs = append(errs, pkg.RenderContent(w, crd, args.comments, args.minimal))

continue
}

errs = append(errs, pkg.Generate(crd, w, args.comments, args.minimal, args.skipRandom))
}

Expand Down
11 changes: 0 additions & 11 deletions gotemplates.gotemplating.fn.crossplane.io_sample.yaml
View file
Open in desktop

This file was deleted.

Binary file added imgs/parsed3_cli.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
69 changes: 46 additions & 23 deletions pkg/create_html_output.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@ import (
v1 "k8s.io/apiextensions-apiserver/pkg/apis/apiextensions/v1"
)

type Index struct {
Page []ViewPage
}

// Version wraps a top level version resource which contains the underlying openAPIV3Schema.
type Version struct {
Version string
Expand All @@ -26,6 +30,7 @@ type Version struct {

// ViewPage is the template for view.html.
type ViewPage struct {
Title string
Versions []Version
}

Expand Down Expand Up @@ -61,40 +66,58 @@ func LoadTemplates() error {
}

// RenderContent creates an HTML website from the CRD content.
func RenderContent(w io.WriteCloser, crd *v1.CustomResourceDefinition, comments, minimal bool) (err error) {
func RenderContent(w io.WriteCloser, crds []*v1.CustomResourceDefinition, comments, minimal bool) (err error) {
defer func() {
if cerr := w.Close(); cerr != nil {
err = errors.Join(err, cerr)
}
}()

versions := make([]Version, 0)
parser := NewParser(crd.Spec.Group, crd.Spec.Names.Kind, comments, minimal, false)
allViews := make([]ViewPage, 0, len(crds))

for _, version := range crd.Spec.Versions {
out, err := parseCRD(version.Schema.OpenAPIV3Schema.Properties, version.Name, minimal, RootRequiredFields)
if err != nil {
return fmt.Errorf("failed to parse properties: %w", err)
for _, crd := range crds {
versions := make([]Version, 0)
parser := NewParser(crd.Spec.Group, crd.Spec.Names.Kind, comments, minimal, false)

for _, version := range crd.Spec.Versions {
out, err := parseCRD(version.Schema.OpenAPIV3Schema.Properties, version.Name, minimal, RootRequiredFields)
if err != nil {
return fmt.Errorf("failed to parse properties: %w", err)
}
var buffer []byte
buf := bytes.NewBuffer(buffer)
if err := parser.ParseProperties(version.Name, buf, version.Schema.OpenAPIV3Schema.Properties); err != nil {
return fmt.Errorf("failed to generate yaml sample: %w", err)
}
versions = append(versions, Version{
Version: version.Name,
Properties: out,
Kind: crd.Spec.Names.Kind,
Group: crd.Spec.Group,
Description: version.Schema.OpenAPIV3Schema.Description,
YAML: buf.String(),
})
}
var buffer []byte
buf := bytes.NewBuffer(buffer)
if err := parser.ParseProperties(version.Name, buf, version.Schema.OpenAPIV3Schema.Properties); err != nil {
return fmt.Errorf("failed to generate yaml sample: %w", err)

if len(versions) == 0 {
continue
}
versions = append(versions, Version{
Version: version.Name,
Properties: out,
Kind: crd.Spec.Names.Kind,
Group: crd.Spec.Group,
Description: version.Schema.OpenAPIV3Schema.Description,
YAML: buf.String(),
})
}
view := ViewPage{
Versions: versions,

view := ViewPage{
Title: crd.Spec.Names.Kind,
Versions: versions,
}

allViews = append(allViews, view)
}

t := templates["view.html"]
if err := t.Execute(w, view); err != nil {

index := Index{
Page: allViews,
}

if err := t.Execute(w, index); err != nil {
return fmt.Errorf("failed to execute template: %w", err)
}

Expand Down
128 changes: 62 additions & 66 deletions pkg/templates/view.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,82 +31,78 @@
padding-bottom: 2rem;
}
</style>
<style>

<!-- User Provided CSS is put here. -->
<style>
</style>
</head>

<body class="dark-mode" data-dm-shortcut-enabled="true" data-sidebar-shortcut-enabled="true">
<div class="content-wrapper">
<div class="container">
<div class="versions">
{{range .Versions}}
<h1>
Version: {{.Group}}/{{.Version}}<br>
Kind: {{.Kind}}
</h1>
<p class="font-size-18">
<div>
<p>{{.Description}}</p>
</div>
<label>Generated YAML sample:</label>
<div class="collapse-group">
<details class="collapse-panel">
<div id="yaml-{{.Version}}" class="collapse-content">
<pre class="language-yaml"><code class="language-yaml">{{.YAML}}</code></pre>
</div>
</details>
</div>
</p>
<div class="d-flex flex-row-reverse mb-10 mt-10">
<button class="btn ml-10" type="button" onclick="expandAll()">
+ expand all
</button>
<button class="btn" type="button" onclick="collapseAll()">
- collapse all
</button>
</div>
<div class="collapse-group">
{{range $i, $v := .Properties}}
<details class="collapse-panel">
<summary class="collapse-header position-relative">
{{$v.Name}} <kbd class="text-muted">{{$v.Type}}</kbd>
{{if $v.Format}}
<kbd class="text-muted">{{.Format}}</kbd>
{{end}}
{{if $v.Patterns}}
<kbd class="text-muted">{{.Patterns}}</kbd>
{{end}}
{{if $v.Default}}
<kbd class="text-primary">{{$v.Default}}</kbd>
{{end}}
{{if $v.Required}}
<span class="badge badge-primary">required</span>
<h2 style="text-align: center">The following CRDs have been rendered</h2>

{{range .Page}}
<details class="collapse-panel mw-full mt-10 mr-20 ml-20 px-md-20"> <!-- w-400 = width: 40rem (400px), mw-full = max-width: 100% -->
<summary class="collapse-header">
{{.Title}}
</summary>
<div class="collapse-content">
<div class="versions">
{{range .Versions}}
<h1>
Version: {{.Group}}/{{.Version}}<br>
Kind: {{.Kind}}
</h1>
<p class="font-size-18">
<div>
<p>{{.Description}}</p>
</div>
<label>Generated YAML sample:</label>
<div class="collapse-group">
<details class="collapse-panel">
<div id="yaml-{{.Version}}" class="collapse-content">
<pre class="language-yaml"><code class="language-yaml">{{.YAML}}</code></pre>
</div>
</details>
</div>
</p>
<div class="collapse-group">
{{range $i, $v := .Properties}}
<details class="collapse-panel">
<summary class="collapse-header position-relative">
{{$v.Name}} <kbd class="text-muted">{{$v.Type}}</kbd>
{{if $v.Format}}
<kbd class="text-muted">{{.Format}}</kbd>
{{end}}
{{if $v.Patterns}}
<kbd class="text-muted">{{.Patterns}}</kbd>
{{end}}
{{if $v.Default}}
<kbd class="text-primary">{{$v.Default}}</kbd>
{{end}}
{{if $v.Required}}
<span class="badge badge-primary">required</span>
{{end}}
</summary>
<div id="{{$v.Name}}" class="collapse-content">
<div class="property-description">
<p>{{$v.Description}}</p>
</div>
{{template "properties" .Properties}}
</div>
<br>
</details>
{{end}}
</summary>
<div id="{{$v.Name}}" class="collapse-content">
<div class="property-description">
<p>{{$v.Description}}</p>
</div>
{{template "properties" .Properties}}
</div>
<br>
</details>
{{end}}
{{end}}
</div>
</div>
{{end}}
</div>
</div>
</details>
{{end}}
<!-- <div class="container">-->
<!-- -->
<!-- </div>-->
</div>
<script>
function expandAll() {
console.log("todo: loop through all elements and expand them")
}

function collapseAll() {
console.log("todo: loop through all elements and collapse them")
}
</script>
</body>
</html>

Expand Down