System Summary
\n";
html += "\n";
diff --git a/awx/ui/static/less/ansible-ui.less b/awx/ui/static/less/ansible-ui.less
index 046bc5bf44..01279404b2 100644
--- a/awx/ui/static/less/ansible-ui.less
+++ b/awx/ui/static/less/ansible-ui.less
@@ -7,15 +7,18 @@
*
*/
-@black: #171717;
-@warning: #FF9900;
-@red: #da4f49;
-@red-hover: #AE3F3A;
-@green: #5bb75b;
-@blue: #1778c3; /* logo blue */
-@blue-link: #0088cc;
-@grey: #A9A9A9;
-@green: #5bb75b;
+@black: #171717;
+@warning: #FF9900;
+@red: #da4f49;
+@red-hover: #AE3F3A;
+@green: #5bb75b;
+@blue: #1778c3; /* logo blue */
+@blue-link: #0088cc;
+@grey: #A9A9A9;
+@green: #5bb75b;
+@info: #d9edf7; /* alert info background color */
+@info-border: #bce8f1; /* alert info border color */
+@info-color: #3a87ad;
html {
background-color: @black;
@@ -1204,6 +1207,44 @@ tr td button i {
margin-bottom: 5px;
}
+/* help dialog */
+
+#help-modal {
+ overflow: hidden;
+ padding: 10px;
+ text-align: center;
+}
+
+.help-box {
+ text-align: center;
+ border: 1px solid @info-border;
+ border-radius: 6px;
+ margin-top: 0;
+ margin-bottom: 10px;
+ padding: 10px;
+ background-color: @info;
+ color: @info-color;
+}
+
+.help-intro {
+ width: 100;
+ text-align: left;
+ margin: 15px 0 30px 0;
+ font-weight: normal;
+ font-size: 16px;
+ color: #888;
+}
+
+.step-no {
+ font-weight: bold;
+}
+
+.ui-dialog-titlebar.ui-widget-header {
+ color: #0088cc;
+ background-color: #F0F0F0;
+ background-image: none;
+}
+
/* Large desktop */
diff --git a/awx/ui/static/lib/ansible/Utilities.js b/awx/ui/static/lib/ansible/Utilities.js
index 8240d3bef2..0f11e5d876 100644
--- a/awx/ui/static/lib/ansible/Utilities.js
+++ b/awx/ui/static/lib/ansible/Utilities.js
@@ -5,7 +5,7 @@
* Utility functions
*
*/
-angular.module('Utilities',['RestServices'])
+angular.module('Utilities',['RestServices', 'Utilities'])
.factory('ClearScope', function() {
return function(id) {
@@ -219,6 +219,83 @@ angular.module('Utilities',['RestServices'])
}
}
}])
+
+ .factory('HelpDialog', ['$rootScope', '$location', function($rootScope, $location) {
+ return function(params) {
+ // Display a help dialog
+ //
+ // HelpDialog({ defn: })
+ //
+
+ function showHelp(params) {
+ // Using a function inside a function so we can recurse
+ // over the steps in the help story
+
+ var defn = params.defn;
+ var nxtStory = { story: { steps: { } } };
+ var width, height;
+
+ function buildHtml(step) {
+ var html = '';
+ html += (step.intro) ? "![](\"")
" : "";
+ html += (step.box) ? "
-
+
+
+
+
" + step.intro + "
" : "";
+ html += (step.img) ? "" + step.box + "
" : "";
+ return html;
+ }
+
+ var nxt;
+ for (var step in defn.story.steps) {
+ nxt = step;
+ break;
+ }
+
+ width = (defn.story.steps[nxt].width !== undefined) ? defn.story.steps[nxt].width : 500;
+ height = (defn.story.steps[nxt].height !== undefined) ? defn.story.steps[nxt].height : 600;
+
+ if (Object.keys(defn.story.steps).length > 1) {
+ // We have multiple steps
+ for (var step in defn.story.steps) {
+ if (step !== nxt) {
+ nxtStory.story.steps[step] = defn.story.steps[step];
+ }
+ }
+ nxtStory.story.hdr = defn.story.hdr;
+
+ nxtStep = function() {
+ showHelp({ defn: nxtStory });
+ }
+
+ $('#help-modal').html(buildHtml(defn.story.steps[nxt])).dialog({
+ position: { my: "center top", at: "center top+150", of: 'body' },
+ title: defn.story.hdr,
+ width: width,
+ height: height,
+ buttons: [{ text: "Next", click: nxtStep }],
+ closeOnEscape: true,
+ close: function() { $('#help-modal').empty(); }
+ });
+ $('.ui-dialog-buttonset button').addClass('btn btn-primary').focus();
+ $('.ui-dialog-titlebar-close').empty().removeClass('close').removeClass('ui-dialog-titlebar-close').addClass('close').append('x');
+ }
+ else {
+ $('#help-modal').html(buildHtml(defn.story.steps[nxt])).dialog({
+ position: { my: "center top", at: "center top+150", of: 'body' },
+ title: defn.story.hdr,
+ width: width,
+ height: height,
+ buttons: [ { text: "OK", click: function() { $( this ).dialog( "close" ); } } ],
+ closeOnEscape: true,
+ close: function() { $('#help-modal').empty(); }
+ });
+ $('.ui-dialog-buttonset button').addClass('btn btn-primary').focus();
+ $('.ui-dialog-titlebar button').empty().removeClass('close').removeClass('ui-dialog-titlebar-close').addClass('close').append('x');
+ }
+ }
+
+ showHelp(params);
+
+ }
+ }])
.factory('ReturnToCaller', ['$location', function($location) {
return function(idx) {
diff --git a/awx/ui/static/lib/ansible/form-generator.js b/awx/ui/static/lib/ansible/form-generator.js
index 75eb3705e2..7d7bc873fb 100644
--- a/awx/ui/static/lib/ansible/form-generator.js
+++ b/awx/ui/static/lib/ansible/form-generator.js
@@ -105,11 +105,13 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
label.addClass('prepend-asterisk');
}
});
-
- // Remove leftover timer, if any
- //if ((!options.modal) && this.scope.timer) {
- // clearInterval(this.scope.timer);
- //}
+
+ try {
+ $('#help-modal').empty().dialog('destroy');
+ }
+ catch(e) {
+ //ignore any errors should the dialog not be initialized
+ }
if (options.modal) {
this.scope.formModalActionDisabled = false;
@@ -1198,12 +1200,12 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
html += this.breadCrumbs(options, navigation);
// build the groups page
- html += "\n";
- html += "\n";
- html += "
\n";
+ //html += "Hint: Get started building your inventory by adding a group. After creating a group, " + - "use the Inventories->Hosts page to " + - "add hosts to the group.
"; - html += "\n";
+ //html += "\n";
+ //html += "
\n";
/*
html += "Hint: Get started building your inventory by adding a group. After creating a group " + + // "go to the Hosts page to " + + // "add hosts to the group.
"; + //html += "\n";
diff --git a/awx/ui/static/lib/ansible/list-generator.js b/awx/ui/static/lib/ansible/list-generator.js
index de280e2fd9..a27902d933 100644
--- a/awx/ui/static/lib/ansible/list-generator.js
+++ b/awx/ui/static/lib/ansible/list-generator.js
@@ -72,6 +72,13 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
// remove lingering popover
. Seems to be a bug in TB3 RC1
$(this).remove();
});
+
+ try {
+ $('#help-modal').empty().dialog('destroy');
+ }
+ catch(e) {
+ //ignore any errors should the dialog not be initialized
+ }
if (options.mode == 'lookup') {
// options should include {hdr: