add a "flag" filter to registry (#5328)

Author: taylorhelene

assets/js/registrySearch.js

@@ -38,6 +38,7 @@ let pathName = window.location.pathname;
 let searchQuery = '';
 let selectedLanguage = 'all';
 let selectedComponent = 'all';
+let selectedFlag = 'all'; // Added selectedFlag
 
 parseUrlParams();
 
@@ -49,7 +50,12 @@ if (pathName.includes('registry')) {
     showBody();
   }
 
-  if (selectedLanguage !== 'all' || selectedComponent !== 'all') {
+  // Set the dropdown values from query params
+  if (
+    selectedLanguage !== 'all' ||
+    selectedComponent !== 'all' ||
+    selectedFlag !== 'all'
+  ) {
     if (selectedLanguage !== 'all') {
       document.getElementById('languageDropdown').textContent =
         document.getElementById(
@@ -62,6 +68,10 @@ if (pathName.includes('registry')) {
           `component-item-${selectedComponent}`,
         ).textContent;
     }
+    if (selectedFlag !== 'all') {
+      document.getElementById('flagsDropdown').textContent =
+        document.getElementById(`flag-item-${selectedFlag}`).textContent;
+    }
     updateFilters();
   }
 
@@ -106,6 +116,22 @@ if (pathName.includes('registry')) {
         updateFilters();
       }),
     );
+    // Flags dropdown event listener
+
+    let flagList = document
+      .getElementById('flagsFilter')
+      .querySelectorAll('.dropdown-item');
+
+    flagList.forEach((element) =>
+      element.addEventListener('click', function (evt) {
+        let val = evt.target.getAttribute('value');
+        selectedFlag = val;
+        document.getElementById('flagsDropdown').textContent =
+          evt.target.textContent;
+        setInput('flag', val);
+        updateFilters();
+      }),
+    );
   });
 }
 
@@ -208,34 +234,51 @@ function setInput(key, value) {
   history.replaceState(null, null, '?' + queryParams.toString());
 }
 
