Skip to content

Killbill admin new UI #30

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

Merged
tungleduyxyz merged 15 commits into from
Nov 9, 2025
Merged

Killbill admin new UI #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
6b42a08
New UI implementation for KPM page
piyushkalasariya Jul 21, 2025
cb2180b
fixes and updates for reviews
piyushkalasariya Jul 22, 2025
2537ef7
Refactor styles and remove inline CSS from views
piyushkalasariya Aug 13, 2025
0da4b6d
Merge pull request #26 from killbill/master
tungleduyxyz Aug 17, 2025
746889b
Merge pull request #24 from killbill/feature/new-admin-ui
piyushkalasariya Aug 19, 2025
64f8279
Add loading indicators for plugin actions in nodes info views
piyushkalasariya Sep 4, 2025
f24e9a0
Merge pull request #27 from killbill/feature-ui-fixes-updates
piyushkalasariya Sep 5, 2025
48b1b83
Enhance plugins table: enable ordering and define column orderability
piyushkalasariya Sep 9, 2025
6790fcd
Merge pull request #28 from killbill/518-sorting-fix
piyushkalasariya Sep 9, 2025
0e85c0e
Remove unused CSS styles for table header indicators in nodes info index
piyushkalasariya Sep 17, 2025
9b4fe80
Merge pull request #29 from killbill/bugfix-table-column-fix
tungleduyxyz Nov 5, 2025
a9179e9
Handle issue ld-eventsource debug: wrong number of arguments
tungleduyxyz Nov 5, 2025
2aa5de5
Refactor dependencies display in nodes table for improved readability
piyushkalasariya Nov 6, 2025
f584a5a
Fix placeholder component descriptions in button and sidebar templates
piyushkalasariya Nov 6, 2025
88d6755
Merge pull request #31 from killbill/review-comment-fix
tungleduyxyz Nov 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
589 changes: 589 additions & 0 deletions app/assets/stylesheets/kpm/kpm.css
View file
Open in desktop

Large diffs are not rendered by default.

8 changes: 8 additions & 0 deletions app/views/kaui/components/breadcrumb/_breadcrumb.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<%#
This is a placeholder breadcrumb component for standalone gem usage.

This placeholder prevents "missing template" errors when running
the gem independently during development or testing.
%>

<!-- Breadcrumb placeholder for standalone gem -->
8 changes: 8 additions & 0 deletions app/views/kaui/components/button/_button.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<%#
This is a placeholder button component for standalone gem usage.

This placeholder prevents "missing template" errors when running
the gem independently during development or testing.
%>

<!-- Button placeholder for standalone gem -->
8 changes: 8 additions & 0 deletions app/views/kaui/layouts/kaui_setting_sidebar.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<%#
This is a placeholder sidebar component for standalone gem usage.

This placeholder prevents "missing template" errors when running
the gem independently during development or testing.
%>

<!-- Sidebar placeholder for standalone gem -->
14 changes: 11 additions & 3 deletions app/views/kpm/nodes_info/_logs_table.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<table id="logs-table" class="table table-condensed table-striped mobile-data">
<table id="logs-table" class="">
<thead>
<tr>
<th>Time</th>
Expand All @@ -12,9 +12,17 @@

