mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
Migrate deploy confirmations to notifications
This commit is contained in:
Nick O'Leary
parent
15f41a2e7c
commit
dfebc4b78d
@ -97,113 +97,6 @@ RED.deploy = (function() {
|
||||
|
||||
RED.actions.add("core:deploy-flows",save);
|
||||
|
||||
$( "#node-dialog-confirm-deploy" ).dialog({
|
||||
title: RED._('deploy.confirm.button.confirm'),
|
||||
modal: true,
|
||||
autoOpen: false,
|
||||
width: 550,
|
||||
height: "auto",
|
||||
buttons: [
|
||||
{
|
||||
text: RED._("common.label.cancel"),
|
||||
click: function() {
|
||||
$( this ).dialog( "close" );
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "node-dialog-confirm-deploy-review",
|
||||
text: RED._("deploy.confirm.button.review"),
|
||||
class: "primary disabled",
|
||||
click: function() {
|
||||
if (!$("#node-dialog-confirm-deploy-review").hasClass('disabled')) {
|
||||
RED.diff.showRemoteDiff();
|
||||
$( this ).dialog( "close" );
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "node-dialog-confirm-deploy-merge",
|
||||
text: RED._("deploy.confirm.button.merge"),
|
||||
class: "primary disabled",
|
||||
click: function() {
|
||||
RED.diff.mergeDiff(currentDiff);
|
||||
$( this ).dialog( "close" );
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "node-dialog-confirm-deploy-deploy",
|
||||
text: RED._("deploy.confirm.button.confirm"),
|
||||
class: "primary",
|
||||
click: function() {
|
||||
|
||||
var ignoreChecked = $( "#node-dialog-confirm-deploy-hide" ).prop("checked");
|
||||
if (ignoreChecked) {
|
||||
ignoreDeployWarnings[$( "#node-dialog-confirm-deploy-type" ).val()] = true;
|
||||
}
|
||||
save(true,/conflict/.test($("#node-dialog-confirm-deploy-type" ).val()));
|
||||
$( this ).dialog( "close" );
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "node-dialog-confirm-deploy-overwrite",
|
||||
text: RED._("deploy.confirm.button.overwrite"),
|
||||
class: "primary",
|
||||
click: function() {
|
||||
save(true,/conflict/.test($("#node-dialog-confirm-deploy-type" ).val()));
|
||||
$( this ).dialog( "close" );
|
||||
}
|
||||
}
|
||||
],
|
||||
create: function() {
|
||||
$("#node-dialog-confirm-deploy").parent().find("div.ui-dialog-buttonpane")
|
||||
.prepend('<div style="height:0; vertical-align: middle; display:inline-block; margin-top: 13px; float:left;">'+
|
||||
'<input style="vertical-align:top;" type="checkbox" id="node-dialog-confirm-deploy-hide"> '+
|
||||
'<label style="display:inline;" for="node-dialog-confirm-deploy-hide" data-i18n="deploy.confirm.doNotWarn"></label>'+
|
||||
'<input type="hidden" id="node-dialog-confirm-deploy-type">'+
|
||||
'</div>');
|
||||
},
|
||||
open: function() {
|
||||
var deployType = $("#node-dialog-confirm-deploy-type" ).val();
|
||||
if (/conflict/.test(deployType)) {
|
||||
$( "#node-dialog-confirm-deploy" ).dialog('option','title', RED._('deploy.confirm.button.review'));
|
||||
$("#node-dialog-confirm-deploy-deploy").hide();
|
||||
$("#node-dialog-confirm-deploy-review").addClass('disabled').show();
|
||||
$("#node-dialog-confirm-deploy-merge").addClass('disabled').show();
|
||||
$("#node-dialog-confirm-deploy-overwrite").toggle(deployType === "deploy-conflict");
|
||||
currentDiff = null;
|
||||
$("#node-dialog-confirm-deploy-conflict-checking").show();
|
||||
$("#node-dialog-confirm-deploy-conflict-auto-merge").hide();
|
||||
$("#node-dialog-confirm-deploy-conflict-manual-merge").hide();
|
||||
|
||||
var now = Date.now();
|
||||
RED.diff.getRemoteDiff(function(diff) {
|
||||
var ellapsed = Math.max(1000 - (Date.now()-now), 0);
|
||||
currentDiff = diff;
|
||||
setTimeout(function() {
|
||||
$("#node-dialog-confirm-deploy-conflict-checking").hide();
|
||||
var d = Object.keys(diff.conflicts);
|
||||
if (d.length === 0) {
|
||||
$("#node-dialog-confirm-deploy-conflict-auto-merge").show();
|
||||
$("#node-dialog-confirm-deploy-merge").removeClass('disabled')
|
||||
} else {
|
||||
$("#node-dialog-confirm-deploy-conflict-manual-merge").show();
|
||||
}
|
||||
$("#node-dialog-confirm-deploy-review").removeClass('disabled')
|
||||
},ellapsed);
|
||||
})
|
||||
|
||||
|
||||
$("#node-dialog-confirm-deploy-hide").parent().hide();
|
||||
} else {
|
||||
$( "#node-dialog-confirm-deploy" ).dialog('option','title', RED._('deploy.confirm.button.confirm'));
|
||||
$("#node-dialog-confirm-deploy-deploy").show();
|
||||
$("#node-dialog-confirm-deploy-overwrite").hide();
|
||||
$("#node-dialog-confirm-deploy-review").hide();
|
||||
$("#node-dialog-confirm-deploy-merge").hide();
|
||||
$("#node-dialog-confirm-deploy-hide").parent().show();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
RED.events.on('nodes:change',function(state) {
|
||||
if (state.dirty) {
|
||||
@ -224,8 +117,9 @@ RED.deploy = (function() {
|
||||
if (currentRev === null || deployInflight || currentRev === msg.revision) {
|
||||
return;
|
||||
}
|
||||
var message = $('<div>').text(RED._('deploy.confirm.backgroundUpdate'));
|
||||
var message = $('<p>').text(RED._('deploy.confirm.backgroundUpdate'));
|
||||
activeNotifyMessage = RED.notify(message,{
|
||||
modal: true,
|
||||
fixed: true,
|
||||
buttons: [
|
||||
{
|
||||
@ -276,14 +170,93 @@ RED.deploy = (function() {
|
||||
}
|
||||
|
||||
function resolveConflict(currentNodes, activeDeploy) {
|
||||
$( "#node-dialog-confirm-deploy-config" ).hide();
|
||||
$( "#node-dialog-confirm-deploy-unknown" ).hide();
|
||||
$( "#node-dialog-confirm-deploy-unused" ).hide();
|
||||
$( "#node-dialog-confirm-deploy-conflict" ).show();
|
||||
$( "#node-dialog-confirm-deploy-type" ).val(activeDeploy?"deploy-conflict":"background-conflict");
|
||||
$( "#node-dialog-confirm-deploy" ).dialog( "open" );
|
||||
}
|
||||
var message = $('<div>');
|
||||
$('<p data-i18n="deploy.confirm.conflict"></p>').appendTo(message);
|
||||
var conflictCheck = $('<div id="node-dialog-confirm-deploy-conflict-checking" class="node-dialog-confirm-conflict-row">'+
|
||||
'<img src="red/images/spin.svg"/><div data-i18n="deploy.confirm.conflictChecking"></div>'+
|
||||
'</div>').appendTo(message);
|
||||
var conflictAutoMerge = $('<div class="node-dialog-confirm-conflict-row">'+
|
||||
'<i style="color: #3a3;" class="fa fa-check"></i><div data-i18n="deploy.confirm.conflictAutoMerge"></div>'+
|
||||
'</div>').hide().appendTo(message);
|
||||
var conflictManualMerge = $('<div id="node-dialog-confirm-deploy-conflict-manual-merge" class="node-dialog-confirm-conflict-row">'+
|
||||
'<i style="color: #999;" class="fa fa-exclamation"></i><div data-i18n="deploy.confirm.conflictManualMerge"></div>'+
|
||||
'</div>').hide().appendTo(message);
|
||||
|
||||
message.i18n();
|
||||
currentDiff = null;
|
||||
var buttons = [
|
||||
{
|
||||
text: RED._("common.label.cancel"),
|
||||
click: function() {
|
||||
conflictNotification.close();
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "node-dialog-confirm-deploy-review",
|
||||
text: RED._("deploy.confirm.button.review"),
|
||||
class: "primary disabled",
|
||||
click: function() {
|
||||
if (!$("#node-dialog-confirm-deploy-review").hasClass('disabled')) {
|
||||
RED.diff.showRemoteDiff();
|
||||
conflictNotification.close();
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "node-dialog-confirm-deploy-merge",
|
||||
text: RED._("deploy.confirm.button.merge"),
|
||||
class: "primary disabled",
|
||||
click: function() {
|
||||
if (!$("#node-dialog-confirm-deploy-merge").hasClass('disabled')) {
|
||||
RED.diff.mergeDiff(currentDiff);
|
||||
conflictNotification.close();
|
||||
}
|
||||
}
|
||||
}
|
||||
];
|
||||
if (activeDeploy) {
|
||||
buttons.push({
|
||||
id: "node-dialog-confirm-deploy-overwrite",
|
||||
text: RED._("deploy.confirm.button.overwrite"),
|
||||
class: "primary",
|
||||
click: function() {
|
||||
save(true,activeDeploy);
|
||||
conflictNotification.close();
|
||||
}
|
||||
})
|
||||
}
|
||||
var conflictNotification = RED.notify(message,{
|
||||
modal: true,
|
||||
fixed: true,
|
||||
width: 600,
|
||||
buttons: buttons
|
||||
});
|
||||
|
||||
var now = Date.now();
|
||||
RED.diff.getRemoteDiff(function(diff) {
|
||||
var ellapsed = Math.max(1000 - (Date.now()-now), 0);
|
||||
currentDiff = diff;
|
||||
setTimeout(function() {
|
||||
conflictCheck.hide();
|
||||
var d = Object.keys(diff.conflicts);
|
||||
if (d.length === 0) {
|
||||
conflictAutoMerge.show();
|
||||
$("#node-dialog-confirm-deploy-merge").removeClass('disabled')
|
||||
} else {
|
||||
conflictManualMerge.show();
|
||||
}
|
||||
$("#node-dialog-confirm-deploy-review").removeClass('disabled')
|
||||
},ellapsed);
|
||||
})
|
||||
}
|
||||
function cropList(list) {
|
||||
if (list.length > 5) {
|
||||
var remainder = list.length - 5;
|
||||
list = list.slice(0,5);
|
||||
list.push(RED._("deploy.confirm.plusNMore",{count:remainder}));
|
||||
}
|
||||
return list;
|
||||
}
|
||||
function save(skipValidation,force) {
|
||||
if (!$("#btn-deploy").hasClass("disabled")) {
|
||||
if (!RED.user.hasPermission("flows.write")) {
|
||||
@ -319,39 +292,62 @@ RED.deploy = (function() {
|
||||
}
|
||||
});
|
||||
|
||||
$( "#node-dialog-confirm-deploy-config" ).hide();
|
||||
$( "#node-dialog-confirm-deploy-unknown" ).hide();
|
||||
$( "#node-dialog-confirm-deploy-unused" ).hide();
|
||||
$( "#node-dialog-confirm-deploy-conflict" ).hide();
|
||||
|
||||
var showWarning = false;
|
||||
|
||||
var notificationMessage;
|
||||
var notificationButtons = [];
|
||||
var notification;
|
||||
if (hasUnknown && !ignoreDeployWarnings.unknown) {
|
||||
showWarning = true;
|
||||
$( "#node-dialog-confirm-deploy-type" ).val("unknown");
|
||||
$( "#node-dialog-confirm-deploy-unknown" ).show();
|
||||
$( "#node-dialog-confirm-deploy-unknown-list" )
|
||||
.html("<li>"+unknownNodes.join("</li><li>")+"</li>");
|
||||
notificationMessage = "<p>"+RED._('deploy.confirm.unknown')+"</p>"+
|
||||
'<ul class="node-dialog-configm-deploy-list"><li>'+cropList(unknownNodes).join("</li><li>")+"</li></ul><p>"+
|
||||
RED._('deploy.confirm.confirm')+
|
||||
"</p>";
|
||||
|
||||
notificationButtons= [
|
||||
{
|
||||
id: "node-dialog-confirm-deploy-deploy",
|
||||
text: RED._("deploy.confirm.button.confirm"),
|
||||
class: "primary",
|
||||
click: function() {
|
||||
save(true);
|
||||
notification.close();
|
||||
}
|
||||
}
|
||||
];
|
||||
} else if (hasInvalid && !ignoreDeployWarnings.invalid) {
|
||||
showWarning = true;
|
||||
$( "#node-dialog-confirm-deploy-type" ).val("invalid");
|
||||
$( "#node-dialog-confirm-deploy-config" ).show();
|
||||
invalidNodes.sort(sortNodeInfo);
|
||||
$( "#node-dialog-confirm-deploy-invalid-list" )
|
||||
.html("<li>"+invalidNodes.map(function(A) { return (A.tab?"["+A.tab+"] ":"")+A.label+" ("+A.type+")"}).join("</li><li>")+"</li>");
|
||||
|
||||
} else if (hasUnusedConfig && !ignoreDeployWarnings.unusedConfig) {
|
||||
// showWarning = true;
|
||||
// $( "#node-dialog-confirm-deploy-type" ).val("unusedConfig");
|
||||
// $( "#node-dialog-confirm-deploy-unused" ).show();
|
||||
//
|
||||
// unusedConfigNodes.sort(sortNodeInfo);
|
||||
// $( "#node-dialog-confirm-deploy-unused-list" )
|
||||
// .html("<li>"+unusedConfigNodes.map(function(A) { return (A.tab?"["+A.tab+"] ":"")+A.label+" ("+A.type+")"}).join("</li><li>")+"</li>");
|
||||
notificationMessage = "<p>"+RED._('deploy.confirm.improperlyConfigured')+"</p>"+
|
||||
'<ul class="node-dialog-configm-deploy-list"><li>'+cropList(invalidNodes.map(function(A) { return (A.tab?"["+A.tab+"] ":"")+A.label+" ("+A.type+")"})).join("</li><li>")+"</li></ul><p>"+
|
||||
RED._('deploy.confirm.confirm')+
|
||||
"</p>";
|
||||
notificationButtons= [
|
||||
{
|
||||
id: "node-dialog-confirm-deploy-deploy",
|
||||
text: RED._("deploy.confirm.button.confirm"),
|
||||
class: "primary",
|
||||
click: function() {
|
||||
save(true);
|
||||
notification.close();
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
if (showWarning) {
|
||||
$( "#node-dialog-confirm-deploy-hide" ).prop("checked",false);
|
||||
$( "#node-dialog-confirm-deploy" ).dialog( "open" );
|
||||
notificationButtons.unshift(
|
||||
{
|
||||
text: RED._("common.label.cancel"),
|
||||
click: function() {
|
||||
notification.close();
|
||||
}
|
||||
}
|
||||
);
|
||||
notification = RED.notify(notificationMessage,{
|
||||
modal: true,
|
||||
fixed: true,
|
||||
buttons:notificationButtons
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
@ -391,7 +387,7 @@ RED.deploy = (function() {
|
||||
'<p>'+RED._("deploy.successfulDeploy")+'</p>'+
|
||||
'<p>'+RED._("deploy.unusedConfigNodes")+' <a href="#" onclick="RED.sidebar.config.show(true); return false;">'+RED._("deploy.unusedConfigNodesLink")+'</a></p>',"success",false,6000);
|
||||
} else {
|
||||
RED.notify(RED._("deploy.successfulDeploy"),"success");
|
||||
RED.notify('<p>'+RED._("deploy.successfulDeploy")+'</p>',"success");
|
||||
}
|
||||
RED.nodes.eachNode(function(node) {
|
||||
if (node.changed) {
|
||||
|
||||
@ -74,6 +74,16 @@ RED.notifications = (function() {
|
||||
if (type) {
|
||||
n.className = "notification notification-"+type;
|
||||
}
|
||||
if (options.width) {
|
||||
var parentWidth = $("#notifications").width();
|
||||
if (options.width > parentWidth) {
|
||||
var margin = -(options.width-parentWidth)/2;
|
||||
$(n).css({
|
||||
width: options.width+"px",
|
||||
marginLeft: margin+"px"
|
||||
})
|
||||
}
|
||||
}
|
||||
n.style.display = "none";
|
||||
if (typeof msg === "string") {
|
||||
n.innerHTML = msg;
|
||||
@ -84,6 +94,9 @@ RED.notifications = (function() {
|
||||
var buttonSet = $('<div style="margin-top: 20px;" class="ui-dialog-buttonset"></div>').appendTo(n)
|
||||
options.buttons.forEach(function(buttonDef) {
|
||||
var b = $('<button>').html(buttonDef.text).click(buttonDef.click).appendTo(buttonSet);
|
||||
if (buttonDef.id) {
|
||||
b.attr('id',buttonDef.id);
|
||||
}
|
||||
if (buttonDef.class) {
|
||||
b.addClass(buttonDef.class);
|
||||
}
|
||||
@ -153,6 +166,9 @@ RED.notifications = (function() {
|
||||
var buttonSet = $('<div style="margin-top: 20px;" class="ui-dialog-buttonset"></div>').appendTo(nn)
|
||||
options.buttons.forEach(function(buttonDef) {
|
||||
var b = $('<button>').html(buttonDef.text).click(buttonDef.click).appendTo(buttonSet);
|
||||
if (buttonDef.id) {
|
||||
b.attr('id',buttonDef.id);
|
||||
}
|
||||
if (buttonDef.class) {
|
||||
b.addClass(buttonDef.class);
|
||||
}
|
||||
|
||||
@ -515,34 +515,30 @@
|
||||
}
|
||||
|
||||
|
||||
#node-dialog-confirm-deploy {
|
||||
.node-dialog-confirm-row {
|
||||
text-align: left; padding-top: 10px;
|
||||
ul.node-dialog-configm-deploy-list {
|
||||
font-size: 0.9em;
|
||||
width: 400px;
|
||||
margin: 10px auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.node-dialog-confirm-conflict-row {
|
||||
img {
|
||||
vertical-align:middle;
|
||||
height: 30px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
ul {
|
||||
font-size: 0.9em;
|
||||
width: 400px;
|
||||
margin: 10px auto;
|
||||
text-align: left;
|
||||
i {
|
||||
vertical-align:middle;
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
width: 30px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.node-dialog-confirm-conflict-row {
|
||||
img {
|
||||
vertical-align:middle;
|
||||
height: 30px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
i {
|
||||
vertical-align:middle;
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
width: 30px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
div {
|
||||
vertical-align: middle;
|
||||
width: calc(100% - 60px);
|
||||
display:inline-block;
|
||||
}
|
||||
div {
|
||||
vertical-align: middle;
|
||||
width: calc(100% - 60px);
|
||||
display:inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -82,31 +82,6 @@
|
||||
<div id="notifications"></div>
|
||||
<div id="dropTarget"><div data-i18n="[append]workspace.dropFlowHere"><br/><i class="fa fa-download"></i></div></div>
|
||||
|
||||
<div id="node-dialog-confirm-deploy" class="hide">
|
||||
<form class="form-horizontal">
|
||||
<div id="node-dialog-confirm-deploy-config" class="node-dialog-confirm-row" data-i18n="[prepend]deploy.confirm.improperlyConfigured;[append]deploy.confirm.confirm">
|
||||
<ul id="node-dialog-confirm-deploy-invalid-list"></ul>
|
||||
</div>
|
||||
<div id="node-dialog-confirm-deploy-unknown" class="node-dialog-confirm-row" data-i18n="[prepend]deploy.confirm.unknown;[append]deploy.confirm.confirm">
|
||||
<ul id="node-dialog-confirm-deploy-unknown-list"></ul>
|
||||
</div>
|
||||
<div id="node-dialog-confirm-deploy-conflict" class="node-dialog-confirm-row">
|
||||
<div style="margin-left: 40px; margin-bottom: 10px;">
|
||||
<span data-i18n="deploy.confirm.conflict"></span>
|
||||
</div>
|
||||
<div id="node-dialog-confirm-deploy-conflict-checking" class="node-dialog-confirm-conflict-row">
|
||||
<img src="red/images/spin.svg"/><div data-i18n="deploy.confirm.conflictChecking"></div>
|
||||
</div>
|
||||
<div id="node-dialog-confirm-deploy-conflict-auto-merge" class="node-dialog-confirm-conflict-row">
|
||||
<i style="color: #3a3;" class="fa fa-check"></i><div data-i18n="deploy.confirm.conflictAutoMerge"></div>
|
||||
</div>
|
||||
<div id="node-dialog-confirm-deploy-conflict-manual-merge" class="node-dialog-confirm-conflict-row">
|
||||
<i style="color: #999;" class="fa fa-exclamation"></i><div data-i18n="deploy.confirm.conflictManualMerge"></div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="node-dialog-library-save-confirm" class="hide">
|
||||
<form class="form-horizontal">
|
||||
<div style="text-align: center; padding-top: 30px;" id="node-dialog-library-save-content">
|
||||
|
||||
@ -166,7 +166,8 @@
|
||||
"backgroundUpdate": "The flows on the server have been updated.",
|
||||
"conflictChecking": "Checking to see if the changes can be merged automatically",
|
||||
"conflictAutoMerge": "The changes include no conflicts and can be merged automatically.",
|
||||
"conflictManualMerge": "The changes include conflicts that must be resolved before they can be deployed."
|
||||
"conflictManualMerge": "The changes include conflicts that must be resolved before they can be deployed.",
|
||||
"plusNMore": "+ __count__ more"
|
||||
}
|
||||
},
|
||||
"diff": {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user