NIFI-630:

- Adding the component id to the configuration/detail dialogs for [remote] process groups.
- Allowing text to be selected in the stats history dialog.
- Remove connection source/destination id from the stats history dialog.
- Introducing more spacing to the stat history dialog details on the left.
This commit is contained in:
Matt Gilman 2015-06-01 17:23:13 -04:00
parent e2eb6f7c09
commit 84e56f2ef5
13 changed files with 53 additions and 44 deletions

View File

@ -151,9 +151,7 @@ public class VolatileComponentStatusRepository implements ComponentStatusReposit
history.setComponentDetail("Group Id", status.getGroupId());
history.setComponentDetail("Name", status.getName());
history.setComponentDetail("Source Id", status.getSourceId());
history.setComponentDetail("Source Name", status.getSourceName());
history.setComponentDetail("Destination Id", status.getDestinationId());
history.setComponentDetail("Destination Name", status.getDestinationName());
final StandardStatusSnapshot snapshot = new StandardStatusSnapshot();

View File

@ -17,14 +17,19 @@
<%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
<div id="process-group-configuration">
<div class="dialog-content">
<span id="process-group-id" class="hidden"></span>
<div class="process-group-setting">
<div class="setting-name">Process group name</div>
<div class="setting">
<div class="setting-name">Name</div>
<div class="setting-field">
<input type="text" id="process-group-name" name="process-group-name" class="process-group-field"/>
</div>
</div>
<div class="process-group-setting">
<div class="setting">
<div class="setting-name">Id</div>
<div class="setting-field">
<span id="process-group-id"></span>
</div>
</div>
<div class="setting">
<div class="setting-name">Comments</div>
<div class="setting-field">
<textarea cols="30" rows="4" id="process-group-comments" name="process-group-comments" class="process-group-field"></textarea>

View File

@ -17,13 +17,19 @@
<%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
<div id="process-group-details">
<div class="dialog-content">
<div class="process-group-setting">
<div class="setting-name">Process group name</div>
<div class="setting">
<div class="setting-name">Name</div>
<div class="setting-field">
<span id="read-only-process-group-name"></span>
</div>
</div>
<div class="process-group-setting">
<div class="setting">
<div class="setting-name">Id</div>
<div class="setting-field">
<span id="read-only-process-group-id"></span>
</div>
</div>
<div class="setting">
<div class="setting-name">Comments</div>
<div class="setting-field">
<div id="read-only-process-group-comments"></div>

View File

@ -17,14 +17,18 @@
<%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
<div id="remote-process-group-configuration">
<div class="dialog-content">
<span id="remote-process-group-configuration-id" class="hidden"></span>
<div class="setting">
<div class="setting-name">Name</div>
<div class="setting-field">
<span id="remote-process-group-id" class="hidden"></span>
<span id="remote-process-group-name"></span>
</div>
</div>
<div class="setting">
<div class="setting-name">Id</div>
<div class="setting-field">
<span id="remote-process-group-id"></span>
</div>
</div>
<div class="setting">
<div class="setting-name">URL</div>
<div class="setting-field">

View File

@ -23,6 +23,12 @@
<span id="read-only-remote-process-group-name"></span>
</div>
</div>
<div class="setting">
<div class="setting-name">Id</div>
<div class="setting-field">
<span id="read-only-remote-process-group-id"></span>
</div>
</div>
<div class="setting">
<div class="setting-name">URL</div>
<div class="setting-field">

View File

@ -15,7 +15,7 @@
limitations under the License.
--%>
<%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
<div id="status-history-dialog" class="dialog" draggable="true">
<div id="status-history-dialog" class="dialog">
<div id="status-history-details"></div>
<div id="status-history-container">
<div id="status-history-refresh-container">

View File

@ -18,11 +18,7 @@
z-index: 1301;
display: none;
width: 400px;
height: 300px;
}
#process-group-configuration div.dialog-content {
margin-top: -10px;
height: 320px;
}
.process-group-field {
@ -31,9 +27,4 @@
textarea.process-group-field {
height: 100px;
}
div.process-group-setting {
margin-top: 7px;
width: 380px;
}

View File

@ -18,9 +18,5 @@
z-index: 1301;
display: none;
width: 400px;
height: 270px;
}
#process-group-details div.dialog-content {
margin-top: -10px;
height: 290px;
}