<%= form_tag url_for, :method => 'get', :format => :js, :id => 'kb_host-form', :class => 'form-horizontal', :style => 'display: none;' do %>
<div id="logs-form">
<div class="form-inline">
<div class="form-inline form-api-search d-flex align-items-center">
<%= text_field_tag :kb_host, kb_host, :class => 'form-control' %>
<%= button_tag '', :type => 'submit', :class => 'glyphicon glyphicon-search' %>
<%= render "kaui/components/button/button", {
label: '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.167 14.167L17.5003 17.5003" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15.8333 9.16667C15.8333 5.48477 12.8486 2.5 9.16667 2.5C5.48477 2.5 2.5 5.48477 2.5 9.16667C2.5 12.8486 5.48477 15.8333 9.16667 15.8333C12.8486 15.8333 15.8333 12.8486 15.8333 9.16667Z" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>'.html_safe,
variant: "outline-secondary d-inline-flex align-items-center gap-1",
type: "submit",
html_class: "kaui-dropdown custom-hover mx-2",
} %>
</div>
</div>
<% end %>
Expand Down
96 changes: 31 additions & 65 deletions app/views/kpm/nodes_info/_nodes_table.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,66 +1,32 @@
<table id="nodes-table" class="table table-condensed table-striped mobile-data">
<thead>
<tr>
<th>Node</th>
<th>Uptime</th>
<th>Kill Bill version</th>
<th>Dependencies</th>
<th>Plugins</th>
</tr>
</thead>
<tbody>
<%- has_kpm_plugin = kpm_plugin_installed?(nodes_info) %>
<% nodes_info.each do |node_info| %>
<tr>
<td><%= node_info.node_name %></td>
<td>
<% unless node_info.boot_time.blank? %>
<%= time_ago_in_words(DateTime.parse(node_info.boot_time)) %>
<% end %>
</td>
<td><%= node_info.kb_version %></td>
<td>
<ul>
<li>API: <%= node_info.api_version %></li>
<li>Plugin API: <%= node_info.plugin_api_version %></li>
<li>Platform: <%= node_info.platform_version %></li>
<li>Commons: <%= node_info.common_version %></li>
</ul>
</td>
<td>
<% unless (node_info.plugins_info || []).empty? %>
<ul>
<% node_info.plugins_info.each do |plugin_info| %>
<li>
<%= plugin_info.plugin_name %> <%= plugin_info.version %> <span class="label label-<%= plugin_info.state == 'RUNNING' ? 'success' : (plugin_info.state == 'INSTALLED' ? 'warning' : 'danger') %>"><%= plugin_info.state %></span>
<% if plugin_info.state == 'RUNNING' %>
<%-# If there is not plugin_key, this is most likely a pure OSGI bundle. In that case, we don't want to allow stopping it as we would lose track of it (once it's removed from the OSGI bundle registry, we don't know about it anymore) -%>
<% unless plugin_info.plugin_key.nil? %>
<%= link_to '<i class="fa fa-pause"></i>'.html_safe, plugin_stop_path(:plugin_key => plugin_info.plugin_key, :plugin_name => plugin_info.plugin_name, :plugin_version => plugin_info.version), :method => :post, :title => 'Stop', :remote => true, :class => 'plugin-link' %>
<% end %>
<%= link_to '<i class="fa fa-refresh"></i>'.html_safe, plugin_restart_path(:plugin_key => plugin_info.plugin_key, :plugin_name => plugin_info.plugin_name, :plugin_version => plugin_info.version), :method => :post, :title => 'Restart', :remote => true, :class => 'plugin-link' %>
<% elsif plugin_info.state == 'INSTALLED' || plugin_info.state == 'STOPPED' %>
<%= link_to '<i class="fa fa-play"></i>'.html_safe, plugin_start_path(:plugin_key => plugin_info.plugin_key, :plugin_name => plugin_info.plugin_name, :plugin_version => plugin_info.version), :method => :post, :title => 'Start', :remote => true, :class => 'plugin-link' %>
<% end %>
<% if !plugin_info.version.nil? && has_kpm_plugin %>
<%= link_to '<i class="fa fa-eject"></i>'.html_safe, plugin_uninstall_path(:plugin_key => plugin_info.plugin_key, :plugin_name => plugin_info.plugin_name, :plugin_version => plugin_info.version), :method => :post, :title => 'Uninstall', :remote => true, :class => 'plugin-link' %>
<% end %>
</li>
<% end %>
</ul>
<% end %>
</td>
</tr>
<% end %>
</tbody>
</table>

