Skip to content
This repository
Browse code

Updates client javascript to handle new json format

  • Loading branch information...
commit 19265b200b5981ac33a187cf4bdab1a4958b230d 1 parent dd8ea64
Andy Schlaikjer sagemintblue authored
34 common/src/main/resources/web/js/ambrose/core.js
@@ -24,16 +24,16 @@ define(['jquery'], function($) {
24 24 };
25 25
26 26 // pattern for separator char + alpha
27   - var rSepAlpha = /[-_ ]+([a-z])/ig;
  27 + var separatorAlphaPattern = /[-_ ]+([a-z])/ig;
28 28
29 29 // util function used by camelCase
30   - var fToUpper = function(all, match) {
  30 + function toUpper(all, match) {
31 31 return match.toUpperCase();
32   - };
  32 + }
33 33
34 34 // camel case string
35 35 String.prototype.camelCase = function() {
36   - return this.replace(rSepAlpha, fToUpper);
  36 + return this.replace(separatorAlphaPattern, toUpper);
37 37 };
38 38
39 39 // find max value within array
@@ -53,28 +53,6 @@ define(['jquery'], function($) {
53 53 return this.splice(i, 1);
54 54 };
55 55
56   - // core Ambrose object containing utility methods
57   - return {
58   - isNull: function(v) { return v == null; },
59   - notNull: function(v) { return v != null; },
60   -
61   - /**
62   - * @param array values to join.
63   - * @return string containing array values delimited by ', '.
64   - */
65   - commaDelimit: function(array) {
66   - if (array == null) return '';
67   - return array.join(', ');
68   - },
69   -
70   - /**
71   - * @param totalTasks total number of tasks.
72   - * @param taskProgress number in [0, 1].
73   - * @return formatted message.
74   - */
75   - taskProgressMessage: function(totalTasks, taskProgress) {
76   - if (totalTasks == null || taskProgress == null) return '';
77   - return totalTasks + ' (' + Math.round(Number(taskProgress) * 100, 0) + '%)';
78   - },
79   - };
  56 + // core Ambrose object
  57 + return {};
80 58 });
2  common/src/main/resources/web/js/ambrose/view/graph.js
@@ -62,7 +62,7 @@ define(['jquery', 'd3', '../core', './core'], function(
62 62 self.handleJobsUpdated([job], 350);
63 63 });
64 64 workflow.on('jobSelected jobMouseOver', function(event, job, prev) {
65   - self.handleJobsUpdated($.grep([prev, job], Ambrose.notNull));
  65 + self.handleJobsUpdated($.grep([prev, job], function(j) { j != null; }));
66 66 });
67 67 },
68 68
49 common/src/main/resources/web/js/ambrose/view/table.js
@@ -122,40 +122,57 @@ define(['jquery', 'd3', '../core', './core'], function($, d3, Ambrose, View) {
122 122 // update mutable row properties
123 123 var colors = this.params.colors;
124 124 if (duration) {
125   - // only update background color of rows whose jobs are not selected or mouseover
  125 + // rows updated due to event; transition background color gradually
126 126 tr.transition().duration(duration).filter(function(job) {
  127 + // don't update rows whose jobs are selected or mouseover
127 128 return !(job.mouseover || job.selected);
128 129 }).style('background-color', function(job) {
129   - if (job.status == 'RUNNING') return colors.running;
130   - if (job.status == 'COMPLETE') return colors.complete;
131   - if (job.status == 'FAILED') return colors.failed;
132   - return 'white';
  130 + var status = job.status || '';
  131 + return colors[status.toLowerCase()] || 'white';
133 132 });
  133 +
134 134 } else {
135 135 // rows updated due to user interaction; rapidly update background color
136 136 tr.style('background-color', function(job) {
137 137 if (job.mouseover) return colors.mouseover;
138 138 if (job.selected) return colors.selected;
139   - if (job.status == 'RUNNING') return colors.running;
140   - if (job.status == 'COMPLETE') return colors.complete;
141   - if (job.status == 'FAILED') return colors.failed;
142   - return 'white';
  139 + var status = job.status || '';
  140 + return colors[status.toLowerCase()] || 'white';
143 141 });
144 142 }
  143 +
  144 + function commaDelimit(array) {
  145 + if (array == null) return '';
  146 + return array.join(', ');
  147 + }
  148 +
  149 + function taskProgressMessage(totalTasks, taskProgress) {
  150 + if (totalTasks == null || taskProgress == null) return '';
  151 + return totalTasks + ' (' + Math.round(Number(taskProgress) * 100, 0) + '%)';
  152 + }
  153 +
145 154 // update all other params normally
146 155 tr.selectAll('a.job-url')
147   - .attr('href', function(job) { return job.trackingUrl || 'javascript:void(0);'; })
  156 + .attr('href', function(job) {
  157 + return job.mapReduceJobState.trackingURL || 'javascript:void(0);';
  158 + })
148 159 .text(function(job) { return job.id || 'pending'; });
149 160 tr.selectAll('td.job-status')
150 161 .text(function (job) { return job.status || ''; });
151 162 tr.selectAll('td.job-aliases')
152   - .text(function (job) { return Ambrose.commaDelimit(job.aliases); });
  163 + .text(function (job) { return commaDelimit(job.aliases); });
153 164 tr.selectAll('td.job-features')
154   - .text(function (job) { return Ambrose.commaDelimit(job.features); });
155   - tr.selectAll('td.job-mappers')
156   - .text(function (job) { return Ambrose.taskProgressMessage(job.totalMappers, job.mapProgress); });
157   - tr.selectAll('td.job-reducers')
158   - .text(function (job) { return Ambrose.taskProgressMessage(job.totalReducers, job.reduceProgress); });
  165 + .text(function (job) { return commaDelimit(job.features); });
  166 + tr.selectAll('td.job-mappers').text(function (job) {
  167 + return taskProgressMessage(
  168 + job.mapReduceJobState.totalMappers,
  169 + job.mapReduceJobState.mapProgress);
  170 + });
  171 + tr.selectAll('td.job-reducers').text(function (job) {
  172 + return taskProgressMessage(
  173 + job.mapReduceJobState.totalReducers,
  174 + job.mapReduceJobState.reduceProgress);
  175 + });
159 176 },
160 177 };
161 178
52 common/src/main/resources/web/js/ambrose/workflow.js
@@ -119,14 +119,18 @@ define(['jquery', 'uri', './core', './client', './graph'], function(
119 119 }
120 120
121 121 // reset job indices
122   - var jobs = self.jobs = data;
  122 + var jobs = self.jobs = [];
123 123 var jobsByName = self.jobsByName = {};
124 124 var jobsById = self.jobsById = {};
125 125
126 126 // initialize job indices
127   - $.each(jobs, function(i, job) {
  127 + $.each(data, function(i, node) {
  128 + // retrieve job from node
  129 + var job = node.job;
  130 + jobs.push(job);
  131 +
128 132 // index job by name
129   - var name = job.name;
  133 + var name = job.name = node.name;
130 134 if (name in jobsByName) {
131 135 console.error("Multiple jobs found with name '" + name + "':", self);
132 136 return;
@@ -134,9 +138,8 @@ define(['jquery', 'uri', './core', './client', './graph'], function(
134 138 jobsByName[name] = job;
135 139
136 140 // index job by id (if defined)
137   - if (job.jobId) {
138   - var id = job.id = job.jobId;
139   - delete job.jobId;
  141 + if (job.id) {
  142 + var id = job.id;
140 143 if (id in jobsById) {
141 144 console.error("Multiple jobs found with id '" + id + "':", self);
142 145 return;
@@ -145,13 +148,20 @@ define(['jquery', 'uri', './core', './client', './graph'], function(
145 148 }
146 149 });
147 150
148   - // initialize parent links
149   - $.each(jobs, function(i, job) {
  151 + // initialize parent-child references
  152 + $.each(data, function(i, node) {
  153 + var job = node.job;
150 154 var name = job.name;
151   - $.each(job.successorNames, function(i, childName) {
  155 + if (!job.parentNames) job.parentNames = [];
  156 + // TODO(Andy Schlaikjer): Rename node.successorNames to childNames
  157 + $.each(job.childNames = node.successorNames, function(i, childName) {
152 158 var child = jobsByName[childName];
153   - var predecessorNames = child.predecessorNames || (child.predecessorNames = []);
154   - predecessorNames.push(name);
  159 + if (!child) {
  160 + console.error("No job with name '" + childName + "' exists", self);
  161 + return;
  162 + }
  163 + var parentNames = child.parentNames || (child.parentNames = []);
  164 + parentNames.push(name);
155 165 });
156 166 });
157 167
@@ -159,7 +169,7 @@ define(['jquery', 'uri', './core', './client', './graph'], function(
159 169 var graph = self.graph = Graph({
160 170 data: jobs,
161 171 getId: function(d) { return d.name; },
162   - getParentIds: function(d) { return d.predecessorNames; },
  172 + getParentIds: function(d) { return d.parentNames; },
163 173 });
164 174 graph.sort();
165 175 graph.addPseudoNodes();
@@ -267,8 +277,8 @@ define(['jquery', 'uri', './core', './client', './graph'], function(
267 277 // validate event data
268 278 var id = event.eventId;
269 279 var type = event.eventType;
270   - var job = event.eventData;
271   - if (!id || !type || !job) {
  280 + var data = event.eventData;
  281 + if (!id || !type || !data) {
272 282 console.error('Invalid event data:', self, event);
273 283 return;
274 284 }
@@ -281,18 +291,14 @@ define(['jquery', 'uri', './core', './client', './graph'], function(
281 291
282 292 // check for workflow event
283 293 if (type == 'WORKFLOW_PROGRESS') {
284   - self.setProgress(job.workflowProgress);
  294 + self.setProgress(data.workflowProgress);
285 295 return;
286 296 }
287 297
288   - // collect job data; JOB_FINISHED and JOB_FAILED events contain job.jobData
289   - if (job.jobId == null && job.jobData != null && job.jobData.jobId != null) {
290   - var jobData = job.jobData;
291   - delete job.jobData;
292   - $.extend(true, job, jobData);
293   - }
294   - job.id = job.jobId;
295   - delete job.jobId;
  298 + // collect job data
  299 + var node = data;
  300 + var job = node.job;
  301 + job.name = node.name;
296 302
297 303 // retrieve and update job with new data
298 304 job = self.updateJob(job);

0 comments on commit 19265b2

Please sign in to comment.
Something went wrong with that request. Please try again.