FEATURE/queries-via-UI

Author: serhii.zahuba

frontend/package-lock.json

@@ -22,7 +22,7 @@
     "tailwindcss": "^4.1.7"
   },
   "devDependencies": {
-    "@eslint/js": "^9.25.0",
+    "@eslint/js": "^9.35.0",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",

frontend/package.json

@@ -1,19 +1,18 @@
-// src/entity/api/sqlQueryApi.ts
-import { apiHelper } from '../../../shared/api/apiHelper';
-import RequestOptions from '../../../shared/api/RequestOptions';
-import type { ExecuteResponse } from '../model/ExecuteResponse';
-
-export type ExecuteRequest = {
-    databaseId: string; // was database_id
-    sql: string;
-    maxRows?: number;    // was max_rows
-    timeoutSec?: number; // was timeout_sec
-};
-
-
-export const sqlQueryApi = {
-    execute: async (payload: ExecuteRequest): Promise<ExecuteResponse> => {
-        const opts = new RequestOptions().setBody(JSON.stringify(payload));
-        return apiHelper.fetchPostJson<ExecuteResponse>('/api/v1/sqlquery/execute', opts);
-    },
-};
+// src/entity/api/sqlQueryApi.ts
+import RequestOptions from '../../../shared/api/RequestOptions';
+import { apiHelper } from '../../../shared/api/apiHelper';
+import type { ExecuteResponse } from '../model/ExecuteResponse';
+
+export type ExecuteRequest = {
+  databaseId: string; // was database_id
+  sql: string;
+  maxRows?: number; // was max_rows
+  timeoutSec?: number; // was timeout_sec
+};
+
+export const sqlQueryApi = {
+  execute: async (payload: ExecuteRequest): Promise<ExecuteResponse> => {
+    const opts = new RequestOptions().setBody(JSON.stringify(payload));
+    return apiHelper.fetchPostJson<ExecuteResponse>('/api/v1/sqlquery/execute', opts);
+  },
+};

frontend/src/entity/query/api/sqlQueryApi.ts

@@ -1,3 +1,3 @@
-// src/entity/query/index.ts
-export * from './api/sqlQueryApi';
-export * from './model/ExecuteResponse';
+// src/entity/query/index.ts
+export * from './api/sqlQueryApi';
+export * from './model/ExecuteResponse';

frontend/src/entity/query/index.ts

@@ -1,7 +1,7 @@
-export interface ExecuteResponse {
-    columns: string[];
-    rows: unknown[][];
-    rowCount: number;      // was row_count
-    truncated: boolean;
-    executionMs: number;   // was execution_ms
-}
+export interface ExecuteResponse {
+  columns: string[];
+  rows: unknown[][];
+  rowCount: number; // was row_count
+  truncated: boolean;
+  executionMs: number; // was execution_ms
+}

frontend/src/entity/query/model/ExecuteResponse.ts

@@ -6,9 +6,9 @@ import { type Database, databaseApi } from '../../../entity/databases';
 import { BackupsComponent } from '../../backups';
 import { HealthckeckAttemptsComponent } from '../../healthcheck';
 import { MetricsComponent } from '../../monitoring/metrics';
-import { DatabaseConfigComponent } from './DatabaseConfigComponent';
 //import { SqlQueryComponent } from '../../query/postgresql/SqlQueryComponent';
 import { SqlQueryComponent } from '../../sqlquery';
+import { DatabaseConfigComponent } from './DatabaseConfigComponent';
 
 interface Props {
   contentHeight: number;
@@ -23,7 +23,9 @@ export const DatabaseComponent = ({
   onDatabaseChanged,
   onDatabaseDeleted,
 }: Props) => {
-  const [currentTab, setCurrentTab] = useState<'config' | 'backups' | 'metrics' | 'sqlquery' >('backups');
+  const [currentTab, setCurrentTab] = useState<'config' | 'backups' | 'metrics' | 'sqlquery'>(
+    'backups',
+  );
 
   const [database, setDatabase] = useState<Database | undefined>();
   const [editDatabase, setEditDatabase] = useState<Database | undefined>();
@@ -66,13 +68,12 @@ export const DatabaseComponent = ({
           Metrics
         </div>
 
-        < div
-            className={`cursor-pointer rounded-tl-md rounded-tr-md px-6 py-2 ${currentTab === 'sqlquery' ? 'bg-white' : 'bg-gray-200'}`}
-           onClick={() => setCurrentTab('sqlquery')}
+        <div
+          className={`cursor-pointer rounded-tl-md rounded-tr-md px-6 py-2 ${currentTab === 'sqlquery' ? 'bg-white' : 'bg-gray-200'}`}
+          onClick={() => setCurrentTab('sqlquery')}
         >
           SqlQuery
         </div>
-
       </div>
 
       {currentTab === 'config' && (
@@ -92,11 +93,11 @@ export const DatabaseComponent = ({
         </>
       )}
       {currentTab === 'metrics' && <MetricsComponent databaseId={database.id} />}
-        {currentTab === 'sqlquery' && (
-                <div className="mt-4">
-                      <SqlQueryComponent databaseId={database.id} />
-                    </div>
-              )}
+      {currentTab === 'sqlquery' && (
+        <div className="mt-4">
+          <SqlQueryComponent databaseId={database.id} />
+        </div>
+      )}
     </div>
   );
-};
+};

frontend/src/features/databases/ui/DatabaseComponent.tsx

@@ -1,2 +1,2 @@
-// src/features/sqlquery/index.ts
-export { SqlQueryComponent } from './ui/SqlQueryComponent';
+// src/features/sqlquery/index.ts
+export { SqlQueryComponent } from './ui/SqlQueryComponent';