<%= javascript_tag do %>
$(document).ready(function() {
$('#nodes-table').dataTable({
"dom": "t",
"paging": false,
"ordering": false
});
});
<%- has_kpm_plugin = kpm_plugin_installed?(nodes_info) %>
Comment thread
piyushkalasariya marked this conversation as resolved.
<% nodes_info.each do |node_info| %>
<div class="row nodes-info">
<div class="col-sm-6">
<div class="mb-3">
<b>Node</b>
<p>
<%= node_info.node_name %>
</p>
</div>
<div>
<b>Kill Bill Version</b>
<p><%= node_info.kb_version %></p>
</div>
</div>
<div class="col-sm-6">
<% unless node_info.boot_time.blank? %>
<div class="mb-3">
<b>Uptime</b>
<p class="transaction-status"> <%= time_ago_in_words(DateTime.parse(node_info.boot_time)) %></p>
</div>
<% end %>
<div>
<b>Dependencies</b>
<p>API: <%= node_info.api_version %></p>
<p>Plugin API: <%= node_info.plugin_api_version %></p>
<p>Platform: <%= node_info.platform_version %></p>
<p>Commons: <%= node_info.common_version %></p>
</div>
</div>
</div>
<% end %>
75 changes: 75 additions & 0 deletions app/views/kpm/nodes_info/_official_plugins.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
<div class="official-plugins-data">
<%- has_kpm_plugin = kpm_plugin_installed?(nodes_info) %>
<% nodes_info.each do |node_info| %>
<% unless (node_info.plugins_info || []).empty? %>
<% node_info.plugins_info.each do |plugin_info| %>
<div class="official-plugin ">
<div class="d-flex align-items-center">
<div class="official-plugin-icon"></div>
<div class="d-flex flex-column">
<h4><%= plugin_info.plugin_name %></h4>
<p><%= plugin_info.version %> </p>
</div>
</div>
<div class="d-flex align-items-center">
<span class="label label-<%= plugin_info.state == 'RUNNING' ? 'success' : (plugin_info.state == 'INSTALLED' ? 'warning' : 'danger') %>"><%= plugin_info.state %></span>
<% if plugin_info.state == 'RUNNING' %>
<%= link_to '', plugin_stop_path(:plugin_key => plugin_info.plugin_key, :plugin_name => plugin_info.plugin_name, :plugin_version => plugin_info.version), :method => :post, :title => 'Stop', :remote => true, :class => 'plugin-link toggle-icon playpause running' %>
<% elsif plugin_info.state == 'INSTALLED' || plugin_info.state == 'STOPPED' %>
<%= link_to '', plugin_start_path(:plugin_key => plugin_info.plugin_key, :plugin_name => plugin_info.plugin_name, :plugin_version => plugin_info.version), :method => :post, :title => 'Start', :remote => true, :class => 'plugin-link toggle-icon playpause stopped' %>
<% end %>
<% if plugin_info.state == 'RUNNING' %>
<div class="dropdown">
<button class="dots-menu" onclick="toggleDropdown(this)">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.0003 10.833C10.4606 10.833 10.8337 10.4599 10.8337 9.99967C10.8337 9.53944 10.4606 9.16634 10.0003 9.16634C9.54009 9.16634 9.16699 9.53944 9.16699 9.99967C9.16699 10.4599 9.54009 10.833 10.0003 10.833Z" stroke="#A4A7AE" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.0003 4.99967C10.4606 4.99967 10.8337 4.62658 10.8337 4.16634C10.8337 3.7061 10.4606 3.33301 10.0003 3.33301C9.54009 3.33301 9.16699 3.7061 9.16699 4.16634C9.16699 4.62658 9.54009 4.99967 10.0003 4.99967Z" stroke="#A4A7AE" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.0003 16.6663C10.4606 16.6663 10.8337 16.2932 10.8337 15.833C10.8337 15.3728 10.4606 14.9997 10.0003 14.9997C9.54009 14.9997 9.16699 15.3728 9.16699 15.833C9.16699 16.2932 9.54009 16.6663 10.0003 16.6663Z" stroke="#A4A7AE" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

