Skip to content

Commit

Permalink
added json editor code for metrics
Browse files Browse the repository at this point in the history
  • Loading branch information
Yagnik56 committed Mar 6, 2024
1 parent 54bf936 commit 0d239d0
Show file tree
Hide file tree
Showing 11 changed files with 1,595 additions and 908 deletions.
2,275 changes: 1,370 additions & 905 deletions frontend/package-lock.json

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -54,9 +54,11 @@
"@ngx-translate/core": "^15.0.0",
"@ngx-translate/http-loader": "^8.0.0",
"@swimlane/ngx-charts": "^20.5.0",
"ang-jsoneditor": "^3.1.1",
"angular2-notifications": "^16.0.1",
"ansi-to-html": "^0.7.2",
"dayjs": "^1.11.2",
"jsoneditor": "^9.10.2",
"jszip": "^3.10.1",
"jwt-decode": "^3.1.2",
"lodash.clonedeep": "^4.5.0",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,16 @@
/>
<mat-icon class="search-icon" matSuffix>search</mat-icon>
</mat-form-field>
<button
mat-flat-button
color="primary"
class="ft-14-700"
(click)="openAddMetricDialog()"
*ngIf="permissions?.metrics.create"
>
<mat-icon>add</mat-icon>
<span>{{ 'metric.add-metrics.text' | translate }}</span>
</button>
</div>
<div class="read-mode-container" *ngIf="permissions?.metrics.create">
<mat-slide-toggle class="ft-13-700" color="primary" (change)="changeMetricMode($event)" labelPosition="before">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import { MatTableDataSource } from '@angular/material/table';
import { AnalysisService } from '../../../../../core/analysis/analysis.service';
import { AuthService } from '../../../../../core/auth/auth.service';
import { DeleteMetricsComponent } from '../modals/delete-metrics/delete-metrics.component';
import { AddMetricsComponent } from '../modals/add-metrics/add-metrics.component';

