- Add general snackbar component

- Add drop table functionality
- Add dialog to accept dropping the table
- Make it, so you cannot try to delete system tables
- Minor refactoring such as variable renaming

improvements.md

@@ -0,0 +1,13 @@
+### Improvements over old admin panel
+
+#### General
+1. Tech stack is more modern and agile to work with (Vue3 + vuetify)
+2. More settings (theme, console sizes, master node url..)
+3. Improved visibility of shard allocation issues (https://github.com/crate/crate-admin/issues/799)
+4. Better Node Health message https://github.com/crate/crate-admin/issues/679
+5. User notifications when the panel cannot connect to the node
+
+#### Console
+1. Button to cancel current query (https://github.com/crate/crate-admin/issues/811)
+2. Query History component that allows to add, remove and reuse queries.
+3. Console shows line number. (https://github.com/crate/crate-admin/issues/813)

src/App.vue

@@ -1,9 +1,11 @@
 <template>
   <router-view/>
+  <snackbar/>
 </template>
 
 <script setup>
   //
+import Snackbar from "@/components/snackbars/Snackbar.vue";
 </script>
 
 <style>

src/components/bar/Bar.vue

@@ -1,11 +1,11 @@
 <script setup>
 import VerticalDivider from "@/components/VerticalDivider.vue";
-import { useGlobalStore } from "@/store/globalStore";
+import { use_global_store } from "@/store/globalStore";
 
 import InfoGroup from "@/components/bar/info/InfoGroup.vue";
 import SupportButton from "@/components/bar/SupportButton.vue";
 
-const global_store = useGlobalStore()
+const global_store = use_global_store()
 </script>
 
 <template>
@@ -21,7 +21,7 @@ const global_store = useGlobalStore()
       <support-button></support-button>
       <vertical-divider></vertical-divider>
       <v-btn icon="mdi-cog"
-             @click="global_store.settingsDrawerToggle = !global_store.settingsDrawerToggle"></v-btn>
+             @click="global_store.settings_drawer_toggle = !global_store.settings_drawer_toggle"></v-btn>
     </template>
   </v-app-bar>
 </template>

src/components/settings/SettingsDrawer.vue

@@ -1,13 +1,12 @@
 <script setup>
-import { useGlobalStore } from "@/store/globalStore";
+import { use_global_store } from "@/store/globalStore";
 
 import ThemeToggle from "@/components/settings/ThemeToggle.vue";
 import ListItemLink from "@/components/settings/ListItemLink.vue";
 import ConsoleSettings from "@/components/settings/ConsoleSettings.vue";
 import GeneralSettings from "@/components/settings/GeneralSettings.vue";
 
-const global_store = useGlobalStore()
-
+const global_store = use_global_store()
 
 const drawerLinks = [
   {
@@ -46,7 +45,7 @@ const drawerLinks = [
 <template>
   <v-navigation-drawer
     width="350"
-    v-model="global_store.settingsDrawerToggle"
+    v-model="global_store.settings_drawer_toggle"
     temporary
     location="right">
 
@@ -55,7 +54,7 @@ const drawerLinks = [
         <v-btn
           icon="mdi-close"
           variant="flat"
-          @click="global_store.settingsDrawerToggle = false"
+          @click="global_store.settings_drawer_toggle = false"
         />
       </template>
     </v-toolbar>
@@ -80,7 +79,7 @@ const drawerLinks = [
         ></list-item-link>
       </v-list>
     </template>
-
+    <v-btn @click="global_store.show_successful_snackbar('Table deleted correctly')">Debug</v-btn>
   </v-navigation-drawer>
 
 </template>

src/components/snackbars/NetworkErrorSnackbar.vue

@@ -1,9 +1,9 @@
 <script setup>
 import {useStoredPreferencesStore} from "@/store/storedPreferences";
-import {useGlobalStore} from "@/store/globalStore";
+import {use_global_store} from "@/store/globalStore";
 
 const storedPreferences = useStoredPreferencesStore()
-const globalStore = useGlobalStore()
+const globalStore = use_global_store()
 </script>
 
 <template>

src/components/snackbars/Snackbar.vue

@@ -0,0 +1,25 @@
+<script setup>
+import {use_global_store} from "@/store/globalStore";
+const global_store = use_global_store()
+</script>
+
+<template>
+  <v-snackbar :timeout="global_store.snackbar_opts.duration_ms"
+              :title="global_store.snackbar_opts.title"
+              v-model="global_store.show_snackbar"
+              :color="global_store.snackbar_opts.color"
+              :variant="'outlined'"
+              location="right bottom"
+  >
+    <div class="text-subtitle-1 pb-2">
+      <v-icon>{{ global_store.snackbar_opts.icon }}</v-icon>
+     <span class="ml-2"> {{ global_store.snackbar_opts.title }}</span>
+    </div>
+
+    <p>{{ global_store.snackbar_opts.message }}</p>
+  </v-snackbar>
+</template>
+
+<style scoped>
+
+</style>

src/components/tables/card/TableCardActions.vue

@@ -1,14 +1,44 @@
 <script setup>
+import {use_tables_store} from "@/store/tables";
 
+const table_store = use_tables_store()
 </script>
 
 <template>
   <v-row class="py-4">
     <v-col>
       <v-btn flat>Edit schema</v-btn>
-      <v-btn flat>Delete table</v-btn>
+      <v-dialog max-width="600">
+        <template v-slot:activator="{ props }">
+          <v-btn :disabled="table_store.current_open_schema.is_system" color="red-lighten-1" text
+                 v-bind="props">Drop table
+          </v-btn>
+        </template>
+
+        <template v-slot:default="{ isActive }">
+          <v-card title="Are you sure you want to drop the table?">
+            <v-card-text>
+              This operation
+              <v-label style="color: red">cannot be reverted</v-label>
+              , data in the table will be lost.
+            </v-card-text>
+
+            <v-card-actions>
+              <v-spacer></v-spacer>
+              <v-btn color="warning" prepend-icon="mdi-alert" @click="table_store.drop_table()">Drop
+                table
+              </v-btn>
+              <v-btn
+                  text="Close"
+                  @click="isActive.value = false"
+              ></v-btn>
+            </v-card-actions>
+          </v-card>
+        </template>
+      </v-dialog>
     </v-col>
   </v-row>
+
 </template>
 
 <style scoped>

src/store/crate_api/tables.js

@@ -40,9 +40,9 @@ class Schema {
         return s
     }
 
-    constructor(name, is_system_schema) {
+    constructor(name, is_system) {
         this.name = name
-        this.is_system_schema = is_system_schema
+        this.is_system = is_system
     }
 }
 

src/store/globalStore.js

@@ -3,15 +3,46 @@
 import {defineStore} from 'pinia'
 import {reactive, toRefs} from 'vue';
 
-export const useGlobalStore = defineStore('settings', () => {
+export const use_global_store = defineStore('settings', () => {
     const state = reactive({
-      settingsDrawerToggle: false,
-      show_network_connection_snackbar: false,
-      network_connection_attemps: 1,
+        settings_drawer_toggle: false,
+        show_network_connection_snackbar: false,
+        network_connection_attemps: 1,
+
+        // Snackbar for all other custom notifications
+        show_snackbar: false,
+        snackbar_opts: {
+            title: '',
+            message: '',
+            color: '',
+            duration_ms: 2000,
+            icon: 'mdi-tick'
+        }
     })
 
+    function show_successful_snackbar(message) {
+        state.snackbar_opts = {
+            title: 'Success',
+            message: message,
+            color: 'success',
+            icon: 'mdi-check',
+        }
+        state.show_snackbar = true
+    }
+
+    function show_error_snackbar(message) {
+        state.snackbar_opts = {
+            title: 'Error',
+            message: message,
+            color: 'error',
+            icon: 'mdi-alert',
+        }
+        state.show_snackbar = true
+    }
+
     return {
-      ...toRefs(state),
+        ...toRefs(state),
+        show_successful_snackbar,
+        show_error_snackbar
     }
-  }
-)
+})

src/store/http/queries.js

@@ -65,5 +65,8 @@ export default {
     GROUP BY 1, 2, 5
     ORDER BY
       ended_time ASC
+  `,
+  DROP_TABLE: `
+   DROP TABLE %schema_name.%table_name
   `
 }

src/store/http/requests.js

@@ -1,9 +1,9 @@
 import {useStoredPreferencesStore} from "@/store/storedPreferences";
-import {useGlobalStore} from "@/store/globalStore";
+import {use_global_store} from "@/store/globalStore";
 
 export async function requestCrate(_stmt, queryParams = '', stmtReplacedParams= {}) {
   const storedPreferences = useStoredPreferencesStore()
-  const globalStore = useGlobalStore()
+  const globalStore = use_global_store()
 
   let url = storedPreferences.general.masterNodeUrl + '/_sql'
   let stmt = _stmt // https://airbnb.io/javascript/#functions--reassign-params

src/store/tables.js

@@ -4,12 +4,14 @@ import {requestCrate} from "@/store/http/requests";
 import queries from "@/store/http/queries";
 import {Schemas} from "@/store/crate_api/tables";
 import {Columns} from "@/store/crate_api/columns";
+import {use_global_store} from "@/store/globalStore";
 
 export const use_tables_store = defineStore('tables', () => {
     const state = reactive({
         schemas: new Schemas([]),
         current_tab: '',
         current_open_table: null,
+        current_open_schema: null, // We only need this to have a Schema reference.
         current_open_table_columns: null,
         sample_data: null
     })
@@ -20,7 +22,8 @@ export const use_tables_store = defineStore('tables', () => {
         state.schemas = new Schemas(tables.rows)
     }
 
-    async function update_table_schema_information(table_name, table_schema) {
+    async function update_table_columns_information(table_name, table_schema) {
+        // Gets the columns for the current open table.
         const _response = await requestCrate(queries.COLUMNS, null, {
             '%table_name': table_name,
             '%table_schema': table_schema
@@ -38,15 +41,42 @@ export const use_tables_store = defineStore('tables', () => {
         state.sample_data = data
     }
 
+    async function drop_table() {
+        const _response = await requestCrate(queries.DROP_TABLE,
+            null,
+            {'%schema_name': state.current_open_table.schema, '%table_name': state.current_open_table.name})
+        const global_store = use_global_store()
+        if (_response.ok){
+            await update_tables()
+            global_store.show_successful_snackbar(`Table ${state.current_open_table.name} deleted correctly`)
+            state.current_open_table = null
+        } else {
+            global_store.show_error_snackbar(`Something went wrong`)
+        }
+
+    }
     watch(
         () => state.current_open_table, async (value) => {
-            await update_table_schema_information(value.name, value.schema)
-            console.log('whot')
+            if (value == null) {
+                // We check for null because this could get triggered in situations where for example:
+                // state.current_open_table is 'doc.table_test', we DROP the table, we set
+                // state.current_open_table to null, resetting the entire view, closing the table card
+                // and updating the left drawer, in that situation, we do not want this to be called
+                // since there is no table to get the columns for nor the need.
+                return
+            }
+            await update_table_columns_information(value.name, value.schema)
+
+            // If we change from one table to another, reset the tab position, this is intended
+            // to avoid unnecessary calls, for example if the user is in 'doc.table' and has
+            // the sample_table tab selected, if he changes to another table, it is preferable
+            // not to open the table in the same tab, but reset it to the column's, if the
+            // user wants again sample_table, for example, he will have to click once again.
             state.sample_data = null
             state.current_tab = 'one'
         }
     )
     return {
-        ...toRefs(state), update_tables, update_table_sample_data
+        ...toRefs(state), update_tables, update_table_sample_data, drop_table
     }
 })

src/views/Home.vue

@@ -51,10 +51,8 @@
 
 <script setup>
 import LoadChart from "@/components/charts/LoadChart.vue";
-import {useNodeInfoStore} from "@/store/nodeInfo";
 import QpsChart from "@/components/charts/QpsChart.vue";
 import DurationChart from "@/components/charts/DurationChart.vue";
-const info_store = useNodeInfoStore()
 
 const features = [
   {text: 'Customizable settings: theme, console sizes and master node url'},

src/views/Tables.vue

@@ -13,15 +13,14 @@ tables_info.update_tables()
   <tables-drawer></tables-drawer>
   <table-card v-if="tables_info.current_open_table"></table-card>
 
-  <v-row  align-content="center" class="text-center fill-height" v-else>
+  <v-row align-content="center" class="text-center fill-height" v-else>
     <v-spacer></v-spacer>
     <v-col align-self="center" cols="6">
       <v-sheet class="pa-10">
         <v-label><h1> Start by select a table on the left</h1></v-label>
       </v-sheet>
     </v-col>
     <v-spacer></v-spacer>
-
   </v-row>
 
 </template>