Quantcast

[pgAdmin4] [PATCH] History Tab rewrite in React

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
9 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

[pgAdmin4] [PATCH] History Tab rewrite in React

Matthew Kleiman
Hi Hackers!

Don't panic, this patch is for AFTER 1.5 release. ;-)


0001-Bring-React-into-the-codebase.patch is an infrastructural change. This patch brings in the React.js library and all of the tools that are needed for us to use React code in this project. It includes a webpack bundler to package and minify our javascript, a js linter to help keep the javascript code clean, and the Grunt taskrunner to manage these tasks.

0002-Creates-query-history-list.patch replaces the existing history tab with a React-based history component. The current patch brings us to feature-parity with the current application. However, we plan on continuing work on the History tab as we discussed. This is the smallest digestible chunk of work that we could send as a committable patch after 1.5 is cut.

Next Steps for History Tab
We are continuing to improve the user experience of the history tab. We have a series of stories lined up that lead us towards a further redesigned history tab. As we add the right hand panel and each query metadata item to it, we will be removing each query metadata item from the list view accordingly. 

Here is the design from one of the later stories:
Inline image 1

Regards,
Shruti & Matt



--
Sent via pgadmin-hackers mailing list ([hidden email])
To make changes to your subscription:
http://www.postgresql.org/mailpref/pgadmin-hackers

0001-Bring-React-into-the-codebase.patch (395K) Download Attachment
0002-Creates-query-history-list.patch (64K) Download Attachment
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [pgAdmin4] [PATCH] History Tab rewrite in React

Murtuza Zabuawala
Hi Matt,

I'm on macOS(10.10.5) & not able to run pgAdmin4 through console/terminal (with virtual environment activated), earlier it used to work properly but after applying given two patches it started throwing error.

After applying the patch

(venv_pg4) murtuza@Laptop217:~/Documents/projects/pgadmin4$ python web/pgAdmin4.py

Starting pgAdmin 4. Please navigate to http://0.0.0.0:5050 in your browser.

/Library/Frameworks/Python.framework/Versions/3.5/Resources/Python.app/Contents/MacOS/Python: can't open file 'web/pgAdmin4.py': [Errno 2] No such file or directory

(venv_pg4) murtuza@Laptop217:~/Documents/projects/pgadmin4$ python --version

Python 3.5.0

(venv_pg4) murtuza@Laptop217:~/Documents/projects/pgadmin4$ python web/pgAdmin4.py

Starting pgAdmin 4. Please navigate to http://0.0.0.0:5050 in your browser.

/Library/Frameworks/Python.framework/Versions/3.5/Resources/Python.app/Contents/MacOS/Python: can't open file 'web/pgAdmin4.py': [Errno 2] No such file or directory

(venv_pg4) murtuza@Laptop217:~/Documents/projects/pgadmin4


 And when I removed the patch and try again then it started properly. 

After removing the patch

(venv_pg4) murtuza@Laptop217:~/Documents/projects/pgadmin4$ git pull

Already up-to-date.

(venv_pg4) murtuza@Laptop217:~/Documents/projects/pgadmin4$ python web/pgAdmin4.py

Starting pgAdmin 4. Please navigate to http://0.0.0.0:5050 in your browser.

Starting pgAdmin 4. Please navigate to http://0.0.0.0:5050 in your browser.


Let me know if I missed anything here.


--
Regards,
Murtuza Zabuawala
EnterpriseDB: http://www.enterprisedb.com
The Enterprise PostgreSQL Company


On Tue, May 16, 2017 at 3:07 AM, Matthew Kleiman <[hidden email]> wrote:
Hi Hackers!

Don't panic, this patch is for AFTER 1.5 release. ;-)


0001-Bring-React-into-the-codebase.patch is an infrastructural change. This patch brings in the React.js library and all of the tools that are needed for us to use React code in this project. It includes a webpack bundler to package and minify our javascript, a js linter to help keep the javascript code clean, and the Grunt taskrunner to manage these tasks.

0002-Creates-query-history-list.patch replaces the existing history tab with a React-based history component. The current patch brings us to feature-parity with the current application. However, we plan on continuing work on the History tab as we discussed. This is the smallest digestible chunk of work that we could send as a committable patch after 1.5 is cut.

Next Steps for History Tab
We are continuing to improve the user experience of the history tab. We have a series of stories lined up that lead us towards a further redesigned history tab. As we add the right hand panel and each query metadata item to it, we will be removing each query metadata item from the list view accordingly. 

Here is the design from one of the later stories:
Inline image 1