@Component({
selector: 'profile-metrics',
Expand Down Expand Up @@ -89,6 +90,16 @@ export class MetricsComponent implements OnInit, OnDestroy, AfterViewInit {
return metrics;
}

openAddMetricDialog() {
this.selectedMetricIndex = null;
const dialogRef = this.dialog.open(AddMetricsComponent, {
panelClass: 'add-metric-modal',
});
dialogRef.afterClosed().subscribe((result) => {
// Code will be executed after closing dialog
});
}

deleteNode(nodeToBeDeleted: any) {
const data = {
children: this.nestedDataSource.data,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<div class="add-metrics">
<span class="ft-24-700 title">{{ 'metric.add-metrics.text' | translate | titlecase }}</span>

<div class="json-editor-container">
<json-editor
#metricsEditor
[options]="options"
></json-editor>
</div>

<div class="button-container">
<button class="shared-modal--modal-btn" mat-raised-button (click)="onCancelClick()">
{{ 'global.cancel.text' | translate }}
</button>
<button
mat-raised-button
class="shared-modal--modal-btn default-button"
[ngClass]="{ 'default-button--disabled': metricsEditorError }"
[disabled]="metricsEditorError"
(click)="addMetrics()"
>
{{ 'global.save.text' | translate }}
</button>
</div>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
.add-metrics {
.title {
display: block;
padding: 40px 40px 0;
height: 108px;
}

.json-editor-container {
margin-top: 20px;
padding: 0 36px 20px;
height: 300px;
}

::ng-deep .jsoneditor {
border: 0;
height: 300px;
}

::ng-deep .jsoneditor-menu {
display: none;
}

::ng-deep .ace-jsoneditor .ace_gutter {
border-right: 1px solid var(--blue);
}

::ng-deep .ace-jsoneditor .ace_gutter-active-line,
::ng-deep .ace-jsoneditor .ace_marker-layer .ace_active-line {
background-color: var(--blue);
}

.button-container {
display: flex;
justify-content: flex-end;
padding: 0 40px 40px;
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { AddMetricsComponent } from './add-metrics.component';
import { TestingModule } from '../../../../../../../testing/testing.module';
import { AnalysisService } from '../../../../../../core/analysis/analysis.service';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { NgJsonEditorModule } from 'ang-jsoneditor';

xdescribe('AddMetricsComponent', () => {
let component: AddMetricsComponent;
let fixture: ComponentFixture<AddMetricsComponent>;

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [AddMetricsComponent],
imports: [TestingModule, NgJsonEditorModule],
providers: [
AnalysisService,
{ provide: MatDialogRef, useValue: {} },
{
provide: MAT_DIALOG_DATA,
useValue: {},
},
],
}).compileComponents();
}));

beforeEach(() => {
fixture = TestBed.createComponent(AddMetricsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { JsonEditorOptions, JsonEditorComponent } from 'ang-jsoneditor';
import { MatDialogRef } from '@angular/material/dialog';
import { AnalysisService } from '../../../../../../core/analysis/analysis.service';

@Component({
selector: 'app-add-metrics',
templateUrl: './add-metrics.component.html',
styleUrls: ['./add-metrics.component.scss'],
})
export class AddMetricsComponent implements OnInit {
options = new JsonEditorOptions();
metricsEditorError = false;
@ViewChild('metricsEditor', { static: false }) metricsEditor: JsonEditorComponent;
constructor(private dialogRef: MatDialogRef<AddMetricsComponent>, private analysisService: AnalysisService) {}

ngOnInit() {
this.options = new JsonEditorOptions();
this.options.mode = 'code';
this.options.statusBar = false;

this.options.onChange = () => {
try {
this.metricsEditor.get();
this.metricsEditorError = false;
} catch (e) {
this.metricsEditorError = true;
}
};
}

onCancelClick(): void {
this.dialogRef.close();
}

addMetrics() {
const json = this.metricsEditor.get();
let data: any = {};
if (Array.isArray(json)) {
data = {
metricUnit: json,
};
} else {
data = {
metricUnit: [json],
};
}
this.analysisService.upsertMetrics(data);
this.onCancelClick();
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
@use '@angular/material' as mat;

@mixin add-metrics-component-theme($theme) {
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);

.add-metrics {
.title {
box-shadow: 0 0 8px 0 mat.get-color-from-palette($background, shadow-color);
}

.ace-jsoneditor .ace_scroller {
background-color: mat.get-color-from-palette($background, background);
}

.ace-jsoneditor .ace_gutter {
background-color: mat.get-color-from-palette($background, background);
color: mat.get-color-from-palette($foreground, text);
}

.ace-jsoneditor .ace_text-layer {
color: mat.get-color-from-palette($foreground, text);
}

.ace-jsoneditor .ace_variable {
color: mat.get-color-from-palette($foreground, text);
}

.ace-jsoneditor .ace_gutter-active-line {
color: mat.get-color-from-palette($foreground, text);
}

.ace-jsoneditor .ace_marker-layer .ace_active-line {
color: mat.get-color-from-palette($foreground, text);
}

.ace-jsoneditor .ace_string {
color: mat.get-color-from-palette($foreground, text);
}

}
}
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@ import { ProfileRootComponent } from './profile-root/profile-root.component';
import { NewUserComponent } from './components/modals/new-user/new-user.component';
import { ProfileInfoComponent } from './components/profile-info/profile-info.component';
import { MetricsComponent } from './components/metrics/metrics.component';
import { AddMetricsComponent } from './components/modals/add-metrics/add-metrics.component';
import { DeleteMetricsComponent } from './components/modals/delete-metrics/delete-metrics.component';
import { NgJsonEditorModule } from 'ang-jsoneditor';

@NgModule({
declarations: [
Expand All @@ -16,7 +18,8 @@ import { DeleteMetricsComponent } from './components/modals/delete-metrics/delet
ProfileInfoComponent,
MetricsComponent,
DeleteMetricsComponent,
AddMetricsComponent,
],
imports: [CommonModule, ProfileRoutingModule, SharedModule],
imports: [CommonModule, ProfileRoutingModule, SharedModule, NgJsonEditorModule],
})
export class ProfileModule {}
8 changes: 6 additions & 2 deletions frontend/projects/upgrade/src/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
@import '@danielmoncada/angular-datetime-picker/assets/style/picker.min.css';
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700|Material+Icons');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800&display=swap');

@import '~jsoneditor/dist/jsoneditor.min.css';
@include mat.all-component-typographies();
@include mat.core();

Expand Down Expand Up @@ -41,6 +41,7 @@
@import './app/features/dashboard/home/components/modal/queries-modal/queries-modal.theme.scss';
@import './app/shared/components/query-result/query-result.theme.scss';
@import './app/features/dashboard/profile/components/metrics/metrics.theme.scss';
@import './app/features/dashboard/profile/components/modals/add-metrics/add-metrics.theme.scss';
@import './app/features/dashboard/home/components/experiment-query-result/experiment-query-result.theme.scss';
@import './app/features/dashboard/home/components/modal/experiment-end-criteria/experiment-ending-criteria.theme.scss';
@import './app/features/dashboard/home/components/modal/import-experiment/import-experiment.theme.scss';
Expand Down Expand Up @@ -81,6 +82,7 @@
@include queries-modal-component-theme($theme);
@include query-result-component-theme($theme);
@include metrics-component-theme($theme);
@include add-metrics-component-theme($theme);
@include experiment-query-result-component-theme($theme);
@include experiment-ending-criteria-component-theme($theme);
@include import-experiment-component-theme($theme);
Expand Down Expand Up @@ -143,6 +145,7 @@ button[mat-button], button[mat-raised-button], button[mat-flat-button], button[m
.queries-modal,
.export-modal,
.query-result,
.add-metric-modal,
.duplicate-segment-modal,
.experiment-ending-criteria {
@include custom-components-theme($light-theme);
Expand Down Expand Up @@ -203,7 +206,8 @@ button[mat-button], button[mat-raised-button], button[mat-flat-button], button[m
width: 500px;
}

.experiment-general-modal {
.experiment-general-modal,
.add-metric-modal {
width: 804px;
min-height: 294px;
}
Expand Down

0 comments on commit 0d239d0

Please sign in to comment.