Skip to content

Commit

Permalink
Replace bento views by bootstrap views for monitor
Browse files Browse the repository at this point in the history
  • Loading branch information
David Kang committed Sep 4, 2019
1 parent 7759d53 commit d235045
Show file tree
Hide file tree
Showing 19 changed files with 192 additions and 605 deletions.
0 ...webui/monitor/_breadcrumb_items.html.haml → ...webui/monitor/_breadcrumb_items.html.haml
View file
File renamed without changes.
33 changes: 17 additions & 16 deletions src/api/app/views/webui/monitor/_building.html.haml
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,32 @@
- max_clients = @workerstatus['clients']
- build_count = @workerstatus.elements('building').length
- max_clients = worker_status['clients']
- build_count = worker_status.elements('building').length
#building-all
%h2 Building
- if build_count > 0
%p.info Hover the job time field to see the start time.
%p.info
= @configuration['title']
= configuration_title
reports #{build_count} running jobs.
= render partial: 'building_table'
%h3 Legend
%div
%div{ style: "float: left; margin-left: 10px; margin-right: 10px" }
= distance_of_time_in_words(@time_now, @dead_line)
- @max_color.downto(0) do |n|
= render partial: 'building_table', locals: { worker_status: worker_status, dead_line: dead_line, interval_steps: interval_steps,
max_color: max_color, time_now: time_now, project_filter: project_filter }
%h5.mt-3 Job Time Legend
.clearfix
.float-left.mx-1
= distance_of_time_in_words(time_now, dead_line)
- max_color.downto(0) do |n|
- color = "rgb(255,#{n},0)"
%div{ style: "background-color: #{color}; margin: 0px; width: 3px ; height: 1em; float: left;" }  
%div{ style: "float: left; margin-left: 10px" }
= distance_of_time_in_words(@time_now, @dead_line - (@max_color * @interval_steps * 60))
.clear
-# haml-lint:disable InlineStyles
.m-0.float-left{ style: "background-color: #{color}; width: 3px ; height: 1em;" }  
-# haml-lint:enable InlineStyles
.float-left.ml-1
= distance_of_time_in_words(time_now, dead_line - (max_color * interval_steps * 60))
- else
.info
%p
- if max_clients
- if @project_filter
No package of the "#{@project_filter}" project is building. Maybe remove the filter?:)
- if project_filter
No package of the "#{project_filter}" project is building. Maybe remove the filter?:)
- else
All #{max_clients} hosts are idle!
- else
Nothing to do here!
.clear
102 changes: 50 additions & 52 deletions src/api/app/views/webui/monitor/_building_table.html.haml
View file
Original file line number Diff line number Diff line change
@@ -1,55 +1,53 @@
#building-list
- if @workerstatus.has_key? 'building'
%table.building#building-table
%thead
%tr
%th Project
%th Package
%th Repository - Build Arch
%th Job time
%th Build Host
%th Host Arch
%tbody
- @workerstatus.elements("building").sort {|a,b| b["starttime"] <=> a["starttime"] }.each do |building|
- project = building["project"]
- package = building["package"]
- repository = building["repository"]
- architecture = building["arch"]
- if worker_status.key?('building')
.table-responsive
%table.table.table-sm.table-bordered.table-hover.w-100#building-table
%thead
%tr
%td.project
- if project.include? "---"
\-------
- else
= link_to project, controller: 'project', action: 'show', project: project
%td.package
- if package.include? "---"
\-------
- else
= link_to package, controller: 'package', action: 'show', project: project, package: package
%td.repository.arch
- if repository.include? "---"
\-------
- else
= link_to repository + ' - ' + architecture, controller: 'package', action: 'live_build_log',
project: project, package: package, repository: repository, arch: architecture
- start_time = Time.at(building["starttime"].to_i)
- warning_style = nil
- if start_time < @dead_line
- n = ((start_time - @dead_line).abs / 60 / @interval_steps).round
- n = (@max_color < n) ? 0 : @max_color - n
- warning_style = "background-color: rgb(255,#{n},0);"
%td.starttime{ style: warning_style, title: "start time: #{start_time.iso8601}" }
%span.sorttime{ style: "display: none" }
= building["starttime"].to_i
= distance_of_time_in_words(@time_now, start_time)
%td.uri= building["workerid"]
%td.hostarch= building["hostarch"]
%th Project
%th Package
%th Repository - Build Arch
%th Job Time
%th Build Host
%th Host Arch
%tbody
- worker_status.elements('building').sort { |a, b| b['starttime'] <=> a['starttime'] }.each do |building|
:ruby
project = building['project']
package = building['package']
repository = building['repository']
architecture = building['arch']
%tr
%td.project
- if project.include? '---'
\-------
- else
= link_to(project, project_show_path(project))
%td.package
- if package.include? '---'
\-------
- else
= link_to(package, package_show_path(project, package))
%td.repository.arch
- if repository.include? '---'
\-------
- else
= link_to(repository + ' - ' + architecture, package_live_build_log_path(project, package, repository, architecture))
- start_time = Time.at(building['starttime'].to_i)
- warning_style = nil
- if start_time < dead_line
:ruby
n = ((start_time - dead_line).abs / 60 / interval_steps).round
n = (max_color < n ? 0 : max_color - n)
warning_style = "background-color: rgb(255,#{n},0);"
-# haml-lint:disable InlineStyles
%td.starttime{ style: warning_style, title: "start time: #{start_time.iso8601}" }
-# haml-lint:enable InlineStyles
%span.sorttime.d-none
= building['starttime'].to_i
= distance_of_time_in_words(time_now, start_time)
%td.uri= building['workerid']
%td.hostarch= building['hostarch']

