3 Commits

Author SHA1 Message Date
Gaurav Kumar
7cea739e7f data lake 2025-12-06 12:35:02 +05:30
Gaurav Kumar
cf5461c8b0 working code with dynamic chart load 2025-11-18 19:43:18 +05:30
Gaurav Kumar
285aeca0f8 webhook 2025-11-06 19:53:50 +05:30
11 changed files with 260 additions and 229 deletions

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">
@@ -138,7 +144,11 @@
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>
@@ -164,34 +174,39 @@
<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" (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)">
<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">
<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">
<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 -->
@@ -430,16 +445,16 @@
instanceId="edit-form-{{rowSelected.id}}"></app-cron-job-builder>
</div>
<div class="clr-col-sm-12">
<!-- <div class="clr-col-sm-12">
<label> json</label>
<input id="name" type="Text" class="form-control" style="border: none; outline: none; height:33px !important;"
[(ngModel)]="rowSelected.json" name=" json " />
</div>
<div class="clr-col-sm-12">
<label>Url</label>
<label>Url Endpoint</label>
<input class="clr-input" type="text" [(ngModel)]="rowSelected.url_endpoint" name="url_endpoint" />
</div>
</div> -->
<div class="clr-col-sm-12">
<label>Batch Volume</label>
@@ -468,9 +483,7 @@
<label>Blending Data Lakes</label>
<div class="checkbox-container">
<div *ngFor="let dataLake of dataLakeList" class="checkbox-item">
<input
type="checkbox"
[value]="dataLake.id"
<input type="checkbox" [value]="dataLake.id"
(change)="onEditBlendingLakeCheckboxChange($event, dataLake.id)"
[checked]="isEditBlendingLakeSelected(dataLake.id)">
<label>{{ dataLake.name }}</label>
@@ -583,16 +596,16 @@
(cronExpressionChange)="onAddCronExpressionChange($event)" instanceId="add-form"></app-cron-job-builder>
</div>
<div class="clr-col-sm-12">
<!-- <div class="clr-col-sm-12">
<label>json</label>
<input class="form-control" type="Text" formControlName="json"
style="border: none; outline: none; height:33px !important;" />
</div>
</div> -->
<div class="clr-col-sm-12">
<!-- <div class="clr-col-sm-12">
<label> Url Endpoint</label>
<input class="clr-input" type="text" formControlName="url_endpoint" />
</div>
</div> -->
<div class="clr-col-sm-12">
<label> Batch Volume</label>
@@ -621,10 +634,7 @@
<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)"
<input type="checkbox" [value]="dataLake.id" (change)="onBlendingLakeCheckboxChange($event, dataLake.id)"
[checked]="isBlendingLakeSelected(dataLake.id)">
<label>{{ dataLake.name }}</label>
</div>
@@ -993,7 +1003,7 @@
<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">
@@ -1002,14 +1012,12 @@
<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>
<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>
@@ -1034,15 +1042,14 @@
<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)">
<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">
@@ -1050,12 +1057,12 @@
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>
<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>
<small class="clr-subtext">Tip: Click on header names above to automatically insert them into your
query</small>
</div>
</div>
</div>
@@ -1075,7 +1082,7 @@
<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>
@@ -1090,17 +1097,14 @@
<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)">
<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>
@@ -1108,7 +1112,8 @@
</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>
<button type="button" class="btn btn-primary" (click)="updateFieldMappings()"
[disabled]="!fieldMappingData || fieldMappingData.length === 0">Update Field Mappings</button>
</div>
</clr-modal>
@@ -1120,7 +1125,7 @@
<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">
@@ -1129,7 +1134,7 @@
{{ schedulerJob.status }}
</span>
</div>
<div class="job-details">
<div class="detail-row">
<label>Job Name:</label>
@@ -1144,7 +1149,7 @@
<span>{{ schedulerJob.description }}</span>
</div>
</div>
<!-- Job Actions -->
<div class="job-actions">
<button class="btn btn-warning" (click)="pauseJob()" *ngIf="schedulerJob.status === 'RUNNING'">
@@ -1161,14 +1166,14 @@
</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
@@ -1180,4 +1185,5 @@
<div class="modal-footer">
<button type="button" class="btn btn-outline" (click)="closeSchedulerModal()">Close</button>
</div>
</clr-modal>

View File

