Skip to content

Commit 4639189

Browse files
cabhishektgianos
cabhishek
authored and
tgianos
committed
Upgrade Jobs details view with more data points
Following fields removed: * Command name * Command version * Command created * Command updated * Command status Following fields added: * Add link to Cluster Id * Add link to application Id * Add 'grouping' * Add 'groupingInstance'
1 parent 9f9beb6 commit 4639189

File tree

1 file changed

+132
-133
lines changed

1 file changed

+132
-133
lines changed

‎genie-ui/src/main/web/scripts/components/JobDetails.js

Lines changed: 132 additions & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import { momentFormat, fetch } from "../utils";
66
import Modal from "react-modal";
77
import Error from "./Error";
88

9+
import $ from "jquery";
10+
911
export default class JobDetails extends React.Component {
1012
static propTypes = { row: T.object.isRequired };
1113

@@ -16,6 +18,8 @@ export default class JobDetails extends React.Component {
1618
modalIsOpen: false,
1719
killRequestError: null,
1820
command: { id: "", version: "", name: "" },
21+
cluster: { id: "", version: "", name: "" },
22+
applications: [],
1923
job: {
2024
id: "",
2125
tags: [],
@@ -31,6 +35,7 @@ export default class JobDetails extends React.Component {
3135
}
3236
}
3337
};
38+
window.myState = this.state;
3439
}
3540

