diff --git a/awx/ui/static/js/app.js b/awx/ui/static/js/app.js index b8a2108c23..6d4661f3c9 100644 --- a/awx/ui/static/js/app.js +++ b/awx/ui/static/js/app.js @@ -75,7 +75,8 @@ angular.module('Tower', [ 'License', 'HostGroupsFormDefinition', 'DashboardCountsWidget', - 'DashboardChartsWidget', + 'JobStatusGraphWidget', + 'HostGraphWidget', 'DashboardJobsWidget', 'StreamWidget', 'JobsHelper', diff --git a/awx/ui/static/js/controllers/Home.js b/awx/ui/static/js/controllers/Home.js index d9a2b39f5f..84ac94b994 100644 --- a/awx/ui/static/js/controllers/Home.js +++ b/awx/ui/static/js/controllers/Home.js @@ -10,7 +10,7 @@ 'use strict'; -function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, DashboardCounts, DashboardCharts, DashboardJobs, +function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, DashboardCounts, HostGraph, JobStatusGraph, DashboardJobs, ClearScope, Stream, Rest, GetBasePath, ProcessErrors, Button){ ClearScope('home'); @@ -76,16 +76,22 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, Dashb target: 'container1', dashboard: data }); - DashboardCharts({ + JobStatusGraph({ scope: $scope, target: 'container2', dashboard: data }); - DashboardJobs({ + HostGraph({ scope: $scope, target: 'container3', dashboard: data }); + + DashboardJobs({ + scope: $scope, + target: 'container4', + dashboard: data + }); }); $scope.showActivity = function () { @@ -112,7 +118,7 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, Dashb } -Home.$inject = ['$scope', '$compile', '$routeParams', '$rootScope', '$location', 'Wait', 'DashboardCounts', 'DashboardCharts', 'DashboardJobs', 'ClearScope', 'Stream', 'Rest', 'GetBasePath', 'ProcessErrors', 'Button' +Home.$inject = ['$scope', '$compile', '$routeParams', '$rootScope', '$location', 'Wait', 'DashboardCounts', 'HostGraph','JobStatusGraph', 'DashboardJobs', 'ClearScope', 'Stream', 'Rest', 'GetBasePath', 'ProcessErrors', 'Button' ]; diff --git a/awx/ui/static/js/widgets/DashboardCounts.js b/awx/ui/static/js/widgets/DashboardCounts.js index 4414926c72..8682293d2c 100644 --- a/awx/ui/static/js/widgets/DashboardCounts.js +++ b/awx/ui/static/js/widgets/DashboardCounts.js @@ -20,37 +20,174 @@ angular.module('DashboardCountsWidget', ['RestServices', 'Utilities']) html, element; - html = "
\n"; - html += "\n"; - html += "\n"; - html += "\n"; - html += "\n"; - html += "\n"; - html += "\n"; - html += "\n"; - html += "\n"; - html += "\n"; - html += "\n"; + function createHTML(html){ + var docw = $(window).width(); + if(docw<768){ - html += "\n"; - html += "\n"; - html += "\n"; - html += "\n"; - html += "\n"; - html += "\n"; - html += "\n"; - html += "\n"; - html += "\n"; - html += "
" + dashboard.hosts.total+""+dashboard.hosts.failed+""+dashboard.inventories.total+""+dashboard.inventories.inventory_failed+""+dashboard.projects.total+""+dashboard.projects.failed+""+dashboard.users.total+"
HostsFailed HostsInventoriesInventory Sync FailuresProjectsProject Sync FailuresUsers
\n"; - html += "
\n"; - html += "
\n"; + html = "
\n" ; + // html += " \n"; + html += "
    \n"; + html += "
  1. \n"; + html += "
  2. \n"; + html += "
  3. \n"; + html += "
\n"; + // + //html += "
\n" ; + html += "
\n" ; + html += "
\n" ; + html += "\"\"\n" ; + html += "
\n" ; + html += "

Caption text here

\n" ; + html += "
\n" ; + html += "
\n" ; + html += "
\n" ; + html += "\"\"\n" ; + html += "
\n" ; + html += "

Caption text here

\n" ; + html += "
\n" ; + html += "
\n" ; + html += "
\n" ; + html += "\"\"\n" ; + html += "
\n" ; + html += "

Caption text here

\n" ; + html += "
\n" ; + html += "
\n" ; + html += "
\n" ; + html += "\"\"\n" ; + html += "
\n" ; + html += "

Caption text here

\n" ; + html += "
\n" ; + html += "
\n" ; + html += "
\n" ; + + // html += \"\n" ; + html += "\n" ; + html += "\n" ; + html += "\n" ; + html += "\n" ; + html += "\n" ; + html += "\n" ; + html += "
\n" ; +// +// +// +// +// +// +// +//
+ // $('.carousel').carousel({ + // interval: 2000 + // }) + + + } + else{ + html = "
\n"; + html += "\n"; + html += "\n"; + html += "\n"; + html += "\n"; + html += "\n"; + html += "\n"; + html += "\n"; + html += "\n"; + html += "\n"; + html += "\n"; + + html += "\n"; + html += "\n"; + html += "\n"; + html += "\n"; + html += "\n"; + html += "\n"; + html += "\n"; + html += "\n"; + html += "\n"; + html += "
" + dashboard.hosts.total+""+dashboard.hosts.failed+""+dashboard.inventories.total+""+dashboard.inventories.inventory_failed+""+dashboard.projects.total+""+dashboard.projects.failed+""+dashboard.users.total+"
HostsFailed HostsInventoriesInventory Sync FailuresProjectsProject Sync FailuresUsers
\n"; + html += "
\n"; + // html += "
\n"; + + } + + + return html; + } + + + + + + + // html = "
\n"; + // html += "table1\n"; + // html += "\n"; + // html += "\n"; + // html += "\n"; + // html += "\n"; + // html += "\n"; + // html += "\n"; + // html += "\n"; + // html += "\n"; + // html += "\n"; + + // html += "\n"; + // html += "\n"; + // html += "\n"; + // html += "\n"; + // html += "\n"; + // html += "\n"; + // html += "\n"; + // html += "\n"; + // html += "\n"; + // html += "
" + dashboard.hosts.total+""+dashboard.hosts.failed+""+dashboard.inventories.total+""+dashboard.inventories.inventory_failed+""+dashboard.projects.total+""+dashboard.projects.failed+""+dashboard.users.total+"
HostsFailed HostsInventoriesInventory Sync FailuresProjectsProject Sync FailuresUsers
\n"; + // html += "
\n"; + // html += "
\n"; + +//-------------------------------------------------------------------------------------------------------------------- + // html = "
\n"; + // html += "table2\n"; + // html += "\n"; + // html += "\n"; + // html += "\n"; + // html += "\n"; + // html += "\n"; + // html += "\n"; + // html += "\n"; + // html += "\n"; + // html += "\n"; + + // html += "\n"; + // html += "\n"; + // html += "\n"; + // html += "\n"; + // html += "\n"; + // html += "\n"; + // html += "\n"; + // html += "\n"; + // html += "\n"; + // html += "
" + dashboard.hosts.total+""+dashboard.hosts.failed+""+dashboard.inventories.total+""+dashboard.inventories.inventory_failed+""+dashboard.projects.total+""+dashboard.projects.failed+""+dashboard.users.total+"
HostsFailed HostsInventoriesInventory Sync FailuresProjectsProject Sync FailuresUsers
\n"; + // html += "
\n"; + // html += "
\n"; +//-------------------------------------------------------------------------------------------------------------------- element = angular.element(document.getElementById(target)); - element.html(html); + element.html(createHTML(html)); $compile(element)(scope); scope.$emit('WidgetLoaded'); + + //window.onresize = scaleForSmallDevices; + + function scaleForSmallDevices(){ + var docw = $(window).width(); + if(docw<600){ + alert('success'); + } + + }; + }; } ]); \ No newline at end of file diff --git a/awx/ui/static/js/widgets/DashboardJobs.js b/awx/ui/static/js/widgets/DashboardJobs.js index 98c4f3b9cc..9e284354a9 100644 --- a/awx/ui/static/js/widgets/DashboardJobs.js +++ b/awx/ui/static/js/widgets/DashboardJobs.js @@ -129,7 +129,7 @@ angular.module('DashboardJobsWidget', ['RestServices', 'Utilities']) search_row = Math.max($('.search-row:eq(0)').outerHeight(), 50); page_row = Math.max($('.page-row:eq(0)').outerHeight(), 33); header = Math.max($('#completed_jobs_table thead').height(), 41); - height = Math.floor(available_height) - header - page_row - 15; + height = Math.floor(available_height) - header - page_row ; row_height = (docw < 1415) ? 47 : 27; //$('.jobs-list-container tbody tr:eq(0)').height(); <-- only works if data is loaded max_rows = Math.floor(height / row_height); diff --git a/awx/ui/static/js/widgets/HostGraph.js b/awx/ui/static/js/widgets/HostGraph.js new file mode 100644 index 0000000000..526b82ff70 --- /dev/null +++ b/awx/ui/static/js/widgets/HostGraph.js @@ -0,0 +1,110 @@ +/********************************************* + * Copyright (c) 2014 AnsibleWorks, Inc. + * + * Dashboard.js + * + * The new dashboard + * + */ + +'use strict'; + +angular.module('HostGraphWidget', ['RestServices', 'Utilities']) + .factory('HostGraph', ['$rootScope', '$compile', 'Rest', 'GetBasePath', 'ProcessErrors', 'Wait', + function ($rootScope, $compile) { + return function (params) { + + var scope = params.scope, + target = params.target, + //dashboard = params.dashboard, + + html, element; + + // html = "
\n"; + html = "
\n"; + + html += "\n"; + html += " \n"; + // html += "\n"; + html += "\n"; + html += "\n"; + html += "\n"; + // html += "\n"; + html += "\n"; + html += "\n"; + html += "
Job StatusHosts vs License Agreement
\n"; + html += "
\n"; + // html += "
\n"; + + + + function makeHostCountGraph(){ + d3.json("static/js/hostcount.json",function(error,data) { + + data.map(function(series) { + series.values = series.values.map(function(d) { return {x: d[0], y: d[1] }; }); + return series; + }); + + nv.addGraph({ + generate: function() { + var width = nv.utils.windowSize().width/3, + height = nv.utils.windowSize().height/4, + chart = nv.models.lineChart() + .margin({top: 15, right: 75, bottom: 40, left: 80}) + .x(function(d,i) { return i ;}) + .useInteractiveGuideline(true) //We want nice looking tooltips and a guideline! + .transitionDuration(350) //how fast do you want the lines to transition? + .showLegend(true) //Show the legend, allowing users to turn on/off line series. + .showYAxis(true) //Show the y-axis + .showXAxis(true) //Show the x-axis + ; + + chart.xAxis + .axisLabel("Time") + .tickFormat(function(d) { + var dx = data[0].values[d] && data[0].values[d].x || 0; + return dx ? d3.time.format('%m/%d')(new Date(dx)) : ''; + }); + + chart.yAxis //Chart y-axis settings + .axisLabel('Hosts') + .tickFormat(d3.format('.f')); + + d3.select('.host-count-graph svg') + .datum(data).transition() + .attr('width', width) + .attr('height', height) + .duration(500) + .call(chart) + .style({ + // 'width': width, + // 'height': height, + "font-family": 'Open Sans', + "font-style": "normal", + "font-weight":400, + "src": "url(/static/fonts/OpenSans-Regular.ttf)" + }); + + d3.selectAll(".nv-line").on("click", function () { + alert("clicked"); + }); + + nv.utils.windowResize(chart.update); + return chart; + }, + + }); + }); + } + + element = angular.element(document.getElementById(target)); + element.html(html); + $compile(element)(scope); + // makeJobStatusGraph(); + makeHostCountGraph(); + scope.$emit('WidgetLoaded'); + + }; + } + ]); \ No newline at end of file diff --git a/awx/ui/static/js/widgets/DashboardCharts.js b/awx/ui/static/js/widgets/JobStatusGraph.js similarity index 91% rename from awx/ui/static/js/widgets/DashboardCharts.js rename to awx/ui/static/js/widgets/JobStatusGraph.js index d7c9ac94fc..cb2aecca6e 100644 --- a/awx/ui/static/js/widgets/DashboardCharts.js +++ b/awx/ui/static/js/widgets/JobStatusGraph.js @@ -9,8 +9,8 @@ 'use strict'; -angular.module('DashboardChartsWidget', ['RestServices', 'Utilities']) - .factory('DashboardCharts', ['$rootScope', '$compile', 'Rest', 'GetBasePath', 'ProcessErrors', 'Wait', +angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities']) + .factory('JobStatusGraph', ['$rootScope', '$compile', 'Rest', 'GetBasePath', 'ProcessErrors', 'Wait', function ($rootScope, $compile) { return function (params) { @@ -23,14 +23,14 @@ angular.module('DashboardChartsWidget', ['RestServices', 'Utilities']) // html = "
\n"; html = "
\n"; - html += "\n"; + html += "
\n"; html += " \n"; - html += "\n"; - html += "\n"; + html += "\n"; + // html += "\n"; html += "\n"; html += "\n"; html += "\n"; - html += "\n"; + // html += "\n"; html += "\n"; html += "
Job StatusHosts vs License AgreementJob StatusHosts vs License Agreement
\n"; html += "
\n"; @@ -148,6 +148,11 @@ angular.module('DashboardChartsWidget', ['RestServices', 'Utilities']) "font-weight":400, "src": "url(/static/fonts/OpenSans-Regular.ttf)" }); + + d3.selectAll(".nv-line").on("click", function () { + alert("clicked"); + }); + nv.utils.windowResize(chart.update); return chart; }, @@ -160,7 +165,7 @@ angular.module('DashboardChartsWidget', ['RestServices', 'Utilities']) element.html(html); $compile(element)(scope); makeJobStatusGraph(); - makeHostCountGraph(); + // makeHostCountGraph(); scope.$emit('WidgetLoaded'); }; diff --git a/awx/ui/static/less/new-dashboard.less b/awx/ui/static/less/new-dashboard.less index d98821fe75..b4d6ca21e5 100644 --- a/awx/ui/static/less/new-dashboard.less +++ b/awx/ui/static/less/new-dashboard.less @@ -8,7 +8,7 @@ */ #sync-failure { - color:red; + color:red; } .job-status-graph, .host-count-graph{ @@ -27,4 +27,25 @@ stroke: steelblue; stroke-width: 1.5px; } +.jobs-list-container { + border: 1px solid @grey; + border-radius: 4px; + padding: 5px; + } +.carousel-control.left, .carousel-control.right { + background-image: none +} + + .custon-carousel{ + width:150px; + height:200px; + min-width:150px; + min-height:100px; + max-width:200px; + max-height:100px; + overflow:hidden; + display:block; + border:1px solid black; + background-color: #A9A9A9; + } \ No newline at end of file diff --git a/awx/ui/static/partials/home.html b/awx/ui/static/partials/home.html index 41c7607255..1c4ee7d900 100644 --- a/awx/ui/static/partials/home.html +++ b/awx/ui/static/partials/home.html @@ -1,6 +1,6 @@
-
+