</button>
<div class="dropdown-content">
<% unless plugin_info.plugin_key.nil? %>
<%= link_to '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.33366 13.3337H6.00033C6.36851 13.3337 6.66699 13.0352 6.66699 12.667V3.33366C6.66699 2.96547 6.36851 2.66699 6.00033 2.66699H3.33366C2.96547 2.66699 2.66699 2.96547 2.66699 3.33366V12.667C2.66699 13.0352 2.96547 13.3337 3.33366 13.3337Z" stroke="#A4A7AE" stroke-linejoin="round"/>
<path d="M9.99967 13.3337H12.6663C13.0345 13.3337 13.333 13.0352 13.333 12.667V3.33366C13.333 2.96547 13.0345 2.66699 12.6663 2.66699H9.99967C9.63147 2.66699 9.33301 2.96547 9.33301 3.33366V12.667C9.33301 13.0352 9.63147 13.3337 9.99967 13.3337Z" stroke="#A4A7AE" stroke-linejoin="round"/>
</svg> Pause'.html_safe, plugin_stop_path(:plugin_key => plugin_info.plugin_key, :plugin_name => plugin_info.plugin_name, :plugin_version => plugin_info.version), :method => :post, :title => 'Stop', :remote => true, :class => 'plugin-link' %>
<% end %>
<%= link_to '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.66667 1.33301L10.3333 3.03177C9.5386 2.60711 8.63073 2.36637 7.66667 2.36637C4.53705 2.36637 2 4.90342 2 8.03303C2 9.2271 2.36933 10.4194 3 11.333" stroke="#A4A7AE" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5.66667 14.667L5 12.9682C5.79477 13.3928 6.7026 13.6336 7.66667 13.6336C10.7963 13.6336 13.3333 11.0966 13.3333 7.96695C13.3333 6.77282 12.964 5.58055 12.3333 4.66699" stroke="#A4A7AE" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Restart'.html_safe, plugin_restart_path(:plugin_key => plugin_info.plugin_key, :plugin_name => plugin_info.plugin_name, :plugin_version => plugin_info.version), :method => :post, :title => 'Restart', :remote => true, :class => 'plugin-link' %>
<% if !plugin_info.version.nil? && has_kpm_plugin %>
<%= link_to '<svg width="16" height="16" viewBox="0 0 448 512" fill="#A4A7AE" xmlns="http://www.w3.org/2000/svg">
<path d="M224 32C217.7 32 211.7 34.5 207 39L23 223C13.7 232.2 13.7 247.8 23 257C32.2 266.3 47.8 266.3 57 257L224 90.98L391 257C400.2 266.3 415.8 266.3 425 257C434.3 247.8 434.3 232.2 425 223L241 39C236.3 34.5 230.3 32 224 32ZM64 320C55.16 320 48 327.2 48 336V368C48 376.8 55.16 384 64 384H384C392.8 384 400 376.8 400 368V336C400 327.2 392.8 320 384 320H64Z"/>
</svg> Uninstall'.html_safe, plugin_uninstall_path(:plugin_key => plugin_info.plugin_key, :plugin_name => plugin_info.plugin_name, :plugin_version => plugin_info.version), :method => :post, :title => 'Uninstall', :remote => true, :class => 'plugin-link' %>
<% end %>
</div>
</div>
<% end %>
</div>
</div>
<% end %>
<% end %>
<% end %>
</div>

<%= javascript_tag do %>
function toggleDropdown(button) {
const dropdown = button.closest(".dropdown");
dropdown.classList.toggle("show");

// Close other dropdowns
document.querySelectorAll(".dropdown").forEach(d => {
if (d !== dropdown) d.classList.remove("show");
});
}

document.addEventListener("click", function (e) {
if (!e.target.closest(".dropdown")) {
document.querySelectorAll(".dropdown").forEach(d => d.classList.remove("show"));
}
});

<% end %>
Loading
Loading