When live events are streaming the connection status indicator will be green. Red or orange indicates the " +
+ "browser is having difficulty connecting to the server, and live events are no longer being received.
If the indicator " +
+ "appears red or orange, click next for troubleshooting help.
{{ browserName }} is connecting to the live events server on port {{ socketPort }}. The current connection status is " +
+ " {{ socketStatus }}.
If the connection status indicator is not green, have the " +
+ "system administrator verify this is the correct port and that access to the port is not blocked by a firewall."
+ }]
+ }
+ });
diff --git a/awx/ui/static/js/help/FirefoxSocketHelp.js b/awx/ui/static/js/help/FirefoxSocketHelp.js
new file mode 100644
index 0000000000..88081ddc44
--- /dev/null
+++ b/awx/ui/static/js/help/FirefoxSocketHelp.js
@@ -0,0 +1,77 @@
+/*********************************************
+ * Copyright (c) 2014 AnsibleWorks, Inc.
+ *
+ * FireFoxSocketHelp.js
+ *
+ * Help object for socket connection troubleshooting
+ *
+ */
+
+'use strict';
+
+angular.module('FFSocketHelpDefinition', [])
+ .value('FFSocketHelp', {
+ story: {
+ hdr: 'Live Events',
+ width: 510,
+ height: 560,
+ steps: [{
+ intro: 'Connection status indicator:',
+ img: {
+ src: 'socket_indicator.png',
+ maxWidth: 360
+ },
+ box: "
When live events are streaming the connection status indicator will be green. Red or orange indicates the " +
+ "browser is having difficulty connecting to the server, and live events are no longer being received.
If the indicator " +
+ "appears red or orange, click Next for troubleshooting help.
{{ browserName }} is connecting to the live events server on port {{ socketPort }}. The current connection status is " +
+ " {{ socketStatus }}.
If the connection status indicator is not green, have the " +
+ "system administrator verify this is the correct port and that access to the port is not blocked by a firewall.
Click the Confirm the Security Exception button. This will add the self signed certificate from the Tower server to Firefox's list of trusted certificates.
Now that Firefox has accepted the security certificate the live event connection status indicator should turn green. If it does not, reload Tower by clicking the " +
+ "Firefox refresh button."
+ }]
+ }
+ });
diff --git a/awx/ui/static/js/help/SafariSocketHelp.js b/awx/ui/static/js/help/SafariSocketHelp.js
new file mode 100644
index 0000000000..9cb5e644e8
--- /dev/null
+++ b/awx/ui/static/js/help/SafariSocketHelp.js
@@ -0,0 +1,49 @@
+/*********************************************
+ * Copyright (c) 2014 AnsibleWorks, Inc.
+ *
+ * SafairSocketHelp.js
+ *
+ * Help object for socket connection troubleshooting
+ *
+ */
+
+'use strict';
+
+angular.module('SafariSocketHelpDefinition', [])
+ .value('SafariSocketHelp', {
+ story: {
+ hdr: 'Live Events',
+ width: 510,
+ height: 560,
+ steps: [{
+ intro: 'Connection status indicator:',
+ img: {
+ src: 'socket_indicator.png',
+ maxWidth: 360
+ },
+ box: "
When live events are streaming the connection status indicator will be green. Red or orange indicates the " +
+ "browser is having difficulty connecting to the server, and live events are no longer being received.
If the indicator " +
+ "appears red or orange, click next for troubleshooting help.
{{ browserName }} is connecting to the live events server on port {{ socketPort }}. The current connection status is " +
+ " {{ socketStatus }}.
If the connection status indicator is not green, have the " +
+ "system administrator verify this is the correct port and that access to the port is not blocked by a firewall.
Safari will not connect to the live event port when the Tower web server is configured with a self signed certificate. Check with a system administrator to" +
+ "determine if Tower is using a self signed certificate. Installing a signed certificate will fix the problem.
" +
+ "
Switching browsers to either Chrome or Firefox will work as well.
"
+ }]
+ }
+ });
diff --git a/awx/ui/static/js/helpers/SocketHelper.js b/awx/ui/static/js/helpers/SocketHelper.js
new file mode 100644
index 0000000000..68ebd52700
--- /dev/null
+++ b/awx/ui/static/js/helpers/SocketHelper.js
@@ -0,0 +1,41 @@
+/*********************************************
+ * Copyright (c) 2014 AnsibleWorks, Inc.
+ *
+ * SocketHelper.js
+ *
+ * Show web socket troubleshooting help
+ *
+ */
+
+'use strict';
+
+angular.module('SocketHelper', ['Utilities', 'FFSocketHelpDefinition', 'SafariSocketHelpDefinition' , 'ChromeSocketHelpDefinition'])
+
+.factory('ShowSocketHelp', ['$location', '$rootScope', 'FFSocketHelp', 'SafariSocketHelp', 'ChromeSocketHelp', 'HelpDialog',
+function($location, $rootScope, FFSocketHelp, SafariSocketHelp, ChromeSocketHelp, HelpDialog) {
+ return function() {
+ var scope = $rootScope.$new();
+ scope.socketPort = $AnsibleConfig.websocket_port;
+ scope.socketURL = 'https://' + $location.host() + ':' + scope.socketPort + '/';
+ if ($rootScope.browser === "FF") {
+ scope.browserName = "Firefox";
+ HelpDialog({ defn: FFSocketHelp, scope: scope });
+ }
+ else if ($rootScope.browser === "SAFARI") {
+ scope.browserName = "Safari";
+ HelpDialog({ defn: SafariSocketHelp, scope: scope });
+ }
+ else {
+ if ($rootScope.browser === "MSIE") {
+ scope.browserName = "Internet Explorer";
+ }
+ else if ($rootScope.browser === "CHROME") {
+ scope.browserName = "Chrome";
+ }
+ else if ($rootScope.browser === "OPERA") {
+ scope.browserName = "Opera";
+ }
+ HelpDialog({ defn: ChromeSocketHelp, scope: scope });
+ }
+ };
+}]);
\ No newline at end of file
diff --git a/awx/ui/static/less/ansible-ui.less b/awx/ui/static/less/ansible-ui.less
index 3edc5c95ca..5c5e13c3d6 100644
--- a/awx/ui/static/less/ansible-ui.less
+++ b/awx/ui/static/less/ansible-ui.less
@@ -1125,8 +1125,17 @@ input[type="checkbox"].checkbox-no-label {
content: "\f111";
}
+ .error-color {
+ color:@red;
+ }
+
+ .connecting-color {
+ color: @warning;
+ }
+
+ .ok-color,
.icon-cloud-true {
- color: @green;
+ color: @green;
}
.icon-cloud-false {
@@ -1511,34 +1520,37 @@ tr td button i {
/* Help modal dialog */
-#help-modal {
+#help-modal-dialog {
overflow: hidden;
padding: 10px;
img {
- max-width: 450px;
- margin-top: 15px;
- margin-bottom: 15px;
- border: 1px solid @grey;
- box-shadow: 3px 3px 5px 0 @grey;
- }
+ margin-top: 15px;
+ margin-bottom: 15px;
+ border: 1px solid @grey;
+ box-shadow: 3px 3px 5px 0 @grey;
+ }
+
+ .img-container,
+ .icon-container {
+ width: 100%;
+ text-align: center;
+ }
+
+ .icon-container {
+ margin-top: 15px;
+ margin-bottom: 15px;
+ }
+
+ .help-box {
+ width: 100%;
+ margin-top: 15px;
+ border-radius: 6px;
+ color: @grey-txt;
+ font-size: 14px;
+ }
}
-#help-modal .img-container {
- width: 100%;
- text-align: center;
-}
-
-.help-box {
- width: 100%;
- margin-top: 15px;
- border-radius: 6px;
- padding: 8px;
- color: @grey-txt;
- font-size: 14px;
- }
-
-
/* Activity Stream Widget */
#stream-container {
diff --git a/awx/ui/static/lib/ansible/Socket.js b/awx/ui/static/lib/ansible/Socket.js
index 963b5b80ae..58794f9f26 100644
--- a/awx/ui/static/lib/ansible/Socket.js
+++ b/awx/ui/static/lib/ansible/Socket.js
@@ -37,14 +37,13 @@ angular.module('SocketIO', ['AuthService', 'Utilities'])
var result = '';
switch(status) {
case 'error':
- result = "There was an error connecting to the websocket server. Click for troubleshooting help.";
+ result = "Live events: error connecting to the Tower server. Click for troubleshooting help.";
break;
case 'connecting':
- result = "Attempting to connect to the websocket server. Click for troubleshooting help.";
+ result = "Live events: attempting to connect to the Tower server. Click for troubleshooting help.";
break;
case "ok":
- result = "Connected to the websocket server. Pages containing job status information for playbook runs, SCM updates and inventory " +
- "sync processes will automatically update in real-time.";
+ result = "Live events: connected. Pages containing job status information will automatically update in real-time.";
}
return result;
}
diff --git a/awx/ui/static/lib/ansible/Utilities.js b/awx/ui/static/lib/ansible/Utilities.js
index f21198850d..f89305fe73 100644
--- a/awx/ui/static/lib/ansible/Utilities.js
+++ b/awx/ui/static/lib/ansible/Utilities.js
@@ -312,26 +312,43 @@ angular.module('Utilities', ['RestServices', 'Utilities'])
* HelpDialog({ defn: })
*
*/
-.factory('HelpDialog', ['$rootScope', '$location', 'Store',
- function ($rootScope, $location, Store) {
+.factory('HelpDialog', ['$rootScope', '$compile', '$location', 'Store',
+ function ($rootScope, $compile, $location, Store) {
return function (params) {
var defn = params.defn,
current_step = params.step,
- autoShow = params.autoShow || false;
+ autoShow = params.autoShow || false,
+ scope = (params.scope) ? params.scope : $rootScope.$new();
+
+ function setButtonMargin() {
+ var width = ($('.ui-dialog[aria-describedby="help-modal-dialog"] .ui-dialog-buttonpane').innerWidth() / 2) - $('#help-next-button').outerWidth() - 93;
+ $('#help-next-button').css({'margin-right': width + 'px'});
+ }
function showHelp(step) {
- var btns, ww, width, height, isOpen = false;
+ var e, btns, ww, width, height, isOpen = false;
current_step = step;
function buildHtml(step) {
var html = '';
- //html += (step.intro) ? "
" + step.intro + "
" : "";
html += "
" + step.intro + "
\n";
- html += "
\n";
- html += "";
- html += "
\n";
+ if (step.img) {
+ html += "
\n";
+ html += "\n" : "";
+ html += "" + step.box + "
![](\"")
";
- html += "