From: Marcin Haba <marcin.haba@bacula.pl>
Date: Sat, 13 Jun 2020 07:18:52 +0000 (+0200)
Subject: baculum: Enable re-running jobs in async way and visual improvements
X-Git-Tag: Release-11.3.2~1440
X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=0e5c5c41a9ef7b5d82229ed7741cd9ea992b2b3b;p=thirdparty%2Fbacula.git

baculum: Enable re-running jobs in async way and visual improvements
---

diff --git a/gui/baculum/protected/Web/JavaScript/misc.js b/gui/baculum/protected/Web/JavaScript/misc.js
index 6fb1924352..7a052591f3 100644
--- a/gui/baculum/protected/Web/JavaScript/misc.js
+++ b/gui/baculum/protected/Web/JavaScript/misc.js
@@ -678,7 +678,7 @@ var W3SideBar = {
 			Cookies.set_cookie('baculum_side_bar_hide', 0);
 			this.sidebar.style.display = 'block';
 			this.overlay_bg.style.display = 'block';
-			this.page_main.css({'margin-left': '300px', 'width': 'calc(100% - 300px)'});
+			this.page_main.css({'margin-left': '250px', 'width': 'calc(100% - 250px)'});
 		}
 	},
 	close: function() {
diff --git a/gui/baculum/protected/Web/Layouts/Main.tpl b/gui/baculum/protected/Web/Layouts/Main.tpl
index 7211599802..864e5dade4 100644
--- a/gui/baculum/protected/Web/Layouts/Main.tpl
+++ b/gui/baculum/protected/Web/Layouts/Main.tpl
@@ -31,7 +31,7 @@
 			</div>
 			<com:Application.Web.Portlets.MainSideBar />
 			<!-- !PAGE CONTENT! -->
-			<div class="w3-main page_main_el" id="page_main" style="margin-left:300px; margin-top:43px;">
+			<div class="w3-main page_main_el" id="page_main" style="margin-left: 250px; margin-top: 43px;">
 				<span class="w3-tag w3-large w3-purple w3-right w3-padding-small w3-margin-top w3-margin-right">
 					<i class="fa fa-cogs w3-large"></i> <%[ Running jobs: ]%> <span id="running_jobs"></span>
 				</span>
diff --git a/gui/baculum/protected/Web/Pages/Graphs.page b/gui/baculum/protected/Web/Pages/Graphs.page
index d61d4692a0..9769c9841c 100644
--- a/gui/baculum/protected/Web/Pages/Graphs.page
+++ b/gui/baculum/protected/Web/Pages/Graphs.page
@@ -1,7 +1,7 @@
 <%@ MasterClass="Application.Web.Layouts.Main" Theme="Baculum-v2"%>
 <com:TContent ID="Main">
 	<!-- Header -->
-	<header class="w3-container">
+	<header class="w3-container w3-show-block">
 		<h5>
 			<b><i class="fa fa-chart-pie"></i> <%[ Graphs ]%></b>
 		</h5>
diff --git a/gui/baculum/protected/Web/Pages/JobHistoryList.page b/gui/baculum/protected/Web/Pages/JobHistoryList.page
index 2bd8c99d80..aa73dae520 100644
--- a/gui/baculum/protected/Web/Pages/JobHistoryList.page
+++ b/gui/baculum/protected/Web/Pages/JobHistoryList.page
@@ -94,14 +94,61 @@
 		<p class="info w3-hide-medium w3-hide-small"><%[ Tip: Use left-click to select table row. Use CTRL + left-click to multiple row selection. Use SHIFT + left-click to add a range of rows to selection. ]%></p>
 	</div>
 	<com:Application.Web.Portlets.RunJob ID="RunJobModal" />
-	<com:TCallback ID="RunJobCb" OnCallback="runJobAgain" />
-	<com:TCallback ID="CancelJobCb" OnCallback="cancelJob" />
+	<com:TCallback ID="RunJobCb" OnCallback="runJobAgain">
+		<prop:ClientSide.OnLoading>
+			show_btn_loader(sender.options.CallbackParameter);
+		</prop:ClientSide.OnLoading>
+		<prop:ClientSide.OnComplete>
+			hide_btn_loader(sender.options.CallbackParameter);
+			oMonitor();
+		</prop:ClientSide.OnComplete>
+	</com:TCallback>
+	<com:TCallback ID="CancelJobCb" OnCallback="cancelJob">
+		<prop:ClientSide.OnLoading>
+			show_btn_loader(sender.options.CallbackParameter);
+		</prop:ClientSide.OnLoading>
+		<prop:ClientSide.OnComplete>
+			hide_btn_loader(sender.options.CallbackParameter);
+			oMonitor();
+		</prop:ClientSide.OnComplete>
+	</com:TCallback>
 <script type="text/javascript">
-var run_job_callback = <%=$this->RunJobCb->ActiveControl->Javascript%>;
-var cancel_job_callback = <%=$this->CancelJobCb->ActiveControl->Javascript%>;
-function refresh_job_history(jobid) {
-	document.location.href = '<%=$this->Service->constructUrl('JobHistoryList')%>';
+function get_run_job_callback() {
+	return <%=$this->RunJobCb->ActiveControl->Javascript%>;
 }
+function get_cancel_job_callback() {
+	return <%=$this->CancelJobCb->ActiveControl->Javascript%>;
+}
+function show_btn_loader(jobid) {
+	var btns = document.querySelectorAll('button[data-btn-id="' + jobid + '"]');
+	var loader;
+	for (var i = 0; i < btns.length; i++) {
+		loader = document.createElement('IMG');
+		loader.setAttribute('data-loader-id', jobid);
+		loader.src = '<%=$this->getPage()->getTheme()->getBaseUrl()%>/loader-small.gif';
+		loader.style.display = 'none';
+		loader.className = 'btn_loader';
+		btns[i].parentNode.insertBefore(loader, btns[i]);
+		btns[i].style.display = 'none';
+		loader.style.display = '';
+	}
+}
+
+function hide_btn_loader(jobid) {
+	var btns = document.querySelectorAll('button[data-btn-id="' + jobid + '"]');
+	var loaders = document.querySelectorAll('img[data-loader-id="' + jobid + '"]');
+	var loader_list = Array.prototype.slice.call(loaders);
+
+	// Note, there can be more loaders with the same loader-id in small width view.
+	for (var i = (loader_list.length-1); i >= 0; i--) {
+		loader_list[i].parentNode.removeChild(loader_list[i]);
+	}
+
+	for (var i = 0; i < btns.length; i++) {
+		btns[i].style.display = 'inline-block';
+	}
+}
+
 var oJobList = {
 	table: null,
 	table_toolbar: null,
@@ -162,6 +209,13 @@ var oJobList = {
 				this.table_toolbar.style.display = this.table.rows({selected: true}).data().length > 0 ? '' : 'none';
 			}.bind(this));
 		}.bind(this));
+		var el = $('#' + this.ids.job_list);
+		el.on('page.dt', function () {
+			el.find('img.btn_loader').each(function(idx, el) {
+				var jobid = el.getAttribute('data-loader-id');
+				hide_btn_loader(jobid);
+			});
+		});
 	},
 	set_table: function() {
 		this.table = $('#' + this.ids.job_list).DataTable({
@@ -336,23 +390,25 @@ var oJobList = {
 						if (['C', 'R'].indexOf(row.jobstatus) === -1) {
 							// rerun job button
 							btn = document.createElement('BUTTON');
-							btn.className = 'w3-button w3-green';
+							btn.className = 'w3-button w3-tiny w3-green';
 							btn.type = 'button';
 							i = document.createElement('I');
 							btn.title = '<%[ Run job again ]%>';
 							i.className = 'fa fa-play';
 							btn.appendChild(i);
-							btn.setAttribute('onclick', 'run_job_callback.setCallbackParameter(' + data + '); run_job_callback.dispatch();');
+							btn.setAttribute('data-btn-id', data);
+							btn.setAttribute('onclick', 'var rjc = get_run_job_callback(); rjc.setCallbackParameter(' + data + '); rjc.dispatch();');
 						} else {
 							// cancel job button
 							btn = document.createElement('BUTTON');
-							btn.className = 'w3-button w3-green';
+							btn.className = 'w3-button w3-tiny w3-green';
 							btn.type = 'button';
 							i = document.createElement('I');
 							btn.title = '<%[ Cancel job ]%>';
 							i.className = 'fa fa-stop';
 							btn.appendChild(i);
-							btn.setAttribute('onclick', 'cancel_job_callback.setCallbackParameter(' + data + '); cancel_job_callback.dispatch();');
+							btn.setAttribute('data-btn-id', data);
+							btn.setAttribute('onclick', 'var cjc = get_cancel_job_callback(); cjc.setCallbackParameter(' + data + '); cjc.dispatch();');
 						}
 						container.appendChild(btn);
 						var space = document.createTextNode(' ');
@@ -360,7 +416,7 @@ var oJobList = {
 
 						// job details button
 						btn = document.createElement('BUTTON');
-						btn.className = 'w3-button w3-green';
+						btn.className = 'w3-button w3-tiny w3-green';
 						btn.type = 'button';
 						i = document.createElement('I');
 						i.className = 'fa fa-list-ul';
diff --git a/gui/baculum/protected/Web/Pages/JobHistoryList.php b/gui/baculum/protected/Web/Pages/JobHistoryList.php
index 4cb24b4a7e..ffd20d02c2 100644
--- a/gui/baculum/protected/Web/Pages/JobHistoryList.php
+++ b/gui/baculum/protected/Web/Pages/JobHistoryList.php
@@ -78,9 +78,7 @@ class JobHistoryList extends BaculumWebPage {
 			$result = $this->getModule('api')->create(array('jobs', 'run'), $params);
 			if ($result->error === 0) {
 				$started_jobid = $this->getModule('misc')->findJobIdStartedJob($result->output);
-				if (is_numeric($started_jobid)) {
-					$this->getPage()->getCallbackClient()->callClientFunction('refresh_job_history');
-				} else {
+				if (!is_numeric($started_jobid)) {
 					$errmsg = implode('<br />', $result->output);
 					$this->getPage()->getCallbackClient()->callClientFunction('show_error', array($errmsg, $result->error));
 				}
@@ -96,7 +94,6 @@ class JobHistoryList extends BaculumWebPage {
 			array('jobs', $jobid, 'cancel'),
 			array()
 		);
-		$this->getPage()->getCallbackClient()->callClientFunction('refresh_job_history');
 	}
 
 	/**
diff --git a/gui/baculum/protected/Web/Pages/NewResource.page b/gui/baculum/protected/Web/Pages/NewResource.page
index b60d38ae23..7d91ce4c1b 100644
--- a/gui/baculum/protected/Web/Pages/NewResource.page
+++ b/gui/baculum/protected/Web/Pages/NewResource.page
@@ -6,115 +6,117 @@
 			<b><i class="fa fa-plus"></i> &nbsp;<%[ New ]%> <%=$this->getResourceType()%></b>
 		</h5>
 	</header>
-	<button type="button" class="w3-button w3-green w3-margin-left w3-margin-bottom" onclick="document.getElementById('new_resource').style.display = 'block'">
-		<i class="fa fa-plus"></i> &nbsp;<%=Prado::localize('Add new resource')%>
-	</button>
-	<div id="resource_save_ok_box" class="w3-modal" style="display: none">
-		<div class="w3-modal-content w3-card-4 w3-animate-zoom" style="width: 600px">
-			<header class="w3-container w3-green">
-				<span onclick="$('#resource_save_ok_box').hide();" class="w3-button w3-display-topright">×</span>
-				<h2><%[ Create new resource ]%></h2>
-			</header>
-			<div class="w3-panel w3-padding">
-				<p><%[ The resource has been created successfully. ]%></p>
+	<div>
+		<button type="button" class="w3-button w3-green w3-margin-left w3-margin-bottom" onclick="document.getElementById('new_resource').style.display = 'block'">
+			<i class="fa fa-plus"></i> &nbsp;<%=Prado::localize('Add new resource')%>
+		</button>
+		<div id="resource_save_ok_box" class="w3-modal" style="display: none">
+			<div class="w3-modal-content w3-card-4 w3-animate-zoom" style="width: 600px">
+				<header class="w3-container w3-green">
+					<span onclick="$('#resource_save_ok_box').hide();" class="w3-button w3-display-topright">×</span>
+					<h2><%[ Create new resource ]%></h2>
+				</header>
+				<div class="w3-panel w3-padding">
+					<p><%[ The resource has been created successfully. ]%></p>
+				</div>
+				<footer class="w3-container w3-center w3-border-top">
+					<button type="button" class="w3-button w3-section w3-green" onclick="$('#resource_save_ok_box').hide(); save_directive_post_action();"><i class="fa fa-check"></i> &nbsp;<%[ OK ]%></button>
+				</footer>
 			</div>
-			<footer class="w3-container w3-center w3-border-top">
-				<button type="button" class="w3-button w3-section w3-green" onclick="$('#resource_save_ok_box').hide(); save_directive_post_action();"><i class="fa fa-check"></i> &nbsp;<%[ OK ]%></button>
-			</footer>
 		</div>
-	</div>
-	<div id="new_resource" class="w3-modal">
-		<div class="w3-modal-content w3-animate-top w3-card-4 w3-padding">
-			<header class="w3-container"> 
-				<span onclick="document.getElementById('new_resource').style.display='none'" class="w3-button w3-display-topright">&times;</span>
-				<h2><%[ Add new resource ]%></h2>
-			</header>
-			<div class="w3-row w3-margin">
-				<div class="w3-third"><%[ Host: ]%></div>
-				<div class="w3-third">
-					<com:TActiveDropDownList
-						ID="Host"
-						CssClass="w3-select w3-border"
-						OnSelectedIndexChanged="setComponents"
-					>
-						<prop:ClientSide.OnLoading>
-							document.getElementById('component_loader').style.display = '';
-						</prop:ClientSide.OnLoading>
-						<prop:ClientSide.OnComplete>
-							document.getElementById('component_loader').style.display = 'none';
-						</prop:ClientSide.OnComplete>
-					</com:TActiveDropDownList>
+		<div id="new_resource" class="w3-modal">
+			<div class="w3-modal-content w3-animate-top w3-card-4 w3-padding">
+				<header class="w3-container"> 
+					<span onclick="document.getElementById('new_resource').style.display='none'" class="w3-button w3-display-topright">&times;</span>
+					<h2><%[ Add new resource ]%></h2>
+				</header>
+				<div class="w3-row w3-margin">
+					<div class="w3-third"><%[ Host: ]%></div>
+					<div class="w3-third">
+						<com:TActiveDropDownList
+							ID="Host"
+							CssClass="w3-select w3-border"
+							OnSelectedIndexChanged="setComponents"
+						>
+							<prop:ClientSide.OnLoading>
+								document.getElementById('component_loader').style.display = '';
+							</prop:ClientSide.OnLoading>
+							<prop:ClientSide.OnComplete>
+								document.getElementById('component_loader').style.display = 'none';
+							</prop:ClientSide.OnComplete>
+						</com:TActiveDropDownList>
+					</div>
 				</div>
-			</div>
-			<div class="w3-row w3-margin">
-				<div class="w3-third"><%[ Component: ]%></div>
-				<div class="w3-third">
-					<com:TActiveDropDownList
-						ID="Component"
-						CssClass="w3-select w3-border"
-						OnSelectedIndexChanged="setResource"
-					>
-						<prop:ClientSide.OnLoading>
-							document.getElementById('resource_loader').style.display = '';
-						</prop:ClientSide.OnLoading>
-						<prop:ClientSide.OnComplete>
-							document.getElementById('resource_loader').style.display = 'none';
-						</prop:ClientSide.OnComplete>
-					</com:TActiveDropDownList>
+				<div class="w3-row w3-margin">
+					<div class="w3-third"><%[ Component: ]%></div>
+					<div class="w3-third">
+						<com:TActiveDropDownList
+							ID="Component"
+							CssClass="w3-select w3-border"
+							OnSelectedIndexChanged="setResource"
+						>
+							<prop:ClientSide.OnLoading>
+								document.getElementById('resource_loader').style.display = '';
+							</prop:ClientSide.OnLoading>
+							<prop:ClientSide.OnComplete>
+								document.getElementById('resource_loader').style.display = 'none';
+							</prop:ClientSide.OnComplete>
+						</com:TActiveDropDownList>
+					</div>
+					<i id="component_loader" class="fa fa-sync w3-spin w3-margin-left w3-margin-top" style="display: none"></i>
 				</div>
-				<i id="component_loader" class="fa fa-sync w3-spin w3-margin-left w3-margin-top" style="display: none"></i>
-			</div>
-			<div class="w3-row w3-margin">
-				<div class="w3-third"><%[ Resource to create: ]%></div>
-				<div class="w3-third">
-					<com:TActiveDropDownList
-						ID="Resource"
-						CssClass="w3-select w3-border"
-					/>
-					<com:TRequiredFieldValidator
+				<div class="w3-row w3-margin">
+					<div class="w3-third"><%[ Resource to create: ]%></div>
+					<div class="w3-third">
+						<com:TActiveDropDownList
+							ID="Resource"
+							CssClass="w3-select w3-border"
+						/>
+						<com:TRequiredFieldValidator
+							ValidationGroup="NewResource"
+							Display="Dynamic"
+							ControlToValidate="Resource"
+							FocusOnError="true"
+							Text="<%[ Field required. ]%>"
+						/>
+					</div>
+					<i id="resource_loader" class="fa fa-sync w3-spin w3-margin-left w3-margin-top" style="display: none"></i>
+				</div>
+				<com:TActiveLabel ID="NewResourceLog" Display="None" CssClass="w3-panel w3-margin w3-text-red" />
+				<div class="w3-row w3-margin w3-center">
+					<com:TLinkButton
+						CssClass="w3-button w3-green w3-margin-left"
+						OnClick="createResource"
+						CausesValidation="true"
 						ValidationGroup="NewResource"
-						Display="Dynamic"
-						ControlToValidate="Resource"
-						FocusOnError="true"
-						Text="<%[ Field required. ]%>"
-					/>
+					>
+						<prop:Text>
+							<i class="fa fa-plus"></i> &nbsp;<%=Prado::localize('Create')%>
+						</prop:Text>
+					</com:TLinkButton>
 				</div>
-				<i id="resource_loader" class="fa fa-sync w3-spin w3-margin-left w3-margin-top" style="display: none"></i>
-			</div>
-			<com:TActiveLabel ID="NewResourceLog" Display="None" CssClass="w3-panel w3-margin w3-text-red" />
-			<div class="w3-row w3-margin w3-center">
-				<com:TLinkButton
-					CssClass="w3-button w3-green w3-margin-left"
-					OnClick="createResource"
-					CausesValidation="true"
-					ValidationGroup="NewResource"
-				>
-					<prop:Text>
-						<i class="fa fa-plus"></i> &nbsp;<%=Prado::localize('Create')%>
-					</prop:Text>
-				</com:TLinkButton>
 			</div>
 		</div>
-	</div>
-	<div id="resource_config" class="w3-container">
-		<com:Application.Web.Portlets.BaculaConfigDirectives
-			ID="NewResource"
-			SaveDirectiveActionOk="save_directive_action_ok();"
-			ShowRemoveButton="false"
-			ShowCancelButton="false"
-		/>
-	</div>
-	<script>
-		function save_directive_action_ok() {
-			$('#resource_config').slideUp();
-			$('#resource_save_ok_box').show();
-		}
-		function save_directive_post_action() {
-			var origin_url = '<%=$this->getOriginUrl()%>';
-			if (origin_url) {
-				document.location.href = origin_url;
+		<div id="resource_config" class="w3-container">
+			<com:Application.Web.Portlets.BaculaConfigDirectives
+				ID="NewResource"
+				SaveDirectiveActionOk="save_directive_action_ok();"
+				ShowRemoveButton="false"
+				ShowCancelButton="false"
+			/>
+		</div>
+		<script>
+			function save_directive_action_ok() {
+				$('#resource_config').slideUp();
+				$('#resource_save_ok_box').show();
+			}
+			function save_directive_post_action() {
+				var origin_url = '<%=$this->getOriginUrl()%>';
+				if (origin_url) {
+					document.location.href = origin_url;
+				}
 			}
-		}
-		oBaculaConfigSection.show_sections(true);
-	</script>
+			oBaculaConfigSection.show_sections(true);
+		</script>
+	</div>
 </com:TContent>
diff --git a/gui/baculum/protected/Web/Portlets/BaculaConfigDirectives.tpl b/gui/baculum/protected/Web/Portlets/BaculaConfigDirectives.tpl
index 9e176b140a..e5a89d645a 100644
--- a/gui/baculum/protected/Web/Portlets/BaculaConfigDirectives.tpl
+++ b/gui/baculum/protected/Web/Portlets/BaculaConfigDirectives.tpl
@@ -37,7 +37,7 @@
 		ItemRenderer="Application.Web.Portlets.DirectiveRenderer"
 		>
 	</com:TActiveRepeater>
-	<div class="w3-row w3-center w3-border bottom_buttons page_main_el" style="margin-left: 300px">
+	<div class="w3-row w3-center w3-border bottom_buttons page_main_el" style="margin-left: 250px">
 		<com:Application.Web.Portlets.DirectiveSetting
 			ID="DirectiveSetting"
 			Resource="<%=$this->getResource()%>"
diff --git a/gui/baculum/protected/Web/Portlets/MainSideBar.tpl b/gui/baculum/protected/Web/Portlets/MainSideBar.tpl
index 9393060a46..a37e2ffe76 100644
--- a/gui/baculum/protected/Web/Portlets/MainSideBar.tpl
+++ b/gui/baculum/protected/Web/Portlets/MainSideBar.tpl
@@ -1,10 +1,10 @@
 <!-- Sidebar/menu -->
-<nav class="w3-sidebar w3-white w3-animate-left w3-margin-bottom" style="z-index:3;width:300px;" id="sidebar"><br />
-	<div class="w3-container w3-row">
-		<div class="w3-col s4">
-			<img src="<%=$this->getPage()->getTheme()->getBaseUrl()%>/avatar2.png" class="w3-circle w3-margin-right" style="width:46px" />
+<nav class="w3-sidebar w3-white w3-animate-left w3-margin-bottom" style="z-index:3;width:250px;" id="sidebar"><br />
+	<div class="w3-container w3-row" style="margin-bottom: 8px">
+		<div class="w3-col s3">
+			<img src="<%=$this->getPage()->getTheme()->getBaseUrl()%>/avatar2.png" class="w3-circle w3-margin-right" style="width: 33px" />
 		</div>
-		<div class="w3-col s8 w3-bar">
+		<div class="w3-col s9 w3-bar">
 			<span><%[ Welcome ]%>, <strong><%=$this->User->getUsername()%></strong></span><br>
 			<script>var main_side_bar_reload_url = '<%=$this->reload_url%>';</script>
 			<com:TActiveLinkButton
@@ -27,7 +27,6 @@
 			<a href="<%=$this->Service->constructUrl('ApplicationSettings')%>" class="w3-bar-item w3-button<%=$this->getModule('users')->isPageAllowed($this->User, 'ApplicationSettings') ? '' : ' hide'%>" title="<%[ Application settings ]%>"><i class="fa fa-cog"></i></a>
 		</div>
 	</div>
-	<hr />
 	<div class="w3-container w3-black">
 		<h5>Baculum Menu</h5>
 	</div>
diff --git a/gui/baculum/themes/Baculum-v2/css/baculum.css b/gui/baculum/themes/Baculum-v2/css/baculum.css
index 53dcdcb4d9..9dd44dd408 100644
--- a/gui/baculum/themes/Baculum-v2/css/baculum.css
+++ b/gui/baculum/themes/Baculum-v2/css/baculum.css
@@ -1,3 +1,8 @@
+#page_main > header {
+	display: inline-block;
+	margin-top: 8px;
+}
+
 #jobs_summary_graph {
 	height: 380px;
 	z-index: 0;
@@ -19,6 +24,11 @@ pre {
 	word-wrap: break-word;       /* Internet Explorer 5.5+ */
 }
 
+table.dataTable {
+	font-size: 14px;
+	line-height: 1.2;
+}
+
 th, table.dataTable thead td {
 	border-bottom: none !important;
 }
@@ -63,6 +73,14 @@ table.dataTable.no-footer {
 	background-image: linear-gradient(to bottom, white 0%, #e9e9e9 100%);
 }
 
+table.dataTable tbody th, table.dataTable tbody td {
+	padding: 8px 7px;
+}
+
+table.dataTable tfoot th, table.dataTable tfoot td {
+	padding: 10px 0 6px 0 !important;
+}
+
 /* Hide first default column in column visibility menu */
 div.dt-button-collection button[data-cv-idx="0"] {
 	display: none;
@@ -72,6 +90,13 @@ table.selectable tr {
 	cursor: pointer;
 }
 
+img.btn_loader {
+	display: inline-block;
+	margin: 0 9px 0 10px;
+	width: 22px;
+	height: 22px;
+}
+
 div.table_toolbar {
 	display: inline-block;
 	margin-left: 10px;
@@ -100,6 +125,7 @@ table.dataTable tbody > tr.selected, table.dataTable tbody > tr > .selected {
 
 th.action_col, td.action_col {
 	width: 110px !important;
+	text-align: center;
 }
 
 td.action_col button {
@@ -334,7 +360,7 @@ table.component td:nth-of-type(1) {
 	padding: 5px 0;
 	min-height: 48px;
 	background-color: rgba(255, 255, 255, 0.5);
-	width: calc(100% - 300px);
+	width: calc(100% - 250px);
 }
 
 .bottom_buttons a, .bottom_buttons button {