Skip to content

Commit 5b77f35

Browse files
arangatangarangatang
authored
Q Code Transform: Improve split panel UX. (#4820)
* Improve split panel UX. * Add changelog entry. * Fix issue not keeping details open when job is partially completed. --------- Co-authored-by: Leonardo Araneda Freccero <[email protected]>
1 parent ed7cb84 commit 5b77f35

File tree

4 files changed

+47
-37
lines changed

4 files changed

+47
-37
lines changed

‎.changes/next-release/Bug Fix-08ad1b18-2607-41f9-9e63-6f4b908d3863.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"type": "Bug Fix",
3+
"description": "Q CodeTransform: Address various issues in TransformationHub UX."
4+
}

‎packages/core/src/codewhisperer/commands/startTransformByQ.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -298,6 +298,7 @@ export async function setTransformationToRunningState() {
298298
sessionPlanProgress['buildCode'] = StepProgress.Pending
299299
sessionPlanProgress['generatePlan'] = StepProgress.Pending
300300
sessionPlanProgress['transformCode'] = StepProgress.Pending
301+
transformByQState.resetPlanSteps()
301302

302303
codeTransformTelemetryState.setStartTime()
303304

‎packages/core/src/codewhisperer/models/model.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -531,6 +531,10 @@ export class TransformByQState {
531531
this.planSteps = steps
532532
}
533533

534+
public resetPlanSteps() {
535+
this.planSteps = undefined
536+
}
537+
534538
public getPrefixTextForButton() {
535539
switch (this.transformByQState) {
536540
case TransformByQStatus.NotStarted:

‎packages/core/src/codewhisperer/service/transformByQ/transformationHubViewProvider.ts‎

Lines changed: 38 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,7 @@ export class TransformationHubViewProvider implements vscode.WebviewViewProvider
124124
endTime: Date | undefined,
125125
previousStatus: string,
126126
isFirstStep: boolean,
127+
isLastStep: boolean,
127128
stepProgress: StepProgress,
128129
stepId: number,
129130
isCurrentlyProcessing: boolean
@@ -136,10 +137,11 @@ export class TransformationHubViewProvider implements vscode.WebviewViewProvider
136137
second: '2-digit',
137138
})
138139
const stepDuration = convertToTimeString(endTime.getTime() - startTime.getTime())
140+
const isAllStepsComplete = isLastStep && (stepProgress === StepProgress.Succeeded || StepProgress.Failed)
139141
return `
140-
<p class="step" id="step-${stepId}">
141-
${this.getProgressIconMarkup(stepProgress)} ${name} [finished on ${stepTime}]
142-
<span>${stepDuration}</span>
142+
<p class="step ${isAllStepsComplete ? 'active' : ''}" id="step-${stepId}">
143+
${this.getProgressIconMarkup(stepProgress)} ${name}
144+
<span id="step-duration">[finished on ${stepTime}] ${stepDuration}</span>
143145
</p>`
144146
} else if (previousStatus !== 'CREATED' && isCurrentlyProcessing) {
145147
return `
@@ -170,14 +172,14 @@ export class TransformationHubViewProvider implements vscode.WebviewViewProvider
170172
// In case transform is cancelled by user, the state transitions to not started after some time.
171173
// This may contradict the last result from the API, so need to be handled here.
172174
if (transformByQState.isNotStarted()) {
173-
return '<p><span class="status-FAILED"> ⓧ </span></p>'
175+
return '<p><span class="status-FAILED"> 𐔧 </span></p>'
174176
}
175177
return '<p><span class="spinner status-PENDING"> ↻ </span></p>'
176178
case 'COMPLETED':
177179
return '<p><span class="status-COMPLETED"> ✓ </span></p>'
178180
case 'FAILED':
179181
default:
180-
return '<p><span class="status-FAILED"> ⓧ </span></p>'
182+
return '<p><span class="status-FAILED"> 𐔧 </span></p>'
181183
}
182184
}
183185

@@ -189,7 +191,7 @@ export class TransformationHubViewProvider implements vscode.WebviewViewProvider
189191
<div class="substep-icon">${this.selectSubstepIcon(subStep.status)}</div>
190192
<div>
191193
<p>${subStep.name}</p>
192-
${subStep.description ? `<p class="status-${subStep.status}">- ${subStep.description}</p>` : ''}
194+
${subStep.description ? `<p class="status-${subStep.status}"> ${subStep.description}</p>` : ''}
193195
</div>
194196
</div>
195197
`)
@@ -229,6 +231,7 @@ export class TransformationHubViewProvider implements vscode.WebviewViewProvider
229231
step.endTime,
230232
stepStatuses[i - 1],
231233
i === 0,
234+
i === planSteps.length - 1,
232235
stepProgress,
233236
i,
234237
lastPendingStep === i
@@ -297,20 +300,19 @@ export class TransformationHubViewProvider implements vscode.WebviewViewProvider
297300
transformByQState.setPlanSteps(planSteps)
298301
}
299302
let progressHtml
300-
if (planProgress['transformCode'] !== StepProgress.NotStarted) {
301-
const isTransformFailed = planProgress['transformCode'] === StepProgress.Failed
303+
// for each step that has succeeded, increment activeStepId by 1
304+
let activeStepId = [
305+
planProgress.startJob,
306+
planProgress.buildCode,
307+
planProgress.generatePlan,
308+
planProgress.transformCode,
309+
]
310+
.map(it => (it === StepProgress.Succeeded ? 1 : 0) as number)
311+
.reduce((prev, current) => prev + current)
312+
// When we receive plan step details, we want those to be active -> increment activeStepId
313+
activeStepId += planSteps === undefined || planSteps.length === 0 ? 0 : 1
302314

303-
// for each step that has succeeded, increment activeStepId by 1
304-
let activeStepId = [
305-
planProgress.startJob,
306-
planProgress.buildCode,
307-
planProgress.generatePlan,
308-
planProgress.transformCode,
309-
]
310-
.map(it => (it === StepProgress.Succeeded ? 1 : 0) as number)
311-
.reduce((prev, current) => prev + current)
312-
// When we receive plan step details, we want those to be active -> increment activeStepId
313-
activeStepId += planSteps === undefined || planSteps.length === 0 ? 0 : 1
315+
if (planProgress['transformCode'] !== StepProgress.NotStarted) {
314316
const waitingMarkup = simpleStep(
315317
this.getProgressIconMarkup(planProgress['startJob']),
316318
'Waiting for job to start',
@@ -341,12 +343,12 @@ export class TransformationHubViewProvider implements vscode.WebviewViewProvider
341343
)
342344
: ''
343345

346+
const isTransformFailed = planProgress['transformCode'] === StepProgress.Failed
344347
const progress = this.getTransformationStepProgressMarkup(planSteps, isTransformFailed)
345348
const latestGenericStepDetails = this.getLatestGenericStepDetails(transformByQState.getPolledJobStatus())
346349
progressHtml = `
347-
<div class="column">
348-
<div id="runningTime" style="flex:1; overflow: auto;"></div>
349-
<p><b>Transformation Progress</b></p>
350+
<div id="progress" class="column">
351+
<p><b>Transformation Progress</b> <span id="runningTime"></span></p>
350352
${waitingMarkup}
351353
${buildMarkup}
352354
${planMarkup}
@@ -367,7 +369,7 @@ export class TransformationHubViewProvider implements vscode.WebviewViewProvider
367369
`
368370
} else {
369371
progressHtml = `
370-
<div class="column">
372+
<div id="progress" class="column">
371373
<p><b>Transformation Progress</b></p>
372374
<p>No job ongoing</p>
373375
</div>`
@@ -430,10 +432,15 @@ export class TransformationHubViewProvider implements vscode.WebviewViewProvider
430432
}
431433
432434
#stepdetails {
433-
padding-left: 20px;
434-
border-left: solid lightgray;
435+
width: 40%;
436+
padding: 0 20px;
437+
border-left: solid rgba(229,229,229, .5);
435438
min-height: 100vh;
436-
${transformByQState.isRunning() || !transformByQState.isNotStarted() ? '' : 'display: none;'}
439+
display: block;
440+
}
441+
442+
#progress {
443+
width: 60%;
437444
}
438445
439446
.status-PENDING {
@@ -471,6 +478,10 @@ export class TransformationHubViewProvider implements vscode.WebviewViewProvider
471478
align-items: center;
472479
justify-content: center;
473480
}
481+
482+
#step-duration {
483+
color: rgba(59, 59, 59, .75);
484+
}
474485
</style>
475486
</head>
476487
<body>
@@ -520,23 +531,13 @@ export class TransformationHubViewProvider implements vscode.WebviewViewProvider
520531
function showStepDetails(item) {
521532
const visibleSubSteps = document.querySelectorAll(".visible");
522533
const substep = document.getElementById(item.id.replace("step-", "substep-"))
523-
document.getElementById("stepdetails").style.display = "none"
524-
let substepWasAlreadyVisible = false
525534
clearActiveSteps()
526535
for(const visibleSubStep of visibleSubSteps){
527536
visibleSubStep.classList.remove("visible")
528537
document.getElementById(visibleSubStep.id.replace("substep-", "step-")).classList.remove("active")
529-
if(visibleSubStep === substep){
530-
substepWasAlreadyVisible = true
531-
}
532-
}
533-
534-
if(substepWasAlreadyVisible){
535-
return
536538
}
537539
538540
substep.classList.add("visible")
539-
document.getElementById("stepdetails").style.display = "block"
540541
item.classList.add("active")
541542
document.getElementById("generic-step-details").classList.add("blocked")
542543
}
@@ -547,7 +548,6 @@ export class TransformationHubViewProvider implements vscode.WebviewViewProvider
547548
if(document.getElementById("generic-step-details").classList.contains("blocked")){
548549
return
549550
}
550-
document.getElementById("stepdetails").style.display = "block"
551551
document.getElementById("generic-step-details").classList.add("visible")
552552
}
553553
@@ -583,6 +583,7 @@ export class TransformationHubViewProvider implements vscode.WebviewViewProvider
583583
addShowSubstepEventListeners();
584584
addHighlightStepWithoutSubstepListeners();
585585
showCurrentActiveSubstep();
586+
updateTimer()
586587
</script>
587588
</body>
588589
</html>`

0 commit comments

Comments
 (0)