Skip to content

Rename chart-edit component to panel-edit and add signal-based table … #1625

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
gugu wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Rename chart-edit component to panel-edit and add signal-based table … #1625

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2509ae0
Rename chart-edit component to panel-edit and add signal-based table …
gugu Feb 23, 2026
d96c27d
Merge branch 'main' into frontend_panel_edit_rename
gugu Feb 26, 2026
f45be5d
Fix Cyrillic 'с' in Cassandra logo filenames and references
gugu Feb 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions frontend/src/app/app-routing.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,14 +227,14 @@ const routes: Routes = [
{
path: 'panels/:connection-id/new',
loadComponent: () =>
import('./components/charts/chart-edit/chart-edit.component').then((m) => m.ChartEditComponent),
import('./components/charts/panel-edit/panel-edit.component').then((m) => m.PanelEditComponent),
canActivate: [AuthGuard],
title: 'Create Query | Rocketadmin',
},
{
path: 'panels/:connection-id/:query-id',
loadComponent: () =>
import('./components/charts/chart-edit/chart-edit.component').then((m) => m.ChartEditComponent),
import('./components/charts/panel-edit/panel-edit.component').then((m) => m.PanelEditComponent),
canActivate: [AuthGuard],
title: 'Edit Query | Rocketadmin',
},
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/app/app.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,11 +130,11 @@ export class AppComponent {
);
this.matIconRegistry.addSvgIcon(
'cassandra',
this.domSanitizer.bypassSecurityTrustResourceUrl('/assets/icons/db-logos/сassandra_logo.svg'),
this.domSanitizer.bypassSecurityTrustResourceUrl('/assets/icons/db-logos/cassandra_logo.svg'),
);
this.matIconRegistry.addSvgIcon(
'cassandra-dark',
this.domSanitizer.bypassSecurityTrustResourceUrl('/assets/icons/db-logos/сassandra_logo_dark.svg'),
this.domSanitizer.bypassSecurityTrustResourceUrl('/assets/icons/db-logos/cassandra_logo_dark.svg'),
);
this.matIconRegistry.addSvgIcon(
'redis',
Expand Down
14 changes: 7 additions & 7 deletions ...harts/chart-edit/chart-edit.component.css → ...harts/panel-edit/panel-edit.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,19 +7,19 @@
z-index: 1;
}

.chart-edit-layout {
.panel-edit-layout {
display: flex;
height: 100%;
}

.chart-edit-main {
.panel-edit-main {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
}

.chart-edit-page {
.panel-edit-page {
display: flex;
flex-direction: column;
flex: 1;
Expand All @@ -31,21 +31,21 @@
}

@media (width <= 600px) {
.chart-edit-page {
.panel-edit-page {
padding: 0 16px;
margin: 1.5em auto;
}
}

.chart-edit-header {
.panel-edit-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 32px;
flex-shrink: 0;
}

.chart-edit-header h1 {
.panel-edit-header h1 {
margin: 0;
}

Expand All @@ -55,7 +55,7 @@
padding: 64px;
}

.chart-edit-content {
.panel-edit-content {
display: flex;
flex-direction: column;
gap: 24px;
Expand Down
10 changes: 5 additions & 5 deletions ...arts/chart-edit/chart-edit.component.html → ...arts/panel-edit/panel-edit.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<div class="chart-edit-layout">
<div class="panel-edit-layout">
<app-dashboards-sidebar
[connectionId]="connectionId()"
activeTab="queries">
</app-dashboards-sidebar>

<div class="chart-edit-main">
<div class="panel-edit-main">
<app-alert></app-alert>

<div class="chart-edit-page">
<div class="chart-edit-header">
<div class="panel-edit-page">
<div class="panel-edit-header">
<h1 class="mat-h1">{{ isEditMode() ? 'Edit panel' : 'Create panel' }}</h1>
</div>

Expand All @@ -19,7 +19,7 @@ <h1 class="mat-h1">{{ isEditMode() ? 'Edit panel' : 'Create panel' }}</h1>
}

@if (!loading()) {
<div class="chart-edit-content">
<div class="panel-edit-content">
@if (aiTables().length > 0 && aiDashboardId()) {
<div class="ai-section" [class.ai-section--collapsed]="!aiExpanded()">
<div class="ai-section-header" (click)="aiExpanded.set(!aiExpanded())">
Expand Down
52 changes: 26 additions & 26 deletions ...s/chart-edit/chart-edit.component.spec.ts → ...s/panel-edit/panel-edit.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@ import { ConnectionsService } from 'src/app/services/connections.service';
import { SavedQueriesService } from 'src/app/services/saved-queries.service';
import { UiSettingsService } from 'src/app/services/ui-settings.service';
import { MockCodeEditorComponent } from 'src/app/testing/code-editor.mock';
import { ChartEditComponent } from './chart-edit.component';
import { PanelEditComponent } from './panel-edit.component';

type ChartEditComponentTestable = ChartEditComponent & {
type PanelEditComponentTestable = PanelEditComponent & {
isEditMode: WritableSignal<boolean>;
queryName: WritableSignal<string>;
queryText: WritableSignal<string>;
Expand All @@ -34,9 +34,9 @@ type ChartEditComponentTestable = ChartEditComponent & {
hasChartData: Signal<boolean>;
};

describe('ChartEditComponent', () => {
let component: ChartEditComponent;
let fixture: ComponentFixture<ChartEditComponent>;
describe('PanelEditComponent', () => {
let component: PanelEditComponent;
let fixture: ComponentFixture<PanelEditComponent>;
let mockSavedQueriesService: Partial<SavedQueriesService>;
let mockConnectionsService: Partial<ConnectionsService>;
let mockUiSettingsService: Partial<UiSettingsService>;
Expand Down Expand Up @@ -77,7 +77,7 @@ describe('ChartEditComponent', () => {

await TestBed.configureTestingModule({
imports: [
ChartEditComponent,
PanelEditComponent,
BrowserAnimationsModule,
MatSnackBarModule,
RouterTestingModule,
Expand Down Expand Up @@ -105,7 +105,7 @@ describe('ChartEditComponent', () => {
},
],
})
.overrideComponent(ChartEditComponent, {
.overrideComponent(PanelEditComponent, {
remove: { imports: [CodeEditorModule] },
add: { imports: [MockCodeEditorComponent], schemas: [NO_ERRORS_SCHEMA] },
})
Expand All @@ -114,7 +114,7 @@ describe('ChartEditComponent', () => {
router = TestBed.inject(Router);
vi.spyOn(router, 'navigate');

fixture = TestBed.createComponent(ChartEditComponent);
fixture = TestBed.createComponent(PanelEditComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
Expand All @@ -124,7 +124,7 @@ describe('ChartEditComponent', () => {
});

it('should initialize in create mode when no query-id', () => {
const testable = component as ChartEditComponentTestable;
const testable = component as PanelEditComponentTestable;
expect(testable.isEditMode()).toBe(false);
});

Expand All @@ -133,35 +133,35 @@ describe('ChartEditComponent', () => {
});

it('should have correct default chart type', () => {
const testable = component as ChartEditComponentTestable;
const testable = component as PanelEditComponentTestable;
expect(testable.chartType()).toBe('bar');
});

describe('canSave computed', () => {
it('should return false when name is empty', () => {
const testable = component as ChartEditComponentTestable;
const testable = component as PanelEditComponentTestable;
testable.queryName.set('');
testable.queryText.set('SELECT 1');
expect(testable.canSave()).toBe(false);
});

it('should return false when query is empty', () => {
const testable = component as ChartEditComponentTestable;
const testable = component as PanelEditComponentTestable;
testable.queryName.set('Test');
testable.queryText.set('');
expect(testable.canSave()).toBe(false);
});

it('should return true when name and query are provided', () => {
const testable = component as ChartEditComponentTestable;
const testable = component as PanelEditComponentTestable;
testable.queryName.set('Test');
testable.queryText.set('SELECT 1');
testable.saving.set(false);
expect(testable.canSave()).toBe(true);
});

it('should return false when saving', () => {
const testable = component as ChartEditComponentTestable;
const testable = component as PanelEditComponentTestable;
testable.queryName.set('Test');
testable.queryText.set('SELECT 1');
testable.saving.set(true);
Expand All @@ -171,20 +171,20 @@ describe('ChartEditComponent', () => {

describe('canTest computed', () => {
it('should return false when query is empty', () => {
const testable = component as ChartEditComponentTestable;
const testable = component as PanelEditComponentTestable;
testable.queryText.set('');
expect(testable.canTest()).toBe(false);
});

it('should return true when query is provided', () => {
const testable = component as ChartEditComponentTestable;
const testable = component as PanelEditComponentTestable;
testable.queryText.set('SELECT 1');
testable.testing.set(false);
expect(testable.canTest()).toBe(true);
});

it('should return false when testing', () => {
const testable = component as ChartEditComponentTestable;
const testable = component as PanelEditComponentTestable;
testable.queryText.set('SELECT 1');
testable.testing.set(true);
expect(testable.canTest()).toBe(false);
Expand All @@ -193,7 +193,7 @@ describe('ChartEditComponent', () => {

describe('testQuery', () => {
it('should call testQuery service method', async () => {
const testable = component as ChartEditComponentTestable;
const testable = component as PanelEditComponentTestable;
testable.queryText.set('SELECT * FROM users');
await component.testQuery();
expect(mockSavedQueriesService.testQuery).toHaveBeenCalledWith('conn-1', {
Expand All @@ -202,7 +202,7 @@ describe('ChartEditComponent', () => {
});

it('should set results and columns after successful test', async () => {
const testable = component as ChartEditComponentTestable;
const testable = component as PanelEditComponentTestable;
testable.queryText.set('SELECT * FROM users');
await component.testQuery();
expect(testable.testResults()).toEqual([{ name: 'John', count: 10 }]);
Expand All @@ -211,7 +211,7 @@ describe('ChartEditComponent', () => {
});

it('should auto-select label column and first series', async () => {
const testable = component as ChartEditComponentTestable;
const testable = component as PanelEditComponentTestable;
testable.queryText.set('SELECT * FROM users');
await component.testQuery();
expect(testable.labelColumn()).toBe('name');
Expand All @@ -221,7 +221,7 @@ describe('ChartEditComponent', () => {

describe('saveQuery', () => {
it('should call createSavedQuery in create mode', async () => {
const testable = component as ChartEditComponentTestable;
const testable = component as PanelEditComponentTestable;
testable.isEditMode.set(false);
testable.queryName.set('New Query');
testable.queryText.set('SELECT 1');
Expand All @@ -237,7 +237,7 @@ describe('ChartEditComponent', () => {
});

it('should navigate to charts list after save', async () => {
const testable = component as ChartEditComponentTestable;
const testable = component as PanelEditComponentTestable;
testable.queryName.set('New Query');
testable.queryText.set('SELECT 1');
await component.saveQuery();
Expand All @@ -247,29 +247,29 @@ describe('ChartEditComponent', () => {

describe('onCodeChange', () => {
it('should update queryText', () => {
const testable = component as ChartEditComponentTestable;
const testable = component as PanelEditComponentTestable;
component.onCodeChange('SELECT * FROM table');
expect(testable.queryText()).toBe('SELECT * FROM table');
});
});

describe('hasChartData computed', () => {
it('should return false when no results', () => {
const testable = component as ChartEditComponentTestable;
const testable = component as PanelEditComponentTestable;
testable.testResults.set([]);
expect(testable.hasChartData()).toBe(false);
});

it('should return false when no series configured', () => {
const testable = component as ChartEditComponentTestable;
const testable = component as PanelEditComponentTestable;
testable.testResults.set([{ name: 'John' }]);
testable.labelColumn.set('name');
testable.seriesList.set([]);
expect(testable.hasChartData()).toBe(false);
});

it('should return true when results, label and series are set', () => {
const testable = component as ChartEditComponentTestable;
const testable = component as PanelEditComponentTestable;
testable.testResults.set([{ name: 'John', count: 10 }]);
testable.labelColumn.set('name');
testable.seriesList.set([{ value_column: 'count' }]);
Expand Down
Loading
Loading