ng-kinintel 0.0.317

package/src/lib/components/data-explorer/data-explorer.component.ts

@@ -0,0 +1,267 @@
+import {Component, ElementRef, Inject, Input, OnDestroy, OnInit, ViewChild} from '@angular/core';
+import {
+    MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
+    MatLegacyDialog as MatDialog,
+    MatLegacyDialogRef as MatDialogRef
+} from '@angular/material/legacy-dialog';
+import {DatasetNameDialogComponent} from '../dataset/dataset-editor/dataset-name-dialog/dataset-name-dialog.component';
+import {DatasetService} from '../../services/dataset.service';
+import {Router} from '@angular/router';
+import {
+    SnapshotProfileDialogComponent
+} from '../data-explorer/snapshot-profile-dialog/snapshot-profile-dialog.component';
+import {ExportDataComponent} from './export-data/export-data.component';
+import {ProjectService} from '../../services/project.service';
+import * as lodash from 'lodash';
+import {DataProcessorService} from '../../services/data-processor.service';
+import {
+    SnapshotApiAccessComponent
+} from './snapshot-api-access/snapshot-api-access.component';
+import {
+    EditQueryCacheComponent
+} from '../query-caching/edit-query-cache/edit-query-cache.component';
+import {Subject} from 'rxjs';
+import {CreateDatasetComponent} from '../dataset/create-dataset/create-dataset.component';
+import {DatasetEditorComponent} from '../dataset/dataset-editor/dataset-editor.component';
+import {ChangeSourceWarningComponent} from './change-source-warning/change-source-warning.component';
+
+
+const _ = lodash.default;
+
+@Component({
+    selector: 'ki-data-explorer',
+    templateUrl: './data-explorer.component.html',
+    styleUrls: ['./data-explorer.component.sass'],
+    host: {class: 'configure-dialog'}
+})
+export class DataExplorerComponent implements OnInit, OnDestroy {
+
+    @ViewChild('datasetEditorComponent') datasetEditorComponent: DatasetEditorComponent;
+
+    @Input() datasetEditorReadonly = false;
+
+    public _ = _;
+    public backendUrl: string;
+    public showChart = false;
+    public chartData;
+    public datasetInstanceSummary: any;
+    public filters: any;
+    public admin: boolean;
+    public showSnapshots = false;
+    public snapshotProfiles: any = [];
+    public showQueryCache = false;
+    public editTitle = false;
+    public accountId: any;
+    public newTitle: string;
+    public newDescription: string;
+    public breadcrumb: string;
+    public canHaveSnapshots = false;
+    public canExportData = false;
+    public reloadCache = new Subject();
+
+    private columns: any = [];
+    private datasetTitle: string;
+    private timer: number;
+
+    constructor(public dialogRef: MatDialogRef<DataExplorerComponent>,
+                @Inject(MAT_DIALOG_DATA) public data: any,
+                private dialog: MatDialog,
+                private datasetService: DatasetService,
+                private router: Router,
+                private projectService: ProjectService,
+                private dataProcessorService: DataProcessorService) {
+    }
+
+    ngOnInit(): void {
+        this.chartData = !!this.data.showChart;
+        this.datasetInstanceSummary = this.data.datasetInstanceSummary;
+        this.admin = !!this.data.admin;
+        this.accountId = this.data.accountId;
+        this.breadcrumb = this.data.breadcrumb;
+        this.backendUrl = this.data.backendUrl;
+        this.datasetEditorReadonly = !!this.data.datasetEditorReadonly;
+
+        if (!this.datasetInstanceSummary.id) {
+            this.datasetTitle = this.datasetInstanceSummary.title;
+        }
+
+        this.newTitle = this.data.newTitle;
+        this.newDescription = this.data.newDescription;
+
+        this.chartData = [
+            {data: [1000, 1400, 1999, 2500, 5000]},
+        ];
+
+        this.canHaveSnapshots = this.projectService.doesActiveProjectHavePrivilege('snapshotaccess');
+        this.canExportData = this.projectService.doesActiveProjectHavePrivilege('exportdata');
+    }
+
+    ngOnDestroy() {
+        if (this.timer) {
+            clearInterval(this.timer);
+        }
+    }
+
+    public changeSource() {
+        const dialogRef = this.dialog.open(CreateDatasetComponent, {
+            width: '1200px',
+            height: '800px',
+            data: {
+                admin: this.admin,
+                accountId: this.accountId
+            }
+        });
+        dialogRef.afterClosed().subscribe(res => {
+            if (res) {
+                const dialogRef2 = this.dialog.open(ChangeSourceWarningComponent, {
+                    width: '700px',
+                    height: '275px'
+                });
+                dialogRef2.afterClosed().subscribe(proceed => {
+                    if (proceed) {
+                        this.datasetInstanceSummary.datasetInstanceId = res.datasetInstanceId;
+                        this.datasetInstanceSummary.datasourceInstanceKey = res.datasourceInstanceKey;
+                        this.datasetInstanceSummary.source = {
+                            title: res.title,
+                            datasetInstanceId: res.datasetInstanceId,
+                            datasourceInstanceKey: res.datasourceInstanceKey,
+                            type: null
+                        };
+                        const transformation = this.datasetInstanceSummary.transformationInstances[0];
+                        if (transformation) {
+                            this.datasetEditorComponent.excludeUpstreamTransformations(transformation, true);
+                        } else {
+                            this.datasetEditorComponent.evaluateDataset(true);
+                        }
+                    }
+                });
+            }
+        });
+    }
+
+    public dataLoaded(data) {
+        this.columns = data.columns;
+    }
+
+    public async triggerSnapshot(snapshotKey) {
+        await this.dataProcessorService.triggerProcessor(snapshotKey);
+        this.snapshotProfiles = await this.loadProcessorItems('snapshot');
+        this.timer = setInterval(async () => {
+            this.snapshotProfiles = await this.loadProcessorItems('snapshot');
+        }, 3000);
+    }
+
+    public apiAccess() {
+        const dialogRef = this.dialog.open(SnapshotApiAccessComponent, {
+            width: '800px',
+            height: '530px',
+            data: {
+                datasetInstanceSummary: this.datasetInstanceSummary,
+                backendUrl: this.backendUrl
+            }
+        });
+    }
+
+    public exportData() {
+        const dialogRef = this.dialog.open(ExportDataComponent, {
+            width: '600px',
+            height: '530px',
+            data: {
+                datasetInstanceSummary: Object.assign({}, this.datasetInstanceSummary)
+            }
+        });
+    }
+
+    public async viewSnapshots() {
+        this.showQueryCache = false;
+        this.showSnapshots = !this.showSnapshots;
+        if (this.showSnapshots) {
+            this.snapshotProfiles = await this.loadProcessorItems('snapshot');
+        }
+    }
+
+    public editSnapshot(snapshot) {
+        const dialogRef = this.dialog.open(SnapshotProfileDialogComponent, {
+            width: '900px',
+            height: '900px',
+            data: {
+                snapshot,
+                datasetInstanceId: this.datasetInstanceSummary.id,
+                columns: this.columns,
+                datasetInstance: this.datasetInstanceSummary
+            }
+        });
+        dialogRef.afterClosed().subscribe(async res => {
+            if (res) {
+                this.snapshotProfiles = await this.loadProcessorItems('snapshot');
+            }
+        });
+    }
+
+    public async deleteSnapshot(snapshot) {
+        const message = 'Are you sure you would like to remove this snapshot?';
+        if (window.confirm(message)) {
+            await this.dataProcessorService.removeProcessor(snapshot.key);
+            this.snapshotProfiles = await this.loadProcessorItems('snapshot');
+        }
+    }
+
+    public async viewQueryCaching() {
+        this.showSnapshots = false;
+        this.showQueryCache = !this.showQueryCache;
+    }
+
+    public editQueryCache(cache: any) {
+        const dialogRef = this.dialog.open(EditQueryCacheComponent, {
+            width: '900px',
+            height: '900px',
+            data: {
+                cache,
+                datasetInstanceId: this.datasetInstanceSummary.id,
+                columns: this.columns,
+                datasetInstance: this.datasetInstanceSummary
+            }
+        });
+        dialogRef.afterClosed().subscribe(async res => {
+            if (res) {
+                this.reloadCache.next(Date.now());
+            }
+        });
+    }
+
+    public saveChanges() {
+        if (!this.datasetInstanceSummary.id && (this.datasetInstanceSummary.title === this.datasetTitle)) {
+            const dialogRef = this.dialog.open(DatasetNameDialogComponent, {
+                width: '700px',
+                height: '800px',
+                data: {
+                    datasetInstanceSummary: this.datasetInstanceSummary
+                }
+            });
+            dialogRef.afterClosed().subscribe(datasetInstanceSummary => {
+                if (datasetInstanceSummary) {
+                    this.datasetInstanceSummary = datasetInstanceSummary;
+                    this.saveDataset();
+                }
+            });
+        } else {
+            this.saveDataset();
+        }
+    }
+
+    private saveDataset() {
+        this.datasetService.saveDataset(this.datasetInstanceSummary, this.accountId).then(() => {
+            this.dialogRef.close(true);
+            // this.router.navigate(['/dataset']);
+        });
+    }
+
+    private async loadProcessorItems(type: string) {
+        return await this.dataProcessorService.filterProcessorsByRelatedItem(
+            type,
+            'DatasetInstance',
+            this.datasetInstanceSummary.id
+        );
+    }
+
+}