= content_for :ready_function do
:plain
$('#building-table').dataTable({
'aaSorting': [[3, 'desc']],
'bInfo': false,
'bPaginate': false,
'oSearch': {'sSearch': '#{@project_filter}', 'bRegex': false, 'bSmart': false},
});
- content_for :ready_function do
initializeDataTable('#building-table', { order: [[3, 'desc']], lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]] });
151 changes: 32 additions & 119 deletions src/api/app/views/webui/monitor/_events.html.haml
View file
Original file line number Diff line number Diff line change
@@ -1,119 +1,32 @@
%h2 Statistical Plots
.grid_7.prefix_1.alpha
.box.box-shadow
%h2.box-header Options
- unless @available_arch_list.empty?
= form_tag(controller: "main", action: "index") do
%p
%strong Architecture:
= select_tag(:architecture_display, options_for_select(@available_arch_list, @default_architecture))
%br/
%strong Timeframe:
= select_tag(:time_display, options_for_select([["1 day", "24"], ["1 hour", 1], ["1 week", "168"], ["1 month", "720"], ["1 year", "8760"]], "24"))
.grid_8.omega
#building{ style: "height:250px; margin-right: 20px" }
.centered
Workers
%span.flot_legend#legend-building
.plotspinner= image_tag('ajax-loader.gif')
.clear
.grid_8.alpha
#events{ style: "height:250px; margin-left: 20px; margin-right: 20px" }
.centered
Repositories to recalculate
%span.flot_legend#legend-events
.plotspinner= image_tag('ajax-loader.gif')
.grid_8.omega
#jobs{ style: "height:250px; margin-right: 20px" }
.centered
Packages scheduled for building
%span.flot_legend#legend-jobs
.plotspinner= image_tag('ajax-loader.gif')
.clear
= content_for :head_javascript do
:plain
var arch_to_show = "#{@default_architecture}";
var time_to_show = "24";

function plotValues(data) {

var plot = $.plot($("#events"), [ { data: data['squeue_high'], label: "High", color: "red" },
{ data: data['squeue_med'], label: "Medium", color: 1 },
{ data: data['squeue_low'], label: "Low Priority", color: 2}
], {
series: {
lines: { show: true, fill: true },
stack: true
},
legend: { noColumns: 3, position: "ne", container: "#legend-events" },
xaxis: { mode: 'time' },
yaxis: { min: 0, max: data['events_max'], position: "left", labelWidth: 25 }
});

$.plot($("#building"), [ { data: data['building'], label: "building", color: 3},
{ data: data['idle'], label: "idle", color: 4 },
{ data: data['away'], label: "away", color: 6 },
{ data: data['down'], label: "down", color: 5 },
{ data: data['dead'], label: "dead", color: 7 } ],
{
series: {
stack: true,
lines: { show: true, steps: false, fill: true }
},
xaxis: { mode: 'time' },
yaxis: { min: 0, position: "left", labelWidth: 25 },
legend: { noColumns: 3, position: "ne", container: "#legend-building" }
});
$.plot($("#jobs"), [
{ data: data['waiting'], label: "Ready to build", color: 5},
{ data: data['blocked'], label: "Blocked build job", color: 6 } ],
{
series: {
stack: true,
lines: { show: true, steps: false, fill: true },
},
xaxis: { mode: 'time' },
yaxis: { max: data['jobs_max'], position: "left", labelWidth: 25 },
legend: { noColumns: 3, position: "ne", container: "#legend-jobs" }
});
}

function updatePlots()
{
$(".plotspinner").show();
$.ajax({ url: "#{monitor_events_path}",
dataType: 'json',
data: { "range": time_to_show,
"arch": arch_to_show },
success: function(json) {
plotValues(json);
$(".plotspinner").hide();
/* fade out now */
}
});
}

= content_for :ready_function do
:plain
/* plot an empty set */
plotValues({ 'building': [],
'idle': [],
'waiting': [],
'blocked': [],
'squeue_low': [],
'squeue_med': [],
'squeue_high': []
});
updatePlots();
setInterval("updatePlots()", 80000 );