@@ -806,125 +806,72 @@
padding: 15px;
border-top: 1px solid #eee;
}
/* Scheduler Modal Styles */
.scheduler-container {
/* 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;
}
.data-lake-info h4 {
.webhook-container .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;
.webhook-form {
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 {
.webhook-info {
background-color: #e3f2fd;
border: 1px solid #bbdefb;
border-radius: 4px;
padding: 15px;
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-info p {
margin: 0;
color: #1976d2;
}

View File

@@ -128,6 +128,10 @@ export class Data_lakeComponent implements OnInit {
schedulerJob: any = null;
selectedSchedulerItem: any = null;
// New properties for webhook functionality
showWebhookModal = false;
selectedWebhookItem: any = null;
constructor(
private extensionService: ExtensionService,
private userInfoService: UserInfoService,
@@ -163,9 +167,16 @@ export class Data_lakeComponent implements OnInit {
sure_connect_id: [null],
ref_datalake_id: [null],
datalake_type: ['normal'], // Default to normal
blending_lakeids: [[]] // Array for multiple selections
blending_lakeids: [[]], // Array for multiple selections
webhook_url: [null] // Add webhook_url field
});
// Set default SureConnect value after form initialization if list is already loaded
if (this.sureConnectList && this.sureConnectList.length > 0) {
const defaultSureConnectId = this.sureConnectList[0].id;
this.entryForm.get('sure_connect_id')?.setValue(defaultSureConnectId);
}
// form code start
this.extensionService.getJsonObjectsByFormCodeList(this.formcode).subscribe(data => {
console.log(data);
@@ -257,6 +268,20 @@ export class Data_lakeComponent implements OnInit {
this.sureConnectService.getAll().subscribe((data: any[]) => {
this.sureConnectList = data;
console.log('SureConnect List:', this.sureConnectList);
// Set default SureConnect value if list is not empty
if (this.sureConnectList && this.sureConnectList.length > 0) {
// Set the first SureConnect item as default
const defaultSureConnectId = this.sureConnectList[0].id;
// Set default for ADD form if it exists
if (this.entryForm && this.entryForm.get('sure_connect_id')) {
// Only set default if no value is already selected
if (!this.entryForm.get('sure_connect_id')?.value) {
this.entryForm.get('sure_connect_id')?.setValue(defaultSureConnectId);
}
}
}
}, (error) => {
console.log('Error fetching SureConnect list:', error);
});
@@ -711,6 +736,12 @@ export class Data_lakeComponent implements OnInit {
// Set the selected SureConnect for edit form
this.selectedSureConnect = row.sure_connect_id || null;
// If no SureConnect is selected, set the first one as default
if (!this.rowSelected.sure_connect_id && this.sureConnectList && this.sureConnectList.length > 0) {
this.rowSelected.sure_connect_id = this.sureConnectList[0].id;
this.selectedSureConnect = this.sureConnectList[0].id;
}
// 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() !== '');
@@ -884,6 +915,17 @@ export class Data_lakeComponent implements OnInit {
}
// Reset blending_lakeids to empty string
this.entryForm.get('blending_lakeids')?.setValue('');
// Set default SureConnect value if available
if (this.sureConnectList && this.sureConnectList.length > 0) {
const defaultSureConnectId = this.sureConnectList[0].id;
// Only set default if no value is already selected
if (!this.entryForm.get('sure_connect_id')?.value) {
this.entryForm.get('sure_connect_id')?.setValue(defaultSureConnectId);
}
} else {
this.entryForm.get('sure_connect_id')?.setValue('');
}
}
this.modalAdd = true;
}
@@ -1569,6 +1611,7 @@ export class Data_lakeComponent implements OnInit {
}
}
// Method to open scheduler modal
openSchedulerModal(item: any) {
this.selectedSchedulerItem = item;
@@ -1724,4 +1767,34 @@ export class Data_lakeComponent implements OnInit {
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);
}
}

View File

@@ -57,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
}

View File

@@ -42,7 +42,8 @@
</ul>
</nav>
<div style="width: 100%;">
<gridster [options]="options" (drop)="onDrop($event)" style="background-color: transparent;">
<!-- Remove the (drop) event binding since it's already handled by gridster's emptyCellDropCallback -->
<gridster [options]="options" style="background-color: transparent;">
<gridster-item [item]="item" *ngFor="let item of dashboardArray">
<!-- <ng-container *ngIf="addToDashboard && item.addToDashboard"> -->
<button class="btn btn-icon btn-danger" style="margin-left: 10px; margin-top: 10px;" (click)="removeItem(item)" *ngIf="!fromRunner">

View File

@@ -66,18 +66,18 @@ export class EditnewdashComponent implements OnInit {
name: 'Common Filter',
identifier: 'common_filter'
},
{
name: 'Radar Chart',
identifier: 'radar_chart'
},
{
name: 'Doughnut Chart',
identifier: 'doughnut_chart'
},
{
name: 'Line Chart',
identifier: 'line_chart'
},
// {
// name: 'Radar Chart',
// identifier: 'radar_chart'
// },
// {
// name: 'Doughnut Chart',
// identifier: 'doughnut_chart'
// },
// {
// name: 'Line Chart',
// identifier: 'line_chart'
// },
// {
// name: 'Bar Chart',
// identifier: 'bar_chart'
@@ -98,22 +98,22 @@ export class EditnewdashComponent implements OnInit {
// name: 'Scatter Chart',
// identifier: 'scatter_chart'
// },
{
name: 'Dynamic Chart',
identifier: 'dynamic_chart'
},
{
name: 'Financial Chart',
identifier: 'financial_chart'
},
{
name: 'To Do',
identifier: 'to_do_chart'
},
{
name: 'Grid View',
identifier: 'grid_view'
},
// {
// name: 'Dynamic Chart',
// identifier: 'dynamic_chart'
// },
// {
// name: 'Financial Chart',
// identifier: 'financial_chart'
// },
// {
// name: 'To Do',
// identifier: 'to_do_chart'
// },
// {
// name: 'Grid View',
// identifier: 'grid_view'
// },
{
name: 'Compact Filter',
identifier: 'compact_filter'
@@ -2110,6 +2110,9 @@ export class EditnewdashComponent implements OnInit {
this.dashboardArray.push(chartItem);
console.log(`Created dynamic chart:`, chartItem);
// Update the dashboard collection and trigger refresh
this.itemChange();
},
error: (error) => {
console.error(`Error loading configuration for ${chartTypeName}:`, error);
@@ -2180,13 +2183,8 @@ export class EditnewdashComponent implements OnInit {
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();
}
// Update the dashboard collection and trigger refresh
this.itemChange();
}
// Helper method to get display name for chart type - making it fully dynamic

View File

@@ -33,7 +33,7 @@
[labels]="chartLabels"
[options]="chartOptions"
[legend]="chartLegend"
[chartType]="chartType || 'bar'"
[type]="chartType || 'bar'"
(chartClick)="chartClicked($event)"
(chartHover)="chartHovered($event)">
</canvas>
@@ -46,7 +46,7 @@
[labels]="chartLabels"
[options]="chartOptions"
[legend]="chartLegend"
[chartType]="'bar'"
[type]="'bar'"
(chartClick)="chartClicked($event)"
(chartHover)="chartHovered($event)">
</canvas>

View File

@@ -546,7 +546,7 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
// Check if filters are available
hasFilters(): boolean {
const hasBaseFilters = this.baseFilters && this.baseFilters.length > 0;
console.log('Checking for filters - baseFilters:', this.baseFilters, 'hasBaseFilters:', hasBaseFilters);
// console.log('Checking for filters - baseFilters:', this.baseFilters, 'hasBaseFilters:', hasBaseFilters);
return hasBaseFilters;
}
@@ -682,30 +682,30 @@ export class UnifiedChartComponent implements OnInit, OnChanges, OnDestroy {
}
switch (this.chartType) {
case 'bar':
this.initializeBarChartOptions();
break;
case 'line':
this.initializeLineChartOptions();
break;
case 'pie':
this.initializePieChartOptions();
break;
case 'doughnut':
this.initializeDoughnutChartOptions();
break;
case 'bubble':
this.initializeBubbleChartOptions();
break;
case 'radar':
this.initializeRadarChartOptions();
break;
case 'polar':
this.initializePolarChartOptions();
break;
case 'scatter':
this.initializeScatterChartOptions();
break;
// case 'bar':
// this.initializeBarChartOptions();
// break;
// case 'line':
// this.initializeLineChartOptions();
// break;
// case 'pie':
// this.initializePieChartOptions();
// break;
// case 'doughnut':
// this.initializeDoughnutChartOptions();
// break;
// case 'bubble':
// this.initializeBubbleChartOptions();
// break;
// case 'radar':
// this.initializeRadarChartOptions();
// break;
// case 'polar':
// this.initializePolarChartOptions();
// break;
// case 'scatter':
// this.initializeScatterChartOptions();
// break;
default:
this.initializeDefaultChartOptions();
}