Skip to content

Commit d696306

Browse files
gorankokingorankokin
committed
frontend: Implement changed history link for Job
Implement feature for Data Job changed history link that is instructed with feature flag whether to show or hide, and on which page to show. Confirmation title and message are provided as dependency injection to the library config. Tested with generating local build, linking built artefacts back to @taurus/shared and then in other libraries and manual validated that everything works correctly. Executed prettier for formatting new files and also successfully executed ESLint and there are no error issues. Signed-off-by: gorankokin <gorankokin@gmail.com>
1 parent 0f8ec72 commit d696306

File tree

7 files changed

+222
-19
lines changed

7 files changed

+222
-19
lines changed

‎projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/details/data-job-details-page.component.html‎

Lines changed: 30 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -238,6 +238,28 @@
238238
</div>
239239
</vdk-form-section-container>
240240

241+
<vdk-form-section-container
242+
*ngIf="shouldShowChangeHistorySection && changeHistoryConfig && !!jobState"
243+
class="p-header-section"
244+
[formState]="readFormState"
245+
sectionName="change_history"
246+
>
247+
<div class="section-title" style="width: 5.5rem">
248+
Change history
249+
</div>
250+
<div class="form-section-readonly">
251+
<a
252+
class="label-link"
253+
href="{{ changeHistoryConfig.urlTemplate }}"
254+
target="_blank"
255+
rel="noopener"
256+
(click)="navigateToJobChangeHistory($event)"
257+
>
258+
{{ changeHistoryConfig.urlTemplate }}
259+
</a>
260+
</div>
261+
</vdk-form-section-container>
262+
241263
<vdk-form-section-container
242264
class="p-header-section"
243265
[formState]="readFormState"
@@ -361,8 +383,8 @@
361383
class="btn btn-link"
362384
clrSignpostTrigger
363385
>
364-
...(+{{ ( jobDetails
365-
?.config ?.contacts
386+
...(+{{ (jobDetails
387+
?.config?.contacts
366388
?.notified_on_job_deploy
367389
| extractContacts
368390
).length - 3 }})
@@ -464,8 +486,8 @@
464486
class="btn btn-link"
465487
clrSignpostTrigger
466488
>
467-
...(+{{ ( jobDetails
468-
?.config ?.contacts
489+
...(+{{ (jobDetails
490+
?.config?.contacts
469491
?.notified_on_job_failure_platform_error
470492
| extractContacts
471493
).length - 3 }})
@@ -567,8 +589,8 @@
567589
class="btn btn-link"
568590
clrSignpostTrigger
569591
>
570-
...(+{{ ( jobDetails
571-
?.config ?.contacts
592+
...(+{{ (jobDetails
593+
?.config?.contacts
572594
?.notified_on_job_failure_user_error
573595
| extractContacts
574596
).length - 3 }})
@@ -670,8 +692,8 @@
670692
class="btn btn-link"
671693
clrSignpostTrigger
672694
>
673-
...(+{{ ( jobDetails
674-
?.config ?.contacts
695+
...(+{{ (jobDetails
696+
?.config?.contacts
675697
?.notified_on_job_success
676698
| extractContacts
677699
).length - 3 }})

‎projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/details/data-job-details-page.component.ts‎

Lines changed: 81 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import {
2727
RouteState,
2828
TaurusBaseComponent,
2929
ToastService,
30+
UrlOpenerService,
3031
VdkFormState,
3132
VmwToastType
3233
} from '@versatiledatakit/shared';
@@ -89,8 +90,16 @@ export class DataJobDetailsPageComponent
8990

9091
isJobEditable = false;
9192

93+
/**
94+
* ** Flag instruct whether template to show team section.
95+
*/
9296
shouldShowTeamsSection = false;
9397

98+
/**
99+
* ** Flag instruct whether template to show change history section.
100+
*/
101+
shouldShowChangeHistorySection = false;
102+
94103
cronError: string = null;
95104

96105
next: Date;
@@ -141,6 +150,11 @@ export class DataJobDetailsPageComponent
141150
*/
142151
isComponentInErrorState = false;
143152

153+
/**
154+
* ** Data Job Change history configuration.
155+
*/
156+
changeHistoryConfig: DataPipelinesConfig['changeHistory'];
157+
144158
constructor(
145159
componentService: ComponentService,
146160
navigationService: NavigationService,
@@ -152,6 +166,7 @@ export class DataJobDetailsPageComponent
152166
private readonly formBuilder: FormBuilder,
153167
private readonly toastService: ToastService,
154168
private readonly errorHandlerService: ErrorHandlerService,
169+
private readonly urlOpenerService: UrlOpenerService,
155170
@Inject(DATA_PIPELINES_CONFIGS)
156171
public readonly dataPipelinesModuleConfig: DataPipelinesConfig
157172
) {
@@ -228,6 +243,33 @@ export class DataJobDetailsPageComponent
228243
this.router.navigateByUrl(StringUtil.stringFormat(this.dataPipelinesModuleConfig.healthStatusUrl, this.jobDetails.job_name)).then();
229244
}
230245

246+
/**
247+
* ** Intercepts click on change history link and show confirmation.
248+
*/
249+
navigateToJobChangeHistory($event: MouseEvent): void {
250+
$event.preventDefault();
251+
$event.stopImmediatePropagation();
252+
253+
this.urlOpenerService
254+
.open(this.changeHistoryConfig.urlTemplate, '_blank', {
255+
title: this.changeHistoryConfig.confirmationTitle,
256+
messageComponent: this.changeHistoryConfig.confirmationMessageComponent,
257+
closable: true,
258+
optionDoNotShowFutureConfirmation: true,
259+
confirmBtnModel: {
260+
text: 'Proceed',
261+
iconShape: 'pop-out',
262+
iconPosition: 'left'
263+
}
264+
})
265+
.then((_value) => {
266+
// No-op.
267+
})
268+
.catch((_reason) => {
269+
// No-op.
270+
});
271+
}
272+
231273
/**
232274
* @inheritDoc
233275
*/
@@ -365,8 +407,6 @@ export class DataJobDetailsPageComponent
365407
super.ngOnInit();
366408

367409
this._initializeNextRunDate();
368-
369-
this.shouldShowTeamsSection = this.dataPipelinesModuleConfig?.exploreConfig?.showTeamsColumn;
370410
}
371411

372412
private _initialize(state: RouteState): void {
@@ -380,12 +420,17 @@ export class DataJobDetailsPageComponent
380420
const jobParamKey = state.getData<string>('jobParamKey');
381421
this.jobName = state.getParam(jobParamKey);
382422

383-
this.isJobEditable = !!state.getData('editable');
423+
this.isJobEditable = !!state.getData<boolean>('editable');
384424

385425
if (this.isJobEditable) {
386426
this.formState = this.editableFormState;
387427
}
388428

429+
if (this.dataPipelinesModuleConfig) {
430+
this._initializePageFeatureFlags(state);
431+
this._initializeChangeHistoryConfig();
432+
}
433+
389434
this._subscribeForExecutions();
390435

391436
this.dataJobsService.loadJob(
@@ -485,6 +530,39 @@ export class DataJobDetailsPageComponent
485530
this.next = ParseEpochPipe.transform(this.jobState?.config?.schedule?.nextRunEpochSeconds);
486531
}
487532

533+
private _initializePageFeatureFlags(state: RouteState): void {
534+
if (state.getData<'explore' | 'manage'>('context') === 'explore') {
535+
if (this.dataPipelinesModuleConfig.exploreConfig) {
536+
this.shouldShowTeamsSection = this.dataPipelinesModuleConfig.exploreConfig.showTeamSectionInJobDetails;
537+
this.shouldShowChangeHistorySection = this.dataPipelinesModuleConfig.exploreConfig.showChangeHistorySectionInJobDetails;
538+
}
539+
} else {
540+
if (this.dataPipelinesModuleConfig.manageConfig) {
541+
this.shouldShowTeamsSection = this.dataPipelinesModuleConfig.manageConfig.showTeamSectionInJobDetails;
542+
this.shouldShowChangeHistorySection = this.dataPipelinesModuleConfig.manageConfig.showChangeHistorySectionInJobDetails;
543+
}
544+
}
545+
}
546+
547+
private _initializeChangeHistoryConfig(): void {
548+
if (
549+
!this.shouldShowChangeHistorySection ||
550+
!this.dataPipelinesModuleConfig.changeHistory ||
551+
!this.dataPipelinesModuleConfig.changeHistory.urlTemplate ||
552+
!this.dataPipelinesModuleConfig.changeHistory.confirmationTitle
553+
) {
554+
return;
555+
}
556+
557+
this.changeHistoryConfig = {
558+
...this.dataPipelinesModuleConfig.changeHistory,
559+
urlTemplate: CollectionsUtil.interpolateString(this.dataPipelinesModuleConfig.changeHistory.urlTemplate, {
560+
searchValue: '%data_job_name%',
561+
replaceValue: this.jobName
562+
})
563+
};
564+
}
565+
488566
private _subscribeForExecutions(): void {
489567
this.subscriptions.push(
490568
this.dataJobsService.getNotifiedForJobExecutions().subscribe((executions) => {

‎projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/config.model.ts‎

Lines changed: 87 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,25 @@
33
* SPDX-License-Identifier: Apache-2.0
44
*/
55

6+
import { Type } from '@angular/core';
7+
68
import { Observable } from 'rxjs';
79

810
import { DisplayMode } from './grid-config.model';
911

12+
/**
13+
* ** Configuration map for Data Pipelines library.
14+
*/
1015
export interface DataPipelinesConfig {
1116
defaultOwnerTeamName: string;
1217
ownerTeamNamesObservable?: Observable<string[]>;
18+
/**
19+
* ** Reference to Explore Data Job(s) configuration map.
20+
*/
1321
exploreConfig?: ExploreConfig;
22+
/**
23+
** Reference to Manage Data Job(s) configuration map.
24+
*/
1425
manageConfig?: ManageConfig;
1526
// health status url configured by a segment after hostname, including slash with {0} for the id param,
1627
healthStatusUrl?: string; // eg: /dev-center/health-status?dataJob={0}
@@ -22,7 +33,6 @@ export interface DataPipelinesConfig {
2233
* @deprecated
2334
*/
2435
showExecutionsPage?: boolean;
25-
2636
/**
2737
* ** Flag instruction to show or hide tab for lineage page.
2838
*/
@@ -31,17 +41,91 @@ export interface DataPipelinesConfig {
3141
* ** Documentation url for Data Pipelines.
3242
*/
3343
dataPipelinesDocumentationUrl?: string;
44+
/**
45+
* ** Data Job change history configuration.
46+
*/
47+
changeHistory?: {
48+
/**
49+
* ** Url template to external/internal system.
50+
*/
51+
urlTemplate: string;
52+
/**
53+
* ** Confirmation title if url template is to external system.
54+
*/
55+
confirmationTitle: string;
56+
/**
57+
* ** Confirmation message component if url template is to external system.
58+
*/
59+
confirmationMessageComponent: Type<any>;
60+
};
61+
/**
62+
* ** Integration providers from Host application.
63+
*/
64+
integrationProviders?: {
65+
/**
66+
* ** Users related.
67+
*/
68+
users: {
69+
/**
70+
* ** Get logged User email.
71+
*/
72+
getEmail: () => string;
73+
/**
74+
* ** Get logged User username.
75+
*/
76+
getUsername: () => string;
77+
};
78+
/**
79+
* ** Teams related.
80+
*/
81+
teams?: {
82+
/**
83+
* ** Ensure User membership in early access program identified by its name.
84+
*/
85+
ensureMembershipEarlyAccessProgram: (key: string) => boolean;
86+
};
87+
};
3488
}
3589

90+
/**
91+
* ** Configuration map for Explore Data Job(s).
92+
*/
3693
export interface ExploreConfig {
94+
/**
95+
* ** Shot Teams column in Explore Data Jobs list.
96+
*/
3797
showTeamsColumn?: boolean;
98+
/**
99+
* ** Show Teams section in Explore Data Job details.
100+
*/
101+
showTeamSectionInJobDetails?: boolean;
102+
/**
103+
* ** Show Change history section in Explore Data Job details.
104+
*/
105+
showChangeHistorySectionInJobDetails?: boolean;
38106
}
39107

108+
/**
109+
* ** Configuration map for Manage Data Job(s).
110+
*/
40111
export interface ManageConfig {
112+
/**
113+
* ** Shot Teams column in Manage Data Jobs list.
114+
*/
115+
showTeamsColumn?: boolean;
116+
/**
117+
* ** Show Teams section in Manage Data Job details.
118+
*/
119+
showTeamSectionInJobDetails?: boolean;
120+
/**
121+
* ** Show Change history section in Manage Data Job details.
122+
*/
123+
showChangeHistorySectionInJobDetails?: boolean;
41124
selectedTeamNameObservable?: Observable<string>;
42125
filterByTeamName?: boolean;
43126
displayMode?: DisplayMode;
127+
/**
128+
* ** Allow keytab download in Manage Data Job details.
129+
*/
44130
allowKeyTabDownloads?: boolean;
45-
showTeamsColumn?: boolean;
46-
ensureMembershipEarlyAccessProgram?: (key: string) => boolean;
47131
}

‎projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/route.model.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,11 @@ export interface DataPipelinesRouteData extends TaurusRouteNavigateToData, Tauru
6868
* - false -> Component is in readonly mode.
6969
*/
7070
editable?: boolean;
71+
72+
/**
73+
* ** Configuring this field, gives context to the Component.
74+
*/
75+
context?: 'manage' | 'explore';
7176
}
7277

7378
/**

0 commit comments

Comments
 (0)