package/src/lib/components/data-explorer/export-data/export-data.component.html

@@ -0,0 +1,69 @@
+<div class="dialog" cdkDrag cdkDragRootElement=".cdk-overlay-pane">
+
+    <div class="dialog-title" cdkDragHandle>
+        <h2 mat-dialog-title>
+            Export Data
+        </h2>
+
+        <button mat-icon-button mat-dialog-close>
+            <mat-icon>clear</mat-icon>
+        </button>
+    </div>
+
+    <div class="dialog-content">
+        <label class="mb-4">
+            Export Type
+            <select [(ngModel)]="exportDataset.exporterKey">
+                <option value="sv">Separated Value</option>
+                <option value="json">JSON</option>
+            </select>
+        </label>
+
+        <ng-template [ngIf]="exportDataset.exporterKey === 'sv'">
+            <mat-checkbox class="mb-2"
+                          [(ngModel)]="exportDataset.exporterConfiguration.includeHeaderRow">
+                Include header row
+            </mat-checkbox>
+            <label class="mb-2">
+                Separator
+                <input type="text" [(ngModel)]="exportDataset.exporterConfiguration.separator">
+                <small class="font-normal">Enter the character used to separate the values.</small>
+            </label>
+        </ng-template>
+
+        <label class="mb-4">
+            Limit Results
+            <select [(ngModel)]="exportDataset.limit">
+                <option value="1">1</option>
+                <option value="5">5</option>
+                <option value="10">10</option>
+                <option value="25">25</option>
+                <option value="50">50</option>
+                <option value="100">100</option>
+                <option value="250">250</option>
+                <option value="500">500</option>
+                <option value="1000">1000</option>
+                <option value="5000">5000</option>
+                <option value="10000">10000</option>
+            </select>
+        </label>
+
+        <label class="mb-4">
+            Offset Results
+            <input type="number" [(ngModel)]="exportDataset.offset">
+        </label>
+
+    </div>
+
+    <div class="dialog-footer">
+        <button mat-button mat-dialog-close mat-stroked-button type="button">Close</button>
+
+        <button mat-button mat-flat-button color="primary" type="button"
+                (click)="exportData()"
+                [disabled]="!exportDataset.exporterKey">Export Data
+        </button>
+    </div>
+
+</div>
+
+

