diff --git a/assets/js/registrySearch.js b/assets/js/registrySearch.js index d91c590585a3..850e948969a4 100644 --- a/assets/js/registrySearch.js +++ b/assets/js/registrySearch.js @@ -38,6 +38,8 @@ let pathName = window.location.pathname; let searchQuery = ''; let selectedLanguage = 'all'; let selectedComponent = 'all'; +let selectedFlag = 'all'; // Added selectedFlag + parseUrlParams(); @@ -49,22 +51,24 @@ 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( - `language-item-${selectedLanguage}`, - ).textContent; + document.getElementById(`language-item-${selectedLanguage}`).textContent; } if (selectedComponent !== 'all') { document.getElementById('componentDropdown').textContent = - document.getElementById( - `component-item-${selectedComponent}`, - ).textContent; + document.getElementById(`component-item-${selectedComponent}`).textContent; + } + if (selectedFlag !== 'all') { + document.getElementById('flagsDropdown').textContent = + document.getElementById(`flag-item-${selectedFlag}`).textContent; } updateFilters(); } + document.addEventListener('DOMContentLoaded', (event) => { let searchForm = document.getElementById('searchForm'); searchForm.addEventListener('submit', function (evt) { @@ -106,6 +110,23 @@ 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,24 +229,33 @@ 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())); + + console.log('Selected Flag:', selectedFlag); +console.log('Registry Flags:', df); + +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'); } @@ -233,9 +263,12 @@ function updateFilters() { } } + +// 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 } diff --git a/layouts/partials/ecosystem/registry/entry.html b/layouts/partials/ecosystem/registry/entry.html index 9a282c4db0b9..877152dd6146 100644 --- a/layouts/partials/ecosystem/registry/entry.html +++ b/layouts/partials/ecosystem/registry/entry.html @@ -85,7 +85,17 @@ {{ errorf "The %q registry entry requires a repo or website URL." .title }} {{ end -}} {{ $primaryHref := printf "href=%q" $primaryUrl | safeHTMLAttr -}} -
  • + {{ $flags := slice -}} + {{ if $isNative -}} + {{ $flags = $flags | append "native" -}} + {{ end -}} + {{ if $isFirstParty -}} + {{ $flags = $flags | append "first party" -}} + {{ end -}} + {{ if $deprecated -}} + {{ $flags = $flags | append "deprecated" -}} + {{ end -}} +
  • diff --git a/layouts/shortcodes/ecosystem/registry/search-form.html b/layouts/shortcodes/ecosystem/registry/search-form.html index 4e2fc00028c1..b06510b46e15 100644 --- a/layouts/shortcodes/ecosystem/registry/search-form.html +++ b/layouts/shortcodes/ecosystem/registry/search-form.html @@ -34,6 +34,35 @@ {{ 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 .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 }} + +
    The OpenTelemetry Registry allows you to search for instrumentation libraries, collector components, utilities, and other useful projects in the OpenTelemetry @@ -51,6 +80,8 @@ + + @@ -88,6 +119,16 @@ {{ end -}}
    + + +
    +