Skip to content

Commit 647af8b

Browse files
authored
Improve config page ui (#7)
1 parent 6a80db9 commit 647af8b

File tree

5 files changed

+8480
-516
lines changed

5 files changed

+8480
-516
lines changed

README.md

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
7. [Known issues, caveats and troubleshooting](#issues)
2020
8. [Future plans](#future)
2121

22-
22+
2323
*Please have a quick look over the [Known issues, caveats and troubleshooting](#issues) section before using the app.*
2424

2525
<a name="what"></a>
@@ -41,22 +41,22 @@ Csv2Sql can automatically...
4141

4242
* It is **completely automatic**, provide a path with hundereds of csvs having size in gigabytes and start the application, it will handle the rest!
4343

44-
* It comes in **2 flavours**, as a **[command line tool](#cmd)** or a **[browser user interface](dashboard)**, and is super easy to configure and use.
44+
* It comes in **2 flavours**, as a **[command line tool](#cmd)** or a **[browser user interface](#dashboard)**, and is super easy to configure and use.
4545

4646
* While you can have maximum utilization of your cpu to get execellent performance, csv2sql is fully **customizable**, also comes with [lots of options](#cmdargs) which can be changed to fine tune the application based on requirement and to lower down resource usage and database load.
4747

4848
* Csv2Sql supports **partial operations**, so if you only want to generate a schema file from the csvs without touching the database or you want to only insert data from the csvs into already created tables without creating the tables again or just validate already imported data, Csv2Sql has got you covere !
4949

5050
<a name="cmd"></a>
5151
## Using from command line
52-
52+
5353
Csv2sql can be easily used as a command line tool, with lots of customizable options passing by different command line arguments.
5454

5555
<p align="center">
5656
<img src="https://raw.githubusercontent.com/Arp-G/csv2sql/master/.github/images/cmd.gif"
5757
alt="command line app demo"/>
5858
</p>
59-
59+
6060
<a name="cmdinstall"></a>
6161
### Installation and usage:
6262

@@ -74,7 +74,7 @@ sudo apt-get update
7474
sudo apt-get install esl-erlang
7575
```
7676

77-
Download the executable binary from the latest release in this repository
77+
Download the executable binary from the latest release in this repository
7878
and run the executable using: ```./csv2sql --<argument>```
7979

8080
The next section describes all the avialable command line arguments.
@@ -86,7 +86,7 @@ You can pass various command line arguments to Csv2Sql to configure how to proce
8686

8787
A description of all the available command line arguments that can be used are given below:
8888

89-
89+
9090
| Flag | Description | Default value |
9191
|:-----------:|----------------------|------|
9292
| \-\-schema-file-path | The location were the generated schema file will be stored | If no value is supplied it saves the generated schema file in the same directory as the source csv files specified by "\-\-source-csv-directory" flag |
@@ -111,7 +111,7 @@ A description of all the available command line arguments that can be used are g
111111
| \-\-pool-size | The pool_size controls how many connections you want to the database. | 20 |
112112
| \-\-queue-target | The time to wait for a database connection | 5000 |
113113
| \-\-queue-interval | If all connections checked out during a :queue_interval takes more than :queue_target, then we double the :queue_target. | 1000 |
114-
114+
115115
<a name="cmdexamples"></a>
116116
### Examples:
117117

@@ -135,9 +135,9 @@ Here "postgres" is the database type.
135135

136136
---
137137
##### Only validate imported csv:
138-
138+
139139
`./csv2sql --skip-make-schema --skip-insert-data --imported-csv-directory "/home/user/Desktop/imported-csvs" --db-connection-string "mysql:root:pass@localhost/test_csv"`
140-
140+
141141
Here we are running simple validation check over a previously imported csvs, this check will NOT compare the actual data but will only compare the row count in the csv and in the database.
142142

143143
---
@@ -157,18 +157,18 @@ This will create empty table in the database after analyzing the csvs.
157157

158158
`./csv2sql --source-csv-directory "/home/user/Desktop/csvs" --worker-count 1 --db-connection-string "mysql:root:pass@localhost/test_csv"`
159159

160-
---
160+
---
161161
##### Enable logs, to log the queries being executed:
162162

163163
`./csv2sql --source-csv-directory "/home/user/Desktop/csvs" --log debug --db-connection-string "mysql:root:pass@localhost/test_csv"`
164164

165-
---
165+
---
166166
##### Set the number of workers inserting data into the database, lowering the value will lead to slow performance but lesser load on database, a higher value can lead to too many database connection errors:
167167

168168
`./csv2sql --source-csv-directory "/home/user/Desktop/csvs" --db-worker-count 2 --db-connection-string "mysql:root:pass@localhost/test_csv"`
169169

170170
<a name="dashboard"></a>
171-
## Using csv2sql from your browser
171+
## Using csv2sql from your browser
172172

173173
For ease of use csv2sql also has a browser interface which can be used to easily configure the tool and also provides and execent interface that shows what is the progress of the various running tasks, which files are currently being processed, the current cpu and memory usage, etc.
174174

@@ -201,11 +201,11 @@ Now go to the `Change configuration` tab, and enter the relevant configuration d
201201
Whenever your are done, click on the `Start` tab and click on `Start` button below to start the import process.
202202

203203
<a name="sourceinstall"></a>
204-
## Running the app from source code
204+
## Running the app from source code
205205

206206
You must have elixir and mysql/postgresql installed in your system to run Csv2Sql.
207207

208-
To use the app just clone this repository and then install dependencies
208+
To use the app just clone this repository and then install dependencies
209209
by `mix deps.get`
210210

211211
Finally, start the application by ```mix phx.server```
@@ -215,7 +215,7 @@ This runs the phoenix server at [localhost:4000](localhost:4000) which provides
215215
Thats all !
216216

217217
<a name="support"></a>
218-
## Supported data types
218+
## Supported data types
219219

220220
Csv2sql currently supports [MySql](https://www.mysql.com/) and [PostgreSQL](https://www.postgresql.org/) database.
221221

@@ -233,7 +233,7 @@ Csv2Sql will map data in CSVs into one of the following datatypes:
233233
| text | TEXT | TEXT |
234234

235235
All other types of data, will map to either VARCHAR or TEXT.
236-
236+
237237
<a name="issues"></a>
238238
## Known issues, caveats and troubleshooting:
239239

@@ -252,7 +252,7 @@ In this case, please try running the app again.
252252
* Csvsql uses the csv file names as table names, make sure that the csv file names are valid table names.
253253

254254
* Make sure your csvs have correct encoding and valid column names to avoid errors.(like a csv having duplicated column names will lead to errors when inserting in to the database).
255-
255+
256256
* If you face database connection timeout errors try reducing the worker and db_worker count in the configurations or change the database timeout, pool size and other related database configurations.
257257

258258
* In case of errors, check your terminal for a clue, or create an issue.

apps/dashboard/assets/css/config_live.scss

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,9 @@
1616
}
1717

1818
.toggle-configs {
19-
position: absolute;
20-
flex-direction: column;
21-
right: 2%;
22-
border-radius: 6px;
23-
box-shadow: 0 2px 5px rgba(201,209,230,.5), 0 7px 20px rgba(201,209,230,.75);
24-
background-color: #fff;
25-
margin: 30px;
26-
width: 250px;
27-
padding-top: 20px;
19+
box-shadow: 0;
20+
flex-direction: row;
21+
flex-basis: 680px;
2822
}
2923

3024
.toggle-config-item {
@@ -58,20 +52,25 @@
5852
}
5953

6054
.legend-heading, .toggle-config-heading {
61-
align-self: center;
55+
text-align: center;
6256
font-weight: bold;
6357
font-style: italic;
6458
}
6559

60+
.toggle-config-heading {
61+
flex-grow: 2;
62+
border: none !important
63+
}
64+
6665
.legend{
67-
position: absolute;
6866
flex-direction: column;
67+
width: 150px;
6968
margin: 30px;
70-
width: 13%;
7169
border-radius: 6px;
7270
box-shadow: 0 2px 5px rgba(201,209,230,.5), 0 7px 20px rgba(201,209,230,.75);
7371
background-color: #fff;
7472
padding: 1rem;
73+
flex-basis: 260px;
7574
}
7675

7776
.legend-item{
@@ -89,7 +88,6 @@
8988
}
9089

9190
.legend-color-item{
92-
position: absolute;
9391
right: 10px;
9492
width: 20px;
9593
height: 20px;

0 commit comments

Comments
 (0)