risadmin_prod/authsec_angular_clarity_modern
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: risadmin_prod:build9
Branches Tags
risadmin_prod:main risadmin_prod:build9.4 risadmin_prod:build8.1 risadmin_prod:main1.2 risadmin_prod:build9.3 risadmin_prod:build9.2 risadmin_prod:build9.1 risadmin_prod:build9 risadmin_prod:build8 risadmin_prod:build7 risadmin_prod:build6 risadmin_prod:build5 risadmin_prod:build4 risadmin_prod:build3 risadmin_prod:build2
..
compare: risadmin_prod:main1.2
Branches Tags
risadmin_prod:main risadmin_prod:build9.4 risadmin_prod:build8.1 risadmin_prod:main1.2 risadmin_prod:build9.3 risadmin_prod:build9.2 risadmin_prod:build9.1 risadmin_prod:build9 risadmin_prod:build8 risadmin_prod:build7 risadmin_prod:build6 risadmin_prod:build5 risadmin_prod:build4 risadmin_prod:build3 risadmin_prod:build2

3 Commits
build9 ... main1.2

Author SHA1 Message Date
Gaurav Kumar
bee89fc12b new 2025-11-07 09:29:41 +05:30
Gaurav Kumar
fe6dd92ef4 dashboard 2025-11-07 09:19:05 +05:30
Gaurav Kumar
d8edd81fae chart 2025-11-07 09:15:52 +05:30
18 changed files with 2602 additions and 880 deletions
Expand all files Collapse all files

4
frontend/angular-clarity-master/src/app/modules/login/login-page/login-page.component.ts
View File

