Skip to content

Commit

Permalink
chore: align external scaler formatting with built-in (kedacore#929)
Browse files Browse the repository at this point in the history 
* chore: align external scaler formatting with built-in

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: format external scaler to maintain same style with built-in

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: make result count change when toggled

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: make search work for external scalers

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: fix layout to be 2 columns instead

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: hide banner during external scaler search

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: nit fix

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: prevent built-in search from populating external scaler section

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: some nit fixes

Signed-off-by: thisisobate <obasiuche62@gmail.com>

* chore: nit fixes

Signed-off-by: thisisobate <obasiuche62@gmail.com>

Signed-off-by: thisisobate <obasiuche62@gmail.com>
  • Loading branch information
@thisisobate
thisisobate authored Sep 13, 2022
1 parent f590ff1 commit 16224bd
Show file tree
Hide file tree
Showing 3 changed files with 92 additions and 23 deletions.
2 changes: 1 addition & 1 deletion assets/sass/content.sass
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,5 +30,5 @@
width: 100%

@media screen and (min-width: 769px)
.is-search-result > .column
.is-search-result > .column, .is-external-search-result > .column
width: 50%
95 changes: 84 additions & 11 deletions layouts/partials/javascript.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,22 +39,25 @@
const builtInScalers = document.querySelectorAll("#built-in-scalers");
const externalScalers = document.getElementById("external-scalers");
const btnFocusOnMount = document.getElementById("btn-focus-on-mount");
const searchResultCount = document.querySelector(".results");

const builtInSearchResultCount = document.querySelector(".results");
const externalSearchResultCount = document.querySelector(".external-results");
let btns = document.getElementsByClassName("filterBtn");

for (let i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function () {
let filterValue = btns[i].value.toLowerCase();
if (filterValue === "built-in-scalers") {
builtInScalers.forEach((node) => (node.style.display = "flex"));
externalScalers.style.display = "none";
searchResultCount.style.display = "block";
builtInSearchResultCount.style.display = "block";
externalSearchResultCount.style.display = "none";
} else if (filterValue === "external-scalers") {
// remove focus when changed
btnFocusOnMount.classList.remove("is-focused");
builtInScalers.forEach((node) => (node.style.display = "none"));
externalScalers.style.display = "inline";
searchResultCount.style.display = "none";
builtInSearchResultCount.style.display = "none";
externalSearchResultCount.style.display = "block";
}
});
}
Expand All @@ -75,20 +78,27 @@
const form = document.getElementById("search");
const input = document.getElementById("search-input");
const target = document.querySelector(".is-search-result");
const externalTarget = document.querySelector(
".is-external-search-result"
);
const searchResultCount = document.querySelector(".results");
const externalSearchResultCount =
document.querySelector(".external-results");
const template = document.getElementById("is-search-template");
const isExternalScalers = document.getElementById("external-scalers");
const isBuiltInScalers = document.getElementById("built-in-scalers");
const externalBanner = document.getElementById("external-banner");
const groups = document.getElementsByClassName(
"artifacthub-widget-group"
);
const interval = 300;
const interval = 500;
let query = input.value.trim();
let parse = {};

// fetch all scalers on inital load
if (!query) {
initSearchIndex();
externalScalersIndex();
}

input.addEventListener(
Expand All @@ -109,10 +119,14 @@
}

query = keywords;

if (isExternalScalers) {
if (isExternalScalers.style.display === "inline") {
// hide banner during scaler search
externalBanner.style.display = "none";
if (query === "") {
externalBanner.style.display = "block";
}
let externalSearchUrl = new URL(
"https://artifacthub.io/packages/search"
"https://artifacthub.io/api/v1/packages/search"
);
externalSearchUrl.search = new URLSearchParams({
kind: "8",
Expand All @@ -121,13 +135,21 @@
});
debounceTimer = setTimeout(() => {
groups[0].dataset.url = externalSearchUrl;
externalScalersIndex();
}, interval);
}

if (isBuiltInScalers) {
debounceTimer = setTimeout(initSearchIndex, interval);
// clear out all the scaler item card when external scalers are being searched
while (externalTarget.firstChild.nextSibling) {
externalTarget.removeChild(
externalTarget.firstChild.nextSibling.nextSibling
.nextElementSibling
);
}
return;
}

debounceTimer = setTimeout(initSearchIndex, interval);

// clear out all the scaler item card when in-built scalers are being searched
while (target.firstChild.nextSibling) {
target.removeChild(template.nextSibling.nextElementSibling);
Expand All @@ -136,6 +158,57 @@
false
);

async function externalScalersIndex() {
const externalScalerUrl = groups[0].dataset.url;
const results = await fetch(externalScalerUrl)
.then((response) => response.json())
.then((data) => {
return data.packages;
})
.catch((err) => console.error("error:", err));

if ("content" in template) {
// show result count
const title = document.createElement("h3");
title.id = "external-search-results";
title.className = "subtitle is-size-3 external-search-results";

if (results.length == 0)
title.textContent = `No results found for "${query}"`;
else if (results.length == 1)
title.textContent = `Found one result for "${query}"`;
else if (results.length > 1 && query === "")
title.textContent = `${results.length} scalers available`;
else
title.textContent = `Found ${results.length} results for "${query}"`;
externalSearchResultCount.replaceChildren(title);

// show the matched result
results.forEach(function (result) {
const element = template.content.cloneNode(true);
element.querySelector(".scaler-title").textContent =
result.display_name;
element
.querySelector(".scaler-title")
.setAttribute("href", result.repository.url);
result.description &&
(element.querySelector(".description").textContent =
result.description);
result.repository.organization_name &&
(element.querySelector(".maintainer").textContent =
result.repository.organization_name);
result.repository.user_alias &&
(element.querySelector(".maintainer").textContent =
result.repository.user_alias);
result.version &&
(element.querySelector(
".availability"
).textContent = `v${result.version}`);
externalTarget.appendChild(element);
}, this);
}
}

async function initSearchIndex() {
const scalers = await fetch("/index.json", { method: "GET" })
.then((response) => response.json())
Expand Down
18 changes: 7 additions & 11 deletions layouts/partials/scaler-layout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ <h2 id="available-scalers">Currently available scalers for KEDA</h2>
<button class="button filterBtn" value="external-scalers">External</button>
</div>
<div class="results"></div>
<div class="external-results" style="display: none;"></div>
<div
id="built-in-scalers"
style="margin-top: 20px"
Expand All @@ -33,7 +34,7 @@ <h2 id="available-scalers">Currently available scalers for KEDA</h2>
{{ partial "scaler-template" . }}
</div>
<div id="external-scalers" style="display: none">
<p>
<p id="external-banner">
External scaler information is pulled from Artifact Hub. External scaler
maintainers can learn more on
<a
Expand All @@ -42,14 +43,9 @@ <h2 id="available-scalers">Currently available scalers for KEDA</h2>
>
</p>
<div
class="artifacthub-widget-group"
data-url="https://artifacthub.io/packages/search?kind=8&sort=relevance&page=1"
data-theme="light"
data-header="false"
data-stars="true"
data-color="#405273"
data-responsive="true"
data-loading="true"
></div>
<script async src="https://artifacthub.io/artifacthub-widget.js"></script>
class="artifacthub-widget-group columns is-multiline is-external-search-result"
data-url="https://artifacthub.io/api/v1/packages/search?offset=0&limit=20&facets=false&kind=8&deprecated=false&sort=relevance"
>
{{ partial "scaler-template" . }}
</div>
</div>

0 comments on commit 16224bd

Please sign in to comment.