Skip to content

Commit

Permalink
DB tree refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
@RFbkak37y3kIY
RFbkak37y3kIY committed Jul 17, 2022
1 parent 4797648 commit ab2bc65
Show file tree
Hide file tree
Showing 4 changed files with 83 additions and 60 deletions.
8 changes: 8 additions & 0 deletions src/app/helper/functions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,14 @@ export class Functions {

}

export function promiseWait(sec = 1000): Promise<any> {
return new Promise<any>((require) => {
setTimeout(() => {
require(true);
}, sec)
})
}

export function hash(str: string, lenHash: number = 32) {
lenHash = lenHash || 32;
str = str || "";
Expand Down
37 changes: 17 additions & 20 deletions src/app/pages/home.page/home.page.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,18 @@
<mat-icon>menu</mat-icon>
</button>
<span style="font-size: 20px !important">ClickHouse Mate</span>
<span style="margin-left: 1rem;margin-bottom: -15px;" *ngIf="dbItems && dbItems.length > 1">
<mat-form-field appearance="outline" >
<mat-label>Current DataBase</mat-label>
<mat-select [(value)]="selectedDB">
<mat-option *ngFor="let item of dbItems" [value]="item" [disabled]="item.value.isSucceeded !== true">
{{ item.viewValue }}
</mat-option>
</mat-select>
</mat-form-field>
</span>
<span class="example-spacer"></span>
<!-- <span> {{ dbLink }} : {{ dbLogin }} </span> -->

<button
[matTooltip]="'READONLY TURN ' + (isReadonly ? 'ON' : 'OFF') + ''"
mat-icon-button
Expand Down Expand Up @@ -45,18 +55,18 @@
>
<mat-accordion class="dashboard-accordion">
<mat-expansion-panel
[expanded]="!!this.dbTreeData && this.dbTreeData.length > 0"
[expanded]="!!dbTreeData && dbTreeData.length > 0"
>
<mat-expansion-panel-header>
<mat-panel-title> DB Tree </mat-panel-title>
</mat-expansion-panel-header>
<div
*ngIf="!this.dbTreeData || this.dbTreeData.length === 0"
*ngIf="!dbTreeData || dbTreeData.length === 0"
style="height: 300px"
>
<loading></loading>
</div>
<div *ngIf="this.dbTreeData.length > 0">
<div *ngIf="dbTreeData && dbTreeData.length > 0">
<tree-filter
[data]="dbTreeData"
[isFilter]="false"
Expand Down Expand Up @@ -90,14 +100,7 @@
{{ item }}
</div>
</mat-expansion-panel>
<!-- <mat-expansion-panel *ngIf="currentRow.size > 0">
{{ currentRow.size }}
<mat-expansion-panel-header>
<mat-panel-title> Row Details </mat-panel-title>
</mat-expansion-panel-header>

<app-row-details [row]="currentRow"> </app-row-details>
</mat-expansion-panel> -->
<mat-expansion-panel
*ngIf="isDocsShows"
[expanded]="isDocsShows"
Expand All @@ -106,7 +109,6 @@
<mat-panel-title> Docs </mat-panel-title>
</mat-expansion-panel-header>

<!-- <app-row-details [row]="currentRow"> </app-row-details> -->
<app-ch-help
style="height: calc(100% - 8rem)"
></app-ch-help>
Expand Down Expand Up @@ -177,20 +179,15 @@ <h1>No Data</h1>
</as-split-area>
</as-split>
</as-split-area>
<!-- <as-split-area
[visible]="isDocsShows"
[size]="15"
[order]="2"
style="display: flex; overflow: hidden"
>
<app-ch-help></app-ch-help>
</as-split-area> -->
</as-split>
</div>

<app-login-form
[isAccess]="isAccess"
[settings]="{ dbLink, dbLogin, dbPassword }"
[errorMessage]="authErrorMessage"
[successMessage]="authSuccessMessage"
(ready)="connectToDB($event)"
(testConnection)="connectToDB($event, true)"
(changeDbItems)="setDBItems($event)"
></app-login-form>
96 changes: 57 additions & 39 deletions src/app/pages/home.page/home.page.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { DocsService } from './../../services/docs.service';
import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { ApiService, QUERY_LIST } from 'src/app/services/api.service';
import { saveToFile } from '@app/helper/windowFunctions';
import { getStorage, saveToFile, setStorage } from '@app/helper/windowFunctions';
import { Row } from '@app/models/grid.model';
import { Dictionary } from '@app/components/ace-editor-ext/dictionary-default';
import { promiseWait } from '@app/helper/functions';

@Component({
templateUrl: './home.page.component.html',
Expand All @@ -15,13 +16,28 @@ export class HomePageComponent implements OnInit {
isReadonly = true;
isDarkMode = false;
isDocsShows = false;

dbItems: any[] = [];
isLeftPanel = true;
dbLink: string = '';
dbLogin: string = '';
dbPassword: string = '';
sqlRequest: any = 'SHOW DATABASES';

_selectedDB: any;
set selectedDB(val: any) {
console.log('set new value', val);
if (this._selectedDB && this._selectedDB?.value?.dbLink !== val?.value?.dbLink) {
this._selectedDB = val;
this.connectToDB(this._selectedDB.value);
this.cdr.detectChanges();
} else if (!this._selectedDB) {
// start app
this._selectedDB = val;
this.cdr.detectChanges();
}
}
get selectedDB() {
return this._selectedDB;
}
dictionary: Dictionary[] = [];

dataForFile: any = null;
Expand All @@ -30,7 +46,7 @@ export class HomePageComponent implements OnInit {
columns: any[] = [];
errorMessage: string = '';
authErrorMessage: string = '';

authSuccessMessage: string = '';
PopularQueries: string[] = [
'SHOW DATABASES',
'SHOW TABLES',
Expand All @@ -54,15 +70,15 @@ export class HomePageComponent implements OnInit {
}

const auth: any = getStorage('AUTH_DATA');
console.log("auth", !!auth.dbURL)
if (auth.dbURL) {
console.log("auth", !!auth?.dbURL)
if (auth?.dbURL) {
this.dbLink = auth.dbURL;
this.dbLogin = auth.login;
this.dbPassword = auth.password;
} else {
this.isAccess = false;
}
if (!!auth.dbURL) {
if (!!auth?.dbURL) {
this.connectToDB().then(() => {
this.getDynamicDictionary();
});
Expand Down Expand Up @@ -126,7 +142,7 @@ export class HomePageComponent implements OnInit {
type: 'database',
children: tablesList?.data?.map((t: any) => {
const [tableName] = t;
const tableId = `${dbName}.${tableName}`;
const tableId = `${dbName}."${tableName}"`;
this.dictionary.push({
name: tableId,
icon: 3,
Expand All @@ -137,7 +153,8 @@ export class HomePageComponent implements OnInit {
type = 'non-table';
}
return {
name: tableId,
name: tableName,
description: tableId,
type
}
})
Expand All @@ -158,7 +175,7 @@ export class HomePageComponent implements OnInit {

onDbChoose(event?: any): void {
const LIMIT = 50;
const sqlStr = `SELECT * FROM ${event.name} LIMIT ${LIMIT}`;
const sqlStr = `SELECT * FROM ${event.description} LIMIT ${LIMIT}`;
if (event?.level === 1) {
this.SQL(sqlStr)
}
Expand Down Expand Up @@ -256,7 +273,7 @@ export class HomePageComponent implements OnInit {
}
this.SQL(this.sqlRequest);
}
async connectToDB(event?: any) {
async connectToDB(event?: any, isTestConnection = false) {
if (event) {
this.dbLink = event.dbLink;
this.dbLogin = event.dbLogin;
Expand All @@ -270,18 +287,28 @@ export class HomePageComponent implements OnInit {
this.apiService.setLoginData(auth);
const res = await this.SQL(QUERY_LIST.getDatabases, true);
if (res) {
setStorage('AUTH_DATA', auth)
this.formatData({ meta: [], data: [] });
this.errorMessage = '';
this.authErrorMessage = '';
this.isAccess = true;
this.initDbTree();

this.isLoadingDetails = true;
this.cdr.detectChanges();
await promiseWait(3000);
this.getHash();
this.isLoadingDetails = false;
this.errorMessage = '';
this.authSuccessMessage = '';
if (!isTestConnection) {
setStorage('AUTH_DATA', auth)
this.formatData({ meta: [], data: [] });
this.isAccess = true;
this.initDbTree();

this.isLoadingDetails = true;
this.cdr.detectChanges();
await promiseWait(3000);
this.getHash();
this.isLoadingDetails = false;
} else {
this.authSuccessMessage = 'Connection is successfully established.';
setTimeout(() => {
this.authSuccessMessage = '';
this.cdr.detectChanges();
}, 5000);
}
// this.isAccess = false;
this.cdr.detectChanges();
return true;
} else {
Expand All @@ -290,7 +317,6 @@ export class HomePageComponent implements OnInit {
this.cdr.detectChanges();
}
this.errorMessage = '';
this.isAccess = false;
return false;
}
openRow(event: Map<string, any>) {
Expand Down Expand Up @@ -383,20 +409,12 @@ export class HomePageComponent implements OnInit {
);
return `${rows} rows in set. Elapsed ${elapsed}. Processed ${rows_read} rows, ${bytes_read} (${rowsPerSec} rows/s. ${bytesPerSec}/s.)`;
}
setDBItems(DBItems: any) {
this.dbItems = DBItems;
this.selectedDB = DBItems.find((item: any) => {
return item.value.dbLink === this.dbLink
})
console.log(this.dbItems, this.selectedDB);
this.cdr.detectChanges();
}
}

export function promiseWait(sec = 1000): Promise<any> {
return new Promise<any>((require) => {
setTimeout(() => {
require(true);
}, sec)
})
}
export function setStorage(key: string, value: any): void {
localStorage.setItem(key, JSON.stringify(value));
}

export function getStorage(key: string) {
return JSON.parse(localStorage.getItem(key) || '{}');
}

2 changes: 1 addition & 1 deletion src/app/workers/httpClientWorker.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export class HttpClientWorker {
}

xhr.onload = (data) => {
console.log({ data });
// console.log({ data });
if (xhr.status === 200) {
resolve(xhr);
} else {
Expand Down

0 comments on commit ab2bc65

Please sign in to comment.