Regards,
Shruti & Matt



--
Sent via pgadmin-hackers mailing list ([hidden email])
To make changes to your subscription:
http://www.postgresql.org/mailpref/pgadmin-hackers


Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [pgAdmin4] [PATCH] History Tab rewrite in React

Dave Page-7
On my machine it aborts with:

2017-05-18 09:45:14,516: ERROR pgadmin: Unable to generate javascript
2017-05-18 09:45:14,516: ERROR pgadmin: To run the app ensure that grunt is installed globally and that yarn install command runs successfully
Traceback (most recent call last):
  File "pgadmin4.py", line 64, in <module>
    raise Exception("No generated javascript, aborting")
Exception: No generated javascript, aborting

I installed grunt both locally and globally, but it didn't help.

On Thu, May 18, 2017 at 7:13 AM, Murtuza Zabuawala <[hidden email]> wrote:
Hi Matt,

I'm on macOS(10.10.5) & not able to run pgAdmin4 through console/terminal (with virtual environment activated), earlier it used to work properly but after applying given two patches it started throwing error.

After applying the patch

(venv_pg4) murtuza@Laptop217:~/Documents/projects/pgadmin4$ python web/pgAdmin4.py

Starting pgAdmin 4. Please navigate to http://0.0.0.0:5050 in your browser.

/Library/Frameworks/Python.framework/Versions/3.5/Resources/Python.app/Contents/MacOS/Python: can't open file 'web/pgAdmin4.py': [Errno 2] No such file or directory

(venv_pg4) murtuza@Laptop217:~/Documents/projects/pgadmin4$ python --version

Python 3.5.0

(venv_pg4) murtuza@Laptop217:~/Documents/projects/pgadmin4$ python web/pgAdmin4.py

Starting pgAdmin 4. Please navigate to http://0.0.0.0:5050 in your browser.

/Library/Frameworks/Python.framework/Versions/3.5/Resources/Python.app/Contents/MacOS/Python: can't open file 'web/pgAdmin4.py': [Errno 2] No such file or directory

(venv_pg4) murtuza@Laptop217:~/Documents/projects/pgadmin4


 And when I removed the patch and try again then it started properly. 

After removing the patch

(venv_pg4) murtuza@Laptop217:~/Documents/projects/pgadmin4$ git pull

Already up-to-date.

(venv_pg4) murtuza@Laptop217:~/Documents/projects/pgadmin4$ python web/pgAdmin4.py

Starting pgAdmin 4. Please navigate to http://0.0.0.0:5050 in your browser.

Starting pgAdmin 4. Please navigate to http://0.0.0.0:5050 in your browser.


Let me know if I missed anything here.


--
Regards,
Murtuza Zabuawala
EnterpriseDB: http://www.enterprisedb.com
The Enterprise PostgreSQL Company


On Tue, May 16, 2017 at 3:07 AM, Matthew Kleiman <[hidden email]> wrote:
Hi Hackers!

Don't panic, this patch is for AFTER 1.5 release. ;-)


0001-Bring-React-into-the-codebase.patch is an infrastructural change. This patch brings in the React.js library and all of the tools that are needed for us to use React code in this project. It includes a webpack bundler to package and minify our javascript, a js linter to help keep the javascript code clean, and the Grunt taskrunner to manage these tasks.

0002-Creates-query-history-list.patch replaces the existing history tab with a React-based history component. The current patch brings us to feature-parity with the current application. However, we plan on continuing work on the History tab as we discussed. This is the smallest digestible chunk of work that we could send as a committable patch after 1.5 is cut.

Next Steps for History Tab
We are continuing to improve the user experience of the history tab. We have a series of stories lined up that lead us towards a further redesigned history tab. As we add the right hand panel and each query metadata item to it, we will be removing each query metadata item from the list view accordingly. 

Here is the design from one of the later stories:
Inline image 1

Regards,
Shruti & Matt



--
Sent via pgadmin-hackers mailing list ([hidden email])
To make changes to your subscription:
http://www.postgresql.org/mailpref/pgadmin-hackers





--
Dave Page
Blog: http://pgsnake.blogspot.com
Twitter: @pgsnake

EnterpriseDB UK: http://www.enterprisedb.com
The Enterprise PostgreSQL Company
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [pgAdmin4] [PATCH] History Tab rewrite in React

Murtuza Zabuawala

Go to 'pgadmin4/web' directory

Try running,

run 'yarn install'

(if you have installed globally)
then run 'grunt' 
OR
run './node_modules/grunt-cli/bin/grunt'