View File

@ -22,7 +22,7 @@
position: absolute;
overflow: hidden;
width: 400px;
height: 280px;
height: 315px;
font-size: 10px;
z-index: 1201;
display: none;
@ -32,7 +32,7 @@
position: absolute;
overflow: hidden;
width: 400px;
height: 280px;
height: 315px;
font-size: 10px;
z-index: 1201;
display: none;

View File

@ -45,8 +45,6 @@
font-weight: normal;
margin-top: 6px;
margin-left: 3px;
-webkit-user-select: none;
-moz-user-select: none;
}
#status-history-loading-container {
@ -110,24 +108,25 @@
#status-history-details {
float: left;
width: 275px;
padding-top: 8px;
padding: 3px;
overflow: auto;
cursor: default;
}
div.status-history-detail {
margin-bottom: 8px;
margin-bottom: 12px;
cursor: auto;
}
div.detail-container-label {
color: #333;
font-size: 12px;
font-weight: bold;
margin-bottom: 4px;
margin-bottom: 8px;
}
div.detail-item {
margin-bottom: 5px;
margin-bottom: 8px;
}
div.detail-item-label {

View File

@ -37,6 +37,7 @@ nf.ProcessGroupDetails = (function () {
handler: {
close: function () {
// clear the processor details
nf.Common.clearField('read-only-process-group-id');
nf.Common.clearField('read-only-process-group-name');
nf.Common.clearField('read-only-process-group-comments');
}
@ -53,6 +54,7 @@ nf.ProcessGroupDetails = (function () {
var selectionData = selection.datum();
// populate the port settings
nf.Common.populateField('read-only-process-group-id', selectionData.component.id);
nf.Common.populateField('read-only-process-group-name', selectionData.component.name);
nf.Common.populateField('read-only-process-group-comments', selectionData.component.comments);

View File

@ -34,10 +34,11 @@ nf.RemoteProcessGroupDetails = (function () {
handler: {
close: function () {
// clear the remote process group details
$('#read-only-remote-process-group-name').text('');
$('#read-only-remote-process-group-url').text('');
$('#read-only-remote-process-group-timeout').val('');
$('#read-only-remote-process-group-yield-duration').val('');
nf.Common.clearField('read-only-remote-process-group-id');
nf.Common.clearField('read-only-remote-process-group-name');
nf.Common.clearField('read-only-remote-process-group-url');
nf.Common.clearField('read-only-remote-process-group-timeout');
nf.Common.clearField('read-only-remote-process-group-yield-duration');
}
}
}).draggable({
@ -57,10 +58,11 @@ nf.RemoteProcessGroupDetails = (function () {
var selectionData = selection.datum();
// populate the port settings
$('#read-only-remote-process-group-name').text(selectionData.component.name);
$('#read-only-remote-process-group-url').text(selectionData.component.targetUri);
$('#read-only-remote-process-group-timeout').text(selectionData.component.communicationsTimeout);
$('#read-only-remote-process-group-yield-duration').text(selectionData.component.yieldDuration);
nf.Common.populateField('read-only-remote-process-group-id', selectionData.component.id);
nf.Common.populateField('read-only-remote-process-group-name', selectionData.component.name);
nf.Common.populateField('read-only-remote-process-group-url', selectionData.component.targetUri);
nf.Common.populateField('read-only-remote-process-group-timeout', selectionData.component.communicationsTimeout);
nf.Common.populateField('read-only-remote-process-group-yield-duration', selectionData.component.yieldDuration);
// show the details
$('#remote-process-group-details').modal('show');

View File

@ -1165,7 +1165,7 @@ nf.StatusHistory = (function () {
// make the new property dialog draggable
$('#status-history-dialog').draggable({
cancel: '#status-history-chart-container, #status-history-chart-control-container, #status-history-details, div.detail-item-value',
cancel: '#status-history-chart-container, #status-history-chart-control-container, div.status-history-detail, div.button, div.combo, div.summary-refresh',
containment: 'parent'
}).on('click', '#status-history-close', function () {
// remove the current status history