Skip to content

Commit 33b5fd3

Browse files
danmacphersondanmacpherson
authored
Patterns browser v2 (#501)
Creation of patterns browser v2 Includes: * New filtering mechanism that uses patterns params from JSON file * Adding AND and OR operators to filters used with taxonomies that allow multiple terms * Sorting functions (alphabetical and date) * Fixes to some of the creation dates for some patterns
1 parent 1229b58 commit 33b5fd3

File tree

10 files changed

+415
-75
lines changed

10 files changed

+415
-75
lines changed

‎content/patterns/ansible-edge-gitops-kasten/_index.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
title: OpenShift Virtualization Data Protection with Veeam Kasten
3+
date: 2024-11-06
34
tier: sandbox
45
summary: This pattern uses OpenShift Virtualization to simulate an edge environment for VMs, protected by Veeam Kasten.
56
rh_products:

‎content/patterns/cockroachdb/_index.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
title: Cockroach
3+
date: 2022-12-14
34
tier: sandbox
45
Summary: A multicloud pattern using cockroachdb and submariner, deployed via RHACM.
56
rh_products:

‎content/patterns/coco-pattern/_index.adoc‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ A core goal of confidential computing is to use this technology to isolate the w
3131
image::coco-pattern/isolation.png[Schematic describing the isolation of confidential contains from the hosting system]
3232

3333

34-
This pattern uses https://docs.redhat.com/en/documentation/openshift_sandboxed_containers/1.7/html/user_guide/deploying-on-azure#deploying-cc_azure-cc[Red Hat OpenShift sandbox containers] to deploy and configure confidential containers on Microsoft Azure.
34+
This pattern uses https://docs.redhat.com/en/documentation/openshift_sandboxed_containers/1.7/html/user_guide/deploying-on-azure#deploying-cc_azure-cc[Red Hat OpenShift sandbox containers] to deploy and configure confidential containers on Microsoft Azure.
3535

3636
It deploys three copies of 'Hello OpenShift' to demonstrate some of the security boundaries that enforced with confidential containers.
3737

@@ -46,7 +46,7 @@ It deploys three copies of 'Hello OpenShift' to demonstrate some of the security
4646
**This pattern is a demonstration only and contains configuration that is not best practice**
4747

4848
- The default configuration deploys everything in a single cluster for testing purposes. The https://www.ietf.org/archive/id/draft-ietf-rats-architecture-22.html[RATS] architecture mandates that the Key Broker Service (e.g. https://github.com/confidential-containers/trustee[Trustee]) is in a trusted security zone.
49-
- The https://github.com/confidential-containers/trustee/tree/main/attestation-service[Attestation Service] has wide open security policies.
49+
- The https://github.com/confidential-containers/trustee/tree/main/attestation-service[Attestation Service] has wide open security policies.
5050

5151
== Future work
5252

‎content/patterns/connected-vehicle-architecture/_index.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
title: Connected Vehicle Architecture
3+
date: 2022-12-14
34
tier: sandbox
45
Summary: A distributed cloud-native application that implements key aspects of a modern IoT architecture.
56
rh_products:

‎content/patterns/kong-gateway/_index.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
title: Kong
3+
date: 2022-12-14
34
tier: sandbox
45
Summary: A pattern for Kong Gateway Control Plane and Data Plane demo.
56
rh_products:

‎content/patterns/multicloud-gitops-Portworx/_index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Multicloud GitOps with Portworx Enterprise
3-
date: 2023-18-05
3+
date: 2023-05-18
44
tier: sandbox
55
summary: This pattern helps you develop and deploy applications on an open hybrid cloud in a stable, simple, and secure way. It includes persistent storage for stateful applications.
66
rh_products:

‎layouts/partials/menu-patterns-browser.html‎

Lines changed: 4 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -20,19 +20,7 @@ <h2 class="accordion-header" id="typeHeading">
2020
<div class="pf-c-accordion__expanded-content-body">
2121
<a href="/learn/about-pattern-tiers-types/">What do these tiers mean?</a>
2222
<div class="pf-c-select__menu-group">
23-
<fieldset class="pf-c-select__menu-fieldset" aria-labelledby="select-checkbox-expanded-selected-group-patterntype">
24-
<label class="pf-c-check pf-c-select__menu-item" for="type:maintained">
25-
<input class="pf-c-check__input" type="checkbox" onclick="filterSelection(this.id)" id="type:maintained" name="maintained"/>
26-
<span class="pf-c-check__label">Maintained</span>
27-
</label>
28-
<label class="pf-c-check pf-c-select__menu-item" for="type:tested">
29-
<input class="pf-c-check__input" type="checkbox" onclick="filterSelection(this.id)" id="type:tested" name="tested"/>
30-
<span class="pf-c-check__label">Tested</span>
31-
</label>
32-
<label class="pf-c-check pf-c-select__menu-item" for="type:sandbox">
33-
<input class="pf-c-check__input" type="checkbox" onclick="filterSelection(this.id)" id="type:sandbox" name="sandbox"/>
34-
<span class="pf-c-check__label">Sandbox</span>
35-
</label>
23+
<fieldset class="pf-c-select__menu-fieldset" aria-labelledby="select-checkbox-expanded-selected-group-patterntype" id="TiersItems">
3624
</fieldset>
3725
</div>
3826
</div>
@@ -56,13 +44,7 @@ <h2 class="accordion-header" id="industriesHeading">
5644
<div id="collapseIndustries" class="pf-c-accordion__expanded-content collapse" aria-labelledby="industriesHeading" data-bs-parent="#patternsAccordionNav">
5745
<div class="pf-c-accordion__expanded-content-body">
5846
<div class="pf-c-select__menu-group">
59-
<fieldset class="pf-c-select__menu-fieldset" aria-labelledby="select-checkbox-expanded-selected-group-industry">
60-
{{ range $name, $taxonomy := .Site.Taxonomies.industries }}
61-
<label class="pf-c-check pf-c-select__menu-item" for="industries:{{- $name | urlize -}}">
62-
<input class="pf-c-check__input" type="checkbox" id="industries:{{- $name | urlize -}}" onclick="filterSelection(this.id)" name="{{- $name | humanize | title -}}"/>
63-
<span class="pf-c-check__label">{{- $name | humanize | title -}}</span>
64-
</label>
65-
{{ end }}
47+
<fieldset class="pf-c-select__menu-fieldset" aria-labelledby="select-checkbox-expanded-selected-group-industry" id="IndustriesItems">
6648
</fieldset>
6749
</div>
6850
</div>
@@ -86,13 +68,7 @@ <h2 class="accordion-header" id="rhProductHeading">
8668
<div id="collapseRhProducts" class="pf-c-accordion__expanded-content collapse" aria-labelledby="productHeading" data-bs-parent="#patternsAccordionNav">
8769
<div class="pf-c-accordion__expanded-content-body">
8870
<div class="pf-c-select__menu-group">
89-
<fieldset class="pf-c-select__menu-fieldset" aria-labelledby="select-checkbox-expanded-selected-group-rh-products">
90-
{{ range $name, $taxonomy := .Site.Taxonomies.rh_products }}
91-
<label class="pf-c-check pf-c-select__menu-item" for="rh_products:{{- $name | urlize -}}">
92-
<input class="pf-c-check__input" type="checkbox" id="rh_products:{{- $name | urlize -}}" onclick="filterSelection(this.id)" name="{{ $taxonomy.Page.Title }}"/>
93-
<span class="pf-c-check__label wrappable">{{ $taxonomy.Page.Title }}</span>
94-
</label>
95-
{{ end }}
71+
<fieldset class="pf-c-select__menu-fieldset" aria-labelledby="select-checkbox-expanded-selected-group-rh-products" id="RhProductsItems">
9672
</fieldset>
9773
</div>
9874
</div>
@@ -116,13 +92,7 @@ <h2 class="accordion-header" id="otherProductHeading">
11692
<div id="collapseOtherProducts" class="pf-c-accordion__expanded-content collapse" aria-labelledby="otherProductHeading" data-bs-parent="#patternsAccordionNav">
11793
<div class="pf-c-accordion__expanded-content-body">
11894
<div class="pf-c-select__menu-group">
119-
<fieldset class="pf-c-select__menu-fieldset" aria-labelledby="select-checkbox-expanded-selected-group-RHproducts">
120-
{{ range $name, $taxonomy := .Site.Taxonomies.other_products }}
121-
<label class="pf-c-check pf-c-select__menu-item" for="other_products:{{- $name | urlize -}}">
122-
<input class="pf-c-check__input" type="checkbox" id="other_products:{{- $name | urlize -}}" onclick="filterSelection(this.id)" name="{{ $taxonomy.Page.Title }}"/>
123-
<span class="pf-c-check__label wrappable">{{ $taxonomy.Page.Title }}</span>
124-
</label>
125-
{{ end }}
95+
<fieldset class="pf-c-select__menu-fieldset" aria-labelledby="select-checkbox-expanded-selected-group-otherproducts" id="OtherProductsItems">
12696
</fieldset>
12797
</div>
12898
</div>

‎layouts/partials/patterns-browser.html‎

Lines changed: 22 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -25,45 +25,35 @@ <h1 class="pf-c-title pf-m-4xl">
2525
{{ $patterns := where $.Pages "Section" "patterns"}}
2626
<div class="pf-l-stack pf-m-gutter">
2727
<div class="pf-l-stack__item pf-u-text-align-right pattern-count-style">
28-
<span id="pattern-count">{{- len $patterns -}}</span> of {{ len $patterns }} patterns displayed
28+
<label class="pf-c-form__label" for="form-vertical-name">
29+
<span class="pf-c-form__label-text">Sort:</span>
30+
</label>
31+
<select
32+
class
33+
id="select-pattern-sort"
34+
name="select-pattern-sort"
35+
aria-label="Selector for pattern sort"
36+
onchange="filterSelection()"
37+
>
38+
<option value="atoz" selected>A to Z</option>
39+
<option value="ztoa">Z to A</option>
40+
<option value="newest">Newest</option>
41+
<option value="oldest">Oldest</option>
42+
</select>
43+
</div>
44+
<div class="pf-l-stack__item pf-u-text-align-right pattern-count-style" id="pattern-counter">
45+
</div>
46+
<div class="pf-l-stack__item" id="patternLoaderSpinner">
2947
</div>
3048
<div class="pf-l-stack__item">
31-
<div class="pf-l-gallery pf-m-gutter" style="--pf-l-gallery--GridTemplateColumns--min: 300px;">
32-
{{ range $pattern := $patterns.ByTitle }}
33-
{{ $data := newScratch }}
34-
{{ $data.Set "tags" slice }}
35-
{{ $params := .Params }}
36-
{{ range $taxonomyname, $taxonomy := .Site.Taxonomies }}
37-
38-
{{ if isset $params $taxonomyname }}
39-
{{ range $term := $pattern.Param $taxonomyname }}
40-
{{ $taglist := $data.Get "tags" }}
41-
{{ $taglist := $taglist | append (string (printf "%s:%s" $taxonomyname ($term | urlize) | printf "%s" )) }}
42-
{{ $data.Set "tags" $taglist }}
43-
{{ end }}
44-
45-
{{ end }}
46-
{{ end }}
47-
{{ $taglist := $data.Get "tags" }}
48-
{{ $validated := .Param "tier" }}
49-
{{ if (eq $validated "maintained" ) }}
50-
{{ .Scratch.Set "patterntype" "type:maintained" }}
51-
{{ else if (eq $validated "tested" ) }}
52-
{{ .Scratch.Set "patterntype" "type:tested" }}
53-
{{ else }}
54-
{{ .Scratch.Set "patterntype" "type:sandbox" }}
55-
{{ end }}
56-
{{ $patterntype := .Scratch.Get "patterntype" }}
57-
<div class="pf-l-gallery__item filterDiv" tag-data="{{ delimit $taglist " " }} {{ $patterntype }}" style="display: grid;">
58-
{{ .Render "summary-with-image" }}
59-
</div>
60-
{{ end }}
49+
<div class="pf-l-gallery pf-m-gutter" style="--pf-l-gallery--GridTemplateColumns--min: 300px;" id="patternCards">
6150
</div>
6251
</div>
6352
</div>
6453
</div>
6554
</div>
66-
<script src="{{ "js/filter.js" | relURL }}"></script>
55+
<div id="debug"></div>
56+
<script src="{{ "js/patterns-browser-v2.js" | relURL }}"></script>
6757
</section>
6858
{{ partial "footer.html" . }}
6959
</main>

‎layouts/patterns/list.json.json‎

Lines changed: 45 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,48 @@
11
{{- if (eq .RelPermalink "/patterns/") }}
2+
3+
{{/* Patterns */}}
24
{{- $patterns := where $.Pages "Section" "patterns"}}
3-
{{- $patterns_len := $patterns | len }}
4-
{{- $pattern_list := slice }}
5-
{{- range $index, $pattern := $patterns.ByTitle }}
6-
{{- $pattern_list = $pattern_list | append (dict $pattern.Title $pattern.Params) }}
7-
{{- end }}
8-
{{- $pattern_list | jsonify }}
5+
{{- $pattern_list := slice }}
6+
{{- range $index, $pattern := $patterns.ByTitle }}
7+
{{- $object := dict "Name" $pattern.LinkTitle "Link" $pattern.RelPermalink "Params" $pattern.Params -}}
8+
{{- $pattern_list = $pattern_list | append $object -}}
9+
{{- end }}
10+
11+
{{/* Red Hat Products */}}
12+
{{- $rh_products := .Site.Taxonomies.rh_products }}
13+
{{- $rh_products_list := slice }}
14+
{{- range $index, $rh_product := $rh_products.Alphabetical }}
15+
{{- $rh_products_list = $rh_products_list | append (dict "Name" $rh_product.Name "LinkTitle" $rh_product.Page.LinkTitle) }}
16+
{{- end }}
17+
{{- $rh_products_filter_types := slice "AND" "OR" }}
18+
{{- $rh_products_dict := dict "filter_list" $rh_products_list "filter_types" $rh_products_filter_types }}
19+
20+
{{/* Other Products */}}
21+
{{- $other_products := .Site.Taxonomies.other_products }}
22+
{{- $other_products_list := slice }}
23+
{{- range $index, $other_product := $other_products.Alphabetical }}
24+
{{- $other_products_list = $other_products_list | append (dict "Name" $other_product.Name "LinkTitle" $other_product.Page.LinkTitle) }}
25+
{{- end }}
26+
{{- $other_products_filter_types := slice "AND" "OR" }}
27+
{{- $other_products_dict := dict "filter_list" $other_products_list "filter_types" $other_products_filter_types }}
28+
29+
{{/* Industries */}}
30+
{{- $industries := .Site.Taxonomies.industries }}
31+
{{- $industries_list := slice }}
32+
{{- range $index, $industry := $industries.Alphabetical }}
33+
{{- $industries_list = $industries_list | append (dict "Name" $industry.Name "LinkTitle" $industry.Page.LinkTitle) }}
34+
{{- end }}
35+
{{- $industries_filter_types := slice "AND" "OR" }}
36+
{{- $industries_dict := dict "filter_list" $industries_list "filter_types" $industries_filter_types }}
37+
38+
{{/* Tiers */}}
39+
{{- $tiers_list := slice -}}
40+
{{- $tiers_list = $tiers_list | append (dict "Name" "maintained" "LinkTitle" "Maintained" "color" "green") }}
41+
{{- $tiers_list = $tiers_list | append (dict "Name" "tested" "LinkTitle" "Tested" "color" "blue") }}
42+
{{- $tiers_list = $tiers_list | append (dict "Name" "sandbox" "LinkTitle" "Sandbox" "color" "oragne") }}
43+
{{- $tiers_filter_types := slice "OR" }}
44+
{{- $tiers_dict := dict "filter_list" $tiers_list "filter_types" $tiers_filter_types }}
45+
46+
{{- $filter_categories := dict "rh_products" $rh_products_dict "other_products" $other_products_dict "industries" $industries_dict "tier" $tiers_dict -}}
47+
{{- dict "patterns" $pattern_list "filter_categories" $filter_categories | jsonify }}
948
{{- end }}

0 commit comments

Comments
 (0)