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

Jump to bottom

Adding filter-buttons in pod list view (#21) #8444

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

Adding filter-buttons in pod list view (#21) #8444

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4a4ee3a
Adding filter-buttons in pod list view (#21)
tclaus Apr 5, 2024
6cd29ba
Adding filter button localizations
tclaus Apr 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
65 changes: 55 additions & 10 deletions app/assets/javascripts/app/pages/admin_pods.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,48 @@ app.pages.AdminPods = app.views.Base.extend({
templateName: "pod_table",

tooltipSelector: "th i",
events: {
"click #show_all_pods": "showAllPods",
"click #show_active_pods": "showActivePods",
"click #show_invalid_pods": "showInvalidPods"
},

initialize: function() {
this.pods = new app.collections.Pods(app.parsePreload("pods"));
this.rows = []; // contains the table row views
this.podfilter = "active";
},

showAllPods: function() {
this.podfilter = "";
this.postRenderTemplate();
this.$("#show_all_pods").addClass("active");
this.$("#show_active_pods").removeClass("active");
this.$("#show_invalid_pods").removeClass("active");
Comment on lines +22 to +24
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't know if there is a better solution than manually adding and removing the active class everywhere? Because that doesn't scale that well if there are are more buttons (as it looks like you plan to add one for blocked pods in the future).

I don't know if there is a possibility to group these buttons somehow so only one can be active at once, no matter how many buttons exist (like radio buttons in forms?). Maybe just remove it from all buttons and just add it back to the one that was clicked?

},

showActivePods: function() {
this.podfilter = "active";
this.postRenderTemplate();
this.$("#show_all_pods").removeClass("active");
this.$("#show_active_pods").addClass("active");
this.$("#show_invalid_pods").removeClass("active");
},

showBlockedPods: function() {
this.podfilter = "blocked";
this.postRenderTemplate();
this.$("#show_all_pods").removeClass("active");
this.$("#show_active_pods").removeClass("active");
this.$("#show_invalid_pods").removeClass("active");
},
Comment on lines +35 to +41
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are no blocked pods (yet).


showInvalidPods: function() {
this.podfilter = "invalid";
this.postRenderTemplate();
this.$("#show_all_pods").removeClass("active");
this.$("#show_active_pods").removeClass("active");
this.$("#show_invalid_pods").addClass("active");
},

postRenderTemplate: function() {
Expand All @@ -16,11 +54,17 @@ app.pages.AdminPods = app.views.Base.extend({

// avoid reflowing the page for every entry
var fragment = document.createDocumentFragment();
this.$("tbody").empty();

this.pods.each(function(pod) {
self.rows.push(new app.views.PodEntry({
parent: fragment,
model: pod
}).render());
if (self.podfilter === "" ||
self.podfilter === "active" && pod.get("status") === "no_errors" ||
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe change this one to check the active field instead? This would then include all pods which are being handled as "active" in the backend (all pods to which is being federated). This also includes pods with warnings (but which are still online and working), and pods which only have errors since less than 14 days (so maybe only a temporary downtime?).

If you want to filter for "no error" then the label on the button text should probably say something like "no error", because "active" means something different.

self.podfilter === "invalid" && pod.get("status") !== "no_errors") {
self.rows.push(new app.views.PodEntry({
parent: fragment,
model: pod
}).render());
}
});
this.$("tbody").append(fragment);

Expand All @@ -29,6 +73,7 @@ app.pages.AdminPods = app.views.Base.extend({

_showMessages: function() {
var msgs = document.createDocumentFragment();

if (gon.totalCount && gon.totalCount > 0) {
let totalPods = $("<div class='alert alert-info' role='alert' />")
.append(Diaspora.I18n.t("admin.pods.total", {count: gon.totalCount}));
Expand All @@ -48,20 +93,20 @@ app.pages.AdminPods = app.views.Base.extend({
msgs.appendChild(totalPods[0]);
}

if( gon.uncheckedCount && gon.uncheckedCount > 0 ) {
if (gon.uncheckedCount && gon.uncheckedCount > 0) {
var unchecked = $("<div class='alert alert-info' role='alert' />")
.append(Diaspora.I18n.t("admin.pods.unchecked", {count: gon.uncheckedCount}));
msgs.appendChild(unchecked[0]);
}
if( gon.versionFailedCount && gon.versionFailedCount > 0 ) {
if (gon.versionFailedCount && gon.versionFailedCount > 0) {
var versionFailed = $("<div class='alert alert-warning' role='alert' />")
.append(Diaspora.I18n.t("admin.pods.version_failed", {count: gon.versionFailedCount}));
.append(Diaspora.I18n.t("admin.pods.version_failed", {count: gon.versionFailedCount.toLocaleString()}));
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this .toLocaleString() here, but only for these two? 🤔

msgs.appendChild(versionFailed[0]);
}
if( gon.errorCount && gon.errorCount > 0 ) {
if (gon.errorCount && gon.errorCount > 0) {
var errors = $("<div class='alert alert-danger' role='alert' />")
.append(Diaspora.I18n.t("admin.pods.errors", {count: gon.errorCount}));
msgs.appendChild(errors[0]);
.append(Diaspora.I18n.t("admin.pods.errors", {count: gon.errorCount.toLocaleString()}));
msgs.appendChild(errors[0]);
}

$("#pod-alerts").html(msgs);
Expand Down
3 changes: 3 additions & 0 deletions app/assets/templates/pod_table_tpl.jst.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
<button type="button" class="btn btn-default" id="show_all_pods">{{t 'admin.pods.allPodsFilter'}}</button>
<button type="button" class="btn btn-default active" id="show_active_pods">{{t 'admin.pods.activePodsFilter'}}</button>
<button type="button" class="btn btn-default" id="show_invalid_pods">{{t 'admin.pods.invalidPodsFilter'}}</button>

<table class="table">
<thead>
Expand Down
5 changes: 4 additions & 1 deletion config/locales/javascript/javascript.de.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,15 @@ de:
admin:
pods:
actions: "Aktionen"
activePodsFilter: "Verfügbar"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You need to add localization to the English files, all other languages are managed by webtranslateit and will be overwritten. And only the English gets uploaded to webtranslateit, so if it's not in the English file, it will never be available to be translated into other languages. And if it's missing in english it also means that it breaks the pods page for all other languages (they just show a white page), as there is not even a fallback translation available.

added: "Hinzugefügt"
allPodsFilter: "Alle"
check: "Verbindungstest durchführen"
errors:
one: "Der Verbindungstest meldete für einen Pod einen Fehler."
other: "Der Verbindungstest meldete für <%= count %> Pods einen Fehler."
follow_link: "Link im Browser öffnen"
invalidPodsFilter: "Mit Fehlern"
last_check: "letzte Überprüfung:"
more_info: "zeige weitere Informationen"
ms:
Expand Down Expand Up @@ -319,4 +322,4 @@ de:
other: "%d Jahren"
unblock_failed: "Den Benutzer zu entblocken ist fehlgeschlagen."
viewer:
reshared: "Weitergesagt"
reshared: "Weitergesagt"