-// Filters items based on language and component filters
+// Filters items based on language, component and flags
 function updateFilters() {
   let allItems = [...document.getElementsByClassName('registry-entry')];
-  if (selectedComponent === 'all' && selectedLanguage === 'all') {
+  if (
+    selectedComponent === 'all' &&
+    selectedLanguage === 'all' &&
+    selectedFlag === 'all'
+  ) {
+    // Show all items if all filters are set to 'all'
     allItems.forEach((element) => element.classList.remove('d-none'));
   } else {
+    // Apply the filters
     allItems.forEach((element) => {
       const dc = element.dataset.registrytype;
       const dl = element.dataset.registrylanguage;
-      if (
-        (dc === selectedComponent || selectedComponent === 'all') &&
-        (dl === selectedLanguage || selectedLanguage === 'all')
-      ) {
+      const df = element.dataset.registryflags
+        ? element.dataset.registryflags.split(' ').map((f) => f.toLowerCase())
+        : [];
+
+      const componentMatches =
+        dc === selectedComponent || selectedComponent === 'all';
+      const languageMatches =
+        dl === selectedLanguage || selectedLanguage === 'all';
+      const flagMatches =
+        selectedFlag === 'all' || df.includes(selectedFlag.toLowerCase());
+
+      if (flagMatches) {
+        console.log('Flag matches:', df);
+      }
+
+      if (componentMatches && languageMatches && flagMatches) {
+        // Changed
         element.classList.remove('d-none');
-      } else if (dc === selectedComponent && dl !== selectedLanguage) {
-        element.classList.add('d-none');
-      } else if (dl === selectedLanguage && dc !== selectedComponent) {
-        element.classList.add('d-none');
       } else {
         element.classList.add('d-none');
       }
     });
   }
 }
 
+// Parse URL parameters and update variables
 function parseUrlParams() {
   let urlParams = new URLSearchParams(window.location.search);
   searchQuery = urlParams.get('s');
   selectedLanguage = urlParams.get('language') || 'all';
   selectedComponent = urlParams.get('component') || 'all';
+  selectedFlag = urlParams.get('flag') || 'all'; // Added
 }

content/es/docs/concepts/observability-primer.md

@@ -85,7 +85,23 @@
     {{ errorf "The %q registry entry requires a repo or website URL." .title }}
     {{ end -}}
     {{ $primaryHref := printf "href=%q" $primaryUrl | safeHTMLAttr -}}
-    <li class="card my-3 registry-entry {{ $highlightStyle }}" data-registry-id="{{ ._key }}" data-registrytype="{{ .registryType }}" data-registrylanguage="{{ .language }}">
+    {{ $flags := slice -}} <!-- Initialize flags slice -->
+    {{ if $isNew -}}  <!-- Check if the entry is new -->
+    {{ $flags = $flags | append "new" -}}
+    {{ end -}}
+    {{ if $isNative -}}
+        {{ $flags = $flags | append "native" -}}
+    {{ end -}}
+    {{ if $isFirstParty -}}
+        {{ $flags = $flags | append "first_party" -}}
+    {{ end -}}
+    {{ if $usedInDemo -}}  <!-- Check if the entry was used in a demo -->
+    {{ $flags = $flags | append "used_in_demo" -}}
+    {{ end -}}
+    {{ if $deprecated -}}
+        {{ $flags = $flags | append "deprecated" -}}
+    {{ end -}}
+    <li class="card my-3 registry-entry {{ $highlightStyle }}" data-registry-id="{{ ._key }}" data-registrytype="{{ .registryType }}" data-registrylanguage="{{ .language }}"   data-registryflags="{{- range $index, $flag := $flags -}}{{ if $index }} {{ end }}{{ $flag }}{{- end }}">
         <div class="card-body container">
         <h4 class="card-title mb-0 d-flex flex-row">
             <a {{ $primaryHref }} target="_blank" rel="noopener" class="me-auto">

layouts/partials/ecosystem/registry/entry.html

@@ -34,6 +34,38 @@
 {{ end -}}
 {{ $types = $types | uniq | sort -}}
 
+{{ $counter := 0 -}}
+{{ $entries := slice -}}
+{{ range $key, $entry := .Site.Data.registry -}}
+  {{ $flags := slice -}}
+  {{ if .isNative -}}
+    {{ $flags = $flags | append "native" -}}
+  {{ end -}}
+  {{ if .isFirstParty -}}
+    {{ $flags = $flags | append "first_party" -}}
+  {{ end -}}
+  {{ if .isNew -}}
+    {{ $flags = $flags | append "new" -}}
+  {{ end -}}
+  {{ if .usedInDemo -}}
+    {{ $flags = $flags | append "used_in_demo" -}}
+  {{ end -}}
+  {{ if .deprecated -}}
+    {{ $flags = $flags | append "deprecated" -}}
+  {{ end -}}
+  {{ $entry = merge $entry (dict "_key" $key "id" $counter "flags" $flags) -}}
+  {{ $entries = $entries | append $entry -}}
+  {{ $counter = add $counter 1 }}
+{{ end -}}
+
+{{ $allFlags := slice -}}
+{{ range $entry := $entries -}}
+  {{ range $flag := $entry.flags -}}
+    {{ $allFlags = $allFlags | append $flag }}
+  {{ end -}}
+{{ end -}}
+{{ $uniqueFlags := $allFlags | uniq | sort }}
+
 <div class="alert alert-info">
 The OpenTelemetry Registry allows you to search for instrumentation libraries,
 collector components, utilities, and other useful projects in the OpenTelemetry
@@ -51,6 +83,8 @@
 
       <input type="hidden" name="component" id="input-component" value="" />
       <input type="hidden" name="language" id="input-language" value="" />
+      <input type="hidden" name="flag" id="input-flag" value="all" />
+
 
       <button type="button" class="btn btn-outline-success"
         onclick="document.getElementById('searchForm').submit();">Submit</button>
@@ -88,6 +122,16 @@
         {{ end -}}
       </div>
 
+      <!-- Flags Filter Dropdown -->
+    <button class="btn btn-outline-secondary dropdown-toggle" id="flagsDropdown" type="button" 
+    data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Flags</button>
+    <div class="dropdown-menu" id="flagsFilter">
+    <a value="all" class="dropdown-item">Any Flag</a>
+    {{ range $flag := $uniqueFlags -}}
+    <a value="{{ $flag }}" id="flag-item-{{ $flag }}" class="dropdown-item">{{ humanize $flag }}</a>
+    {{ end -}}
+    </div>
+
     </div>
   </form>
 </div>