This past year’s annual developer conference and hackathon went virtual. We had just come out from a lockdown at the time and I was still working from home. The hackathon looked like a welcome change. It was a great opportunity to introduce some new ideas and have a ton of fun!
My office plant is probably dead by now
How it Started
When the first email about the hackathon arrived, every person was encouraged to suggest and vote for one project. We had a pre-voting round to validate our ideas. I added some ideas including wrapping nodetool with a neat UI. (And another team decided to put the nodetool commands in the CQL API!) There were quite a few other UI related ideas like a web-based cqlsh and manager react plugin. None of them got enough support to form a team.
So a few of us thought, if we joined forces, we could have a team! I contacted a few of the other ideas’ owners and some of my ScyllaDB Cloud teammates. Things were starting to look good. There were a few options and for sure it was possible to hack something cool together. I was eager to get a team together to make it happen. I even tried to bribe some developers, offering surfing lessons to my teammates. (Though no one took me up on that offer yet.)
Our team, clockwise, starting with me (Omri) in the upper left: Noam Hasson to my right, Maciej Zimnoch below him, Erez Mazor holding up his favorite t-shirt, Carlos Martin (who did his best keeping safe from the Redux monster), and a second Erez (he was trying to work twice as hard as the rest of us).
Great! We got a team! Time to work! At our first meeting we started discussing our possibilities. Since most of us are from the ScyllaDB Cloud team it made the most sense to integrate our project with our managed cloud service. It would save us the time of setting up a stand-alone project as well as provided authentication and easy access to clusters.
Each of us explored and researched what’s out there in the market and we all came back to a brainstorming session. We discussed integrating other open source UI projects vs developing our own editor, supporting our DynamoDB-API compatible interface, known as Alternator, and how we could best communicate with the database. It boiled down to integrating an existing tool vs developing our own. Integrating existing tools is risky for a hackathon timeframe yet beneficial in inheriting a substantial bit of working code so we decided to explore both options. The main features we were looking for were:
- being able to write CQL statements
- transacting queries to ScyllaDB and displaying the results.
- exploring the database schema in a tree view.
We planned to incrementally iterate and adjust and scheduled a follow up meeting a few hours later.
We tried to parallelize our work: Noam and Maciej worked on exposing a secure API querying the database and getting a schema, as well as explore some other existing projects to embed. Carlos, Erez, and I (Omri) worked on the frontend editor embedded in the ScyllaDB Cloud website. Erez was in charge of the schema tree view, Carlos on the result view, and I was on the editor and integration with the existing project. We got to use our new solution for easily documenting and mocking up a new API so the backend and frontend development would work in parallel. After dusting off some React knowledge and getting to know the project code we were good to go!
After some investigation, I came across the Monaco project. It is the code editor that powers Visual Studio Code (VScode). It provides a friendly environment and can also host the code generation from the tree view and results tables. Working together was great! We integrated some cool ScyllaDB monster animations to make it fun and couldn’t stop coming up with new ideas in the meetings. We hit a few bumps along the way but we came up with an awesome result.
How it’s Going
The cloud editor uses Monaco so all your keyboard shortcuts are baked inside. We added a shortcut to run selected queries. You get some autocomplete for CQL syntax and your cluster specific schema. You can select a specific keyspace to use in the top dropbox. To make it even more editor-like, we added tabs and your queries results will be saved when you switch between them. On the left side, you can explore your schema using the tree view.
Noam suggested adding a meme for failing queries – the best feature of the editor!
It features useful information like replication factor and strategy for keyspaces as well as clustering and partition keys for tables. It also can generate queries like select, insert, and update straight into the editor!
The bottom table view shows your query result if there are any. It highlights clustering and partition keys and lets you sort using different columns. If the results are too big, you can move between different pages and control how many results to display on each page. We wanted to go even further and added an option to edit the table and generate a CQL statement to update the data.
We managed to squeeze a few last features like caching schema on the server, save the editor to a file, and import a file into it. We wanted to give Alternator support but decided that it was out of scope for the hackathon. I wished we had more time!
Our own attempt at committing “voter fraud” during the hackathon.
We also had fun at the presentation. We simulated the Hackathon voting using ScyllaDB and edited the results using a table view to make us win. Unfortunately, It didn’t work in reality but we made it to second place! Overall the hackathon was a great success, we had a lot of fun and came up with a cool showcase of what we could achieve.
Next Steps
There was a lot of interest in the project and it will definitely make it to ScyllaDB Cloud users at some point. We also talked about making a ScyllaDB VScode extension or package it as a desktop app that can connect to any ScyllaDB cluster. If you find the editor useful or would like to suggest a feature, please let me know. You can either contact us via our website (and mention the “CQL Editor” in your subject, or reach out via our user Slack. Thanks to all the teammates that worked hard and made it happen! We can’t wait for the next hackathon!
By the way, if you’d like to be part of our team for the next hackathon, we’re hiring!
CAREERS OPPORTUNITIES AT SCYLLADB