package/src/lib/components/data-explorer/export-data/export-data.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ExportDataComponent } from './export-data.component';
+
+describe('ExportDataComponent', () => {
+  let component: ExportDataComponent;
+  let fixture: ComponentFixture<ExportDataComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ExportDataComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ExportDataComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/data-explorer/export-data/export-data.component.ts

@@ -0,0 +1,56 @@
+import {Component, Inject, OnInit} from '@angular/core';
+import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef} from '@angular/material/legacy-dialog';
+import {DatasetService} from '../../../services/dataset.service';
+import * as fileSaver from 'file-saver';
+import * as lodash from 'lodash';
+import {MatLegacySnackBar as MatSnackBar} from '@angular/material/legacy-snack-bar';
+
+const _ = lodash.default;
+
+@Component({
+    selector: 'ki-export-data',
+    templateUrl: './export-data.component.html',
+    styleUrls: ['./export-data.component.sass'],
+    host: {class: 'dialog-wrapper'}
+})
+export class ExportDataComponent implements OnInit {
+
+    public exportDataset: any = {};
+
+    constructor(public dialogRef: MatDialogRef<ExportDataComponent>,
+                @Inject(MAT_DIALOG_DATA) public data: any,
+                private datasetService: DatasetService,
+                private snackBar: MatSnackBar) {
+    }
+
+    ngOnInit(): void {
+        this.exportDataset.dataSetInstanceSummary = this.data.datasetInstanceSummary;
+        this.exportDataset.transformationInstances = [];
+        this.exportDataset.parameterValues = [];
+        this.exportDataset.limit = '100';
+        this.exportDataset.offset = '0';
+        this.exportDataset.exporterKey = 'sv';
+        this.exportDataset.exporterConfiguration = {includeHeaderRow: true, separator: ','};
+    }
+
+    public exportData() {
+        this.datasetService.exportDataset(this.exportDataset).then(res => {
+            let fileType = 'txt';
+            if (this.exportDataset.exporterKey === 'json') {
+                fileType = 'json';
+            } else if (this.exportDataset.exporterKey === 'sv' &&
+                this.exportDataset.exporterConfiguration.separator === ',') {
+                fileType = 'csv';
+            }
+
+            const filename = _.kebabCase(this.exportDataset.dataSetInstanceSummary.title) + '-' + Date.now();
+            fileSaver.saveAs(res, filename + '.' + fileType);
+            this.dialogRef.close();
+            this.snackBar.open('Data Exported Successfully.', 'Close', {
+                duration: 3000,
+                verticalPosition: 'top'
+            });
+        });
+    }
+
+}

package/src/lib/components/data-explorer/snapshot-api-access/snapshot-api-access.component.html

@@ -0,0 +1,195 @@
+<div class="dialog" cdkDrag cdkDragRootElement=".cdk-overlay-pane">
+
+    <div class="dialog-title" cdkDragHandle>
+        <h2 mat-dialog-title>
+            API Access
+        </h2>
+
+        <button mat-icon-button mat-dialog-close>
+            <mat-icon>clear</mat-icon>
+        </button>
+    </div>
+
+    <div class="dialog-content">
+
+        <div class="text-lg font-semibold mb-4">
+            Management Key
+        </div>
+
+        <div class="mb-4">
+            <input class="mt-2 w-full" type="text" [(ngModel)]="datasetInstance.managementKey">
+            <small class="font-normal">This will be used as part of API requests</small>
+        </div>
+
+        <ng-template [ngIf]="showApiAccessDetails">
+            <div class="text-lg font-semibold mb-4">
+                Example API Usage
+            </div>
+
+            <div class="relative w-full">
+                <div class="text-base font-semibold">List Snapshots</div>
+                <div class="text-sm mb-2">
+                    List all snapshots associated with this query using the management key.
+                </div>
+                <div #listSnapshots class=" bg-gray-800 border-2 border-gray-900 text-white rounded-md p-4">
+                    <pre class="whitespace-normal">curl -H <span class="text-secondary">"API-KEY:<b>{{apiKeys ? apiKeys.apiKey : '[[apiKey]]'}}</b>"</span> -H <span class="text-secondary">"API-SECRET:<b>{{apiKeys ? apiKeys.apiSecret : '[[apiSecret]]'}}</b>"</span> -X <b>GET</b> <span class="text-secondary">{{backendURL}}/api/snapshot/{{datasetInstance.managementKey}}</span></pre>
+                </div>
+                <button mat-icon-button [cdkCopyToClipboard]="listSnapshots.textContent" (cdkCopyToClipboardCopied)="copied()"
+                        class="text-white absolute bottom-0 right-0">
+                    <mat-icon>content_copy</mat-icon>
+                </button>
+            </div>
+            <div class="font-semibold text-sm my-1">Example Response</div>
+            <div class="relative bg-gray-800 border-2 border-gray-900 text-white rounded-md p-4 mb-8">
+                <pre class="whitespace-normal">
+                    {{'[{"key":"snapshot_1","title":"Snapshot 1","type":"STANDARD","config":{"parameterValues":[],"keyFieldNames":[],"indexes":[],"timeLapsedFields":[],"createHistory":false,"createLatest":true,"readChunkSize":null},"trigger":"adhoc","datasetManagementKey":"managementkey","datasetTitle":"Test Query","status":"COMPLETED","lastRunTime":"22\\/03\\/2024 14:50:20","nextRunTime":null}]'}}
+                </pre>
+            </div>
+
+
+            <div class="relative w-full">
+                <div class="text-base font-semibold">Get Single Snapshot</div>
+                <div class="text-sm mb-2">
+                    Get a single snapshot associated with this query using the management key and snapshot key as returned from a list or create operation.
+                </div>
+                <div #getSnapshot class=" bg-gray-800 border-2 border-gray-900 text-white rounded-md p-4">
+                    <pre class="whitespace-normal">curl -H <span class="text-secondary">"API-KEY:<b>{{apiKeys ? apiKeys.apiKey : '[[apiKey]]'}}</b>"</span> -H <span class="text-secondary">"API-SECRET:<b>{{apiKeys ? apiKeys.apiSecret : '[[apiSecret]]'}}</b>"</span></pre><pre class="whitespace-normal"> -X <b>GET</b> <span class="text-secondary">{{backendURL}}/api/snapshot/{{datasetInstance.managementKey}}/SNAPSHOT_KEY</span></pre>
+                </div>
+                <button mat-icon-button [cdkCopyToClipboard]="getSnapshot.textContent" (cdkCopyToClipboardCopied)="copied()"
+                        class="text-white absolute bottom-0 right-0">
+                    <mat-icon>content_copy</mat-icon>
+                </button>
+            </div>
+            <div class="font-semibold text-sm my-1">Example Response</div>
+            <div class="relative bg-gray-800 border-2 border-gray-900 text-white rounded-md p-4 mb-8">
+                <pre class="whitespace-normal">
+                    {{'{"key":"snapshot_1","title":"Snapshot 1","type":"STANDARD","config":{"parameterValues":[],"keyFieldNames":[],"indexes":[],"timeLapsedFields":[],"createHistory":false,"createLatest":true,"readChunkSize":null},"trigger":"adhoc","datasetManagementKey":"managementkey","datasetTitle":"Test Query","status":"COMPLETED","lastRunTime":"22\\/03\\/2024 14:50:20","nextRunTime":null}'}}
+                </pre>
+            </div>
+
+
+
+            <div class="relative w-full">
+                <div class="text-base font-semibold">Get data for snapshot</div>
+                <div class="text-sm mb-2">
+                    Return data for a snapshot for this query identified by management key and snapshot key.  Optionally supply an offset and limit for paging the data.
+                </div>
+                <div #getSnapshotData class=" bg-gray-800 border-2 border-gray-900 text-white rounded-md p-4">
+                    <pre class="whitespace-normal">curl -H <span class="text-secondary">"API-KEY:<b>{{apiKeys ? apiKeys.apiKey : '[[apiKey]]'}}</b>"</span> -H <span class="text-secondary">"API-SECRET:<b>{{apiKeys ? apiKeys.apiSecret : '[[apiSecret]]'}}</b>"</span></pre><pre class="whitespace-normal"> -X <b>GET</b> <span class="text-secondary">"{{backendURL}}/api/snapshot/{{datasetInstance.managementKey}}/SNAPSHOT_KEY/data?limit=25&offset=0"</span></pre>
+                </div>
+                <button mat-icon-button [cdkCopyToClipboard]="getSnapshotData.textContent" (cdkCopyToClipboardCopied)="copied()"
+                        class="text-white absolute bottom-0 right-0">
+                    <mat-icon>content_copy</mat-icon>
+                </button>
+            </div>
+
+            <div class="font-semibold text-sm my-1">Example Response</div>
+            <div class="relative bg-gray-800 border-2 border-gray-900 text-white rounded-md p-4 mb-8">
+                <pre class="whitespace-normal">
+                    {{exampleResults()}}
+                </pre>
+            </div>
+
+
+            <div class="relative w-full mb-8">
+                <div class="text-base font-semibold">Run a snapshot</div>
+                <div class="text-sm mb-2">
+                    Run a snapshot immediately - the results can be checked by calling the methods above.
+                </div>
+                <div #runSnapshot class=" bg-gray-800 border-2 border-gray-900 text-white rounded-md p-4">
+                    <pre class="whitespace-normal">curl -H <span class="text-secondary">"API-KEY:<b>{{apiKeys ? apiKeys.apiKey : '[[apiKey]]'}}</b>"</span> -H <span class="text-secondary">"API-SECRET:<b>{{apiKeys ? apiKeys.apiSecret : '[[apiSecret]]'}}</b>"</span></pre><pre class="whitespace-normal"> -X <b>PATCH</b> <span class="text-secondary">"{{backendURL}}/api/snapshot/{{datasetInstance.managementKey}}/SNAPSHOT_KEY"</span></pre>
+                </div>
+                <button mat-icon-button [cdkCopyToClipboard]="runSnapshot.textContent" (cdkCopyToClipboardCopied)="copied()"
+                        class="text-white absolute bottom-0 right-0">
+                    <mat-icon>content_copy</mat-icon>
+                </button>
+            </div>
+
+
+            <div class="relative w-full">
+                <div class="text-base font-semibold">Create New Snapshot</div>
+                <div class="text-sm mb-2">
+                    Create a new snapshot for this query using the passed management key.
+                </div>
+                <div #createSnapshot class=" bg-gray-800 border-2 border-gray-900 text-white rounded-md p-4">
+                    <pre class="whitespace-normal">curl -H <span class="text-secondary">"API-KEY:<b>{{apiKeys ? apiKeys.apiKey : '[[apiKey]]'}}</b>"</span> -H <span class="text-secondary">"API-SECRET:<b>{{apiKeys ? apiKeys.apiSecret : '[[apiSecret]]'}}</b>"</span></pre><pre class="whitespace-normal"> -X <b>POST</b> <span class="text-secondary">{{backendURL}}/api/snapshot/{{datasetInstance.managementKey}}</span></pre>
+                </div>
+                <button mat-icon-button [cdkCopyToClipboard]="createSnapshot.textContent" (cdkCopyToClipboardCopied)="copied()"
+                        class="text-white absolute bottom-0 right-0">
+                    <mat-icon>content_copy</mat-icon>
+                </button>
+            </div>
+
+            <div class="font-semibold text-sm my-1">Example Payload</div>
+            <div class="relative bg-gray-800 border-2 border-gray-900 text-white rounded-md p-4">
+                <pre class="whitespace-normal">
+                    {{examplePayload()}}
+                </pre>
+            </div>
+            <div class="font-semibold text-sm my-1">Example Response</div>
+            <div class="relative bg-gray-800 border-2 border-gray-900 text-white rounded-md p-4 mb-8">
+                <pre class="whitespace-normal">
+                    {{'{"snapshotKey": "NEW_SNAPSHOT_KEY"}'}}
+                </pre>
+            </div>
+
+            <div class="relative w-full">
+                <div class="text-base font-semibold">Update Existing Snapshot</div>
+                <div class="text-sm mb-2">
+                    Update an existing snapshot for this query using the passed management key and snapshot key.
+                </div>
+                <div #updateSnapshot class=" bg-gray-800 border-2 border-gray-900 text-white rounded-md p-4">
+                    <pre class="whitespace-normal">curl -H <span class="text-secondary">"API-KEY:<b>{{apiKeys ? apiKeys.apiKey : '[[apiKey]]'}}</b>"</span> -H <span class="text-secondary">"API-SECRET:<b>{{apiKeys ? apiKeys.apiSecret : '[[apiSecret]]'}}</b>"</span></pre><pre class="whitespace-normal"> -X <b>PUT</b> <span class="text-secondary">{{backendURL}}/api/snapshot/{{datasetInstance.managementKey}}/SNAPSHOT_KEY</span></pre>
+                </div>
+                <button mat-icon-button [cdkCopyToClipboard]="updateSnapshot.textContent" (cdkCopyToClipboardCopied)="copied()"
+                        class="text-white absolute bottom-0 right-0">
+                    <mat-icon>content_copy</mat-icon>
+                </button>
+            </div>
+
+            <div class="font-semibold text-sm my-1">Example Payload</div>
+            <div class="relative bg-gray-800 border-2 border-gray-900 text-white rounded-md p-4">
+                <pre class="whitespace-normal">
+                    {{examplePayload()}}
+                </pre>
+            </div>
+            <div class="font-semibold text-sm my-1">Example Response</div>
+            <div class="relative bg-gray-800 border-2 border-gray-900 text-white rounded-md p-4 mb-8">
+                <pre class="whitespace-normal">
+                    {{'{"snapshotKey": "NEW_SNAPSHOT_KEY"}'}}
+                </pre>
+            </div>
+
+            <div class="relative w-full mb-8">
+                <div class="text-base font-semibold">Remove snapshot</div>
+                <div class="text-sm mb-2">
+                    Delete a snapshot for a management key and snapshot key.
+                </div>
+                <div #removeSnapshot class=" bg-gray-800 border-2 border-gray-900 text-white rounded-md p-4">
+                    <pre class="whitespace-normal">curl -H <span class="text-secondary">"API-KEY:<b>{{apiKeys ? apiKeys.apiKey : '[[apiKey]]'}}</b>"</span> -H <span class="text-secondary">"API-SECRET:<b>{{apiKeys ? apiKeys.apiSecret : '[[apiSecret]]'}}</b>"</span></pre><pre class="whitespace-normal"> -X <b>DELETE</b> <span class="text-secondary">"{{backendURL}}/api/snapshot/{{datasetInstance.managementKey}}/SNAPSHOT_KEY"</span></pre>
+                </div>
+                <button mat-icon-button [cdkCopyToClipboard]="removeSnapshot.textContent" (cdkCopyToClipboardCopied)="copied()"
+                        class="text-white absolute bottom-0 right-0">
+                    <mat-icon>content_copy</mat-icon>
+                </button>
+            </div>
+
+
+
+
+
+
+        </ng-template>
+
+    </div>
+
+    <div class="dialog-footer">
+        <button mat-button mat-dialog-close mat-stroked-button type="button">Close</button>
+        <button mat-flat-button color="primary" (click)="saveDataset()">
+            Save
+        </button>
+    </div>
+
+</div>
+
+

package/src/lib/components/data-explorer/snapshot-api-access/snapshot-api-access.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SnapshotApiAccessComponent } from './snapshot-api-access.component';
+
+describe('SnapshotApiAccessComponent', () => {
+  let component: SnapshotApiAccessComponent;
+  let fixture: ComponentFixture<SnapshotApiAccessComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SnapshotApiAccessComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SnapshotApiAccessComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});