Add help images for core dashboard components (ubccr#1044)

* Add help images for core dashboard components

configuration/assets.json

@@ -9,6 +9,7 @@
             ],
             "css": [
                 "gui/css/JobComponent.css",
+                "gui/css/ChartComponent.css",
                 "gui/css/ReportThumbnailsComponent.css"
             ]
         }

html/gui/css/ChartComponent.css

@@ -0,0 +1,22 @@
+.dashboard-help-win {
+    font-size: 12px;
+    margin: 1em;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden
+}
+
+.dashboard-help-win li {
+    padding-left: 1em
+}
+
+.dashboard-help-win p {
+    margin-top: 4px;
+}
+
+.dashboard-help-win img {
+    flex-shrink: 0;
+    min-width: 100%;
+    min-height: 100%
+}

html/gui/js/Portlet.js

@@ -45,25 +45,24 @@ CCR.xdmod.ui.Portlet = Ext.extend(Ext.ux.Portlet, {
         }
 
         if (this.help) {
-            var helpText = this.help.html;
-            var helpTitle = 'Help for ' + this.help.title;
-
             // Store a reference to the window to prevent multiple windows
             // being created if the user clicks the help button multiple times.
             var helpwin;
 
             this.tools.push({
                 id: 'help',
                 qtip: 'Display help dialog',
-                handler: function () {
+                handler: function (evt, tool, panel) {
                     if (!helpwin) {
+                        var height = Math.min(CCR.xdmod.ui.Viewer.getViewer().getHeight(), 648);
+
                         helpwin = new Ext.Window({
                             layout: 'fit',
-                            width: 720,
-                            height: 580,
-                            title: helpTitle,
+                            width: Math.round((4.0 * (height - 44)) / 3.0),
+                            height: height,
+                            title: 'Help for ' + panel.help.title,
                             items: {
-                                html: helpText
+                                html: panel.help.html
                             },
                             listeners: {
                                 close: function () {

html/gui/js/modules/dashboard/ChartComponent.js

@@ -16,13 +16,16 @@ XDMoD.Module.Dashboard.ChartComponent = Ext.extend(CCR.xdmod.ui.Portlet, {
         handler: function (event, toolEl, panel) {
             XDMoD.Module.MetricExplorer.setConfig(panel.config.chart, panel.config.name, false);
         }
-    }, {
-        id: 'help'
     }],
 
     initComponent: function () {
         var self = this;
 
+        this.help = {
+            html: '',
+            title: 'Chart'
+        };
+
         this.title = Ext.util.Format.ellipsis(this.config.chart.title, 60, true);
 
         // Sync date ranges
@@ -52,7 +55,7 @@ XDMoD.Module.Dashboard.ChartComponent = Ext.extend(CCR.xdmod.ui.Portlet, {
                     var dimension;
                     for (dimension in dimensions) {
                         if (dimensions.hasOwnProperty(dimension)) {
-                            dims += '<li><b>' + dimension + ':</b> ' + dimensions[dimension] + '</li>';
+                            dims += '<li><i>' + dimension + ':</i> ' + dimensions[dimension] + '</li>';
                         }
                     }
                     var metrics = store.getAt(0).get('metrics');
@@ -61,13 +64,14 @@ XDMoD.Module.Dashboard.ChartComponent = Ext.extend(CCR.xdmod.ui.Portlet, {
                     var metric;
                     for (metric in metrics) {
                         if (metrics.hasOwnProperty(metric)) {
-                            mets += '<li><b>' + metric + ':</b> ' + metrics[metric] + '</li>';
+                            mets += '<li><i>' + metric + ':</i> ' + metrics[metric] + '</li>';
                         }
                     }
-                    var help = this.chartCmp.getTool('help');
-                    if (help && help.dom) {
-                        help.dom.qtip = '<ul>' + dims + '</ul><hr/><ul>' + mets + '</ul>';
-                    }
+                    self.help.html = '<div class="dashboard-help-win" style="position: absolute; z-index: 1">' +
+                        '<p>A description of the data in the chart is shown below.</p>' +
+                        '<p><b>Dimensions:</b></p><ul>' + dims + '</ul>' +
+                        '<p><b>Metrics:</b></p><ul>' + mets + '</ul></div>' +
+                        '<div style="position: absolute; width: 100%; z-index: 0"><img src="/gui/images/help/chart-component.svg" /></div>';
                 },
                 exception: function (thisProxy, type, action, options, response) {
                     if (type === 'response') {

html/gui/js/modules/dashboard/JobComponent.js

@@ -9,11 +9,7 @@ Ext.namespace('XDMoD.Module.Dashboard');
 XDMoD.Module.Dashboard.JobComponent = Ext.extend(CCR.xdmod.ui.Portlet, {
 
     layout: 'fit',
-    collapsible: false,
     title: 'Jobs',
-    tools: [{
-        id: 'help'
-    }],
 
     initComponent: function () {
         var page_size = 9;
@@ -22,6 +18,16 @@ XDMoD.Module.Dashboard.JobComponent = Ext.extend(CCR.xdmod.ui.Portlet, {
             return moment(value * 1000).format('Y-MM-DD HH:mm:ss z');
         };
 
+        this.help = {
+            title: 'Jobs'
+        };
+
+        if (this.config.multiuser) {
+            this.help.html = '<img src="/gui/images/help/job-multi-component.svg" />';
+        } else {
+            this.help.html = '<img src="/gui/images/help/job-component.svg" />';
+        }
+
         var jobEfficiency = function (value, metadata, record) {
             var getDataColor = function (data) {
                 var color = 'gray';
@@ -71,13 +77,6 @@ XDMoD.Module.Dashboard.JobComponent = Ext.extend(CCR.xdmod.ui.Portlet, {
 
         this.title += ' - ' + date.start.format('Y-m-d') + ' to ' + date.end.format('Y-m-d');
 
-        if (!this.config.multiuser) {
-            this.tools[0].qtip = 'This panel shows a list of your HPC jobs for which there is data in XDMoD. Click on a row to view the detailed information about a job.';
-            page_size = 10;
-        } else {
-            this.tools[0].qtip = 'This panel shows a list of the HPC jobs that ran under your account for which there is data in XDMoD. Click on a row to view the detailed information about a job.';
-        }
-
         // The default search parameters are set to all jobs - this
         // will result in all of the jobs that the user has permission to
         // view.

html/gui/js/modules/dashboard/SavedChartsReportsComponent.js

@@ -10,6 +10,11 @@ XDMoD.Module.Dashboard.SavedChartsReportsComponent = Ext.extend(CCR.xdmod.ui.Por
     initComponent: function () {
         var aspectRatio = 11 / 17;
 
+        this.help = {
+            title: this.title,
+            html: '<img src="/gui/images/help/chartsreports-component.svg" />'
+        };
+
         this.chartReportStore = new Ext.data.JsonStore({
             // store configs
             autoDestroy: true,
@@ -130,13 +135,7 @@ XDMoD.Module.Dashboard.SavedChartsReportsComponent = Ext.extend(CCR.xdmod.ui.Por
 
         this.height = this.width * aspectRatio;
         this.items = [this.chartReportGrid];
-        this.tools = [
-            {
-                id: 'help',
-                qtip: 'Porlet shows a list of saved charts and reports.',
-                qwidth: 60
-            }
-        ];
+
         XDMoD.Module.Dashboard.SavedChartsReportsComponent.superclass.initComponent.apply(this, arguments);
     }
 });