$("#architecture_display").change(function() {
$("#architecture_display option:selected").each(function() { arch_to_show=$(this).attr("value"); });
updatePlots();
});

$("#time_display").change(function() {
$("#time_display option:selected").each(function() { time_to_show=$(this).attr("value"); });
updatePlots();
});
%h2.mt-4 Statistical Plots
- unless available_arch_list.empty?
.d-flex.justify-content-center
= form_tag(controller: 'main', action: 'index') do
.form-row
.col-sm-12.col-md-6.py-2
%label Architecture:
= select_tag(:architecture_display, options_for_select(available_arch_list, default_architecture), class: 'custom-select')
.col-sm-12.col-md-6.py-2
%label Timeframe:
- options = [['1 day', '24'], ['1 hour', 1], ['1 week', '168'], ['1 month', '720'], ['1 year', '8760']]
= select_tag(:time_display, options_for_select(options, '24'), class: 'custom-select')

.row#graphs{ data: { arch_to_show: default_architecture, monitor_path: monitor_events_path, time_to_show: '24' } }
.col-md-12.col-lg-6.py-4.text-center
#building
%p.my-2 Workers
.d-flex.justify-content-center.flot_legend#legend-building
%i.fas.fa-spinner.fa-spin.d-none
.col-md-12.col-lg-6.py-4.text-center
#events
%p.my-2 Repositories to recalculate
.d-flex.justify-content-center.flot_legend#legend-events
%i.fas.fa-spinner.fa-spin.d-none
.col-md-12.col-lg-6.py-4.text-center
#jobs
%p.my-2 Packages scheduled for building
.d-flex.justify-content-center.flot_legend#legend-jobs
%i.fas.fa-spinner.fa-spin.d-none

- content_for :ready_function do
initializePlots();
33 changes: 18 additions & 15 deletions src/api/app/views/webui/monitor/_idle.html.haml
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,21 @@
#idlehosts
%h2 Idle hosts
- idlehosts = @workerstatus.elements('idle')
- if idlehosts.length > 0
- idle_hosts = worker_status.elements('idle')

.mt-3#idlehosts
%h2 Idle Hosts
- if idle_hosts.empty?
%p
= idlehosts.length
of #{pluralize(@workerstatus['clients'], 'host')} idle.
%table.building
%tr
%th Host
%th Arch
- idlehosts.each do |b|
%tr
%td= b["workerid"]
%td= b["hostarch"]
None of the #{pluralize(worker_status['clients'], 'host')} idle.
- else
%p
None of the #{pluralize(@workerstatus['clients'], 'host')} idle.
= idle_hosts.size
of #{pluralize(worker_status['clients'], 'host')} idle.
%table.responsive.table.table-sm.table-bordered.table-hover
%thead
%tr
%th Host
%th Arch
%tbody
- idle_hosts.each do |idle_host|
%tr
%td= idle_host['workerid']
%td= idle_host['hostarch']
45 changes: 13 additions & 32 deletions src/api/app/views/webui/monitor/_lights.html.haml
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,13 @@
= content_for :ready_function do
monitor_ready();

.statuslights#serverstatus
%h2 Server Status
- @workerstatus.elements("partition") do |part|
- unless part["name"].blank?
%h3= part["name"]
- if part.has_key? "daemon"
%ul
- part.elements("daemon") do |daemon|
%li.daemon_status
.statuswrapper
- state = "green"
- if daemon["state"] == "dead"
- state = "red"
- elsif daemon["state"] == "booting"
- state = "yellow"
%div{ class: "statuslight #{'status_' + state}", style: "margin: auto", title: "#{daemon['state']}" }
.statusarch
= daemon["arch"] ? daemon["arch"] : daemon["type"]
%span.hidden.statustext
= daemon["type"]
\:#{daemon['arch']}
\: #{daemon['state']}
- if daemon.has_key? "starttime"
- start_time = Time.at(daemon["starttime"].to_i)
for #{distance_of_time_in_words(@time_now, start_time, include_seconds: true)} (last restart: #{start_time.iso8601})
- else
%p
%i No daemons running!
.clear
%h2 Server Status
- workerstatus.elements('partition') do |partition|
- if partition['name'].present?
%h3= partition['name']
- if partition.key?('daemon')
.row.p-2.no-gutters
- partition.elements('daemon') do |daemon|
.col-6.col-sm-3.col-md-2.col-lg-1.p-1
.h-100.p-2.border.text-center
%i.fa{ class: icon_for_daemon(daemon['state']), title: "#{daemon['state']}" }
%span.d-block= daemon['arch'] || daemon['type']
- else
%p No daemons running!
Loading

0 comments on commit d235045

Please sign in to comment.