Then run pgAdmin4

--
Regards,
Murtuza Zabuawala
EnterpriseDB: http://www.enterprisedb.com
The Enterprise PostgreSQL Company


On Thu, May 18, 2017 at 2:18 PM, Dave Page <[hidden email]> wrote:
On my machine it aborts with:

2017-05-18 09:45:14,516: ERROR pgadmin: Unable to generate javascript
2017-05-18 09:45:14,516: ERROR pgadmin: To run the app ensure that grunt is installed globally and that yarn install command runs successfully
Traceback (most recent call last):
  File "pgadmin4.py", line 64, in <module>
    raise Exception("No generated javascript, aborting")
Exception: No generated javascript, aborting

I installed grunt both locally and globally, but it didn't help.

On Thu, May 18, 2017 at 7:13 AM, Murtuza Zabuawala <[hidden email]> wrote:
Hi Matt,

I'm on macOS(10.10.5) & not able to run pgAdmin4 through console/terminal (with virtual environment activated), earlier it used to work properly but after applying given two patches it started throwing error.

After applying the patch

(venv_pg4) murtuza@Laptop217:~/Documents/projects/pgadmin4$ python web/pgAdmin4.py

Starting pgAdmin 4. Please navigate to http://0.0.0.0:5050 in your browser.

/Library/Frameworks/Python.framework/Versions/3.5/Resources/Python.app/Contents/MacOS/Python: can't open file 'web/pgAdmin4.py': [Errno 2] No such file or directory

(venv_pg4) murtuza@Laptop217:~/Documents/projects/pgadmin4$ python --version

Python 3.5.0

(venv_pg4) murtuza@Laptop217:~/Documents/projects/pgadmin4$ python web/pgAdmin4.py

Starting pgAdmin 4. Please navigate to http://0.0.0.0:5050 in your browser.

/Library/Frameworks/Python.framework/Versions/3.5/Resources/Python.app/Contents/MacOS/Python: can't open file 'web/pgAdmin4.py': [Errno 2] No such file or directory

(venv_pg4) murtuza@Laptop217:~/Documents/projects/pgadmin4


 And when I removed the patch and try again then it started properly. 

After removing the patch

(venv_pg4) murtuza@Laptop217:~/Documents/projects/pgadmin4$ git pull

Already up-to-date.

(venv_pg4) murtuza@Laptop217:~/Documents/projects/pgadmin4$ python web/pgAdmin4.py

Starting pgAdmin 4. Please navigate to http://0.0.0.0:5050 in your browser.

Starting pgAdmin 4. Please navigate to http://0.0.0.0:5050 in your browser.


Let me know if I missed anything here.


--
Regards,
Murtuza Zabuawala
EnterpriseDB: http://www.enterprisedb.com
The Enterprise PostgreSQL Company


On Tue, May 16, 2017 at 3:07 AM, Matthew Kleiman <[hidden email]> wrote:
Hi Hackers!

Don't panic, this patch is for AFTER 1.5 release. ;-)


0001-Bring-React-into-the-codebase.patch is an infrastructural change. This patch brings in the React.js library and all of the tools that are needed for us to use React code in this project. It includes a webpack bundler to package and minify our javascript, a js linter to help keep the javascript code clean, and the Grunt taskrunner to manage these tasks.

0002-Creates-query-history-list.patch replaces the existing history tab with a React-based history component. The current patch brings us to feature-parity with the current application. However, we plan on continuing work on the History tab as we discussed. This is the smallest digestible chunk of work that we could send as a committable patch after 1.5 is cut.

Next Steps for History Tab
We are continuing to improve the user experience of the history tab. We have a series of stories lined up that lead us towards a further redesigned history tab. As we add the right hand panel and each query metadata item to it, we will be removing each query metadata item from the list view accordingly. 

Here is the design from one of the later stories:
Inline image 1

Regards,
Shruti & Matt



--
Sent via pgadmin-hackers mailing list ([hidden email])
To make changes to your subscription:
http://www.postgresql.org/mailpref/pgadmin-hackers





--
Dave Page
Blog: http://pgsnake.blogspot.com
Twitter: @pgsnake

EnterpriseDB UK: http://www.enterprisedb.com
The Enterprise PostgreSQL Company

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [pgAdmin4] [PATCH] History Tab rewrite in React

Dave Page-7
Hi

On Thu, May 18, 2017 at 9:56 AM, Murtuza Zabuawala <[hidden email]> wrote:

Go to 'pgadmin4/web' directory

Try running,

