Skip to content

Commit

Permalink
added separate component
Browse files Browse the repository at this point in the history
  • Loading branch information
Dmitriy Borzenko committed Nov 13, 2024
1 parent f230a68 commit 9516249
Show file tree
Hide file tree
Showing 10 changed files with 98 additions and 377 deletions.
9 changes: 8 additions & 1 deletion src/app/dataset-view/additional-components/data-component/data.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,13 @@ <h2 class="box-title align-items-center pb-3 pt-3 m-0">Saved Queries</h2>
[sqlLoading]="sqlLoading"
[sqlRequestCode]="sqlRequestCode"
(runSQLRequestEmit)="runSQLRequest($event)"
/>
>
<p class="search-result-container__content mt-4">
The current dataset does not contain any data. Need to
<a class="add-link" *ngIf="overviewUpdate$ | async as overviewUpdate" (click)="addData(overviewUpdate)">
add data</a
>
</p>
</app-query-and-result-sections>
</div>
</div>
49 changes: 48 additions & 1 deletion src/app/dataset-view/additional-components/data-component/data.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,20 @@ import { Location } from "@angular/common";
import { Observable } from "rxjs";
import AppValues from "src/app/common/app.values";
import DataTabValues from "./mock.data";
import { OffsetInterval } from "../../../api/kamu.graphql.interface";
import { DatasetFlowType, DatasetKind, OffsetInterval } from "../../../api/kamu.graphql.interface";
import { OverviewUpdate } from "src/app/dataset-view/dataset.subscriptions.interface";
import { DatasetRequestBySql } from "../../../interface/dataset.interface";
import { DatasetSubscriptionsService } from "../../dataset.subscriptions.service";
import { BaseComponent } from "src/app/common/base.component";
import { DatasetBasicsFragment } from "src/app/api/kamu.graphql.interface";
import { MaybeNull } from "src/app/common/app.types";
import ProjectLinks from "src/app/project-links";
import { NgbModal, NgbModalRef } from "@ng-bootstrap/ng-bootstrap";
import { AddDataModalComponent } from "../overview-component/components/add-data-modal/add-data-modal.component";
import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
import { DatasetViewTypeEnum } from "../../dataset-view.interface";
import { DatasetFlowsService } from "../flows-component/services/dataset-flows.service";
import { NavigationService } from "src/app/services/navigation.service";

