ui and docs (#13)

* feat: frontend ui improvements * chore: update docs and logo
corinz · Jan 22, 2024 · 9ce5381 · 9ce5381
1 parent 74d927d
commit 9ce5381
Show file tree

Hide file tree

Showing 13 changed files with 117 additions and 111 deletions.
diff --git a/Makefile b/Makefile
@@ -28,7 +28,7 @@ build-cluster:
 
 requirements:
 	# Check if all required commands are installed
-	REQUIRED_CLI=("go" "kind" "docker") && \
+	REQUIRED_CLI=("go" "kind" "docker" "wails") && \
 	for command in "$${REQUIRED_CLI[@]}"; \
   do \
 	    if ! command -v "$$command" &> /dev/null; \

diff --git a/README.md b/README.md
@@ -1,24 +1,26 @@
 ![logo](./docs/logo.svg)
 
-A desktop app implementation of a Kubernetes client viewer, that stands on the shoulders of framework giants Svelte and Wails.
+A desktop app Kubernetes client viewer, that stands on the shoulders of framework giants Svelte and Wails.
 
+This project is under active development
 Here's a list of things that work:
-1. A working UI/desktop application
-2. A working backend that connects to a local cluster
-3. A working GraphQL API and the infrastructure to extend it
-4. A bunch of UI stuff broke in a recent commit, and I haven't gotten back to fixing it yet...
+1. A dead simple UI/desktop application that features cross-context resource querying
+2. A backend that connects to any cluster in your ~/.kube/config
+3. A working GraphQL API with an Apollo client
+
+![screenshot](./docs/screenshot.png)
 
 ## Goals
-1. A good looking, keyboard driven UI that ain't slow
-2. Ability to issue complex api queries *across* clusters
+1. A good looking, fast, keyboard driven UI for front-line Kubernets admins
+2. Ability to issue resource queries *across* clusters
 
 ## Getting Started
-1. Install requirements
+1. Install requirements below
 2. Run `make` or `make run-with-deps` if it's your first time
 3. Navigate to http://localhost:8080/sandbox to interact with the GraphQL API via Apollo
-4. Or run `wails dev` and follow the prompts see below
+4. Or run `wails dev` and follow the prompts. See below
 
-## Requirements
+## Requirements for dev
 1. Go
 2. Docker
 3. Kind

diff --git a/docs/icon.svg b/docs/icon.svg
diff --git a/docs/logo.png b/docs/logo.png
diff --git a/docs/screenshot.png b/docs/screenshot.png
diff --git a/frontend/index.html b/frontend/index.html
@@ -1,12 +1,32 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+<head>
+    <meta charset="UTF-8"/>
+    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
     <title>m8</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script src="./src/main.ts" type="module"></script>
-  </body>
+</head>
+<body>
+<div class="main" id="app"></div>
+<script src="./src/main.ts" type="module"></script>
+</body>
+
+<style>
+    body, input {
+        color: white;
+        font-family: monospace;
+        letter-spacing: -.05em;
+        background-color: rgba(31, 31, 31, 1);
+    }
+
+    div.main {
+        padding: 5px;
+    }
+
+    fieldset {
+        border-radius: .15em;
+        border: 1px solid rgba(192, 176, 176, 0.8);
+        box-shadow: 2px 2px 0 rgba(255, 255, 255, 0.5);
+
+    }
+</style>
 </html>
diff --git a/frontend/src/JsonTable.svelte b/frontend/src/JsonTable.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-    import {dataStore} from "./jsonTable"
+    import {tableDataStore, searchTerm} from "./jsonTable"
 
     let data, activeRowIndex
     $: {
-        data = $dataStore
+        data = $tableDataStore
         activeRowIndex = 0
     }
 
@@ -27,70 +27,78 @@
 {#if (!data)}
     Dataset is empty
 {:else if data.length > 0}
-    <table>
-        <!-- HEADER ROW -->
-        <thead>
-        <tr>
-            {#each Object.keys(data[0]) as header, i}
-                {#if i == 0 }
-                    <th columnId={header}>
-                        {header}
-                    </th>
-                {:else }
-                    <th columnId={header}>
-                        {header}
-                    </th>
-                {/if}
-            {/each}
-        </tr>
-        </thead>
-        <!-- DATA ROWS -->
-        <tbody>
-        {#each Object.entries(data) as [id, obj] }
-            {#if id == activeRowIndex}
-                <tr id="highlight">
-                    {#each Object.values(obj) as val }
-                        <td class="highlight">{val}</td>
-                    {/each}
-                </tr>
-            {:else }
+    <fieldset>
+        <legend>{$searchTerm.charAt(0).toUpperCase() + $searchTerm.slice(1)}s</legend>
+        <div class="scrollable-content">
+            <table>
+                <!-- HEADER ROW -->
+                <thead>
                 <tr>
-                    {#each Object.values(obj) as val }
-                        <td>{val}</td>
+                    {#each Object.keys(data[0]) as header, i}
+                        {#if i == 0 }
+                            <th columnId={header}>
+                                {header}
+                            </th>
+                        {:else }
+                            <th columnId={header}>
+                                {header}
+                            </th>
+                        {/if}
                     {/each}
                 </tr>
-            {/if}
-        {/each}
-        </tbody>
-    </table>
+                </thead>
+                <!-- DATA ROWS -->
+                <tbody>
+                {#each Object.entries(data) as [id, obj] }
+                    {#if id == activeRowIndex}
+                        <tr id="highlight">
+                            {#each Object.values(obj) as val }
+                                <td class="highlight">{val}</td>
+                            {/each}
+                        </tr>
+                    {:else }
+                        <tr>
+                            {#each Object.values(obj) as val }
+                                <td>{val}</td>
+                            {/each}
+                        </tr>
+                    {/if}
+                {/each}
+                </tbody>
+            </table>
+        </div>
+    </fieldset>
 {/if}
 
 <style>
     table {
         width: 100%;
-        border-collapse: collapse;
-        overflow: hidden;
-        table-layout: auto;
-        overflow-y: auto;
+    }
+
+    .scrollable-content {
+        max-height: 300px; /* Set the maximum height for scrollability */
+        overflow-y: hidden; /* Enable vertical scrolling if content exceeds the height */
     }
 
     td {
-        padding: 6px;
+        padding: 4px;
         text-align: left;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
         max-width: 100px;
     }
 
-    /*TODO: fix sticky header in desktop app*/
     th {
         padding: 6px;
         text-align: left;
+        color: #1988d9;
+        font-weight: normal;
+
+        /* required for sticky header */
+        background-color: rgba(31, 31, 31, 1);
         position: sticky;
-        top: 70px;
-        /*z-index: 1;*/
-        background-color: #FFFFFFFF;
+        top: 2px;
     }
 
     :global(.highlight) {

diff --git a/frontend/src/Legend.svelte b/frontend/src/Legend.svelte
@@ -106,10 +106,10 @@
 <style>
     fieldset {
         width: 400px;
-        border-radius: .15em;
-        border: 1px solid #000000;
+        max-height: 90px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        overflow-y: auto;
     }
 </style>
diff --git a/frontend/src/SearchBar.svelte b/frontend/src/SearchBar.svelte
@@ -3,12 +3,12 @@
     import {focusedElement} from "./focus"
     import _ from 'underscore';
     import {GqlResourceQuery} from "./resourceQuery.ts"
-    import {activeContextStore, allContextStore} from "./activeContextStore";
-    import {dataStore} from "./jsonTable";
+    import {activeContextStore} from "./activeContextStore";
+    import {tableDataStore, searchTerm} from "./jsonTable";
 
     // search and filter and ui
     export let searchEventKey: string
-    let searchBarInput: string = "" // TODO: if the first search is broken, others are broken too
+    let searchBarInput: string = ""
     let placeholder
     const filterOptions = {
         keys: ['name', 'Name', 'namespace', 'Namespace'],
@@ -20,6 +20,7 @@
 
     // Graphql
     let queryVars = {"name": "pod"}
+    searchTerm.set("pod") // sets the legend title
     let getResources = new GqlResourceQuery
     let filteredTableObject = null
 
@@ -54,6 +55,9 @@
         if (searchBarInput !== "") {
             const name = searchBarInput
             queryVars = {name}
+
+            // sets the legend title
+            searchTerm.set(searchBarInput)
         }
         // Clear search bar
         searchBarInput = ""
@@ -111,11 +115,11 @@
 
     $: if (!queryFetching && !queryError) {
         // set store with fetched data
-        dataStore.set(tableObject)
+        tableDataStore.set(tableObject)
     }
 </script>
 
-<div class="sticky" style="padding-top: 10px; padding-bottom: 10px;">
+<div>
     <fieldset>
         <legend>Search</legend>
         <input
@@ -131,27 +135,23 @@
 </div>
 
 <style>
+    div {
+        padding-bottom: 15px;
+        padding-top: 15px;
+    }
+
     fieldset {
         width: 400px;
-        border-radius: .15em;
-        border: 1px solid #000000;
         white-space: nowrap;
         overflow: hidden;
-    }
-
-    div.sticky {
-        position: sticky;
-        top: 0;
-        background-color: white;
+        background-color: rgba(31, 31, 31, 1);
     }
 
     input {
         width: 300px;
-        height: 8px;
+        height: 12px;
         border: none;
         border-right: 1px solid #000000;
         outline: none;
-        padding: 4px;
     }
-
 </style>
diff --git a/frontend/src/assets/images/logo-universal.png b/frontend/src/assets/images/logo-universal.png
diff --git a/frontend/src/jsonTable.ts b/frontend/src/jsonTable.ts
@@ -3,4 +3,6 @@ export interface tableObject {
 }
 
 import {writable} from "svelte/store"
-export const dataStore = writable({"hello": "moto"})
+
+export const tableDataStore = writable({})
+export const searchTerm = writable("")
diff --git a/main.go b/main.go
@@ -23,8 +23,8 @@ func main() {
 		// Create application with options
 		err := wails.Run(&options.App{
 			Title:  "m8",
-			Width:  1024,
-			Height: 768,
+			Width:  800,
+			Height: 500,
 			AssetServer: &assetserver.Options{
 				Assets: assets,
 			},

diff --git a/wails.json b/wails.json
@@ -7,7 +7,6 @@
   "frontend:dev:watcher": "npm run dev",
   "frontend:dev:serverUrl": "auto",
   "author": {
-    "name": "Corin Ziyadeh",
-    "email": "[email protected]"
+    "name": "Corin Ziyadeh"
   }
 }