@@ -97,7 +97,6 @@ export class LoginPageComponent implements OnInit {
.subscribe(
resp => {
console.log('API Response received:', resp);
// Always reset loading state when response is received
this.isLoading = false;
// Handle different response formats
@@ -107,7 +106,7 @@ export class LoginPageComponent implements OnInit {
return;
}
// Handle different response formats
if (resp.success === 'false' || resp.success === false) {
if (resp.success === 'false') {
this.isError = true;
this.errMsg = resp.message || 'Login failed';
return;
@@ -124,7 +123,6 @@ export class LoginPageComponent implements OnInit {
},
(errResponse: HttpErrorResponse) => {
console.log('API Error received:', errResponse);
// Always reset loading state when error occurs
this.isLoading = false;
this.isError = true;

356
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/Data_lake.component.html
View File

@@ -71,13 +71,19 @@
Calculated Fields
</ng-container></clr-dg-column>
<!-- Webhook Status Column -->
<clr-dg-column>
<ng-container *clrDgHideableColumn="{hidden: false}">
Webhook Status
</ng-container>
</clr-dg-column>
<!-- who column -->
<clr-dg-column>
<ng-container *clrDgHideableColumn="{hidden: false}">
<clr-icon shape="bars"></clr-icon> Action
</ng-container></clr-dg-column>
</ng-container>
</clr-dg-column>
<!-- end -->
<clr-dg-row *clrDgItems="let user of product" [clrDgItem]="user">
@@ -104,7 +110,7 @@
<span
style="margin-right: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-grow: 1;"
title="{{user.url_endpoint}}" (click)="showFullUrl(user.url_endpoint)">
{{user.url | slice:0:30}}{{user.url_endpoint.length > 30 ? '...' : ''}}
{{user.url | slice:0:30}}{{user?.url_endpoint?.length > 30 ? '...' : ''}}
</span>
<button class="btn btn-icon btn-sm" (click)="copyToClipboard(user.url_endpoint)" title="Copy URL">
<clr-icon shape="copy-to-clipboard"></clr-icon>
@@ -138,39 +144,79 @@
style="cursor: pointer; align-items: center;"><clr-icon shape="details"
*ngIf="user.calculated_field_json"></clr-icon></clr-dg-cell>
<!-- Webhook Status Cell -->
<clr-dg-cell>
<span *ngIf="user.webhook_url && user.webhook_url.trim() !== ''" class="webhook-enabled">Enabled</span>
<span *ngIf="!user.webhook_url || user.webhook_url.trim() === ''" class="webhook-disabled">Disabled</span>
</clr-dg-cell>
<!-- who column -->
<clr-dg-cell>
<div style="display: flex; align-items: center; gap: 1px; flex-wrap: nowrap;">
<clr-signpost>
<span style="cursor: pointer;" clrSignpostTrigger><clr-icon shape="help" class="success"
style="color: rgb(0, 130, 236);"></clr-icon></span>
<clr-signpost-content [clrPosition]="'left-middle'" *clrIfOpen>
<h5 style="margin-top: 0">Who Column</h5>
<div>Account ID: <code class="clr-code">{{user.accountId}}</code></div>
<div>Created At: <code class="clr-code">{{user.createdAt| date}}</code></div>
<div>Created By: <code class="clr-code">{{user.createdBy}}</code></div>
<div>Updated At: <code class="clr-code">{{user.updatedAt | date}}</code></div>
<div>Updated By: <code class="clr-code">{{user.updatedBy}}</code></div>
</clr-signpost-content>
</clr-signpost>
<clr-signpost>
<span style="cursor: pointer;" clrSignpostTrigger><clr-icon shape="help" class="success"
style="color: rgb(0, 130, 236);"></clr-icon></span>
<clr-signpost-content [clrPosition]="'left-middle'" *clrIfOpen>
<h5 style="margin-top: 0">Who Column</h5>
<div>Account ID: <code class="clr-code">{{user.accountId}}</code></div>
<div>Created At: <code class="clr-code">{{user.createdAt| date}}</code></div>
<div>Created By: <code class="clr-code">{{user.createdBy}}</code></div>
<div>Updated At: <code class="clr-code">{{user.updatedAt | date}}</code></div>
<div>Updated By: <code class="clr-code">{{user.updatedBy}}</code></div>
</clr-signpost-content>
</clr-signpost>
<!-- New JSON Update button -->
<button class="btn btn-icon btn-sm" (click)="updateJson(user.id)" title="Update JSON">
<clr-icon shape="refresh"></clr-icon>
</button>
<!-- New JSON Update button -->
<button class="btn btn-icon" (click)="updateJson(user.id)" title="Update JSON">
<clr-icon shape="refresh"></clr-icon>
</button>
<!-- Calculated Field button -->
<button class="btn btn-icon btn-sm" (click)="fetchAvailableKeys(user, false)" title="Create Calculated Field">
<clr-icon shape="calculator"></clr-icon>
</button>
<!-- Calculated Field button -->
<button class="btn btn-icon" (click)="fetchAvailableKeys(user)" title="Create Calculated Field">
<clr-icon shape="calculator"></clr-icon>
</button>
<!-- Group By button -->
<button class="btn btn-icon btn-sm" (click)="openGroupByModal(user)" title="Group By Configuration">
<clr-icon shape="group"></clr-icon>
</button>
</div>
<!-- Group By button -->
<button class="btn btn-icon" (click)="openGroupByModal(user)" title="Group By Configuration">
<clr-icon shape="group"></clr-icon>
</button>
<!-- Blending Keys button (only shown for blending type with non-empty blending_lakeids) -->
<button class="btn btn-icon"
(click)="fetchBlendingKeys(user)"
title="Configure Blending Query"
*ngIf="canShowBlendingAction(user)">
<clr-icon shape="code"></clr-icon>
</button>
<!-- Field Mapping button -->
<button class="btn btn-icon"
(click)="openFieldMappingModal(user)"
title="Field Mapping"
*ngIf="user.url && user.sure_connect_id">
<clr-icon shape="map"></clr-icon>
</button>
<!-- Scheduler button -->
<button class="btn btn-icon"
(click)="openSchedulerModal(user)"
title="Scheduler">
<clr-icon shape="clock"></clr-icon>
</button>
<!-- Webhook toggle button -->
<button class="btn btn-icon"
(click)="toggleWebhook(user)"
title="Toggle Webhook">
<clr-icon shape="network-globe"></clr-icon>
</button>
<!-- Copy Webhook URL button -->
<button class="btn btn-icon"
(click)="copyWebhookUrl(user.webhook_url)"
title="Copy Webhook URL"
*ngIf="user.webhook_url && user.webhook_url.trim() !== ''">
<clr-icon shape="copy-to-clipboard"></clr-icon>
</button>
</clr-dg-cell>
<!-- who colmn -->
@@ -434,8 +480,32 @@
</select>
</div>
<!-- Add ref_datalake_id dropdown -->
<!-- Data Lake Type -->
<div class="clr-col-sm-12">
<label>Data Lake Type</label>
<select class="clr-input" [(ngModel)]="rowSelected.datalake_type" name="datalake_type">
<option *ngFor="let type of dataLakeTypes" [value]="type.value">{{ type.label }}</option>
</select>
</div>
<!-- Blending Data Lakes (only show when blending type is selected) -->
<div class="clr-col-sm-12" *ngIf="rowSelected.datalake_type === 'blending'">
<label>Blending Data Lakes</label>
<div class="checkbox-container">
<div *ngFor="let dataLake of dataLakeList" class="checkbox-item">
<input
type="checkbox"
[value]="dataLake.id"
(change)="onEditBlendingLakeCheckboxChange($event, dataLake.id)"
[checked]="isEditBlendingLakeSelected(dataLake.id)">
<label>{{ dataLake.name }}</label>
</div>
</div>
<small class="clr-subtext">Select data lakes to blend</small>
</div>
<!-- Reference Data Lake (only show when normal type is selected) -->
<div class="clr-col-sm-12" *ngIf="rowSelected.datalake_type === 'normal'">
<label>Reference Data Lake</label>
<select class="clr-input" [(ngModel)]="rowSelected.ref_datalake_id" name="ref_datalake_id">
<option value="">Select Data Lake</option>
@@ -563,8 +633,32 @@
</select>
</div>
<!-- Add ref_datalake_id dropdown -->
<!-- Data Lake Type -->
<div class="clr-col-sm-12">
<label>Data Lake Type</label>
<select formControlName="datalake_type">
<option *ngFor="let type of dataLakeTypes" [value]="type.value">{{ type.label }}</option>
</select>
</div>
<!-- Blending Data Lakes (only show when blending type is selected) -->
<div class="clr-col-sm-12" *ngIf="entryForm.get('datalake_type')?.value === 'blending'">
<label>Blending Data Lakes</label>
<div class="checkbox-container">
<div *ngFor="let dataLake of dataLakeList" class="checkbox-item">
<input
type="checkbox"
[value]="dataLake.id"
(change)="onBlendingLakeCheckboxChange($event, dataLake.id)"
[checked]="isBlendingLakeSelected(dataLake.id)">
<label>{{ dataLake.name }}</label>
</div>
</div>
<small class="clr-subtext">Select data lakes to blend</small>
</div>
<!-- Reference Data Lake (only show when normal type is selected) -->
<div class="clr-col-sm-12" *ngIf="entryForm.get('datalake_type')?.value === 'normal'">
<label>Reference Data Lake</label>
<select formControlName="ref_datalake_id">
<option value="">Select Data Lake</option>
@@ -916,4 +1010,200 @@
</div>
</clr-modal>
<!-- htmlpopup -->
<!-- Blending Keys Panel -->
<div class="blending-keys-panel" *ngIf="showBlendingKeys">
<div class="panel-header">
<h3>Blending Configuration</h3>
<button class="btn btn-icon" (click)="closeBlendingKeys()" title="Close">
<clr-icon shape="close"></clr-icon>
</button>
</div>
<div class="panel-content">
<!-- Display keys for each blending lake -->
<div class="keys-container" *ngFor="let keyData of blendingKeysData">
<h4>Data Lake {{ keyData.lakeId }} - Table: {{ keyData.tableName }}</h4>
<div class="headers-container">
<span class="header-tag" *ngFor="let header of keyData.headers">{{ header }}</span>
</div>
</div>
<!-- SQL Query Editor -->
<div class="sql-editor-container">
<h4>SQL Query Builder</h4>
<textarea class="clr-textarea sql-textarea"
[(ngModel)]="sqlQueryText"
placeholder="Enter your SQL query here using the available headers..."
rows="6"></textarea>
<div class="editor-actions">
<button class="btn btn-primary" (click)="updateSqlQuery()">Update SQL Query</button>
</div>
</div>
</div>
</div>
<!-- Blending Configuration Modal -->
<clr-modal [(clrModalOpen)]="showBlendingKeys" [clrModalSize]="'xl'" [clrModalStaticBackdrop]="true">
<h3 class="modal-title">Blending Configuration</h3>
<div class="modal-body">
<div class="blending-config-container">
<!-- Display keys for each blending lake -->
<div class="keys-section" *ngIf="blendingKeysData && blendingKeysData.length > 0">
<h4 class="section-title">
<clr-icon shape="data-field" class="section-icon"></clr-icon>
Available Data Sources
</h4>
<div class="keys-container">
<div class="key-card" *ngFor="let keyData of blendingKeysData">
<div class="key-header">
<h5>Data Lake {{ keyData.lakeId }} - Table: {{ keyData.tableName }}</h5>
</div>
<div class="headers-container">
<span class="header-tag" *ngFor="let header of keyData.headers"
(click)="insertHeaderIntoQuery(header)">
{{ header }}
</span>
</div>
</div>
</div>
</div>
<!-- SQL Query Editor -->
<div class="sql-editor-section">
<h4 class="section-title">
<clr-icon shape="code" class="section-icon"></clr-icon>
SQL Query Builder
</h4>
<div class="sql-editor-container">
<textarea class="clr-textarea sql-textarea"
[(ngModel)]="sqlQueryText"
placeholder="Enter your SQL query here using the available headers. Click on header names above to insert them into your query."
rows="8"></textarea>
<div class="editor-hint">
<small class="clr-subtext">Tip: Click on header names above to automatically insert them into your query</small>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline" (click)="closeBlendingKeys()">Cancel</button>
<button type="button" class="btn btn-primary" (click)="updateSqlQuery()">Update SQL Query</button>
</div>
</clr-modal>
<!-- Field Mapping Modal -->
<clr-modal [(clrModalOpen)]="showFieldMappingModal" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
<h3 class="modal-title">Field Mapping Configuration</h3>
<div class="modal-body">
<div class="field-mapping-container">
<div class="instructions">
<p>Map original field names to new names. Leave mapping blank to exclude field from mapping.</p>
</div>
<div class="mapping-table-container" *ngIf="fieldMappingData && fieldMappingData.length > 0">
<table class="table mapping-table">
<thead>
<tr>
<th width="50%">Original Field Name</th>
<th width="50%">Mapped Field Name</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let field of fieldMappingData; let i = index">
<td class="original-field">
<span class="field-tag">{{ field.original }}</span>
</td>
<td>
<input type="text"
class="clr-input mapping-input"
[(ngModel)]="field.mapped"
placeholder="Enter new field name"
(ngModelChange)="updateFieldMapping(i, $event)">
</td>
</tr>
</tbody>
</table>
</div>
<div class="no-data-message" *ngIf="fieldMappingData && fieldMappingData.length === 0">
<p>No fields available for mapping. Please check the data source configuration.</p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline" (click)="closeFieldMappingModal()">Cancel</button>
<button type="button" class="btn btn-primary" (click)="updateFieldMappings()" [disabled]="!fieldMappingData || fieldMappingData.length === 0">Update Field Mappings</button>
</div>
</clr-modal>
<!-- Scheduler Modal -->
<clr-modal [(clrModalOpen)]="showSchedulerModal" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
<h3 class="modal-title">Job Scheduler</h3>
<div class="modal-body">
<div class="scheduler-container">
<div class="data-lake-info">
<h4>Data Lake: {{ selectedSchedulerItem?.name }}</h4>
</div>
<!-- Job Information -->
<div class="job-info-section" *ngIf="schedulerJob">
<div class="job-header">
<h5>Job Information</h5>
<span class="badge" [ngClass]="getStatusBadgeClass(schedulerJob.status)">
{{ schedulerJob.status }}
</span>
</div>
<div class="job-details">
<div class="detail-row">
<label>Job Name:</label>
<span>{{ schedulerJob.name }}</span>
</div>
<div class="detail-row">
<label>Job Type:</label>
<span>{{ schedulerJob.jobType }}</span>
</div>
<div class="detail-row">
<label>Description:</label>
<span>{{ schedulerJob.description }}</span>
</div>
</div>
<!-- Job Actions -->
<div class="job-actions">
<button class="btn btn-warning" (click)="pauseJob()" *ngIf="schedulerJob.status === 'RUNNING'">
<clr-icon shape="pause"></clr-icon> Pause Job
</button>
<button class="btn btn-success" (click)="resumeJob()" *ngIf="schedulerJob.status === 'PAUSED'">
<clr-icon shape="play"></clr-icon> Resume Job
</button>
<button class="btn btn-danger" (click)="stopJob()" *ngIf="schedulerJob.status !== 'STOPPED'">
<clr-icon shape="stop"></clr-icon> Stop Job
</button>
<button class="btn btn-primary" (click)="restartJob()" *ngIf="schedulerJob.status === 'STOPPED'">
<clr-icon shape="play"></clr-icon> Restart Job
</button>
</div>
</div>
<!-- No Job Found -->
<div class="no-job-section" *ngIf="schedulerJob === null">
<div class="no-job-message">
<p>No scheduled job found for this Data Lake.</p>
<p>Would you like to create a new job?</p>
</div>
<div class="create-job-actions">
<button class="btn btn-primary" (click)="createJob()">
<clr-icon shape="plus"></clr-icon> Create Job
</button>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline" (click)="closeSchedulerModal()">Close</button>
</div>
</clr-modal>

491
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/Data_lake.component.scss
View File

@@ -384,3 +384,494 @@
border: 1px solid #ccc;
border-radius: 4px;
}
/* Data Lake Type Styles */
.clr-subtext {
display: block;
margin-top: 5px;
font-size: 12px;
color: #666;
}
[data-multiple] {
height: auto !important;
min-height: 80px;
}
/* Checkbox Styles for Blending Data Lakes */
.checkbox-container {
border: 1px solid #ccc;
border-radius: 4px;
padding: 10px;
max-height: 200px;
overflow-y: auto;
background-color: #f9f9f9;
}
.checkbox-item {
display: flex;
align-items: center;
margin-bottom: 8px;
}
.checkbox-item input[type="checkbox"] {
margin-right: 8px;
}
.checkbox-item label {
margin-bottom: 0;
cursor: pointer;
}
/* Blending Keys Panel Styles */
.blending-keys-panel {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: white;
border-top: 1px solid #ccc;
box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
z-index: 1000;
max-height: 50vh;
overflow-y: auto;
}
.panel-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
border-bottom: 1px solid #eee;
background-color: #f5f5f5;
}
.panel-header h3 {
margin: 0;
color: #333;
}
.panel-content {
padding: 15px;
}
.keys-container {
margin-bottom: 20px;
padding: 10px;
border: 1px solid #eee;
border-radius: 4px;
background-color: #fafafa;
}
.keys-container h4 {
margin-top: 0;
color: #555;
}
.headers-container {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.header-tag {
display: inline-block;
background-color: #e3f2fd;
border: 1px solid #bbdefb;
border-radius: 12px;
padding: 4px 10px;
font-size: 12px;
font-family: monospace;
}
.sql-editor-container {
margin-top: 20px;
}
.sql-textarea {
width: 100%;
font-family: 'Courier New', monospace;
font-size: 14px;
}
.editor-actions {
margin-top: 10px;
text-align: right;
}
/* Blending Configuration Modal Styles */
.blending-config-container {
display: flex;
flex-direction: column;
gap: 20px;
}
.section-title {
color: #0072a0;
font-weight: 600;
margin-bottom: 15px;
display: flex;
align-items: center;
}
.section-icon {
margin-right: 10px;
}
.keys-section {
padding: 15px;
border-radius: 8px;
background-color: #f9f9f9;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.key-card {
background-color: white;
border: 1px solid #e0e0e0;
border-radius: 6px;
padding: 15px;
margin-bottom: 15px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.key-header h5 {
margin: 0 0 10px 0;
color: #333;
font-weight: 500;
}
.headers-container {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.header-tag {
display: inline-flex;
align-items: center;
background-color: #e3f2fd;
border: 1px solid #bbdefb;
border-radius: 20px;
padding: 6px 12px;
margin: 4px;
font-size: 13px;
font-family: monospace;
cursor: pointer;
transition: all 0.2s;
}
.header-tag:hover {
background-color: #bbdefb;
transform: translateY(-2px);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.sql-editor-section {
padding: 15px;
border-radius: 8px;
background-color: #f9f9f9;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.sql-editor-container {
background-color: white;
border: 1px solid #e0e0e0;
border-radius: 6px;
padding: 15px;
}
.sql-textarea {
width: 100%;
font-family: 'Courier New', monospace;
font-size: 14px;
min-height: 150px;
}
.editor-hint {
margin-top: 10px;
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 10px;
padding: 15px;
border-top: 1px solid #eee;
}
/* Field Mapping Modal Styles */
.field-mapping-container {
padding: 10px;
}
.instructions {
background-color: #e3f2fd;
border: 1px solid #bbdefb;
border-radius: 4px;
padding: 15px;
margin-bottom: 20px;
}
.instructions p {
margin: 0;
color: #1976d2;
}
.mapping-table-container {
overflow-x: auto;
}
.mapping-table {
width: 100%;
border-collapse: collapse;
}
.mapping-table th {
background-color: #f5f5f5;
padding: 12px 15px;
text-align: left;
font-weight: 600;
color: #333;
border-bottom: 2px solid #ddd;
}
.mapping-table td {
padding: 12px 15px;
border-bottom: 1px solid #eee;
}
.original-field {
vertical-align: middle;
}
.field-tag {
display: inline-block;
background-color: #e0e0e0;
border: 1px solid #bdbdbd;
border-radius: 4px;
padding: 6px 10px;
font-family: monospace;
font-size: 13px;
}
.mapping-input {
width: 100%;
padding: 8px 12px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
}
.mapping-input:focus {
outline: none;
border-color: #0072a0;
box-shadow: 0 0 0 2px rgba(0, 114, 160, 0.2);
}
.no-data-message {
text-align: center;
padding: 30px;
color: #666;
font-style: italic;
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 10px;
padding: 15px;
border-top: 1px solid #eee;
}
/* Scheduler Modal Styles */
.scheduler-container {
padding: 10px;
}
.data-lake-info h4 {
margin: 0 0 20px 0;
color: #333;
border-bottom: 1px solid #eee;
padding-bottom: 10px;
}
.job-info-section {
background-color: #f9f9f9;
border: 1px solid #e0e0e0;
border-radius: 6px;
padding: 20px;
margin-bottom: 20px;
}
.job-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.job-header h5 {
margin: 0;
color: #333;
}
.badge {
padding: 5px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: bold;
}
.badge-success {
background-color: #4caf50;
color: white;
}
.badge-warning {
background-color: #ff9800;
color: white;
}
.badge-danger {
background-color: #f44336;
color: white;
}
.badge-light {
background-color: #e0e0e0;
color: #333;
}
.job-details {
margin-bottom: 20px;
}
.detail-row {
display: flex;
margin-bottom: 10px;
}
.detail-row label {
font-weight: 500;
width: 120px;
color: #555;
}
.detail-row span {
flex: 1;
}
.job-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.job-actions .btn {
display: flex;
align-items: center;
gap: 5px;
}
.no-job-section {
text-align: center;
padding: 30px 20px;
}
.no-job-message p {
margin: 10px 0;
color: #666;
}
.no-job-message p:first-child {
font-size: 18px;
color: #333;
}
.create-job-actions {
margin-top: 20px;
}
.create-job-actions .btn {
display: inline-flex;
align-items: center;
gap: 5px;
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 10px;
padding: 15px;
border-top: 1px solid #eee;
}
/* Webhook Status Styles */
.webhook-enabled {
display: inline-block;
padding: 4px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: bold;
background-color: #4caf50;
color: white;
}
.webhook-disabled {
display: inline-block;
padding: 4px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: bold;
background-color: #f44336;
color: white;
}
/* Webhook Status Styles */
.webhook-status {
display: inline-block;
padding: 4px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: bold;
}
.webhook-status.enabled {
background-color: #4caf50;
color: white;
}
.webhook-status.disabled {
background-color: #f44336;
color: white;
}
/* Webhook Modal Styles */
.webhook-container {
padding: 10px;
}
.webhook-container .data-lake-info h4 {
margin: 0 0 20px 0;
color: #333;
border-bottom: 1px solid #eee;
padding-bottom: 10px;
}
.webhook-form {
margin-bottom: 20px;
}
.webhook-info {
background-color: #e3f2fd;
border: 1px solid #bbdefb;
border-radius: 4px;
padding: 15px;
margin-top: 20px;
}
.webhook-info p {
margin: 0;
color: #1976d2;
}

504
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/Data_lake.component.ts
View File

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { AlertService } from 'src/app/services/alert.service';
import { Data_lakeservice } from './Data_lake.service';
import { SchedulerService } from 'src/app/services/scheduler.service';
import { AbstractControl, FormArray, FormBuilder, FormGroup, Validators, ValidationErrors } from '@angular/forms';
import { ExtensionService } from 'src/app/services/fnd/extension.service';
import { DashboardContentModel2 } from 'src/app/models/builder/dashboard';
@@ -10,6 +11,7 @@ import { UserInfoService } from 'src/app/services/user-info.service';
import { SureconnectService } from '../sureconnect/sureconnect.service';
import { HttpClient } from '@angular/common/http';
import { ApiRequestService } from 'src/app/services/api/api-request.service';
import { DataLakeSchedulerService } from './dataLakescheduler.service';
declare var JsBarcode: any;
@Component({
selector: 'app-Data_lake',
@@ -66,6 +68,12 @@ export class Data_lakeComponent implements OnInit {
dataLakeList: any[] = [];
selectedDataLake: any = null;
// New properties for data lake type
dataLakeTypes = [
{ value: 'normal', label: 'Normal' },
{ value: 'blending', label: 'Blending' }
];
// Calculated field properties
calculatedFieldModalOpen = false;
availableKeys: string[] = [];
@@ -99,10 +107,36 @@ export class Data_lakeComponent implements OnInit {
selectedAggregationFields: { field: string; operation: string }[] = [];
// New property to store selected blending lake IDs as string
selectedBlendingLakeIds: string[] = [];
editSelectedBlendingLakeIds: string[] = [];
// New properties for blending functionality
showBlendingKeys = false;
blendingKeysData: any[] = [];
sqlQueryText = '';
selectedBlendingItem: any = null;
// New properties for field mapping
showFieldMappingModal = false;
fieldMappingData: any[] = [];
fieldMappings: { [key: string]: string } = {};
selectedMappingItem: any = null;
// New properties for scheduler functionality
showSchedulerModal = false;
schedulerJob: any = null;
selectedSchedulerItem: any = null;
// New properties for webhook functionality
showWebhookModal = false;
selectedWebhookItem: any = null;
constructor(
private extensionService: ExtensionService,
private userInfoService: UserInfoService,
private mainService: Data_lakeservice,
private schedulerService: DataLakeSchedulerService,
private alertService: AlertService,
private toastr: ToastrService,
private _fb: FormBuilder,
@@ -124,23 +158,19 @@ export class Data_lakeComponent implements OnInit {
this.getDataLakeList(); // Fetch Data Lake list for reference dropdown
this.entryForm = this._fb.group({
name: [null],
url: [null],
schedule: [null],
cron_job: [null],
json: [null],
url_endpoint: [null],
batch_volume: [null],
sure_connect_id: [null],
ref_datalake_id: [null],
datalake_type: ['normal'], // Default to normal
blending_lakeids: [[]], // Array for multiple selections
webhook_url: [null] // Add webhook_url field
});
sure_connect_id: [null], // Add SureConnect field
ref_datalake_id: [null], // Add Data Lake reference field
}); // component_button200
// form code start
this.extensionService.getJsonObjectsByFormCodeList(this.formcode).subscribe(data => {
console.log(data);
@@ -240,8 +270,7 @@ export class Data_lakeComponent implements OnInit {
// Fetch Data Lake list for reference dropdown
getDataLakeList() {
this.mainService.getAll().subscribe((data: any[]) => {
// Filter out the current item to avoid self-reference
this.dataLakeList = data.filter(item => item.id !== (this.rowSelected?.id || 0));
this.dataLakeList = data;
console.log('Data Lake List:', this.dataLakeList);
}, (error) => {
console.log('Error fetching Data Lake list:', error);
@@ -686,8 +715,16 @@ export class Data_lakeComponent implements OnInit {
this.editCronExpression = row.cron_job || '';
// Set the selected SureConnect for edit form
this.selectedSureConnect = row.sure_connect_id || null;
// Set the selected Data Lake for edit form
this.selectedDataLake = row.ref_datalake_id || null;
// Initialize blending lake IDs for edit form from string
if (row.blending_lakeids && typeof row.blending_lakeids === 'string') {
this.editSelectedBlendingLakeIds = row.blending_lakeids.split(',').filter(id => id.trim() !== '');
} else if (row.blending_lakeids && Array.isArray(row.blending_lakeids)) {
this.editSelectedBlendingLakeIds = row.blending_lakeids.map(id => id.toString());
} else {
this.editSelectedBlendingLakeIds = [];
}
// Use setTimeout to ensure the component has time to initialize
setTimeout(() => {
this.modalEdit = true;
@@ -838,18 +875,22 @@ export class Data_lakeComponent implements OnInit {
}
goToAdd(row) {
this.modalAdd = true;
this.modalAdd = false;
this.addCronExpression = '';
this.selectedSureConnect = null; // Reset SureConnect selection
this.selectedDataLake = null; // Reset Data Lake selection
this.submitted = false;
// Reset blending lake IDs for add form
this.selectedBlendingLakeIds = [];
// Reset the form control for cron_job and sure_connect_id
if (this.entryForm) {
if (this.entryForm.get('cron_job')) {
this.entryForm.get('cron_job')?.setValue('');
}
// Reset blending_lakeids to empty string
this.entryForm.get('blending_lakeids')?.setValue('');
}
this.modalAdd = true;
}
submitted = false;
onSubmit() {
@@ -1290,4 +1331,433 @@ export class Data_lakeComponent implements OnInit {
return [];
}
}
// Method to check if blending action should be available
canShowBlendingAction(item: any): boolean {
return item.datalake_type === 'blending' &&
item.blending_lakeids &&
item.blending_lakeids.trim() !== '';
}
// Method to insert header into SQL query at cursor position
insertHeaderIntoQuery(header: string) {
const textarea = document.querySelector('.sql-textarea') as HTMLTextAreaElement;
if (textarea) {
const start = textarea.selectionStart;
const end = textarea.selectionEnd;
const text = textarea.value;
const before = text.substring(0, start);
const after = text.substring(end, text.length);
// Insert the header at cursor position
this.sqlQueryText = before + header + after;
// Set cursor position after the inserted text
setTimeout(() => {
textarea.selectionStart = start + header.length;
textarea.selectionEnd = start + header.length;
textarea.focus();
}, 0);
} else {
// Fallback: append to end of text
this.sqlQueryText += header;
}
}
// Method to fetch blending keys
fetchBlendingKeys(item: any) {
this.selectedBlendingItem = item;
this.blendingKeysData = [];
this.showBlendingKeys = true;
// Initialize SQL query text from existing data
if (item.sqlquery_json) {
this.sqlQueryText = item.sqlquery_json;
} else {
this.sqlQueryText = '';
}
// Parse blending_lakeids string to array
const lakeIds = item.blending_lakeids.split(',').map(id => id.trim()).filter(id => id !== '');
// Fetch keys for each lake ID
lakeIds.forEach(lakeId => {
this.mainService.fetchBlendingKeys(Number(lakeId)).subscribe(
(data: any) => {
this.blendingKeysData.push({
lakeId: lakeId,
tableName: data.tableName,
headers: data.headers
});
},
(error) => {
console.error('Error fetching keys for lake ID:', lakeId, error);
this.toastr.error(`Failed to fetch keys for Data Lake ${lakeId}`);
}
);
});
}
// Method to update SQL query
updateSqlQuery() {
if (!this.selectedBlendingItem) {
this.toastr.error('No blending item selected');
return;
}
// Update the SQL query JSON field
this.selectedBlendingItem.sqlquery_json = this.sqlQueryText;
// Call update service
this.mainService.update(this.selectedBlendingItem.id, this.selectedBlendingItem).subscribe(
(response) => {
this.toastr.success('SQL query updated successfully');
// Update the local data
const index = this.product.findIndex(p => p.id === this.selectedBlendingItem.id);
if (index !== -1) {
this.product[index] = {...this.selectedBlendingItem};
}
},
(error) => {
console.error('Error updating SQL query:', error);
this.toastr.error('Failed to update SQL query');
}
);
}
// Method to close blending keys panel
closeBlendingKeys() {
this.showBlendingKeys = false;
this.blendingKeysData = [];
this.sqlQueryText = '';
this.selectedBlendingItem = null;
}
// Method to handle checkbox change for blending lakes (ADD form)
onBlendingLakeCheckboxChange(event: any, lakeId: number) {
const lakeIdStr = lakeId.toString();
if (event.target.checked) {
// Add to selected blending lake IDs
if (!this.selectedBlendingLakeIds.includes(lakeIdStr)) {
this.selectedBlendingLakeIds.push(lakeIdStr);
}
} else {
// Remove from selected blending lake IDs
const index = this.selectedBlendingLakeIds.indexOf(lakeIdStr);
if (index > -1) {
this.selectedBlendingLakeIds.splice(index, 1);
}
}
// Update the form control value as a comma-separated string
this.entryForm.get('blending_lakeids')?.setValue(this.selectedBlendingLakeIds.join(','));
}
// Method to check if a blending lake is selected (ADD form)
isBlendingLakeSelected(lakeId: number): boolean {
return this.selectedBlendingLakeIds.includes(lakeId.toString());
}
// Method to handle checkbox change for blending lakes (EDIT form)
onEditBlendingLakeCheckboxChange(event: any, lakeId: number) {
const lakeIdStr = lakeId.toString();
if (event.target.checked) {
// Add to selected blending lake IDs
if (!this.editSelectedBlendingLakeIds.includes(lakeIdStr)) {
this.editSelectedBlendingLakeIds.push(lakeIdStr);
}
} else {
// Remove from selected blending lake IDs
const index = this.editSelectedBlendingLakeIds.indexOf(lakeIdStr);
if (index > -1) {
this.editSelectedBlendingLakeIds.splice(index, 1);
}
}
// Update the rowSelected value as a comma-separated string
this.rowSelected.blending_lakeids = this.editSelectedBlendingLakeIds.join(',');
}
// Method to check if a blending lake is selected (EDIT form)
isEditBlendingLakeSelected(lakeId: number): boolean {
return this.editSelectedBlendingLakeIds.includes(lakeId.toString());
}
// Method to open field mapping modal
openFieldMappingModal(item: any) {
this.selectedMappingItem = item;
this.fieldMappingData = [];
this.fieldMappings = {};
this.showFieldMappingModal = true;
// Fetch available keys using the same API as calculated fields
this.mainService.fetchAvailableKeys(item.url, item.sure_connect_id).subscribe(
(keys: string[]) => {
// Initialize field mappings with empty values
this.fieldMappingData = keys.map(key => ({
original: key,
mapped: ''
}));
// If there's existing mapping data, populate it
if (item.mapping_json) {
try {
const existingMappings = JSON.parse(item.mapping_json);
this.fieldMappingData.forEach(field => {
if (existingMappings[field.original]) {
field.mapped = existingMappings[field.original];
}
});
} catch (e) {
console.error('Error parsing existing mapping JSON:', e);
}
}
},
(error) => {
console.error('Error fetching keys for field mapping:', error);
this.toastr.error('Failed to fetch available keys for field mapping');
}
);
}
// Method to update field mappings
updateFieldMappings() {
if (!this.selectedMappingItem) {
this.toastr.error('No item selected for mapping');
return;
}
// Create mapping object
const mappings: { [key: string]: string } = {};
this.fieldMappingData.forEach(field => {
if (field.mapped && field.mapped.trim() !== '') {
mappings[field.original] = field.mapped.trim();
}
});
// Convert to JSON string
const mappingJson = JSON.stringify(mappings);
// Update the mapping JSON field
this.selectedMappingItem.mapping_json = mappingJson;
// Call update service
this.mainService.update(this.selectedMappingItem.id, this.selectedMappingItem).subscribe(
(response) => {
this.toastr.success('Field mappings updated successfully');
// Update the local data
const index = this.product.findIndex(p => p.id === this.selectedMappingItem.id);
if (index !== -1) {
this.product[index] = {...this.selectedMappingItem};
}
this.closeFieldMappingModal();
},
(error) => {
console.error('Error updating field mappings:', error);
this.toastr.error('Failed to update field mappings');
}
);
}
// Method to close field mapping modal
closeFieldMappingModal() {
this.showFieldMappingModal = false;
this.fieldMappingData = [];
this.fieldMappings = {};
this.selectedMappingItem = null;
}
// Method to update individual field mapping
updateFieldMapping(index: number, value: string) {
if (index >= 0 && index < this.fieldMappingData.length) {
this.fieldMappingData[index].mapped = value;
}
}
// Method to open scheduler modal
openSchedulerModal(item: any) {
this.selectedSchedulerItem = item;
this.schedulerJob = null;
this.showSchedulerModal = true;
// Fetch job by lake ID
this.schedulerService.getJobByLakeId(item.id).subscribe(
(job: any) => {
this.schedulerJob = job;
},
(error) => {
// If job not found, it's expected - we'll show create option
if (error.status === 404) {
this.schedulerJob = null;
} else {
console.error('Error fetching scheduler job:', error);
this.toastr.error('Failed to fetch scheduler job information');
}
}
);
}
// Method to create a new job
createJob() {
if (!this.selectedSchedulerItem) {
this.toastr.error('No data lake selected');
return;
}
const jobData = {
name: this.selectedSchedulerItem.name,
status: 'RUNNING',
description: `Scheduled job for ${this.selectedSchedulerItem.name}`,
jobType: 'DATALAKE',
lakeid: this.selectedSchedulerItem.id
};
this.schedulerService.createJob(jobData).subscribe(
(job: any) => {
this.schedulerJob = job;
this.toastr.success('Job created successfully');
},
(error) => {
console.error('Error creating job:', error);
this.toastr.error('Failed to create job');
}
);
}
// Method to pause a job
pauseJob() {
if (!this.schedulerJob || !this.schedulerJob.id) {
this.toastr.error('No job selected');
return;
}
this.schedulerService.pauseJob(this.schedulerJob.id).subscribe(
(response: any) => {
this.schedulerJob.status = 'PAUSED';
this.toastr.success('Job paused successfully');
},
(error) => {
console.error('Error pausing job:', error);
this.toastr.error('Failed to pause job');
}
);
}
// Method to resume a job
resumeJob() {
if (!this.schedulerJob || !this.schedulerJob.id) {
this.toastr.error('No job selected');
return;
}
this.schedulerService.resumeJob(this.schedulerJob.id).subscribe(
(response: any) => {
this.schedulerJob.status = 'RUNNING';
this.toastr.success('Job resumed successfully');
},
(error) => {
console.error('Error resuming job:', error);
this.toastr.error('Failed to resume job');
}
);
}
// Method to stop a job
stopJob() {
if (!this.schedulerJob || !this.schedulerJob.id) {
this.toastr.error('No job selected');
return;
}
this.schedulerService.stopJob(this.schedulerJob.id).subscribe(
(response: any) => {
this.schedulerJob.status = 'STOPPED';
this.toastr.success('Job stopped successfully');
},
(error) => {
console.error('Error stopping job:', error);
this.toastr.error('Failed to stop job');
}
);
}
// Method to restart a stopped job
restartJob() {
if (!this.schedulerJob || !this.schedulerJob.id) {
this.toastr.error('No job selected');
return;
}
// To restart a job, we need to create a new job with the same parameters
const jobData = {
name: this.schedulerJob.name,
status: 'RUNNING',
description: this.schedulerJob.description,
jobType: this.schedulerJob.jobType,
lakeid: this.schedulerJob.lakeid
};
this.schedulerService.createJob(jobData).subscribe(
(job: any) => {
this.schedulerJob = job;
this.toastr.success('Job restarted successfully');
},
(error) => {
console.error('Error restarting job:', error);
this.toastr.error('Failed to restart job');
}
);
}
// Method to close scheduler modal
closeSchedulerModal() {
this.showSchedulerModal = false;
this.schedulerJob = null;
this.selectedSchedulerItem = null;
}
// Method to get status badge class
getStatusBadgeClass(status: string): string {
switch (status) {
case 'RUNNING':
return 'badge-success';
case 'PAUSED':
return 'badge-warning';
case 'STOPPED':
return 'badge-danger';
default:
return 'badge-light';
}
}
// Method to toggle webhook for a data lake item
toggleWebhook(item: any) {
// Call the enableWebhook service method
this.mainService.enableWebhook(item.id).subscribe(
(updatedItem: any) => {
// Update the local data with the response from the server
const index = this.product.findIndex(p => p.id === item.id);
if (index !== -1) {
this.product[index] = {...updatedItem};
}
// Show success message based on the new webhook status
if (updatedItem.webhook_url && updatedItem.webhook_url.trim() !== '') {
this.toastr.success('Webhook enabled successfully');
} else {
this.toastr.success('Webhook disabled successfully');
}
},
(error) => {
console.error('Error toggling webhook:', error);
this.toastr.error('Failed to toggle webhook');
}
);
}
// Method to copy webhook URL to clipboard
copyWebhookUrl(webhookUrl: string) {
this.copyToClipboard(webhookUrl);
}
}

12
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/Data_lake.service.ts
View File

@@ -42,6 +42,12 @@ export class Data_lakeservice{
return this.apiRequest.get(apiUrl);
}
// Method to fetch blending keys for a specific lake ID
fetchBlendingKeys(lakeId: number): Observable<any> {
const _http = `${this.baseURL}/keys/${lakeId}`;
return this.apiRequest.get(_http);
}
// Method to update calculated fields for a data lake item
updateCalculatedFields(id: number, calculatedFieldJson: string, isCalculatedField: boolean): Observable<any> {
const _http = this.baseURL + "/" + id;
@@ -51,5 +57,11 @@ export class Data_lakeservice{
};
return this.apiRequest.put(_http, data);
}
// Method to enable webhook for a data lake item
enableWebhook(id: number): Observable<any> {
const _http = `${this.baseURL}/webhook/${id}`;
return this.apiRequest.get(_http);
}
// updateaction
}

13
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/cron-job-builder/cron-job-builder.component.html
View File

@@ -1,6 +1,15 @@
<div class="cron-job-builder">
<h4>Cron Job Builder</h4>
<div class="clr-row">
<div class="clr-col-lg-2 clr-col-md-4 clr-col-sm-6 clr-col-12">
<div class="form-group">
<label>Second</label>
<select class="form-control" [(ngModel)]="second" (change)="onFieldChange()">
<option *ngFor="let option of secondOptions" [value]="option.value">{{ option.label }}</option>
</select>
</div>
</div>
<div class="clr-col-lg-2 clr-col-md-4 clr-col-sm-6 clr-col-12">
<div class="form-group">
<label>Minute</label>
@@ -28,7 +37,7 @@
</div>
</div>
<div class="clr-col-lg-3 clr-col-md-6 clr-col-sm-6 clr-col-12">
<div class="clr-col-lg-2 clr-col-md-4 clr-col-sm-6 clr-col-12">
<div class="form-group">
<label>Month</label>
<select class="form-control" [(ngModel)]="month" (change)="onFieldChange()">
@@ -37,7 +46,7 @@
</div>
</div>
<div class="clr-col-lg-3 clr-col-md-6 clr-col-sm-12 clr-col-12">
<div class="clr-col-lg-2 clr-col-md-4 clr-col-sm-6 clr-col-12">
<div class="form-group">
<label>Day of Week</label>
<select class="form-control" [(ngModel)]="dayOfWeek" (change)="onFieldChange()">

62
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/cron-job-builder/cron-job-builder.component.ts
View File

@@ -10,7 +10,8 @@ export class CronJobBuilderComponent implements OnInit, OnChanges {
@Input() instanceId: string = ''; // Unique identifier for each instance
@Output() cronExpressionChange = new EventEmitter<string>();
// Cron job fields
// Cron job fields (now starting with seconds)
second: string = '*';
minute: string = '*';
hour: string = '*';
dayOfMonth: string = '*';
@@ -21,6 +22,7 @@ export class CronJobBuilderComponent implements OnInit, OnChanges {
cronDescription: string = '';
// Options for selectors
secondOptions: any[] = [];
minuteOptions: any[] = [];
hourOptions: any[] = [];
dayOfMonthOptions: any[] = [];
@@ -29,9 +31,10 @@ export class CronJobBuilderComponent implements OnInit, OnChanges {
ngOnInit() {
// Initialize options for each instance
this.minuteOptions = this.generateOptions(0, 59);
this.hourOptions = this.generateOptions(0, 23);
this.dayOfMonthOptions = this.generateOptions(1, 31);
this.secondOptions = this.generateOptions(0, 59, 'second');
this.minuteOptions = this.generateOptions(0, 59, 'minute');
this.hourOptions = this.generateOptions(0, 23, 'hour');
this.dayOfMonthOptions = this.generateOptions(1, 31, 'day');
this.monthOptions = [
{ value: '*', label: 'Every month' },
{ value: '1', label: 'January' },
@@ -73,8 +76,8 @@ export class CronJobBuilderComponent implements OnInit, OnChanges {
}
}
generateOptions(start: number, end: number): any[] {
const options = [{ value: '*', label: `Every (${start === 0 ? '0' : start}-${end})` }];
generateOptions(start: number, end: number, type: string): any[] {
const options = [{ value: '*', label: `Every ${type} (${start === 0 ? '0' : start}-${end})` }];
for (let i = start; i <= end; i++) {
options.push({ value: i.toString(), label: i.toString() });
}
@@ -83,7 +86,16 @@ export class CronJobBuilderComponent implements OnInit, OnChanges {
parseCronExpression(expression: string) {
const parts = expression.split(' ');
if (parts.length >= 5) {
if (parts.length >= 6) { // Now expecting 6 parts with seconds
this.second = parts[0];
this.minute = parts[1];
this.hour = parts[2];
this.dayOfMonth = parts[3];
this.month = parts[4];
this.dayOfWeek = parts[5];
} else if (parts.length >= 5) { // For backward compatibility with 5-part cron expressions
// Default seconds to 0 if not provided
this.second = '0';
this.minute = parts[0];
this.hour = parts[1];
this.dayOfMonth = parts[2];
@@ -95,19 +107,33 @@ export class CronJobBuilderComponent implements OnInit, OnChanges {
generateDescription() {
let description = 'Runs ';
// Second description
if (this.second === '*') {
description += 'every second';
} else if (this.second.includes('/')) {
const interval = this.second.split('/')[1];
description += `every ${interval} seconds`;
} else {
description += `at second ${this.second}`;
}
// Minute description
if (this.minute === '*') {
description += 'every minute';
if (this.second === '*') {
description += '';
} else {
description += ' of every minute';
}
} else if (this.minute.includes('/')) {
const interval = this.minute.split('/')[1];
description += `every ${interval} minutes`;
description += ` of every ${interval} minutes`;
} else {
description += `at minute ${this.minute}`;
description += ` at minute ${this.minute}`;
}
// Hour description
if (this.hour === '*') {
if (this.minute === '*') {
if (this.minute === '*' && this.second === '*') {
description += '';
} else {
description += ' past every hour';
@@ -146,21 +172,23 @@ export class CronJobBuilderComponent implements OnInit, OnChanges {
}
// Special case for simple patterns
if (this.minute === '0' && this.hour === '0' && this.dayOfMonth === '1' && this.month === '*' && this.dayOfWeek === '*') {
if (this.second === '0' && this.minute === '0' && this.hour === '0' && this.dayOfMonth === '1' && this.month === '*' && this.dayOfWeek === '*') {
description = 'Runs at midnight on the first day of every month';
} else if (this.minute === '0' && this.hour === '0' && this.dayOfMonth === '*' && this.month === '*' && this.dayOfWeek === '*') {
} else if (this.second === '0' && this.minute === '0' && this.hour === '0' && this.dayOfMonth === '*' && this.month === '*' && this.dayOfWeek === '*') {
description = 'Runs at midnight every day';
} else if (this.minute === '0' && this.hour === '*' && this.dayOfMonth === '*' && this.month === '*' && this.dayOfWeek === '*') {
} else if (this.second === '0' && this.minute === '0' && this.hour === '*' && this.dayOfMonth === '*' && this.month === '*' && this.dayOfWeek === '*') {
description = 'Runs at the top of every hour';
} else if (this.minute === '*' && this.hour === '*' && this.dayOfMonth === '*' && this.month === '*' && this.dayOfWeek === '*') {
description = 'Runs every minute';
} else if (this.second === '0' && this.minute === '*' && this.hour === '*' && this.dayOfMonth === '*' && this.month === '*' && this.dayOfWeek === '*') {
description = 'Runs at the top of every minute';
} else if (this.second === '*' && this.minute === '*' && this.hour === '*' && this.dayOfMonth === '*' && this.month === '*' && this.dayOfWeek === '*') {
description = 'Runs every second';
}
this.cronDescription = description;
}
buildCronExpression() {
const expression = `${this.minute} ${this.hour} ${this.dayOfMonth} ${this.month} ${this.dayOfWeek}`;
const expression = `${this.second} ${this.minute} ${this.hour} ${this.dayOfMonth} ${this.month} ${this.dayOfWeek}`;
this.cronExpressionChange.emit(expression);
this.generateDescription(); // Update description when expression changes
return expression;

47
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/Data_lake/dataLakescheduler.service.ts Normal file
View File

@@ -0,0 +1,47 @@
import { Injectable } from '@angular/core';
import { Observable } from "rxjs";
import { HttpClient } from "@angular/common/http";
import { ApiRequestService } from "src/app/services/api/api-request.service";
@Injectable({
providedIn: 'root'
})
export class DataLakeSchedulerService {
private baseURL = "scheduler";
constructor(
private http: HttpClient,
private apiRequest: ApiRequestService,
) { }
// Get job by lake ID
getJobByLakeId(lakeId: number): Observable<any> {
const _http = `${this.baseURL}/lake/${lakeId}`;
return this.apiRequest.get(_http);
}
// Create a new job
createJob(jobData: any): Observable<any> {
const _http = `${this.baseURL}/create`;
return this.apiRequest.post(_http, jobData);
}
// Pause a job
pauseJob(jobId: number): Observable<any> {
const _http = `${this.baseURL}/pause/${jobId}`;
return this.apiRequest.post(_http, {});
}
// Resume a job
resumeJob(jobId: number): Observable<any> {
const _http = `${this.baseURL}/resume/${jobId}`;
return this.apiRequest.post(_http, {});
}
// Stop a job
stopJob(jobId: number): Observable<any> {
const _http = `${this.baseURL}/stop/${jobId}`;
return this.apiRequest.delete(_http);
}
}

125
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-config/dynamic-chart-loader.service.ts Normal file
View File

@@ -0,0 +1,125 @@
import { Injectable } from '@angular/core';
import { Observable, forkJoin } from 'rxjs';
import { map } from 'rxjs/operators';
import { ApiRequestService } from 'src/app/services/api/api-request.service';
import { ChartType, UiComponent, ComponentProperty, ChartTemplate, DynamicField } from './chart-config-manager.component';
@Injectable({
providedIn: 'root'
})
export class DynamicChartLoaderService {
private chartTypesUrl = 'api/chart-types';
private uiComponentsUrl = 'api/ui-components';
private componentPropertiesUrl = 'api/component-properties';
private chartTemplatesUrl = 'api/chart-templates';
private dynamicFieldsUrl = 'api/dynamic-fields';
constructor(private apiRequest: ApiRequestService) { }
/**
* Load all chart configurations dynamically
* This method fetches all chart types and their associated components, templates, and fields
*/
loadAllChartConfigurations(): Observable<any> {
console.log('Loading all chart configurations dynamically');
// Load all chart types first
return this.apiRequest.get(this.chartTypesUrl).pipe(
map(chartTypes => {
console.log('Loaded chart types:', chartTypes);
return chartTypes;
})
);
}
/**
* Load complete configuration for a specific chart type
* This includes UI components, templates, and dynamic fields
*/
loadChartConfiguration(chartTypeId: number): Observable<{
chartType: ChartType,
uiComponents: UiComponent[],
templates: ChartTemplate[],
dynamicFields: DynamicField[]
}> {
console.log(`Loading complete configuration for chart type ${chartTypeId}`);
// Load all related data in parallel
return forkJoin({
chartType: this.apiRequest.get(`${this.chartTypesUrl}/${chartTypeId}`),
uiComponents: this.apiRequest.get(`${this.uiComponentsUrl}/chart-type/${chartTypeId}`),
templates: this.apiRequest.get(`${this.chartTemplatesUrl}/chart-type/${chartTypeId}`),
dynamicFields: this.apiRequest.get(`${this.dynamicFieldsUrl}/chart-type/${chartTypeId}`)
}).pipe(
map(result => {
console.log(`Loaded complete configuration for chart type ${chartTypeId}:`, result);
return result;
})
);
}
/**
* Load chart template for a specific chart type
* This is used to render the chart UI dynamically
*/
loadChartTemplate(chartTypeId: number): Observable<ChartTemplate[]> {
console.log(`Loading chart templates for chart type ${chartTypeId}`);
return this.apiRequest.get(`${this.chartTemplatesUrl}/chart-type/${chartTypeId}`);
}
/**
* Load UI components for a specific chart type
* These define what configuration fields are needed for the chart
*/
loadUiComponents(chartTypeId: number): Observable<UiComponent[]> {
console.log(`Loading UI components for chart type ${chartTypeId}`);
return this.apiRequest.get(`${this.uiComponentsUrl}/chart-type/${chartTypeId}`);
}
/**
* Load dynamic fields for a specific chart type
* These define additional dynamic fields that can be used in the chart
*/
loadDynamicFields(chartTypeId: number): Observable<DynamicField[]> {
console.log(`Loading dynamic fields for chart type ${chartTypeId}`);
return this.apiRequest.get(`${this.dynamicFieldsUrl}/chart-type/${chartTypeId}`);
}
/**
* Get chart type by name
* This is useful for finding a chart type by its name rather than ID
*/
// getChartTypeByName(name: string): Observable<ChartType | null> {
// console.log(`Finding chart type by name: ${name}`);
// return this.apiRequest.get(`${this.chartTypesUrl}/byname?chartName=${name}`).pipe(
// map((chartTypes: ChartType[]) => {
// console.log('Available chart types:', chartTypes);
// const chartType = chartTypes.find(ct => ct.name === name);
// console.log(`Found chart type for name ${name}:`, chartType);
// return chartType || null;
// })
// );
// }
getChartTypeByName(name: string): Observable<any> {
console.log(`Finding chart type by name: ${name}`);
return this.apiRequest.get(`${this.chartTypesUrl}/byname?chartName=${name}`);
}
/**
* Load all active chart types
* This is used to populate the chart selection in the dashboard editor
*/
loadActiveChartTypes(): Observable<ChartType[]> {
console.log('Loading active chart types');
return this.apiRequest.get(`${this.chartTypesUrl}`).pipe(
map((chartTypes: ChartType[]) => {
const activeChartTypes = chartTypes.filter(ct => ct.isActive);
console.log('Loaded active chart types:', activeChartTypes);
return activeChartTypes;
})
);
}
}

1
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/chart-type-manager/chart-type-fields.component.ts
View File

@@ -127,6 +127,7 @@ export class ChartTypeFieldsComponent implements OnInit {
return;
}
console.log('Updating dynamic field:', this.selectedDynamicField);
this.loadingState = ClrLoadingState.LOADING;
this.dynamicFieldService.updateDynamicField(this.selectedDynamicField.id, this.selectedDynamicField).subscribe({
next: (data) => {

3
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/editnewdash.component.html
View File

@@ -17,6 +17,9 @@
<div style="display: inline; float: right;">
<!-- <button class="btn btn-primary">Build</button>
<button class="btn btn-primary" (click)="onSchedule()">Schedule</button> -->
<button class="btn btn-success" (click)="testDynamicChartCreation()" style="margin-left: 10px;" *ngIf="!fromRunner">
<clr-icon shape="test"></clr-icon> Test Dynamic Chart
</button>
</div>
</div>

538
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/editnewdash.component.ts
View File

@@ -30,6 +30,8 @@ import { CompactFilterComponent } from '../common-filter';
import { FilterService } from '../common-filter/filter.service';
// Add the UnifiedChartComponent import
import { UnifiedChartComponent } from '../gadgets/unified-chart';
// Add the DynamicChartLoaderService import
import { DynamicChartLoaderService } from '../chart-config/dynamic-chart-loader.service';
function isNullArray(arr) {
return !Array.isArray(arr) || arr.length === 0;
@@ -58,6 +60,7 @@ export class EditnewdashComponent implements OnInit {
// Add availableKeys property for compact filter
availableKeys: string[] = [];
// Initialize with default widgets and update dynamically
WidgetsMock: WidgetModel[] = [
{
name: 'Common Filter',
@@ -75,26 +78,26 @@ export class EditnewdashComponent implements OnInit {
name: 'Line Chart',
identifier: 'line_chart'
},
{
name: 'Bar Chart',
identifier: 'bar_chart'
},
{
name: 'Pie Chart',
identifier: 'pie_chart'
},
{
name: 'Polar Area Chart',
identifier: 'polar_area_chart'
},
{
name: 'Bubble Chart',
identifier: 'bubble_chart'
},
{
name: 'Scatter Chart',
identifier: 'scatter_chart'
},
// {
// name: 'Bar Chart',
// identifier: 'bar_chart'
// },
// {
// name: 'Pie Chart',
// identifier: 'pie_chart'
// },
// {
// name: 'Polar Area Chart',
// identifier: 'polar_area_chart'
// },
// {
// name: 'Bubble Chart',
// identifier: 'bubble_chart'
// },
// {
// name: 'Scatter Chart',
// identifier: 'scatter_chart'
// },
{
name: 'Dynamic Chart',
identifier: 'dynamic_chart'
@@ -206,6 +209,9 @@ export class EditnewdashComponent implements OnInit {
// Add drilldown column data property
drilldownColumnData = []; // Add drilldown column data property
// Add chart types property for dynamic chart selection
chartTypes: any[] = [];
constructor(private route: ActivatedRoute,
private router: Router,
private dashboardService: Dashboard3Service,
@@ -214,7 +220,8 @@ export class EditnewdashComponent implements OnInit {
private datastoreService: DatastoreService,
private alertService: AlertsService,
private sureconnectService: SureconnectService,
private filterService: FilterService) { } // Add SureconnectService and FilterService to constructor
private filterService: FilterService,
private dynamicChartLoader: DynamicChartLoaderService) { } // Add SureconnectService, FilterService, and DynamicChartLoaderService to constructor
// Add property to track if coming from dashboard runner
fromRunner: boolean = false;
@@ -299,6 +306,9 @@ export class EditnewdashComponent implements OnInit {
apiUrl: ['']
});
// Load chart types for dynamic chart selection
this.loadChartTypesForSelection();
// Load sureconnect data first, then load dashboard data
this.loadSureconnectData();
@@ -306,6 +316,37 @@ export class EditnewdashComponent implements OnInit {
this.loadCommonFilterData();
}
// Add method to load all chart types for dynamic selection
loadChartTypesForSelection() {
console.log('Loading chart types for selection');
this.dynamicChartLoader.loadActiveChartTypes().subscribe({
next: (chartTypes) => {
console.log('Loaded chart types for selection:', chartTypes);
this.chartTypes = chartTypes;
// Convert each chart type to a WidgetModel
const newWidgets = chartTypes.map(ct => ({
name: ct.displayName || ct.name,
// identifier: ct.name.toLowerCase().replace(/\s+/g, '_')
identifier: `${ct.name.toLowerCase().replace(/\s+/g, '_')}_chart`
}));
// Filter out duplicates by identifier
const existingIds = new Set(this.WidgetsMock.map(w => w.identifier));
const uniqueNewWidgets = newWidgets.filter(w => !existingIds.has(w.identifier));
// Append unique new widgets to WidgetsMock
this.WidgetsMock = [...this.WidgetsMock, ...uniqueNewWidgets];
console.log('Updated WidgetsMock:', this.WidgetsMock);
},
error: (error) => {
console.error('Error loading chart types for selection:', error);
}
});
}
// Add method to load sureconnect data
loadSureconnectData() {
this.sureconnectService.getAll().subscribe((data: any[]) => {
@@ -448,6 +489,7 @@ export class EditnewdashComponent implements OnInit {
'polar': 'Polar Area Chart',
'bubble': 'Bubble Chart',
'scatter': 'Scatter Chart'
// Removed hardcoded heatmap entry to make it fully dynamic
};
// If this is a unified chart, set the name back to the appropriate chart name
@@ -504,9 +546,11 @@ export class EditnewdashComponent implements OnInit {
//this._ds.updateDashboard(this.dashboardId, parsed).subscribe();
}
onDrop(ev) {
onDrop = (ev) => {
console.log("on drop event ", ev);
const componentType = ev.dataTransfer.getData("widgetIdentifier");
// Safely calculate maxChartId, handling cases where chartid might be NaN or missing
console.log("on drop ", componentType);
let maxChartId = 0;
if (this.dashboardArray && this.dashboardArray.length > 0) {
const validChartIds = this.dashboardArray
@@ -520,155 +564,26 @@ export class EditnewdashComponent implements OnInit {
switch (componentType) {
// Handle all chart types by converting them to unified charts
case "radar_chart":
return this.dashboardArray.push({
cols: 5,
rows: 6,
x: 0,
y: 0,
chartid: maxChartId + 1,
component: UnifiedChartComponent,
name: "Radar Chart",
chartType: 'radar',
xAxis: '',
yAxis: '',
table: '',
connection: undefined
});
// Use dynamic chart creation for all chart types
return this.createDynamicChart('radar', maxChartId);
case "line_chart":
return this.dashboardArray.push({
cols: 5,
rows: 7,
x: 0,
y: 0,
chartid: maxChartId + 1,
component: UnifiedChartComponent,
name: "Line Chart",
chartType: 'line',
xAxis: '',
yAxis: '',
table: '',
connection: undefined
});
return this.createDynamicChart('line', maxChartId);
case "doughnut_chart":
return this.dashboardArray.push({
cols: 5,
rows: 6,
x: 0,
y: 0,
chartid: maxChartId + 1,
component: UnifiedChartComponent,
name: "Doughnut Chart",
chartType: 'doughnut',
xAxis: '',
yAxis: '',
table: '',
connection: undefined
});
return this.createDynamicChart('doughnut', maxChartId);
case "bar_chart":
return this.dashboardArray.push({
cols: 5,
rows: 6,
x: 0,
y: 0,
chartid: maxChartId + 1,
component: UnifiedChartComponent,
name: "Bar Chart",
chartType: 'bar',
xAxis: '',
yAxis: '',
table: '',
connection: undefined
});
return this.createDynamicChart('bar', maxChartId);
case "pie_chart":
return this.dashboardArray.push({
cols: 5,
rows: 6,
x: 0,
y: 0,
chartid: maxChartId + 1,
component: UnifiedChartComponent,
name: "Pie Chart",
chartType: 'pie',
xAxis: '',
yAxis: '',
table: '',
connection: undefined
});
return this.createDynamicChart('pie', maxChartId);
case "polar_area_chart":
return this.dashboardArray.push({
cols: 5,
rows: 6,
x: 0,
y: 0,
chartid: maxChartId + 1,
component: UnifiedChartComponent,
name: "Polar Area Chart",
chartType: 'polar',
xAxis: '',
yAxis: '',
table: '',
connection: undefined
});
return this.createDynamicChart('polar', maxChartId);
case "bubble_chart":
return this.dashboardArray.push({
cols: 5,
rows: 6,
x: 0,
y: 0,
chartid: maxChartId + 1,
component: UnifiedChartComponent,
name: "Bubble Chart",
chartType: 'bubble',
xAxis: '',
yAxis: '',
table: '',
connection: undefined
});
return this.createDynamicChart('bubble', maxChartId);
case "scatter_chart":
return this.dashboardArray.push({
cols: 5,
rows: 6,
x: 0,
y: 0,
chartid: maxChartId + 1,
component: UnifiedChartComponent,
name: "Scatter Chart",
chartType: 'scatter',
xAxis: '',
yAxis: '',
table: '',
connection: undefined
});
return this.createDynamicChart('scatter', maxChartId);
case "dynamic_chart":
return this.dashboardArray.push({
cols: 5,
rows: 6,
x: 0,
y: 0,
chartid: maxChartId + 1,
component: UnifiedChartComponent,
name: "Dynamic Chart",
chartType: 'line', // Default to line for dynamic chart
xAxis: '',
yAxis: '',
table: '',
connection: undefined
});
return this.createDynamicChart('line', maxChartId); // Default to line for dynamic chart
case "financial_chart":
return this.dashboardArray.push({
cols: 5,
rows: 6,
x: 0,
y: 0,
chartid: maxChartId + 1,
component: UnifiedChartComponent,
name: "Financial Chart",
chartType: 'line', // Default to line for financial chart
xAxis: '',
yAxis: '',
table: '',
connection: undefined
});
return this.createDynamicChart('line', maxChartId); // Default to line for financial chart
case "to_do_chart":
return this.dashboardArray.push({
cols: 5,
@@ -715,21 +630,16 @@ export class EditnewdashComponent implements OnInit {
name: "Grid View"
});
case "unified_chart":
return this.dashboardArray.push({
cols: 5,
rows: 6,
x: 0,
y: 0,
chartid: maxChartId + 1,
component: UnifiedChartComponent,
name: "Unified Chart",
// Add default configuration for unified chart
chartType: 'bar',
xAxis: '',
yAxis: '',
table: '',
connection: undefined
});
return this.createDynamicChart('bar', maxChartId); // Default to bar for unified chart
default:
// Handle any other chart types dynamically
// Extract chart type name from identifier (e.g., "heatmap_chart" -> "heatmap")
const chartTypeName = componentType.replace('_chart', '');
console.log('Creating dynamic chart of type:', chartTypeName);
console.log('Display name for chart:', this.getChartDisplayName(chartTypeName));
// Use dynamic chart creation for all chart types
return this.createDynamicChart(chartTypeName, maxChartId);
}
}
removeItem(item) {
@@ -1143,14 +1053,10 @@ export class EditnewdashComponent implements OnInit {
}
// For UnifiedChartComponent, pass chart properties with chartType
// Check for specific chart names that use UnifiedChartComponent
const unifiedChartNames = [
'Radar Chart', 'Line Chart', 'Doughnut Chart', 'Bar Chart',
'Pie Chart', 'Polar Area Chart', 'Bubble Chart', 'Scatter Chart',
'Dynamic Chart', 'Financial Chart', 'Unified Chart'
];
if (unifiedChartNames.includes(item.name)) {
// Check if the component is UnifiedChartComponent dynamically
if (item.component === UnifiedChartComponent ||
(item.component && item.component.name === 'UnifiedChartComponent') ||
item.name === 'Unified Chart') {
const unifiedChartInputs = {
chartType: item.chartType || 'bar',
xAxis: item.xAxis,
@@ -2045,4 +1951,266 @@ export class EditnewdashComponent implements OnInit {
}
}
// Add method to apply dynamic template to a chart
applyDynamicTemplate(chartItem: any, template: any) {
console.log('Applying dynamic template to chart:', chartItem, template);
// Apply HTML template
if (template.templateHtml) {
// In a real implementation, you would dynamically render the HTML template
// For now, we'll just log it
console.log('HTML Template:', template.templateHtml);
}
// Apply CSS styles
if (template.templateCss) {
// In a real implementation, you would dynamically apply the CSS styles
// For now, we'll just log it
console.log('CSS Template:', template.templateCss);
}
// Return the chart item with template applied
return {
...chartItem,
template: template
};
}
// Add method to test dynamic chart creation
testDynamicChartCreation() {
console.log('Testing dynamic chart creation');
// Show a success message to the user
alert('Dynamic chart test started. Check the browser console for detailed output.');
// Load all chart types
this.dynamicChartLoader.loadAllChartConfigurations().subscribe({
next: (chartTypes) => {
console.log('Loaded chart types:', chartTypes);
// Find bar chart type
const barChartType = chartTypes.find((ct: any) => ct.name === 'bar');
if (barChartType) {
console.log('Found bar chart type:', barChartType);
// Load configuration for bar chart
this.dynamicChartLoader.loadChartConfiguration(barChartType.id).subscribe({
next: (config) => {
console.log('Loaded bar chart configuration:', config);
// Create a test chart item
const chartItem = {
cols: 5,
rows: 6,
x: 0,
y: 0,
chartid: 100,
component: UnifiedChartComponent,
name: 'Test Dynamic Bar Chart',
chartType: 'bar',
xAxis: '',
yAxis: '',
table: '',
connection: undefined,
// Add dynamic fields from configuration
dynamicFields: config.dynamicFields || []
};
console.log('Created test chart item:', chartItem);
// If we have templates, apply the default one
if (config.templates && config.templates.length > 0) {
const defaultTemplate = config.templates.find((t: any) => t.isDefault) || config.templates[0];
if (defaultTemplate) {
console.log('Applying default template:', defaultTemplate);
const chartWithTemplate = this.applyDynamicTemplate(chartItem, defaultTemplate);
console.log('Chart with template:', chartWithTemplate);
// Show success message
alert('Dynamic chart test completed successfully! Check console for details.');
}
} else {
// Show success message even without templates
alert('Dynamic chart test completed successfully! No templates found. Check console for details.');
}
},
error: (error) => {
console.error('Error loading bar chart configuration:', error);
alert('Error loading bar chart configuration. Check console for details.');
}
});
} else {
console.warn('Bar chart type not found');
alert('Bar chart type not found in the database.');
}
},
error: (error) => {
console.error('Error loading chart types:', error);
alert('Error loading chart types. Check console for details.');
}
});
}
// Add method to load dynamic chart configuration
loadDynamicChartConfiguration(chartTypeId: number) {
console.log(`Loading dynamic chart configuration for chart type ${chartTypeId}`);
this.dynamicChartLoader.loadChartConfiguration(chartTypeId).subscribe({
next: (config) => {
console.log('Loaded dynamic chart configuration:', config);
// Here you would apply the configuration to the UI
// For example, populate form fields, set up templates, etc.
},
error: (error) => {
console.error('Error loading dynamic chart configuration:', error);
}
});
}
// Add method to create a dynamic chart with configuration from database
createDynamicChart = (chartTypeName: string, maxChartId: number) => {
console.log(`Creating dynamic chart of type: ${chartTypeName}`);
// First, get the chart type by name
this.dynamicChartLoader.getChartTypeByName(chartTypeName).subscribe({
next: (chartType) => {
if (chartType) {
console.log(`Found chart type:`, chartType);
// Load the complete configuration for this chart type
this.dynamicChartLoader.loadChartConfiguration(chartType.id).subscribe({
next: (config) => {
console.log(`Loaded configuration for ${chartTypeName}:`, config);
// Create the chart item with dynamic configuration
const chartItem = {
cols: 5,
rows: 6,
x: 0,
y: 0,
chartid: maxChartId + 1,
component: UnifiedChartComponent,
name: chartType.displayName || chartTypeName,
chartType: chartType.name,
xAxis: '',
yAxis: '',
table: '',
connection: undefined,
// Add any dynamic fields from the configuration
dynamicFields: config.dynamicFields || []
};
// Add UI components as configuration properties
if (config.uiComponents && config.uiComponents.length > 0) {
config.uiComponents.forEach(component => {
chartItem[component.componentName] = '';
});
}
this.dashboardArray.push(chartItem);
console.log(`Created dynamic chart:`, chartItem);
},
error: (error) => {
console.error(`Error loading configuration for ${chartTypeName}:`, error);
// Fallback to default configuration
this.createDefaultChart(chartTypeName, this.getChartDisplayName(chartTypeName));
}
});
} else {
console.warn(`Chart type ${chartTypeName} not found, using default configuration`);
this.createDefaultChart(chartTypeName, this.getChartDisplayName(chartTypeName));
}
},
error: (error) => {
console.error('Error loading configuration for chart type:', error);
// Fallback to default configuration
this.createDefaultChart(chartTypeName, this.getChartDisplayName(chartTypeName));
}
});
}
// Fallback method to create default chart configuration
createDefaultChart = (chartTypeName: string, chartDisplayName: string) => {
console.log(`Creating default chart for ${chartTypeName}`);
// Map chart type names to chart types - making it fully dynamic
const chartTypeMap = {
'bar': 'bar',
'line': 'line',
'pie': 'pie',
'doughnut': 'doughnut',
'radar': 'radar',
'polar': 'polar',
'bubble': 'bubble',
'scatter': 'scatter'
// Removed hardcoded heatmap entry to make it fully dynamic
};
// Get the chart type from the name - default to bubble for unknown chart types
const chartType = chartTypeMap[chartTypeName.toLowerCase()] || 'bubble';
// Safely calculate maxChartId, handling cases where chartid might be NaN or missing
let maxChartId = 0;
if (this.dashboardArray && this.dashboardArray.length > 0) {
const validChartIds = this.dashboardArray
.map(item => item.chartid)
.filter(chartid => typeof chartid === 'number' && !isNaN(chartid));
if (validChartIds.length > 0) {
maxChartId = Math.max(...validChartIds);
}
}
const chartItem = {
cols: 5,
rows: 6,
x: 0,
y: 0,
chartid: maxChartId + 1,
component: UnifiedChartComponent,
name: chartDisplayName,
chartType: chartType,
xAxis: '',
yAxis: '',
table: '',
connection: undefined
};
this.dashboardArray.push(chartItem);
console.log('Created default chart:', chartItem);
// Update the dashboard collection
this.dashboardCollection.dashboard = this.dashboardArray.slice();
// Force gridster to refresh
if (this.options && this.options.api) {
this.options.api.optionsChanged();
}
}
// Helper method to get display name for chart type - making it fully dynamic
getChartDisplayName = (chartTypeName: string): string => {
const displayNameMap = {
'bar': 'Bar Chart',
'line': 'Line Chart',
'pie': 'Pie Chart',
'doughnut': 'Doughnut Chart',
'radar': 'Radar Chart',
'polar': 'Polar Area Chart',
'bubble': 'Bubble Chart',
'scatter': 'Scatter Chart'
// Removed hardcoded heatmap entry to make it fully dynamic
};
// For unknown chart types, create a display name by capitalizing the first letter and adding ' Chart'
const displayName = displayNameMap[chartTypeName.toLowerCase()];
if (displayName) {
return displayName;
} else {
// Capitalize first letter and add ' Chart'
return chartTypeName.charAt(0).toUpperCase() + chartTypeName.slice(1) + ' Chart';
}
}
}

99
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/unified-chart/unified-chart.component.html
View File

@@ -26,110 +26,21 @@
<!-- Render different chart types based on chartType input -->
<div class="chart-wrapper">
<!-- Bar Chart -->
<div *ngIf="chartType === 'bar'" class="chart-canvas-container">
<!-- Dynamic Chart Container - uses extracted dynamic options and styles but static template -->
<div *ngIf="dynamicTemplate || chartType" class="chart-canvas-container">
<canvas baseChart
[datasets]="chartData"
[labels]="chartLabels"
[options]="chartOptions"
[legend]="chartLegend"
[chartType]="'bar'"
[chartType]="chartType || 'bar'"
(chartClick)="chartClicked($event)"
(chartHover)="chartHovered($event)">
</canvas>
</div>
<!-- Line Chart -->
<div *ngIf="chartType === 'line'" class="chart-canvas-container">
<canvas baseChart
[datasets]="chartData"
[labels]="chartLabels"
[options]="chartOptions"
[legend]="chartLegend"
[chartType]="'line'"
(chartClick)="chartClicked($event)"
(chartHover)="chartHovered($event)">
</canvas>
</div>
<!-- Pie Chart -->
<div *ngIf="chartType === 'pie'" class="chart-canvas-container">
<canvas baseChart
[datasets]="chartData"
[labels]="chartLabels"
[options]="chartOptions"
[legend]="chartLegend"
[chartType]="'pie'"
(chartClick)="chartClicked($event)"
(chartHover)="chartHovered($event)">
</canvas>
</div>
<!-- Doughnut Chart -->
<div *ngIf="chartType === 'doughnut'" class="chart-canvas-container">
<canvas baseChart
[datasets]="chartData"
[labels]="chartLabels"
[options]="chartOptions"
[legend]="chartLegend"
[chartType]="'doughnut'"
(chartClick)="chartClicked($event)"
(chartHover)="chartHovered($event)">
</canvas>
</div>
<!-- Bubble Chart -->
<div *ngIf="chartType === 'bubble'" class="chart-canvas-container">
<canvas baseChart
[datasets]="bubbleChartData"
[options]="chartOptions"
[legend]="chartLegend"
[chartType]="'bubble'"
(chartClick)="chartClicked($event)"
(chartHover)="chartHovered($event)">
</canvas>
</div>
<!-- Radar Chart -->
<div *ngIf="chartType === 'radar'" class="chart-canvas-container">
<canvas baseChart
[datasets]="chartData"
[labels]="chartLabels"
[options]="chartOptions"
[legend]="chartLegend"
[chartType]="'radar'"
(chartClick)="chartClicked($event)"
(chartHover)="chartHovered($event)">
</canvas>
</div>
<!-- Polar Area Chart -->
<div *ngIf="chartType === 'polar'" class="chart-canvas-container">
<canvas baseChart
[datasets]="chartData"
[labels]="chartLabels"
[options]="chartOptions"
[legend]="chartLegend"
[chartType]="'polarArea'"
(chartClick)="chartClicked($event)"
(chartHover)="chartHovered($event)">
</canvas>
</div>
<!-- Scatter Chart -->
<div *ngIf="chartType === 'scatter'" class="chart-canvas-container">
<canvas baseChart
[datasets]="chartData"
[options]="chartOptions"
[legend]="chartLegend"
[chartType]="'scatter'"
(chartClick)="chartClicked($event)"
(chartHover)="chartHovered($event)">
</canvas>
</div>
<!-- Default/Unknown Chart Type -->
<div *ngIf="!['bar', 'line', 'pie', 'doughnut', 'bubble', 'radar', 'polar', 'scatter'].includes(chartType)" class="chart-canvas-container">
<!-- Fallback for when no chart type is specified -->
<div *ngIf="!dynamicTemplate && !chartType" class="chart-canvas-container">
<canvas baseChart
[datasets]="chartData"
[labels]="chartLabels"

372
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/unified-chart/unified-chart.component.ts
View File

@@ -1,9 +1,10 @@
import { Component, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, ViewChild } from '@angular/core';
import { Component, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, ViewChild, ElementRef, Renderer2 } from '@angular/core';
import { Dashboard3Service } from '../../../../../../services/builder/dashboard3.service';
import { FilterService } from '../../common-filter/filter.service';
import { Subscription } from 'rxjs';
import { BaseChartDirective } from 'ng2-charts';
import { ChartConfiguration, ChartDataset } from 'chart.js';
import { DynamicChartLoaderService } from '../../chart-config/dynamic-chart-loader.service';
@Component({
selector: 'app-unified-chart',
@@ -75,9 +76,151 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
private documentClickHandler: ((event: MouseEvent) => void) | null = null;
private filtersInitialized: boolean = false;
// Dynamic template properties
dynamicTemplate: string = '';
dynamicStyles: string = '';
dynamicOptions: any = null;
// Properties to hold extracted values from dynamic template
extractedChartType: string = '';
extractedDatasetsBinding: string = '';
extractedLabelsBinding: string = '';
extractedOptionsBinding: string = '';
extractedLegendBinding: string = '';
extractedChartClickBinding: string = '';
extractedChartHoverBinding: string = '';
// Add setter to log when dynamicTemplate changes
setDynamicTemplate(value: string) {
console.log('Setting dynamic template:', value);
this.dynamicTemplate = value;
// Extract values from the dynamic template
this.extractTemplateValues(value);
// Apply dynamic options if they were extracted
if (this.dynamicOptions) {
this.mergeDynamicOptions();
}
// Apply dynamic styles if they were extracted
if (this.dynamicStyles) {
this.applyDynamicStyles();
}
// Trigger change detection to ensure the template is rendered
setTimeout(() => {
console.log('Dynamic template updated in DOM');
// Check if the dynamic template container exists
const dynamicContainer = this.el.nativeElement.querySelector('.dynamic-template-container');
console.log('Dynamic template container:', dynamicContainer);
if (dynamicContainer) {
console.log('Dynamic container innerHTML:', dynamicContainer.innerHTML);
}
// Check if the canvas element exists in the DOM
const canvasElements = this.el.nativeElement.querySelectorAll('canvas');
console.log('Canvas elements found in DOM:', canvasElements.length);
if (canvasElements.length > 0) {
console.log('First canvas element:', canvasElements[0]);
// Check if it has the baseChart directive processed
const firstCanvas = canvasElements[0];
console.log('Canvas has baseChart directive processed:', firstCanvas.classList.contains('chartjs-render-monitor'));
} else {
console.log('No canvas elements found - checking if template was inserted but not processed');
// Check if there's HTML content in the dynamic container
if (dynamicContainer) {
const htmlContent = dynamicContainer.innerHTML;
console.log('HTML content in dynamic container:', htmlContent);
if (htmlContent && htmlContent.includes('canvas')) {
console.log('Canvas tag found in HTML but not processed by Angular');
}
}
}
}, 100);
}
// Extract values from dynamic template HTML
private extractTemplateValues(template: string): void {
console.log('Extracting values from template:', template);
// Reset extracted values
this.extractedChartType = this.chartType || '';
this.extractedDatasetsBinding = 'chartData';
this.extractedLabelsBinding = 'chartLabels';
this.extractedOptionsBinding = 'chartOptions';
this.extractedLegendBinding = 'chartLegend';
this.extractedChartClickBinding = 'chartClicked($event)';
this.extractedChartHoverBinding = 'chartHovered($event)';
if (!template) {
console.log('No template to extract values from');
return;
}
// Parse the template to extract bindings
// Look for [chartType] binding
const chartTypeMatch = template.match(/\[chartType\]="([^"]+)"/);
if (chartTypeMatch && chartTypeMatch[1]) {
this.extractedChartType = chartTypeMatch[1];
console.log('Extracted chartType binding:', this.extractedChartType);
}
// Look for [datasets] binding
const datasetsMatch = template.match(/\[datasets\]="([^"]+)"/);
if (datasetsMatch && datasetsMatch[1]) {
this.extractedDatasetsBinding = datasetsMatch[1];
console.log('Extracted datasets binding:', this.extractedDatasetsBinding);
}
// Look for [labels] binding
const labelsMatch = template.match(/\[labels\]="([^"]+)"/);
if (labelsMatch && labelsMatch[1]) {
this.extractedLabelsBinding = labelsMatch[1];
console.log('Extracted labels binding:', this.extractedLabelsBinding);
}
// Look for [options] binding
const optionsMatch = template.match(/\[options\]="([^"]+)"/);
if (optionsMatch && optionsMatch[1]) {
this.extractedOptionsBinding = optionsMatch[1];
console.log('Extracted options binding:', this.extractedOptionsBinding);
}
// Look for [legend] binding
const legendMatch = template.match(/\[legend\]="([^"]+)"/);
if (legendMatch && legendMatch[1]) {
this.extractedLegendBinding = legendMatch[1];
console.log('Extracted legend binding:', this.extractedLegendBinding);
}
// Look for (chartClick) binding
const chartClickMatch = template.match(/\(chartClick\)="([^"]+)"/);
if (chartClickMatch && chartClickMatch[1]) {
this.extractedChartClickBinding = chartClickMatch[1];
console.log('Extracted chartClick binding:', this.extractedChartClickBinding);
}
// Look for (chartHover) binding
const chartHoverMatch = template.match(/\(chartHover\)="([^"]+)"/);
if (chartHoverMatch && chartHoverMatch[1]) {
this.extractedChartHoverBinding = chartHoverMatch[1];
console.log('Extracted chartHover binding:', this.extractedChartHoverBinding);
}
// Extract CSS styles if present in the template
const styleMatch = template.match(/<style[^>]*>([\s\S]*?)<\/style>/i);
if (styleMatch && styleMatch[1]) {
this.dynamicStyles = styleMatch[1];
console.log('Extracted CSS styles:', this.dynamicStyles);
}
}
constructor(
private dashboardService: Dashboard3Service,
private filterService: FilterService
private filterService: FilterService,
private dynamicChartLoader: DynamicChartLoaderService,
private renderer: Renderer2,
private el: ElementRef
) { }
ngOnInit(): void {
@@ -110,12 +253,21 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
// Initialize chart options with default structure
this.initializeChartOptions();
// Load dynamic template and options for this chart type
this.loadDynamicChartConfig();
this.fetchChartData();
}
ngOnChanges(changes: SimpleChanges): void {
console.log('UnifiedChartComponent input changes:', changes);
// Log chartType changes specifically
if (changes.chartType) {
console.log('Chart type changed from', changes.chartType.previousValue, 'to', changes.chartType.currentValue);
}
// Log all input values for debugging
console.log('Current input values:', {
chartType: this.chartType,
@@ -179,10 +331,15 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
});
}
// Load dynamic template and options if chart type changed
if (chartTypeChanged) {
this.loadDynamicChartConfig();
}
// Only fetch data if the actual chart configuration changed and we're not already fetching
if (!this.isFetchingData && (chartTypeChanged || xAxisChanged || yAxisChanged || tableChanged || connectionChanged || baseFiltersChanged || drilldownFiltersChanged ||
drilldownEnabledChanged || drilldownApiUrlChanged || drilldownXAxisChanged || drilldownYAxisChanged ||
drilldownLayersChanged)) {
drilldownEnabledChanged || drilldownApiUrlChanged || drilldownXAxisChanged || drilldownYAxisChanged ||
drilldownLayersChanged)) {
console.log('Chart configuration changed, fetching new data');
this.initializeChartOptions();
this.fetchChartData();
@@ -217,6 +374,175 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
}
}
// Load dynamic chart configuration (template, styles, and options) for the current chart type
private loadDynamicChartConfig(): void {
if (!this.chartType) {
console.log('No chart type specified, skipping dynamic chart config loading');
return;
}
console.log(`Loading dynamic chart configuration for chart type: ${this.chartType}`);
console.log('Current dynamic template:', this.dynamicTemplate);
// Get chart type by name and load its configuration
console.log('Calling getChartTypeByName with:', this.chartType);
this.dynamicChartLoader.getChartTypeByName(this.chartType).subscribe({
next: (chartType) => {
console.log('Received chart type by name :', chartType);
if (chartType) {
console.log('Found chart type:', chartType);
// Load the complete configuration for this chart type
console.log('Loading chart configuration for chart type ID:', chartType.id);
this.dynamicChartLoader.loadChartConfiguration(chartType.id).subscribe({
next: (config) => {
console.log('Received chart configuration:', config);
console.log('Loaded chart configuration:', config);
// Apply the first template if available (for CSS styles)
if (config.templates && config.templates.length > 0) {
const defaultTemplate = config.templates.find(t => t.isDefault) || config.templates[0];
if (defaultTemplate) {
const templateHtml = defaultTemplate.templateHtml || '';
console.log('Template HTML to be set:', templateHtml);
this.setDynamicTemplate(templateHtml);
this.dynamicStyles = defaultTemplate.templateCss || '';
// Apply styles to the component
this.applyDynamicStyles();
console.log('Applied dynamic template and styles', {
template: this.dynamicTemplate,
styles: this.dynamicStyles
});
}
} else {
console.log('No templates found for chart type:', this.chartType);
}
// Apply dynamic options if available
console.log('Checking for dynamic fields:', config.dynamicFields);
if (config.dynamicFields && config.dynamicFields.length > 0) {
// Find the field that contains chart options
const optionsField = config.dynamicFields.find(field =>
field.fieldName === 'chartOptions' || field.fieldName.toLowerCase().includes('options'));
if (!optionsField) {
console.log('No chartOptions field found in dynamic fields');
}
if (optionsField && optionsField.fieldOptions) {
try {
this.dynamicOptions = JSON.parse(optionsField.fieldOptions);
console.log('Applied dynamic chart options:', this.dynamicOptions);
// Merge dynamic options with current chart options
this.mergeDynamicOptions();
} catch (e) {
console.error('Error parsing dynamic chart options:', e);
}
}
} else {
console.log('No dynamic fields found for chart type:', this.chartType);
}
},
error: (error) => {
console.error('Error loading chart configuration:', error);
}
});
} else {
console.log(`Chart type ${this.chartType} not found in database`);
// Log available chart types for debugging
console.log('Available chart types in database:');
this.dynamicChartLoader.loadAllChartConfigurations().subscribe({
next: (chartTypes) => {
console.log('All chart types:', chartTypes);
},
error: (error) => {
console.error('Error loading chart types:', error);
}
});
}
},
error: (error) => {
console.error('Error loading chart type:', error);
}
});
}
// Merge dynamic options with current chart options
private mergeDynamicOptions(): void {
if (this.dynamicOptions) {
console.log('Merging dynamic options with existing chart options:', {
existing: this.chartOptions,
dynamic: this.dynamicOptions
});
// Deep merge dynamic options with existing chart options
this.chartOptions = this.deepMerge(this.chartOptions, this.dynamicOptions);
console.log('Merged chart options:', this.chartOptions);
// If we have a chart instance, update it
if (this.chart) {
this.chart.options = this.chartOptions;
this.chart.render();
}
}
}
// Helper method for deep merging objects
private deepMerge(target: any, source: any): any {
const result = { ...target };
for (const key in source) {
if (source.hasOwnProperty(key)) {
if (typeof source[key] === 'object' && source[key] !== null && !Array.isArray(source[key])) {
// Recursively merge objects
result[key] = this.deepMerge(result[key] || {}, source[key]);
} else {
// Override with source value
result[key] = source[key];
}
}
}
return result;
}
// Apply dynamic styles to the component
private applyDynamicStyles(): void {
// Remove any previously applied dynamic styles
const existingStyles = this.el.nativeElement.querySelectorAll('.dynamic-chart-styles');
existingStyles.forEach((style: HTMLElement) => {
style.remove();
});
// Apply new styles if available
if (this.dynamicStyles) {
const styleElement = this.renderer.createElement('style');
this.renderer.setAttribute(styleElement, 'class', 'dynamic-chart-styles');
this.renderer.setProperty(styleElement, 'textContent', this.dynamicStyles);
this.renderer.appendChild(this.el.nativeElement, styleElement);
console.log('Applied dynamic styles to component');
}
}
// Initialize chart after dynamic template is rendered
private initializeDynamicChart(): void {
// This is a complex issue - Angular directives in dynamically inserted HTML
// don't get processed automatically. We would need to use a different approach
// such as creating components dynamically or using a different template mechanism.
console.log('Initializing dynamic chart - this is where we would handle chart initialization');
// NOTE: The baseChart directive in dynamically inserted HTML via [innerHTML]
// will not be processed by Angular. This is a limitation of Angular's change detection.
// Possible solutions:
// 1. Use Angular's dynamic component creation API
// 2. Modify the approach to use a different template mechanism
// 3. Keep the canvas element in the static template and only load options dynamically
}
// Check if filters are available
hasFilters(): boolean {
const hasBaseFilters = this.baseFilters && this.baseFilters.length > 0;
@@ -349,6 +675,12 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
}
};
// If we have dynamic options, use them instead of the default ones
if (this.dynamicOptions) {
this.mergeDynamicOptions();
return;
}
switch (this.chartType) {
case 'bar':
this.initializeBarChartOptions();
@@ -591,7 +923,7 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
mode: 'point',
intersect: false,
callbacks: {
label: function(context: any) {
label: function (context: any) {
const point: any = context.raw;
if (point && point.hasOwnProperty('y') && point.hasOwnProperty('r')) {
const yValue = parseFloat(point.y);
@@ -1094,8 +1426,8 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
// If we have the expected bubble data format, return it as is
if (data && data.length > 0 && data[0].data && data[0].data.length > 0 &&
typeof data[0].data[0] === 'object' && data[0].data[0].hasOwnProperty('x') &&
data[0].data[0].hasOwnProperty('y') && data[0].data[0].hasOwnProperty('r')) {
typeof data[0].data[0] === 'object' && data[0].data[0].hasOwnProperty('x') &&
data[0].data[0].hasOwnProperty('y') && data[0].data[0].hasOwnProperty('r')) {
console.log('Data is already in bubble format, returning as is');
return data;
}
@@ -1277,17 +1609,17 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
const hue2rgb = (p: number, q: number, t: number) => {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1/6) return p + (q - p) * 6 * t;
if (t < 1/2) return q;
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
if (t < 1 / 6) return p + (q - p) * 6 * t;
if (t < 1 / 2) return q;
if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
return p;
};
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
const p = 2 * l - q;
r = hue2rgb(p, q, h + 1/3);
r = hue2rgb(p, q, h + 1 / 3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1/3);
b = hue2rgb(p, q, h - 1 / 3);
}
return {
@@ -1412,9 +1744,9 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
if (layerIndex < this.drilldownLayers.length) {
drilldownConfig = this.drilldownLayers[layerIndex];
hasDrilldownConfig = drilldownConfig.enabled &&
!!drilldownConfig.apiUrl &&
!!drilldownConfig.xAxis &&
!!drilldownConfig.yAxis;
!!drilldownConfig.apiUrl &&
!!drilldownConfig.xAxis &&
!!drilldownConfig.yAxis;
}
}
@@ -1512,8 +1844,8 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
// Check if there are active filters
hasActiveFilters(): boolean {
return (this.baseFilters && this.baseFilters.length > 0) ||
(this.drilldownFilters && this.drilldownFilters.length > 0) ||
this.hasActiveLayerFilters();
(this.drilldownFilters && this.drilldownFilters.length > 0) ||
this.hasActiveLayerFilters();
}
// Check if there are active layer filters for current drilldown level
@@ -1521,8 +1853,8 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
return layerIndex < this.drilldownLayers.length &&
this.drilldownLayers[layerIndex].filters &&
this.drilldownLayers[layerIndex].filters.length > 0;
this.drilldownLayers[layerIndex].filters &&
this.drilldownLayers[layerIndex].filters.length > 0;
}
return false;
}
@@ -1532,7 +1864,7 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
if (layerIndex < this.drilldownLayers.length &&
this.drilldownLayers[layerIndex].filters) {
this.drilldownLayers[layerIndex].filters) {
return this.drilldownLayers[layerIndex].filters;
}
}

219
frontend/angular-clarity-master/src/app/modules/main/main-routing.module.ts
View File

@@ -1,25 +1,3 @@
import { Ad10Component } from './BuilderComponents/angulardatatype/Ad10/Ad10.component';
import { DefatestComponent } from './BuilderComponents/defu/Defatest/Defatest.component';
import { ChildformComponent } from './BuilderComponents/stpkg/Childform/Childform.component';
import { DistrictComponent } from './BuilderComponents/testdata/District/District.component';
import { StateComponent } from './BuilderComponents/testdata/State/State.component';
import { CountryComponent } from './BuilderComponents/testdata/Country/Country.component';
import { Ad9Component } from './BuilderComponents/angulardatatype/Ad9/Ad9.component';
import { Ad8Component } from './BuilderComponents/angulardatatype/Ad8/Ad8.component';
import { Ad7Component } from './BuilderComponents/angulardatatype/Ad7/Ad7.component';
import { Ad6Component } from './BuilderComponents/angulardatatype/Ad6/Ad6.component';
import { Adv5Component } from './BuilderComponents/angulardatatype/Adv5/Adv5.component';
import { Adv4Component } from './BuilderComponents/angulardatatype/Adv4/Adv4.component';
import { SupportComponent } from './BuilderComponents/angulardatatype/Support/Support.component';
import { Adv3Component } from './BuilderComponents/angulardatatype/Adv3/Adv3.component';
import { Dv2Component } from './BuilderComponents/angulardatatype/Dv2/Dv2.component';
import { Adv1Component } from './BuilderComponents/angulardatatype/Adv1/Adv1.component';
import { Basicp3Component } from './BuilderComponents/angulardatatype/Basicp3/Basicp3.component';
import { Basicp2Component } from './BuilderComponents/angulardatatype/Basicp2/Basicp2.component';
import { Basicp1Component } from './BuilderComponents/angulardatatype/Basicp1/Basicp1.component';
import { SequencegenaratorComponent } from './fnd/sequencegenarator/sequencegenarator.component';
@@ -60,10 +38,7 @@ import { AccesstypeComponent } from './admin/accesstype/accesstype.component';
import { ModulesComponent } from './admin/modules/modules.component';
import { SessionloggerComponent } from './admin/sessionlogger/sessionlogger.component';
import { ReportRunnerComponent } from './builder/report-runner/report-runner.component';
import { ReportrunnerallComponent } from './builder/report-runner/reportrunnerall/reportrunnerall.component';
import { Reportrunneredit2Component } from './builder/report-runner/reportrunneredit2/reportrunneredit2.component';
import { ReportrunnereditComponent } from './builder/report-runner/reportrunneredit/reportrunneredit.component';
import { ReportBuildComponent } from './builder/report-build/report-build.component';
import { ReportbuildallComponent } from './builder/report-build/reportbuildall/reportbuildall.component';
import { ReportbuildaddComponent } from './builder/report-build/reportbuildadd/reportbuildadd.component';
@@ -109,13 +84,6 @@ import { AllapiregisteryComponent } from './fnd/apiregistery/allapiregistery/all
import { AddapiregisteryComponent } from './fnd/apiregistery/addapiregistery/addapiregistery.component';
import { EditapiregisteryComponent } from './fnd/apiregistery/editapiregistery/editapiregistery.component';
import { ApiregisterylineComponent } from './fnd/apiregistery/Apiregisteryline/Apiregisteryline.component';
import { Customer_informationComponent } from './BuilderComponents/angulardatatype/Customer_information/Customer_information.component';
import { Deployment_typeComponent } from './BuilderComponents/angulardatatype/Deployment_type/Deployment_type.component';
import { ManufacturerComponent } from './BuilderComponents/angulardatatype/Manufacturer/Manufacturer.component';
import { Order_summaryComponent } from './BuilderComponents/angulardatatype/Order_summary/Order_summary.component';
import { ProductComponent } from './BuilderComponents/angulardatatype/Product/Product.component';
import { TypesComponent } from './BuilderComponents/angulardatatype/Types/Types.component';
import { Test2Component } from './BuilderComponents/testdata/Test2/Test2.component';
import { Token_registeryComponent } from './fnd/Token_registery/Token_registery.component';
import { MyworkspaceComponent } from './admin/myworkspace/myworkspace.component';
import { ThemeCustomizationComponent } from './theme-customization/theme-customization.component';
@@ -127,10 +95,14 @@ import { QueryComponent } from './superadmin/query/query.component';
import { QueryaddComponent } from './superadmin/queryadd/queryadd.component';
import { QueryeditComponent } from './superadmin/queryedit/queryedit.component';
import { ChartTypePageComponent } from './builder/dashboardnew/chart-type-manager/chart-type-page.component';
import { AddChartTypeComponent } from './builder/dashboardnew/chart-type-manager/add-chart-type.component';
import { EditChartTypeComponent } from './builder/dashboardnew/chart-type-manager/edit-chart-type.component';
import { ChartTypeUiComponentsComponent } from './builder/dashboardnew/chart-type-manager/chart-type-ui-components.component';
import { ChartTypeTemplatesComponent } from './builder/dashboardnew/chart-type-manager/chart-type-templates.component';
import { ChartTypeFieldsComponent } from './builder/dashboardnew/chart-type-manager/chart-type-fields.component';
import { ReportRunnerComponent } from './builder/report-runner/report-runner.component';
import { ReportrunnereditComponent } from './builder/report-runner/reportrunneredit/reportrunneredit.component';
import { Reportrunneredit2Component } from './builder/report-runner/reportrunneredit2/reportrunneredit2.component';
const routes: Routes = [
//Important: The sequence of path is important as the router go over then in sequential manner
{ path: '', redirectTo: '/cns-portal/dashboard', pathMatch: 'full' },
@@ -224,6 +196,11 @@ const routes: Routes = [
{ path: 'editdashn/:id', component: EditnewdashComponent },
{ path: 'schedule/:id', component: ScheduleComponent },
{ path: 'chart-types', component: ChartTypePageComponent },
{ path: 'chart-types/add', component: AddChartTypeComponent },
{ path: 'chart-types/edit/:id', component: EditChartTypeComponent },
{ path: 'chart-types/:id/ui-components', component: ChartTypeUiComponentsComponent },
{ path: 'chart-types/:id/templates', component: ChartTypeTemplatesComponent },
{ path: 'chart-types/:id/fields', component: ChartTypeFieldsComponent },
]
},
@@ -331,178 +308,8 @@ const routes: Routes = [
{ path: 'Country', component: CountryComponent },
{ path: 'Adv3', component: Adv3Component },
{ path: 'Ad10', component: Ad10Component },
{ path: 'Childform', component: ChildformComponent },
{ path: 'District', component: DistrictComponent },
{ path: 'State', component: StateComponent },
{ path: 'Country', component: CountryComponent },
{ path: 'Ad9', component: Ad9Component },
{ path: 'Ad8', component: Ad8Component },
{ path: 'Ad7', component: Ad7Component },
{ path: 'Ad6', component: Ad6Component },
{ path: 'Adv5', component: Adv5Component },
{ path: 'Support', component: SupportComponent },
{ path: 'Adv3', component: Adv3Component },
{ path: 'tokenregistery', component: Token_registeryComponent },
{ path: 'Defatest', component: DefatestComponent },
{ path: 'Country', component: CountryComponent },
{ path: 'Defatest', component: DefatestComponent },
{ path: 'Test2', component: Test2Component },
{ path: 'Country', component: CountryComponent },
{ path: 'Test2', component: Test2Component },
{ path: 'Childform', component: ChildformComponent },
{ path: 'District', component: DistrictComponent },
{ path: 'State', component: StateComponent },
{ path: 'Country', component: CountryComponent },
{ path: 'Ad9', component: Ad9Component },
{ path: 'Ad8', component: Ad8Component },
{ path: 'Ad7', component: Ad7Component },
{ path: 'Ad6', component: Ad6Component },
{ path: 'Adv5', component: Adv5Component },
{ path: 'Adv4', component: Adv4Component },
{ path: 'Support', component: SupportComponent },
{ path: 'Adv3', component: Adv3Component },
{ path: 'Dv2', component: Dv2Component },
{ path: 'Adv1', component: Adv1Component },
{ path: 'Basicp3', component: Basicp3Component },
{ path: 'Basicp2', component: Basicp2Component },
{ path: 'Basicp1', component: Basicp1Component },
{ path: 'cust', component: Customer_informationComponent },
{ path: 'Order_summary', component: Order_summaryComponent },
{ path: 'Types', component: TypesComponent },
{ path: 'Product', component: ProductComponent },
{ path: 'Manufacturer', component: ManufacturerComponent },
{ path: 'Deployment_type', component: Deployment_typeComponent },
{ path: 'Stepper_workflow', component: Stepper_workflowComponent },

113
frontend/angular-clarity-master/src/app/modules/main/main.module.ts
View File

@@ -1,25 +1,3 @@
import { Ad10Component } from './BuilderComponents/angulardatatype/Ad10/Ad10.component';
import { DefatestComponent } from './BuilderComponents/defu/Defatest/Defatest.component';
import { ChildformComponent } from './BuilderComponents/stpkg/Childform/Childform.component';
import { DistrictComponent } from './BuilderComponents/testdata/District/District.component';
import { StateComponent } from './BuilderComponents/testdata/State/State.component';
import { CountryComponent } from './BuilderComponents/testdata/Country/Country.component';
import { Ad9Component } from './BuilderComponents/angulardatatype/Ad9/Ad9.component';
import { Ad8Component } from './BuilderComponents/angulardatatype/Ad8/Ad8.component';
import { Ad7Component } from './BuilderComponents/angulardatatype/Ad7/Ad7.component';
import { Ad6Component } from './BuilderComponents/angulardatatype/Ad6/Ad6.component';
import { Adv5Component } from './BuilderComponents/angulardatatype/Adv5/Adv5.component';
import { Adv4Component } from './BuilderComponents/angulardatatype/Adv4/Adv4.component';
import { SupportComponent } from './BuilderComponents/angulardatatype/Support/Support.component';
import { Adv3Component } from './BuilderComponents/angulardatatype/Adv3/Adv3.component';
import { Dv2Component } from './BuilderComponents/angulardatatype/Dv2/Dv2.component';
import { Adv1Component } from './BuilderComponents/angulardatatype/Adv1/Adv1.component';
import { Basicp3Component } from './BuilderComponents/angulardatatype/Basicp3/Basicp3.component';
import { Basicp2Component } from './BuilderComponents/angulardatatype/Basicp2/Basicp2.component';
import { Basicp1Component } from './BuilderComponents/angulardatatype/Basicp1/Basicp1.component';
import { CommonModule } from '@angular/common';
@@ -75,9 +53,6 @@ import { ReportbuildeditComponent } from './builder/report-build/reportbuildedit
import { ReportbuildqueryComponent } from './builder/report-build/reportbuildquery/reportbuildquery.component';
import { ReportBuild2Component } from './builder/report-build2/report-build2.component';
import { ReportBuild2editComponent } from './builder/report-build2/report-build2edit/report-build2edit.component';
import { ReportRunnerComponent } from './builder/report-runner/report-runner.component';
import { ReportrunnereditComponent } from './builder/report-runner/reportrunneredit/reportrunneredit.component';
import { Reportrunneredit2Component } from './builder/report-runner/reportrunneredit2/reportrunneredit2.component';
import { DashboardnewComponent } from './builder/dashboardnew/dashboardnew.component';
@@ -138,13 +113,7 @@ import { AllapiregisteryComponent } from './fnd/apiregistery/allapiregistery/all
import { AddapiregisteryComponent } from './fnd/apiregistery/addapiregistery/addapiregistery.component';
import { EditapiregisteryComponent } from './fnd/apiregistery/editapiregistery/editapiregistery.component';
import { ApiregisterylineComponent } from './fnd/apiregistery/Apiregisteryline/Apiregisteryline.component';
import { Customer_informationComponent } from './BuilderComponents/angulardatatype/Customer_information/Customer_information.component';
import { Deployment_typeComponent } from './BuilderComponents/angulardatatype/Deployment_type/Deployment_type.component';
import { ManufacturerComponent } from './BuilderComponents/angulardatatype/Manufacturer/Manufacturer.component';
import { Order_summaryComponent } from './BuilderComponents/angulardatatype/Order_summary/Order_summary.component';
import { ProductComponent } from './BuilderComponents/angulardatatype/Product/Product.component';
import { TypesComponent } from './BuilderComponents/angulardatatype/Types/Types.component';
import { Test2Component } from './BuilderComponents/testdata/Test2/Test2.component';
import { Token_registeryComponent } from './fnd/Token_registery/Token_registery.component';
import { MyworkspaceComponent } from './admin/myworkspace/myworkspace.component';
import { ThemeCustomizationComponent } from './theme-customization/theme-customization.component';
@@ -165,11 +134,34 @@ import { ShieldDashboardModule } from './builder/dashboardnew/gadgets/shield-das
// Import UnifiedChartComponent
import { UnifiedChartComponent } from './builder/dashboardnew/gadgets/unified-chart/unified-chart.component';
// Import ChartConfigManagerComponent
import { ChartConfigManagerComponent } from './builder/dashboardnew/chart-config-manager/chart-config-manager.component';
import { ChartConfigManagerComponent } from './builder/dashboardnew/chart-config/chart-config-manager.component';
// Import ChartTypeManagerComponent
import { ChartTypeManagerComponent } from './builder/dashboardnew/chart-type-manager/chart-type-manager.component';
// Import ChartTypePageComponent
import { ChartTypePageComponent } from './builder/dashboardnew/chart-type-manager/chart-type-page.component';
// Import AddChartTypeComponent
import { AddChartTypeComponent } from './builder/dashboardnew/chart-type-manager/add-chart-type.component';
// Import EditChartTypeComponent
import { EditChartTypeComponent } from './builder/dashboardnew/chart-type-manager/edit-chart-type.component';
// Import ChartTypeUiComponentsComponent
import { ChartTypeUiComponentsComponent } from './builder/dashboardnew/chart-type-manager/chart-type-ui-components.component';
// Import ChartTypeTemplatesComponent
import { ChartTypeTemplatesComponent } from './builder/dashboardnew/chart-type-manager/chart-type-templates.component';
// Import ChartTypeFieldsComponent
import { ChartTypeFieldsComponent } from './builder/dashboardnew/chart-type-manager/chart-type-fields.component';
// Import new form components
import { ChartTypeFormComponent } from './builder/dashboardnew/chart-config/forms/chart-type-form.component';
import { UiComponentFormComponent } from './builder/dashboardnew/chart-config/forms/ui-component-form.component';
import { ComponentPropertyFormComponent } from './builder/dashboardnew/chart-config/forms/component-property-form.component';
import { ChartTemplateFormComponent } from './builder/dashboardnew/chart-config/forms/chart-template-form.component';
import { DynamicFieldFormComponent } from './builder/dashboardnew/chart-config/forms/dynamic-field-form.component';
// Import ChartConfigModalComponent
import { ChartConfigModalComponent } from './builder/dashboardnew/editnewdash/chart-config-modal.component';
// Import DynamicChartLoaderService
import { DynamicChartLoaderService } from './builder/dashboardnew/chart-config/dynamic-chart-loader.service';
import { ReportRunnerComponent } from './builder/report-runner/report-runner.component';
import { ReportrunnereditComponent } from './builder/report-runner/reportrunneredit/reportrunneredit.component';
import { Reportrunneredit2Component } from './builder/report-runner/reportrunneredit2/reportrunneredit2.component';
@NgModule({
declarations: [
@@ -189,6 +181,27 @@ import { ChartTypePageComponent } from './builder/dashboardnew/chart-type-manage
ChartTypeManagerComponent,
// Add ChartTypePageComponent to declarations
ChartTypePageComponent,
// Add AddChartTypeComponent to declarations
AddChartTypeComponent,
// Add EditChartTypeComponent to declarations
EditChartTypeComponent,
// Add ChartTypeUiComponentsComponent to declarations
ChartTypeUiComponentsComponent,
// Add ChartTypeTemplatesComponent to declarations
ChartTypeTemplatesComponent,
// Add ChartTypeFieldsComponent to declarations
ChartTypeFieldsComponent,
// Add new form components to declarations
ChartTypeFormComponent,
UiComponentFormComponent,
ComponentPropertyFormComponent,
ChartTemplateFormComponent,
DynamicFieldFormComponent,
// Add ChartConfigModalComponent to declarations
ChartConfigModalComponent,
// Add ChartTypeDisplayComponent to declarations
DashrunnerlineComponent, BarRunnerComponent, LineRunnerComponent, DoughnutRunnerComponent, GridRunnerComponent, PieRunnerComponent, PolarRunnerComponent, RadarRunnerComponent, ScatterRunnerComponent, TodoRunnerComponent, BubbleRunnerComponent,
// Add CompactFilterRunnerComponent to declarations
CompactFilterRunnerComponent,
@@ -214,33 +227,9 @@ import { ChartTypePageComponent } from './builder/dashboardnew/chart-type-manage
ThemeCustomizationComponent,
Ad10Component,
Token_registeryComponent,
DefatestComponent,
Test2Component,
Order_summaryComponent,
TypesComponent,
ProductComponent,
ManufacturerComponent,
Deployment_typeComponent,
ChildformComponent,
DistrictComponent,
StateComponent,
CountryComponent,
Ad9Component,
Ad8Component,
Ad7Component,
Ad6Component,
Adv5Component,
Adv4Component,
SupportComponent,
Adv3Component,
Dv2Component,
Adv1Component,
Basicp3Component,
Basicp2Component,
Basicp1Component,
],
],
imports: [
QRCodeModule,
CommonModule,
@@ -266,8 +255,10 @@ import { ChartTypePageComponent } from './builder/dashboardnew/chart-type-manage
providers: [
CookieService,
WireframeService,
DynamicChartLoaderService
],
exports: [
ChartConfigManagerComponent
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

105
frontend/angular-clarity-master/src/app/services/api/login.service.ts
View File

@@ -1,7 +1,7 @@
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { Observable, BehaviorSubject, Subject } from 'rxjs';
import { Observable, BehaviorSubject } from 'rxjs';
import { UserInfoService, LoginInfoInStorage} from '../user-info.service';
import { ApiRequestService } from './api-request.service';
import { HttpClient } from '@angular/common/http';
@@ -43,70 +43,63 @@ export class LoginService {
*/
// let loginDataSubject:BehaviorSubject<any> = new BehaviorSubject<any>([]); // Will use this BehaviorSubject to emit data that we want after ajax login attempt
let loginDataSubject: Subject<any> = new Subject<any>();
let loginDataSubject:BehaviorSubject<any> = new BehaviorSubject<any>([]); // Will use this BehaviorSubject to emit data that we want after ajax login attempt
let loginInfoReturn:LoginInfoInStorage; // Object that we want to send back to Login Page
this.apiRequest.loginAuthentication('token/session', bodyData)
.subscribe({
next: (jsonResp) => {
console.log('login response in service : ', jsonResp);
if (jsonResp.operationMessage=='Login Failed') {
this.toastr.warning('Not Login Getting Error check your Username and password');
}
if (jsonResp !== undefined && jsonResp !== null && jsonResp.operationStatus === "SUCCESS"){
//Create a success object that we want to send back to login page
////"displayName": jsonResp.item.fullname,
//"username" : jsonResp.item.username,
loginInfoReturn = {
"success" : true,
"message" : jsonResp.operationMessage,
"landingPage": this.landingPage,
"user" : {
"userId" : jsonResp.item.userId,
"email" : jsonResp.item.email,
"displayName": jsonResp.item.firstName,
"username" : jsonResp.item.username,
"roles" : jsonResp.item.roles,
"token" : jsonResp.item.token,
},
};
console.log(loginInfoReturn.user);
if(jsonResp !== undefined && jsonResp !== null && jsonResp.operationStatus === "SUCCESS"){
this.toastr.success(`Welcome To home Page!! your Role is ${jsonResp.item.roles}`);
}
// store username and jwt token in session storage to keep user logged in between page refreshes
this.userInfoService.storeUserInfo(JSON.stringify(loginInfoReturn.user));
}
else {
//Create a failure object that we want to send back to login page
loginInfoReturn = {
"success":false,
"message":jsonResp.operationMessage,
"landingPage":"/login"
};
}
loginDataSubject.next(loginInfoReturn);
loginDataSubject.complete(); // Complete the subject
},
error: (err) => {
console.log('login error ', err);
.subscribe(jsonResp => {
console.log('login response in service : ', jsonResp);
if (jsonResp.operationMessage=='Login Failed') {
this.toastr.warning('Not Login Getting Error check your Username and password');
}
if (jsonResp !== undefined && jsonResp !== null && jsonResp.operationStatus === "SUCCESS"){
//Create a success object that we want to send back to login page
////"displayName": jsonResp.item.fullname,
//"username" : jsonResp.item.username,
loginInfoReturn = {
"success": false,
"message": err.url + " >>> " + err.statusText + "[" + err.status +"]",
"landingPage": "/login"
"success" : true,
"message" : jsonResp.operationMessage,
"landingPage": this.landingPage,
"user" : {
"userId" : jsonResp.item.userId,
"email" : jsonResp.item.email,
"displayName": jsonResp.item.firstName,
"username" : jsonResp.item.username,
"roles" : jsonResp.item.roles,
"token" : jsonResp.item.token,
},
};
if (err) {
this.toastr.error('Getting Server Error');
console.log(loginInfoReturn.user);
if(jsonResp !== undefined && jsonResp !== null && jsonResp.operationStatus === "SUCCESS"){
this.toastr.success(`Welcome To home Page!! your Role is ${jsonResp.item.roles}`);
}
loginDataSubject.next(loginInfoReturn); // Send the error response
loginDataSubject.complete(); // Complete the subject
// store username and jwt token in session storage to keep user logged in between page refreshes
this.userInfoService.storeUserInfo(JSON.stringify(loginInfoReturn.user));
}
else {
//Create a faliure object that we want to send back to login page
loginInfoReturn = {
"success":false,
"message":jsonResp.operationMessage,
"landingPage":"/login"
};
}
loginDataSubject.next(loginInfoReturn);
},
err => {
console.log('login error ', err);
loginInfoReturn = {
"success": false,
"message": err.url + " >>> " + err.statusText + "[" + err.status +"]",
"landingPage": "/login"
};
if (err) {
this.toastr.error('Getting Server Error');
}
});
return loginDataSubject;
return loginDataSubject;
}
logout(navigatetoLogout=true): void {

46
frontend/angular-clarity-master/src/app/services/scheduler.service.ts Normal file
View File

@@ -0,0 +1,46 @@
import { Injectable } from '@angular/core';
import { Observable } from "rxjs";
import { HttpClient } from "@angular/common/http";
import { ApiRequestService } from "src/app/services/api/api-request.service";
@Injectable({
providedIn: 'root'
})
export class SchedulerService {
private baseURL = "scheduler";
constructor(
private http: HttpClient,
private apiRequest: ApiRequestService,
) { }
// Get job by lake ID
getJobByLakeId(lakeId: number): Observable<any> {
const _http = `${this.baseURL}/lake/${lakeId}`;
return this.apiRequest.get(_http);
}
// Create a new job
createJob(jobData: any): Observable<any> {
const _http = `${this.baseURL}/create`;
return this.apiRequest.post(_http, jobData);
}
// Pause a job
pauseJob(jobId: number): Observable<any> {
const _http = `${this.baseURL}/pause/${jobId}`;
return this.apiRequest.post(_http, {});
}
// Resume a job
resumeJob(jobId: number): Observable<any> {
const _http = `${this.baseURL}/resume/${jobId}`;
return this.apiRequest.post(_http, {});
}
// Stop a job
stopJob(jobId: number): Observable<any> {
const _http = `${this.baseURL}/stop/${jobId}`;
return this.apiRequest.delete(_http);
}
}