gabiaxel / google-cloud-gui

GUI for Google Cloud Datastore emulator and production

Google Cloud GUI

At the moment, a simple GUI for Google Cloud Datastore, mostly useful for working with the Datastore emulator during development.

In the future, based on feedback from the community, support for additional Google Cloud Platform APIs may be added.

How it works

Google Cloud GUI relies on gcloud for authentication. This means that in order to connect to a production datastore, you first need to gcloud auth login with the credentials for your GCP project(s).

Don't run Google Cloud GUI anywhere public, as any user who has access to it, would get access to all the projects that gcloud on that machine has access to!

Installation

yarn global add google-cloud-gui (recommended)

or

npm i -g google-cloud-gui (see #1 and #2 for known issues and solutions)

Starting the server

google-cloud-gui [--port=<PORT>] [--skip-browser]

Optional flags:

• --port sets the HTTP port (default 8000)

• --skip-browser skips opening the GUI in the browser when the server starts

Using the GUI

The GUI should be available at http://localhost:<PORT> (default http://localhost:8000) and will initially show no projects.

Start by adding a project by clicking the top left "+" button. In the dialog enter the project ID and the emulator host:port, or leave it empty to use the production Datastore.

The projects are stored in the file ~/.google-cloud-gui-db.json

After adding a project, you will be able to browse the Datastore namespaces, kinds and entities.

At the moment you can only view and delete entities (no creation or editing). Click the eye icon to view an entity as a tree (useful for large or nested entities that don't fit in a table row).

Development

The project is composed of server and client directories. To run locally:

• Under server run yarn start - this will start the server on port 8000 with Nodemon for auto-reload on sources change.

• Under client run yarn start - this will start a development server on port 3000 and open the browser at http://localhost:3000

To build locally, under the project root run build.sh - this will create the build directory with the server and transpiled client. Under build run server.sh to run the server and client locally on the same port.

google-cloud-gui's Issues

Lacking gRPC

I installed it through npm, but get the following. Should I be installing this myself? If so, how? (Node v.10.0.0)

$ google-cloud-gui 
/usr/local/lib/node_modules/google-cloud-gui/node_modules/grpc/src/grpc_extension.js:55
    throw error;
    ^

Error: Failed to load gRPC binary module because it was not installed for the current system
Expected directory: node-v64-linux-x64-glibc
Found: [node-v48-linux-x64-glibc]
This problem can often be fixed by running "npm rebuild" on the current system
Original error: Cannot find module '/usr/local/lib/node_modules/google-cloud-gui/node_modules/grpc/src/node/extension_binary/node-v64-linux-x64-glibc/grpc_node.node'
    at Object.<anonymous> (/usr/local/lib/node_modules/google-cloud-gui/node_modules/grpc/src/grpc_extension.js:53:17)
    at Module._compile (internal/modules/cjs/loader.js:678:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:689:10)
    at Module.load (internal/modules/cjs/loader.js:589:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:528:12)
    at Function.Module._load (internal/modules/cjs/loader.js:520:3)
    at Module.require (internal/modules/cjs/loader.js:626:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (/usr/local/lib/node_modules/google-cloud-gui/node_modules/grpc/src/client.js:37:12)
    at Module._compile (internal/modules/cjs/loader.js:678:30)

npm installation may fail on no permission to access dev dir

When installing with npm i -g google-cloud-gui , you may encounter repeating:

gyp WARN EACCES user "root" does not have permission to access the dev dir "/usr/local/lib/node_modules/google-cloud-gui/node_modules/grpc/.node-gyp/8.11.1"
gyp WARN EACCES attempting to reinstall using temporary dev dir "/usr/local/lib/node_modules/google-cloud-gui/node_modules/grpc/.node-gyp"

Best workaround is to use Yarn - yarn global add google-cloud-gui

Another possible, less recommended workaround, is to use --unsafe-perm flag like so: npm i -g google-cloud-gui --unsafe-perm as discussed here: nodejs/node-gyp#454

If anyone can propose a proper fix, that would be most welcome.

Entity delete error

server/src/datastore.js line: 73

Error: datastore.intValue is not a function.

Should use datastore.int instead.

Request Enhancement: Select all rows

Hey there!

What a nice tool, great work!
I would like to remove multiple records. Right now I have to manually click one record by one record in order to remove them.
It would be very nice to have a checkbox which selects all the records in the table.

Thanks in advance!

Unable to start server

Did run following cmd to install google-cloud-gui,
npm i -g google-cloud-gui`

and i am hitting following exception while starting the server:

C:\Users\vaboda\AppData\Roaming\npm\node_modules\google-cloud-gui\node_modules\server\server.js:20
const Server = async (...middle) => {
                     ^
SyntaxError: Unexpected token (
    at createScript (vm.js:56:10)
    at Object.runInThisContext (vm.js:97:10)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (C:\Users\vaboda\AppData\Roaming\npm\node_modules\google-cloud-gui\src\server.js:3:16)

[Feature request] Ability to run custom queries

Would be immensely helpful in debugging!

[Feature] Option to add project when the app boots

I am using this via docker-compose and in it would help the developer experience if it was possible to simply do docker-compose up and opening the ui.

Having to manually create the project means that the developer has to do more setup than one would expect.

My suggestion is to add optional arguments to the binary, so it could be used like this:

google-cloud-gui --project-id=something-cool --ds-endpoint=hostname:123 --skip-browser

Cannot delete via GUI

After selecting items and clicking "Delete", there is a notification that says "Deleting...", but nothing is actually deleted. The notification remains indefinitely.

Related: is there a way to manually delete the local datastore?

If an entry has long data, the dialog appears annoyingly narrow

I have a lot of screen leftover that could have been used to show more data but, instead, I have to scroll to get to it. After some uses, it quickly becomes annoying.
Due to the auto-generative (look-like) of the CSS, doing an userscript to override this is also not practical.

I do wonder if this problem also shows vertically.... Unfortunately, though, I don't have test data for such.

Refresh to find other names and shift select checkboxes

Great work so far, very useful for my videos: https://www.youtube.com/playlist?list=PLCrwuqjmVebK08Cwz_XB55cNKFfFYOMGo

Currently, if a new type is added I need to refresh the page. The current refresh button only refreshes the current name selection.

Also, it would be nice to shift select checkboxes if you want to delete a bunch of items.

Executing a page reload on the browser on any state will cause a status 404 response

If I follow an URL to any page besides the root page, the server always returns status code 404.

To reproduce:

1. Navigate your browser to the listening url (E.g. http://localhost:8000)
2. Configure an existing server (press the "+" and fill the form)
3. Enter the project and navigate anywhere.
4. Keyboard: press F5 (or any reload order)

###Problem
Page reloads into empty page (browser tools show it is returning a status code 404)
###Expected results:
(after loading) Page appears the same as it was before step 4 was executed.

Major use-case

Duplicate page to compare data (example, compare data between two entities and not having to re-execute the steps to arrive to the data next to the one being checked.

Not able to intall for MacOS M1

No able to install it to MacOS: Ventura 13.4 with M1 processor. Log is attached.
google-cloud-gui_install.log

Can't set headers after they are sent

Hi, I'm facing the following problem when I try to execute the project.

Env:

• Installed using yarn command;
• I'm running inside node:8 docker image (I had the same problem using a MAC);

Error:
[Tue Jun 05 2018 12:58:50 GMT+0000 (UTC)] WARNING { Error:
Some middleware threw an error that was not handled properly. This can happen when you do this:

// BAD:
server(ctx => { throw new Error('I am an error!'); });

To catch and handle these types of errors, add a route to the end of your middlewares to handle errors like this:

// GOOD:
const { error } = server.router;
const { status } = server.reply;

server(
  ctx => { throw new Error('I am an error!'); },
  // ...
  error(ctx => status(500).send(ctx.error.message))
);

Please feel free to open an issue in Github asking for more info:
https://github.com/franciscop/server

at buildError (/home/node/.config/yarn/global/node_modules/server/error/index.js:2:17)
at ErrorInstance (/home/node/.config/yarn/global/node_modules/server/error/index.js:19:12)
at AsyncFunction.handler.error.ctx [as error] (/home/node/.config/yarn/global/node_modules/server/plugins/final/index.js:23:19)
at Object.middle (/home/node/.config/yarn/global/node_modules/server/src/join/index.js:36:33)
at <anonymous>

status: 500,
namespace: '/plugin/final/',
code: '/plugin/final/unhandled',
id: 'plugin-final-unhandled' }
[Tue Jun 05 2018 12:58:50 GMT+0000 (UTC)] ERROR Error: Can't set headers after they are sent.
at validateHeader (_http_outgoing.js:491:11)
at ServerResponse.setHeader (_http_outgoing.js:498:3)
at ServerResponse.header (/home/node/.config/yarn/global/node_modules/express/lib/response.js:767:10)
at ServerResponse.send (/home/node/.config/yarn/global/node_modules/express/lib/response.js:170:12)
at stack.push.ctx (/home/node/.config/yarn/global/node_modules/server/reply/reply.js:152:13)
at Reply.exec (/home/node/.config/yarn/global/node_modules/server/reply/reply.js:175:11)
at processReturn (/home/node/.config/yarn/global/node_modules/server/src/join/index.js:11:22)
at Object.middle (/home/node/.config/yarn/global/node_modules/server/src/join/index.js:43:17)
at

Cannot install with yarn

Hi there! I cannot install it no matter what:

$ yarn global add google-cloud-gui
00h00m00s 0/0: : ERROR: [Errno 2] No such file or directory: 'global'

$ yarn --version
0.32+git

... to be honest - I have no idea what I'm even doing. Never heard of yarn :-(