run 'yarn install'

(if you have installed globally)
then run 'grunt' 
OR
run './node_modules/grunt-cli/bin/grunt'


Then run pgAdmin4

OK, that worked - though pgAdmin now takes a lot longer to start up, which is a problem.

The Jasmine tests now fail:

(pgadmin4)piranha:web dpage$ yarn run karma start --single-run
yarn run v0.24.4
$ "/Users/dpage/git/pgadmin4/web/node_modules/.bin/karma" start
18 05 2017 10:22:01.182:ERROR [plugin]: Error during loading "karma-phantomjs-launcher" plugin:
  Path must be a string. Received null

webpack: Compiled successfully.
webpack: Compiling...
webpack: wait until bundle finished: 
webpack: wait until bundle finished: 
webpack: wait until bundle finished: 
webpack: wait until bundle finished: 
webpack: wait until bundle finished: 
webpack: wait until bundle finished: 
webpack: wait until bundle finished: 
webpack: wait until bundle finished: 
webpack: wait until bundle finished: 
webpack: wait until bundle finished: 
webpack: wait until bundle finished: 
webpack: wait until bundle finished: 
(node:12214) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
18 05 2017 10:22:07.281:WARN [karma]: No captured browser, open http://localhost:9876/

webpack: Compiled successfully.
18 05 2017 10:22:07.294:ERROR [karma]: Found 1 load error
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. 



--
Dave Page
Blog: http://pgsnake.blogspot.com
Twitter: @pgsnake

EnterpriseDB UK: http://www.enterprisedb.com
The Enterprise PostgreSQL Company
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [pgAdmin4] [PATCH] History Tab rewrite in React

Matthew Kleiman
Dave,

Can you try running grunt tests on the command line? 

The tests task will run the eslint and karma grunt tasks, which should automatically webpack the React components before running the jasmine tests in karma.

If it still fails, send us the output of that.

Thanks,
Matt

On Thu, May 18, 2017 at 5:31 AM Dave Page <[hidden email]> wrote:
Hi

On Thu, May 18, 2017 at 9:56 AM, Murtuza Zabuawala <[hidden email]> wrote:

Go to 'pgadmin4/web' directory

Try running,

run 'yarn install'

(if you have installed globally)
then run 'grunt' 
OR
run './node_modules/grunt-cli/bin/grunt'


Then run pgAdmin4

OK, that worked - though pgAdmin now takes a lot longer to start up, which is a problem.

The Jasmine tests now fail:

(pgadmin4)piranha:web dpage$ yarn run karma start --single-run
yarn run v0.24.4
$ "/Users/dpage/git/pgadmin4/web/node_modules/.bin/karma" start
18 05 2017 10:22:01.182:ERROR [plugin]: Error during loading "karma-phantomjs-launcher" plugin:
  Path must be a string. Received null

webpack: Compiled successfully.
webpack: Compiling...
webpack: wait until bundle finished: 
webpack: wait until bundle finished: 
webpack: wait until bundle finished: 
webpack: wait until bundle finished: 
webpack: wait until bundle finished: 
webpack: wait until bundle finished: 
webpack: wait until bundle finished: 
webpack: wait until bundle finished: 
webpack: wait until bundle finished: 
webpack: wait until bundle finished: 
webpack: wait until bundle finished: 
webpack: wait until bundle finished: 
(node:12214) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
18 05 2017 10:22:07.281:WARN [karma]: No captured browser, open http://localhost:9876/

webpack: Compiled successfully.
18 05 2017 10:22:07.294:ERROR [karma]: Found 1 load error
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. 



--
Dave Page
Blog: http://pgsnake.blogspot.com
Twitter: @pgsnake

EnterpriseDB UK: http://www.enterprisedb.com
The Enterprise PostgreSQL Company
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [pgAdmin4] [PATCH] History Tab rewrite in React

Dave Page-7
On Thu, May 18, 2017 at 4:37 PM, Matthew Kleiman <[hidden email]> wrote:
> Dave,
>
> Can you try running grunt tests on the command line?
>
> The tests task will run the eslint and karma grunt tasks, which should
> automatically webpack the React components before running the jasmine tests
> in karma.
>
> If it still fails, send us the output of that.

(pgadmin4)piranha:web dpage$ grunt tests
Running "eslint:target" (eslint) task

Running "karma:unit" (karma) task
19 05 2017 15:26:13.366:ERROR [plugin]: Error during loading
"karma-phantomjs-launcher" plugin:
  Path must be a string. Received null