3641
componentDidMount() {
@@ -46,9 +51,19 @@ export default class JobDetails extends React.Component {
4651
const url = row._links.self.href;
4752
fetch(url).done(job => {
4853
this.setState({ job });
49-
fetch(job._links.command.href)
50-
.done(command => {
51-
this.setState({ command });
54+
55+
$.when(
56+
fetch(job._links.cluster.href),
57+
fetch(job._links.command.href),
58+
fetch(job._links.applications.href)
59+
)
60+
.done((clusters, commands, applications) => {
61+
console.log(applications);
62+
this.setState({
63+
cluster: clusters[0],
64+
command: commands[0],
65+
applications: applications[0]
66+
});
5267
})
5368
.fail(xhr => {
5469
this.setState({ error: xhr.responseJSON });
@@ -101,106 +116,95 @@ export default class JobDetails extends React.Component {
101116
<tbody>
102117
<tr>
103118
<td className="col-xs-2 align-right">Job Id:</td>
104-
<td>
105-
{this.state.job.id}
106-
</td>
119+
<td>{this.state.job.id}</td>
107120
</tr>
108121
<tr>
109122
<td className="col-xs-2 align-right">Version:</td>
110-
<td>
111-
{this.state.job.version}
112-
</td>
123+
<td>{this.state.job.version}</td>
113124
</tr>
114125
<tr>
115126
<td className="col-xs-2 align-right">Description:</td>
116-
<td>
117-
{this.state.job.description}
118-
</td>
127+
<td>{this.state.job.description}</td>
119128
</tr>
120129
<tr>
121130
<td className="col-xs-2 align-right">Tags:</td>
122131
<td>
123-
{this.state.job.tags.join(",")}
124-
</td>
125-
</tr>
126-
<tr>
127-
<td className="col-xs-2 align-right">Status:</td>
128-
<td>
129-
{this.state.job.status}
132+
<ul>
133+
{this.state.job.tags.map((tag, index) => (
134+
<li key={index}>{tag}</li>
135+
))}
136+
</ul>
130137
</td>
131138
</tr>
132139
<tr>
133140
<td className="col-xs-2 align-right">Status Msg:</td>
134-
<td>
135-
{this.state.job.statusMsg}
136-
</td>
141+
<td>{this.state.job.statusMsg}</td>
137142
</tr>
138143
<tr>
139144
<td className="col-xs-2 align-right">Created:</td>
140-
<td>
141-
{momentFormat(this.state.job.created)}
142-
</td>
145+
<td>{momentFormat(this.state.job.created)}</td>
143146
</tr>
144147
<tr>
145148
<td className="col-xs-2 align-right">Updated:</td>
146-
<td>
147-
{momentFormat(this.state.job.updated)}
148-
</td>
149+
<td>{momentFormat(this.state.job.updated)}</td>
149150
</tr>
150151
<tr>
151152
<td className="col-xs-2 align-right">Archive Location:</td>
153+
<td>{this.state.job.archiveLocation}</td>
154+
</tr>
155+
<tr>
156+
<td className="col-xs-2 align-right">Application Ids:</td>
152157
<td>
153-
{this.state.job.archiveLocation}
158+
<ul>
159+
{this.state.applications.map((application, index) => (
160+
<li key={index}>
161+
<Link
162+
to={`applications?name=${application.name}&rowId=${
163+
application.id
164+
}`}
165+
>
166+
{application.id}
167+
</Link>
168+
</li>
169+
))}
170+
</ul>
154171
</td>
155172
</tr>
156173
<tr>
157-
<td className="col-xs-2 align-right">Command Name:</td>
174+
<td className="col-xs-2 align-right">Cluster Id:</td>
158175
<td>
159-
<Link to={`commands?name=${this.state.job.commandName}`}>
160-
{this.state.job.commandName}
176+
<Link
177+
to={`clusters?name=${this.state.job.clusterName}&rowId=${
178+
this.state.cluster.id
179+
}`}
180+
>
181+
{this.state.cluster.id}
161182
</Link>
162183
</td>
163184
</tr>
164185
<tr>
165186
<td className="col-xs-2 align-right">Command Id:</td>
166187
<td>
167188
<Link
168-
to={`commands?name=${this.state.job
169-
.commandName}&rowId=${this.state.command.id}`}
189+
to={`commands?name=${this.state.job.commandName}&rowId=${
190+
this.state.command.id
191+
}`}
170192
>
171193
{this.state.command.id}
172194
</Link>
173195
</td>
174196
</tr>
175197
<tr>
176-
<td className="col-xs-2 align-right">Command Version:</td>
177-
<td>
178-
{this.state.command.version}
179-
</td>
180-
</tr>
181-
<tr>
182-
<td className="col-xs-2 align-right">Command Created:</td>
183-
<td>
184-
{momentFormat(this.state.command.created)}
185-
</td>
186-
</tr>
187-
<tr>
188-
<td className="col-xs-2 align-right">Command Updated:</td>
189-
<td>
190-
{momentFormat(this.state.command.updated)}
191-
</td>
198+
<td className="col-xs-2 align-right">Command Args:</td>
199+
<td>{this.state.job.commandArgs}</td>
192200
</tr>
193201
<tr>
194-
<td className="col-xs-2 align-right">Command Status:</td>
195-
<td>
196-
{this.state.command.status}
197-
</td>
202+
<td className="col-xs-2 align-right">Grouping:</td>
203+
<td>{this.state.job.grouping}</td>
198204
</tr>
199205
<tr>
200-
<td className="col-xs-2 align-right">Command Args:</td>
201-
<td>
202-
{this.state.job.commandArgs}
203-
</td>
206+
<td className="col-xs-2 align-right">Grouping Instance:</td>
207+
<td>{this.state.job.groupingInstance}</td>
204208
</tr>
205209
<tr>
206210
<td className="col-xs-2 align-right">Details:</td>
@@ -243,86 +247,81 @@ export default class JobDetails extends React.Component {
243247
</tr>
244248
{(this.state.job.status === "RUNNING" ||
245249
this.state.job.status === "INIT") &&
246-
!this.state.killJobRequestSent
247-
? <tr>
248-
<td>
249-
<button
250-
type="button"
251-
className="btn btn-danger"
252-
onClick={this.openModal}
253-
>
254-
Send Kill Request
255-
</button>
256-
<Modal
257-
isOpen={this.state.modalIsOpen}
258-
onRequestClose={this.closeModal}
259-
style={this.customStyles}
260-
>
261-
<div>
262-
<div className="modal-header">
263-
<h4
264-
className="modal-title"
265-
id="alert-modal-label"
266-
>
267-
Confirm Kill Request
268-
</h4>
269-
</div>
270-
<div className="modal-body">
271-
<div>This cannot be undone.</div>
272-
</div>
273-
<div className="modal-footer">
274-
<button
275-
type="button"
276-
className="btn btn-primary"
277-
onClick={() => this.killJob(this.state.job.id)}
278-
>
279-
OK
280-
</button>
281-
<button
282-
type="button"
283-
className="btn btn-default"
284-
onClick={this.closeModal}
285-
>
286-
Cancel
287-
</button>
288-
</div>
250+
!this.state.killJobRequestSent ? (
251+
<tr>
252+
<td>
253+
<button
254+
type="button"
255+
className="btn btn-danger"
256+
onClick={this.openModal}
257+
>
258+
Send Kill Request
259+
</button>
260+
<Modal
261+
isOpen={this.state.modalIsOpen}
262+
onRequestClose={this.closeModal}
263+
style={this.customStyles}
264+
>
265+
<div>
266+
<div className="modal-header">
267+
<h4 className="modal-title" id="alert-modal-label">
268+
Confirm Kill Request
269+
</h4>
270+
</div>
271+
<div className="modal-body">
272+
<div>This cannot be undone.</div>
289273
</div>
290-
</Modal>
291-
</td>
292-
</tr>
293-
: null}
274+
<div className="modal-footer">
275+
<button
276+
type="button"
277+
className="btn btn-primary"
278+
onClick={() => this.killJob(this.state.job.id)}
279+
>
280+
OK
281+
</button>
282+
<button
283+
type="button"
284+
className="btn btn-default"
285+
onClick={this.closeModal}
286+
>
287+
Cancel
288+
</button>
289+
</div>
290+
</div>
291+
</Modal>
292+
</td>
293+
</tr>
294+
) : null}
294295
</tbody>
295296
</table>
296-
{this.state.killJobRequestSent && !this.state.killRequestError
297-
? <small>
298-
*Request accepted. Please refresh the page in a few seconds to
299-
see the status change.
300-
</small>
301-
: null}
302-
{this.state.killRequestError
303-
? <div>
304-
<div>
305-
<small>
306-
*Request failed. Please refresh the page and try again.
307-
</small>
308-
</div>
309-
<div>
310-
<small>
311-
<code>
312-
{this.state.killRequestError.message}.
313-
</code>
314-
</small>
315-
</div>
297+
{this.state.killJobRequestSent && !this.state.killRequestError ? (
298+
<small>
299+
*Request accepted. Please refresh the page in a few seconds to
300+
see the status change.
301+
</small>
302+
) : null}
303+
{this.state.killRequestError ? (
304+
<div>
305+
<div>
306+
<small>
307+
*Request failed. Please refresh the page and try again.
308+
</small>
309+
</div>
310+
<div>
311+
<small>
312+
<code>{this.state.killRequestError.message}.</code>
313+
</small>
316314
</div>
317-
: null}
318-
{this.state.error
319-
? <div>
320-
<div>
321-
<span>Failed to load Command details:</span>
322-
</div>
323-
<Error error={this.state.error} />
315+
</div>
316+
) : null}
317+
{this.state.error ? (
318+
<div>
319+
<div>
320+
<span>Failed to load Command details:</span>
324321
</div>
325-
: null}
322+
<Error error={this.state.error} />
323+
</div>
324+
) : null}
326325
</div>
327326
</td>
328327
</tr>

0 commit comments

Comments
 (0)