@Component({
selector: "app-data",
Expand All @@ -32,6 +38,9 @@ export class DataComponent extends BaseComponent implements OnInit {

private datasetSubsService = inject(DatasetSubscriptionsService);
private location = inject(Location);
private ngbModalService = inject(NgbModal);
private datasetFlowsService = inject(DatasetFlowsService);
private navigationService = inject(NavigationService);

public ngOnInit(): void {
this.overviewUpdate$ = this.datasetSubsService.overviewChanges;
Expand All @@ -56,4 +65,42 @@ export class DataComponent extends BaseComponent implements OnInit {
}
}
}

public addData(overviewUpdate: OverviewUpdate): void {
const metadata = overviewUpdate.overview.metadata;
if (metadata.currentPollingSource || metadata.currentTransform) {
this.updateNow();
} else if (this.datasetBasics.kind === DatasetKind.Derivative) {
this.navigationService.navigateToSetTransform({
accountName: this.datasetBasics.owner.accountName,
datasetName: this.datasetBasics.name,
});
} else {
const modalRef: NgbModalRef = this.ngbModalService.open(AddDataModalComponent);
const modalRefInstance = modalRef.componentInstance as AddDataModalComponent;
modalRefInstance.datasetBasics = this.datasetBasics;
modalRefInstance.overview = overviewUpdate;
}
}

private updateNow(): void {
this.datasetFlowsService
.datasetTriggerFlow({
datasetId: this.datasetBasics.id,
datasetFlowType:
this.datasetBasics.kind === DatasetKind.Root
? DatasetFlowType.Ingest
: DatasetFlowType.ExecuteTransform,
})
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe((success: boolean) => {
if (success) {
this.navigationService.navigateToDatasetView({
accountName: this.datasetBasics.owner.accountName,
datasetName: this.datasetBasics.name,
tab: DatasetViewTypeEnum.Flows,
});
}
});
}
}
12 changes: 5 additions & 7 deletions ...ponents/data-component/query-and-result-sections/query-and-result-sections.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="sql-query-editor-header flex-column justify-content-between">
<h2 class="box-title align-items-center pb-3 m-0">Query:</h2>
<div class="btn-group-parent" *ngIf="dataUpdate$ | async as dataUpdate">
<div class="btn-group-parent">
<div class="d-flex">
<button
data-test-id="shareSqlQueryButton"
Expand All @@ -11,6 +11,7 @@ <h2 class="box-title align-items-center pb-3 m-0">Query:</h2>
</button>
<button
data-test-id="runSqlQueryButton"
[disabled]="!sqlRequestCode"
name="run sql button"
(click)="runSQLRequest({ query: sqlRequestCode }, true)"
class="sql-run-button border border-1 rounded-left-2 border-right-0 btn-group-item btn d-flex justify-content-center align-items-center"
Expand Down Expand Up @@ -115,9 +116,6 @@ <h3>0 records</h3>
</ng-container>
</ng-container>

<p
*ngIf="!(dataUpdate$ | async)?.schema?.fields?.length && !sqlLoading && !(sqlErrorMarker$ | async)"
class="search-result-container__content mt-4"
>
The current dataset does not contain any data.
</p>
<ng-content
*ngIf="(dataUpdate$ | async)?.schema?.fields?.length == 0 && !sqlLoading && !(sqlErrorMarker$ | async)"
></ng-content>
24 changes: 13 additions & 11 deletions ...omponents/data-component/query-and-result-sections/query-and-result-sections.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
import { ToastrService } from "ngx-toastr";
import { map, Observable, switchMap, tap } from "rxjs";
import { LoggedUserService } from "src/app/auth/logged-user.service";
import { MaybeUndefined } from "src/app/common/app.types";
import { MaybeNull, MaybeUndefined } from "src/app/common/app.types";
import AppValues from "src/app/common/app.values";
import { BaseComponent } from "src/app/common/base.component";
import { UploadPrepareResponse, UploadPrepareData } from "src/app/common/ingest-via-file-upload.types";
Expand All @@ -36,7 +36,7 @@ import { DatasetSubscriptionsService } from "src/app/dataset-view/dataset.subscr
export class QueryAndResultSectionsComponent extends BaseComponent implements OnInit {
@Input({ required: true }) public sqlLoading: boolean;
sqlErrorMarker$: Observable<string>;
public dataUpdate$: Observable<DataUpdate>;
public dataUpdate$: Observable<MaybeNull<DataUpdate>>;
@Input({ required: true }) public sqlRequestCode: string;
public currentData: DataRow[] = [];
public isAllDataLoaded = false;
Expand All @@ -53,27 +53,29 @@ export class QueryAndResultSectionsComponent extends BaseComponent implements On
private datasetSubsService = inject(DatasetSubscriptionsService);

public ngOnInit(): void {
this.datasetSubsService.emitSqlQueryDataChanged(null);
this.sqlErrorMarker$ = this.datasetSubsService.sqlErrorOccurrences.pipe(
map((data: DataSqlErrorUpdate) => data.error),
);
this.dataUpdate$ = this.datasetSubsService.sqlQueryDataChanges.pipe(
tap((dataUpdate: DataUpdate) => {
if (dataUpdate.currentVocab?.offsetColumn) {
this.offsetColumnName = dataUpdate.currentVocab.offsetColumn;
tap((dataUpdate: MaybeNull<DataUpdate>) => {
if (dataUpdate) {
if (dataUpdate.currentVocab?.offsetColumn) {
this.offsetColumnName = dataUpdate.currentVocab.offsetColumn;
}
this.isAllDataLoaded = dataUpdate.content.length < this.rowsLimit;
this.currentData = this.skipRows
? [...this.currentData, ...dataUpdate.content]
: dataUpdate.content;
this.datasetSubsService.resetSqlError();
}
this.isAllDataLoaded = dataUpdate.content.length < this.rowsLimit;
this.currentData = this.skipRows ? [...this.currentData, ...dataUpdate.content] : dataUpdate.content;
this.datasetSubsService.resetSqlError();
}),
);

//this.runSQLRequest({ query: this.sqlRequestCode }, true);
}
private skipRows: MaybeUndefined<number>;
private rowsLimit: number = AppValues.SQL_QUERY_LIMIT;
public editorLoaded = false;
private offsetColumnName = AppValues.DEFAULT_OFFSET_COLUMN_NAME;
// public currentData: DataRow[] = [];

public get isAdmin(): boolean {
return this.loggedUserService.isAdmin;
Expand Down
3 changes: 2 additions & 1 deletion src/app/dataset-view/dataset.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ import { FlowsComponent } from "./additional-components/flows-component/flows.co
import { AngularMultiSelectModule } from "angular2-multiselect-dropdown";
import { MatTabsModule } from "@angular/material/tabs";
import { MatChipsModule } from "@angular/material/chips";
import { QueryAndResultSectionsComponent } from './additional-components/data-component/query-and-result-sections/query-and-result-sections.component';
import { QueryAndResultSectionsComponent } from "./additional-components/data-component/query-and-result-sections/query-and-result-sections.component";

@NgModule({
imports: [
Expand Down Expand Up @@ -168,6 +168,7 @@ import { QueryAndResultSectionsComponent } from './additional-components/data-co
MatChipsModule,
RequestTimerComponent,
LoadMoreComponent,
QueryAndResultSectionsComponent,
],
declarations: [
DatasetViewHeaderComponent,
Expand Down
6 changes: 3 additions & 3 deletions src/app/dataset-view/dataset.subscriptions.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { MaybeNull } from "../common/app.types";
@Injectable({ providedIn: "root" })
export class DatasetSubscriptionsService {
private overview$: Subject<OverviewUpdate> = new ReplaySubject<OverviewUpdate>(1 /*bufferSize*/);
private sqlQueryData$: Subject<DataUpdate> = new ReplaySubject<DataUpdate>(1 /*bufferSize*/);
private sqlQueryData$: Subject<MaybeNull<DataUpdate>> = new ReplaySubject<MaybeNull<DataUpdate>>(1 /*bufferSize*/);
private sqlError$: Subject<DataSqlErrorUpdate> = new ReplaySubject<DataSqlErrorUpdate>(1 /*bufferSize*/);
private history$: Subject<MaybeNull<DatasetHistoryUpdate>> = new ReplaySubject<MaybeNull<DatasetHistoryUpdate>>(
1 /*bufferSize*/,
Expand All @@ -35,11 +35,11 @@ export class DatasetSubscriptionsService {

// SQL queries

public emitSqlQueryDataChanged(dataUpdate: DataUpdate): void {
public emitSqlQueryDataChanged(dataUpdate: MaybeNull<DataUpdate>): void {
this.sqlQueryData$.next(dataUpdate);
}

public get sqlQueryDataChanges(): Observable<DataUpdate> {
public get sqlQueryDataChanges(): Observable<MaybeNull<DataUpdate>> {
return this.sqlQueryData$.asObservable();
}

Expand Down
138 changes: 7 additions & 131 deletions src/app/query/global-query/global-query.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,137 +102,13 @@
</div>
</div>
<div class="search-result-container__content">
<div class="sql-query-editor-header flex-column justify-content-between">
<h2 class="box-title align-items-center pb-3 m-0">Query:</h2>
<div class="btn-group-parent">
<div class="d-flex">
<button
data-test-id="shareSqlQueryButton"
(click)="shareQuery()"
class="share-query-button border border-1 rounded d-flex justify-content-center align-items-center me-4"
>
<span class="mr-1 button-text"> Share query</span><mat-icon>share</mat-icon>
</button>
<button
data-test-id="runSqlQueryButton"
name="run sql button"
(click)="runSQLRequest({ query: sqlRequestCode }, true)"
class="sql-run-button border border-1 rounded-left-2 border-right-0 btn-group-item btn d-flex justify-content-center align-items-center"
>
<span>Run</span><mat-icon>play_arrow</mat-icon>
</button>
<button
class="starred rounded-right-2 border-1 border btn-sm btn btn-group-item d-flex justify-content-center align-items-center"
[matMenuTriggerFor]="menu"
aria-label="Example icon-button with a menu"
data-test-id="searchAdditionalButtons"
>
<mat-icon>arrow_drop_down</mat-icon>
</button>
</div>
<mat-menu #menu="matMenu">
<div class="select-menu-modal notifications-component-menu-modal">
<div class="select-menu-list">
<button
type="button"
[disabled]="true"
class="select-menu-item no-pointer flex-items-start"
>
<div>
<div class="f5 text-bold">New Dataset from Query</div>
<div class="text-small color-fg-muted text-normal pb-1 lh-130">
Creates new derivative dataset using current query as the transformation
</div>
</div>
</button>
</div>
<ng-container *ngIf="isAdmin">
<div class="select-menu-list">
<mat-divider></mat-divider>
<button
type="button"
(click)="verifyQueryResult()"
class="select-menu-item flex-items-start"
>
<div>
<div class="f5 text-bold">Verify query result</div>
<div class="text-small color-fg-muted text-normal pb-1 lh-130">
You can verify the query result and make sure that you can trust it
</div>
</div>
</button>
</div>
<div class="select-menu-list">
<mat-divider></mat-divider>
<button
type="button"
(click)="copyCurlCommand()"
class="select-menu-item flex-items-start"
>
<div>
<div class="f5 text-bold">Copy as curl command</div>
<div class="text-small color-fg-muted text-normal pb-1 lh-130">
You can verify the query result with curl command
</div>
</div>
</button>
</div>
</ng-container>
</div>
</mat-menu>
</div>
</div>

<div class="position-relative mt-4">
<ng-container *ngIf="!this.editorLoaded || sqlLoading">
<mat-progress-bar
data-test-id="editor-progress-bar"
class="position-absolute"
mode="indeterminate"
/>
</ng-container>

<app-sql-editor
[(template)]="sqlRequestCode"
[error]="sqlErrorMarker$ | async"
(onRunSql)="runSql()"
(onEditorLoaded)="hideProgressBar()"
/>

<div class="mt-3 text-end">
<app-request-timer
class="badge"
[class.text-bg-danger]="!sqlLoading && (sqlErrorMarker$ | async)"
[class.text-bg-warning]="sqlLoading"
[class.text-bg-success]="!sqlLoading"
[sqlLoading]="sqlLoading"
/>
</div>
</div>
<ng-container *ngIf="sqlErrorMarker$ | async as sqlErrorMarker">
<div class="d-flex justify-content-between align-items-center">
<h2 class="box-title align-items-center pb-3 m-0">Error:</h2>
</div>
<p class="sql-error-message" data-test-id="global-sql-error-message">{{ sqlErrorMarker }}</p>
</ng-container>

<ng-container *ngIf="output && output.data.length && !(sqlErrorMarker$ | async)">
<div class="d-flex justify-content-between align-items-center">
<h2 class="box-title align-items-center pb-3 m-0">Result:</h2>
</div>
<ng-container *ngIf="output.data.length; else noRecords">
<app-dynamic-table
[hasTableHeader]="true"
[schemaFields]="schemaFields(output)"
[dataRows]="tableSource(output)"
[idTable]="'global-query-table'"
/>
<app-load-more [isAllDataLoaded]="isAllDataLoaded" (loadMoreEmit)="loadMore($event)" class="mt-4" />
</ng-container>
<ng-template #noRecords>
<h3>0 records</h3>
</ng-template>
</ng-container>
<app-query-and-result-sections
[sqlLoading]="sqlLoading"
[sqlRequestCode]="sqlRequestCode"
(runSQLRequestEmit)="runSQLRequest($event)"
>
<p class="search-result-container__content mt-4">The query didn't return any records</p>
</app-query-and-result-sections>
</div>
</div>
</div>
Loading

0 comments on commit 9516249

Please sign in to comment.