webpack: Compiled successfully.
webpack: Compiling...
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
(node:66274) DeprecationWarning: loaderUtils.parseQuery() received a
non-string value which can be problematic, see
https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major
version of loader-utils.
19 05 2017 15:26:18.887:WARN [karma]: No captured browser, open
http://localhost:9876/

webpack: Compiled successfully.
19 05 2017 15:26:18.895:ERROR [karma]: Found 1 load error
Warning: Task "karma:unit" failed. Use --force to continue.

Aborted due to warnings.


:-(

--
Dave Page
Blog: http://pgsnake.blogspot.com
Twitter: @pgsnake

EnterpriseDB UK: http://www.enterprisedb.com
The Enterprise PostgreSQL Company


--
Sent via pgadmin-hackers mailing list ([hidden email])
To make changes to your subscription:
http://www.postgresql.org/mailpref/pgadmin-hackers
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [pgAdmin4] [PATCH] History Tab rewrite in React

Joao Pedro De Almeida Pereira-2
Okay

Can you try removing web/node_modules and web/yarn.lock, and running
$ yarn install
$ grunt tests

We think this might be due to a bad version of phantomjs-prebuilt.

If that still fails, can you try running grunt as "yarn run grunt tests"?

Joao and George

On Fri, May 19, 2017 at 10:27 AM, Dave Page <[hidden email]> wrote:
On Thu, May 18, 2017 at 4:37 PM, Matthew Kleiman <[hidden email]> wrote:
> Dave,
>
> Can you try running grunt tests on the command line?
>
> The tests task will run the eslint and karma grunt tasks, which should
> automatically webpack the React components before running the jasmine tests
> in karma.
>
> If it still fails, send us the output of that.

(pgadmin4)piranha:web dpage$ grunt tests
Running "eslint:target" (eslint) task

Running "karma:unit" (karma) task
19 05 2017 15:26:13.366:ERROR [plugin]: Error during loading
"karma-phantomjs-launcher" plugin:
  Path must be a string. Received null

webpack: Compiled successfully.
webpack: Compiling...
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
(node:66274) DeprecationWarning: loaderUtils.parseQuery() received a
non-string value which can be problematic, see
https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major
version of loader-utils.
19 05 2017 15:26:18.887:WARN [karma]: No captured browser, open
http://localhost:9876/

webpack: Compiled successfully.
19 05 2017 15:26:18.895:ERROR [karma]: Found 1 load error
Warning: Task "karma:unit" failed. Use --force to continue.

Aborted due to warnings.


:-(

--
Dave Page
Blog: http://pgsnake.blogspot.com
Twitter: @pgsnake

EnterpriseDB UK: http://www.enterprisedb.com
The Enterprise PostgreSQL Company


--
Sent via pgadmin-hackers mailing list ([hidden email])
To make changes to your subscription:
http://www.postgresql.org/mailpref/pgadmin-hackers

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [pgAdmin4] [PATCH] History Tab rewrite in React

Dave Page-7
On Tue, May 23, 2017 at 12:12 PM, Joao Pedro De Almeida Pereira
<[hidden email]> wrote:
> Okay
>
> Can you try removing web/node_modules and web/yarn.lock, and running
> $ yarn install
> $ grunt tests
>
> We think this might be due to a bad version of phantomjs-prebuilt.
>
> If that still fails, can you try running grunt as "yarn run grunt tests"?

I'm on a different machine now, and here grunt just seems to never
exit when it's doing anything. For example, I ran this a few minutes
ago, it finished in seconds and has been sitting here ever since:

(pgadmin4)snake:web dpage$ grunt tests
Running "eslint:target" (eslint) task

Running "karma:unit" (karma) task

webpack: Compiled successfully.
webpack: Compiling...
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
(node:4902) DeprecationWarning: loaderUtils.parseQuery() received a
non-string value which can be problematic, see
https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major
version of loader-utils.
23 05 2017 16:41:54.549:WARN [karma]: No captured browser, open
http://localhost:9876/

webpack: Compiled successfully.
PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 87 of 88 (skipped 1)
SUCCESS (1.353 secs / 1.328 secs)

I'm quite unimpressed with it so far :-(

--
Dave Page
Blog: http://pgsnake.blogspot.com
Twitter: @pgsnake

EnterpriseDB UK: http://www.enterprisedb.com
The Enterprise PostgreSQL Company


--
Sent via pgadmin-hackers mailing list ([hidden email])
To make changes to your subscription:
http://www.postgresql.org/mailpref/pgadmin-hackers
Previous Thread Next Thread
Loading...