Skip to content

Commit

Permalink
Merge pull request #5 from jcourtner/pgstats
Browse files Browse the repository at this point in the history 
Added database size to each database tab
  • Loading branch information
@chrisakinrinade
chrisakinrinade authored Dec 16, 2020
2 parents cf64f57 + 11a9ac4 commit 4594843
Show file tree
Hide file tree
Showing 8 changed files with 132 additions and 132 deletions.
46 changes: 33 additions & 13 deletions backend/channels.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const db = require('./models');
// Generate CLI commands to be executed in child process.
// updated commands to use postgres without docker (commented out docker code)
const createDBFunc = (name) => {
console.log('this is the createDBFunc')
console.log('this is the createDBFunc');
return `psql -U postgres -c "CREATE DATABASE ${name}"`;

//return `docker exec postgres-1 psql -h localhost -p 5432 -U postgres -c "CREATE DATABASE ${name}"`;
Expand All @@ -27,28 +27,27 @@ const createDBFunc = (name) => {
// };

const runSQLFunc = (dbName, file) => {
console.log('this is the runSQLFunc')
console.log('this is the runSQLFunc');
// added file param:
return `psql -U postgres -d ${dbName} -f ${file}`; // replaced /data_dump with ${file};

// return `docker exec postgres-1 psql -U postgres -d ${dbName} -f /data_dump`;
};

const runTARFunc = (dbName, file) => {
console.log('this is the runTARFunc')
console.log('this is the runTARFunc');
// added file param:
return `pg_restore -U postgres -d ${dbName} -f ${file}`; // replaced /data_dump with ${file}`;
// docker exec postgres-1 pg_restore -U postgres -d ${dbName} /data_dump`;
};
const runFullCopyFunc = (dbCopyName, file) => {
console.log('this is the runFullCopyFunc code');
console.log(file)
console.log(file);
let newFile = file[0];
console.log(newFile)
console.log(newFile);
return `pg_dump -U postgres -d ${dbCopyName} -f ${newFile}`;

// docker exec postgres-1 pg_dump -U postgres ${dbCopyName} -f /data_dump`;
//
};
const runHollowCopyFunc = (dbCopyName, file) => {
//added file as param
Expand Down Expand Up @@ -85,8 +84,16 @@ const execute = (str: string, nextStep: any) => {
// Global variable to store list of databases and tables to provide to frontend upon refreshing view.
let listObj: any;

ipcMain.on('return-db-list', (event, args) => {
db.getLists().then((data) => event.sender.send('db-lists', data));
ipcMain.on('return-db-list', (event, dbName) => {
// DB query to get the database size
let dbSize: string;
db.query(`SELECT pg_size_pretty(pg_database_size('${dbName}'));`).then(
(queryStats) => {
console.log('this is DBsize inside ipcMain when new tab is clicked: ', queryStats);
dbSize = queryStats.rows[0].pg_size_pretty;
}
);
db.getLists().then((data) => event.sender.send('db-lists', data, dbSize));
});

// Listen for skip button on Splash page.
Expand Down Expand Up @@ -121,6 +128,7 @@ ipcMain.on('upload-file', (event, filePath: string) => {
const runSQL: string = runSQLFunc(dbName, filePath); // added filepath
const runTAR: string = runTARFunc(dbName, filePath); //added filepath
const extension: string = filePath[0].slice(filePath[0].lastIndexOf('.'));
let dbSize: string;

// SEQUENCE OF EXECUTING COMMANDS
// Steps are in reverse order because each step is a callback function that requires the following step to be defined.
Expand All @@ -129,7 +137,8 @@ ipcMain.on('upload-file', (event, filePath: string) => {
async function sendLists() {
listObj = await db.getLists();
console.log('channels: ', listObj);
event.sender.send('db-lists', listObj);
// Send list of databases and tables, as well as database size to frontend.
event.sender.send('db-lists', listObj, dbSize);
// Send schema name back to frontend, so frontend can load tab name.
event.sender.send('return-schema-name', dbName);
// tell the front end to switch tabs to the newly created database
Expand All @@ -144,13 +153,21 @@ ipcMain.on('upload-file', (event, filePath: string) => {
if (extension === '.sql') runCmd = runSQL;
else if (extension === '.tar') runCmd = runTAR;
execute(runCmd, sendLists);

// DB query to get the database size
db.query(`SELECT pg_size_pretty(pg_database_size('${dbName}'));`).then(
(queryStats) => {
console.log('this is the size of the DB: ', queryStats);
dbSize = queryStats.rows[0].pg_size_pretty;
}
);
};

// Step 3: Import database file from file path into docker container
// Edit: We changed the functionality to create a file on the local machine instead of adding it to the docker container
// const step3 = () => execute(importFile, step4);

// Step 2: Change curent URI to match newly created DB
// Step 2: Change current URI to match newly created DB
const step2 = () => {
db.changeDB(dbName);
return step4(); //changing step3 to step4 to test removal of importFile func
Expand Down Expand Up @@ -187,7 +204,7 @@ ipcMain.on('input-schema', (event, data: SchemaType) => {
filePath
);
filePath = [data.schemaName + '.sql'];
console.log(filePath)
console.log(filePath);
// generate strings that are fed into execute functions later
const createDB: string = createDBFunc(dbName);

Expand All @@ -196,7 +213,6 @@ ipcMain.on('input-schema', (event, data: SchemaType) => {
const runTAR: string = runTARFunc(dbName, filePath); // added filePath
const runFullCopy: string = runFullCopyFunc(dbCopyName, filePath);
const runHollowCopy: string = runHollowCopyFunc(dbCopyName, filePath);


// determine if the file is a sql or a tar file, in the case of a copy, we will not have a filepath so we just hard-code the extension to be sql
let extension: string = '';
Expand All @@ -210,7 +226,7 @@ ipcMain.on('input-schema', (event, data: SchemaType) => {
// Step 5: Changes the pg URI to look to the newly created database and queries all the tables in that database and sends it to frontend.
async function sendLists() {
listObj = await db.getLists();
console.log('this is the async func on line 205')
console.log('this is the async func on line 205');
event.sender.send('db-lists', listObj);
// tell the front end to switch tabs to the newly created database
event.sender.send('switch-to-new', null);
Expand Down Expand Up @@ -322,6 +338,10 @@ ipcMain.on('execute-query-tracked', (event, data: QueryType) => {
db.query('EXPLAIN (FORMAT JSON, ANALYZE) ' + queryString).then(
(queryStats) => {
frontendData.queryStatistics = queryStats.rows;
console.log('query stats ROWS: ');
console.log(queryStats.rows[0]['QUERY PLAN']);
console.log('console.table of queryStats.row[0]');
console.table(queryStats.rows[0]['QUERY PLAN']);

(async function getListAsync() {
listObj = await db.getLists();
Expand Down
50 changes: 5 additions & 45 deletions backend/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { app, BrowserWindow, ipcMain, Menu } from 'electron';
import { appendFile } from 'fs/promises';
import { join } from 'path';
import { format } from 'url';
import './channels' // all channels live here - this format signals that we want to import the code even if we're not calling any of the functions. If we were to import an object from channels and not call any of the functions in this file, webpack thinks we're not using it and skips the import.
import './channels'; // all channels live here - this format signals that we want to import the code even if we're not calling any of the functions. If we were to import an object from channels and not call any of the functions in this file, webpack thinks we're not using it and skips the import.
//import execute from './channels';

const { exec } = require('child_process');
Expand Down Expand Up @@ -82,51 +82,11 @@ function createWindow() {
// Don't show until we are ready and loaded
mainWindow.once('ready-to-show', (event) => {
mainWindow.show();
}
)}
// // uncomment code below before running production build and packaging
// // const yamlPath = join(__dirname, '../../docker-compose.yml')
// // const runDocker: string = `docker-compose -f '${yamlPath}' up -d`;
// const runDocker: string = `docker-compose up -d`;
// exec(runDocker, (error, stdout, stderr) => {
// if (error) {
// console.log(`error: ${error.message}`);
// return;
// }
// if (stderr) {
// console.log(`stderr: ${stderr}`);
// return;
// }
// console.log(`${stdout}`);
// });
// });
//}
// ----
// app.on('before-quit', (event: any) => {
// // check if containers have already been pruned--else, continue with default behavior to terminate application
// if (!pruned) {
// event.preventDefault();
// // Stop and remove postgres-1 and busybox-1 Docker containers upon window exit.
// const stopContainers: string = 'docker stop postgres-1 busybox-1';
// const pruneContainers: string = 'docker rm -f postgres-1 busybox-1';
// // this command removes the volume which stores the session data for the postgres instance
// // comment this out for dev
// const pruneVolumes: string = 'docker volume rm -f seeqr_database-data';

// // use this string for production build
// // const pruneVolumes: string = 'docker volume rm -f app_database-data'

// const step4 = () => {
// pruned = true;
// app.quit();
// };
// const step3 = () => execute(pruneVolumes, step4);
// const step2 = () => execute(pruneContainers, step3);

// execute(stopContainers, step2);
});
}

// }
// });
// ----
app.on('before-quit', (event: any) => {});
// ----
// Invoke createWindow to create browser windows after Electron has been initialized.
// Some APIs can only be used after this event occurs.
Expand Down
29 changes: 19 additions & 10 deletions frontend/components/MainPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ type MainState = {
currentSchema: string;
lists: any;
loading: boolean;
dbSize: string;
};

type MainProps = {};
Expand All @@ -35,6 +36,7 @@ class MainPanel extends Component<MainProps, MainState> {
tableList: [],
},
loading: false,
dbSize: '',
};

componentDidMount() {
Expand Down Expand Up @@ -67,15 +69,21 @@ class MainPanel extends Component<MainProps, MainState> {
this.setState({ queries });
});

ipcRenderer.on('db-lists', (event: any, returnedLists: any) => {
this.setState((prevState) => ({
...prevState,
lists: {
databaseList: returnedLists.databaseList,
tableList: returnedLists.tableList,
},
}));
});
ipcRenderer.on(
'db-lists',
(event: any, returnedLists: any, returnedDbSize: string) => {
console.log('database size in FE: ', returnedDbSize);
this.setState((prevState) => ({
...prevState,
lists: {
databaseList: returnedLists.databaseList,
tableList: returnedLists.tableList,
},
dbSize: returnedDbSize,
}));
console.log('dbsize in this.state after click new tab: ', this.state);
}
);

ipcRenderer.on('switch-to-new', (event: any) => {
const newSchemaIndex = this.state.lists.databaseList.length - 1;
Expand All @@ -96,7 +104,7 @@ class MainPanel extends Component<MainProps, MainState> {

onClickTabItem(tabName) {
ipcRenderer.send('change-db', tabName);
ipcRenderer.send('return-db-list');
ipcRenderer.send('return-db-list', tabName);
this.setState({ currentSchema: tabName });
console.log('this is the onClickTabItem func', this.state);
}
Expand All @@ -123,6 +131,7 @@ class MainPanel extends Component<MainProps, MainState> {
queries={this.state.queries}
onClickTabItem={this.onClickTabItem}
tableList={this.state.lists.tableList}
databaseSize={this.state.dbSize}
/>
</div>
);
Expand Down
7 changes: 6 additions & 1 deletion frontend/components/rightPanel/SchemaContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ type SchemaContainerProps = {
queries: any;
currentSchema: string;
tableList: string[];
databaseSize: string;
};

type state = {
Expand All @@ -27,7 +28,11 @@ export class SchemaContainer extends Component<SchemaContainerProps> {
<div id="test-panels">
<div id="schema-left">
<div>
<Query currentSchema={this.props.currentSchema} tableList={this.props.tableList} />
<Query
currentSchema={this.props.currentSchema}
tableList={this.props.tableList}
dbSize={this.props.databaseSize}
/>
</div>
<div>
<Data queries={this.props.queries} />
Expand Down
Loading

0 comments on commit 4594843

Please sign in to comment.