display currently selected mander

frontend/src/components/FileTree.vue

@@ -1,28 +1,32 @@
 <script lang="ts">
 export interface FileTreeNode {
-  label: string;
+  path: string;
   children?: FileTreeNode[];
   indentationLevel?: number;
 }
 </script>
 
 <script setup lang="ts">
+import { computed } from "vue";
 import FileTreeItem from "./FileTreeItem.vue";
 
-defineProps<{ nodes: FileTreeNode[] }>();
+const props = defineProps<{ nodes: FileTreeNode[] }>();
+defineEmits<{
+  onItemClick: [nodePath: string];
+}>();
 </script>
 
 <template>
   <FileTreeItem
     v-for="(node, index) in nodes"
     :key="index"
-    :label="node.label"
+    :path="node.path"
     :children="node.children"
     :indentation-level="0"
   />
 </template>
 
-<style>
+<style scoped>
 .file-tree {
   padding: 1em;
   background-color: green;

frontend/src/components/FileTreeItem.vue

@@ -1,36 +1,51 @@
 <script setup lang="ts">
 import { computed } from "vue";
+import { useRouter } from "vue-router";
 import { type FileTreeNode } from "./FileTree.vue";
 import FolderIcon from "./icons/FolderIcon.vue";
 import ManderIcon from "./icons/ManderIcon.vue";
 
+const router = useRouter();
 const props = defineProps<FileTreeNode>();
 
 const hasChildren = computed(() => props.children?.length);
+const label = computed(() => {
+  const slugs = props.path.split("/");
+  return slugs[slugs.length - 1];
+});
+
+function onClick() {
+  router.push({
+    name: "mander",
+    params: {
+      slug: props.path.split("/"),
+    },
+  });
+}
 </script>
 
 <template>
   <div class="file-tree-item" :style="`--indentation-level: ${indentationLevel};`">
-    <div class="label">
+    <div class="label" @click="onClick">
       <div class="icon">
         <FolderIcon v-if="hasChildren" />
         <ManderIcon v-else />
       </div>
-      <div class="text">{{ props.label }}</div>
+      <div class="text">{{ label }}</div>
     </div>
     <div class="children" v-if="hasChildren">
       <FileTreeItem
         v-for="(child, index) in props.children"
         :key="index"
-        :label="child.label"
+        :path="child.path"
         :children="child.children"
         :indentation-level="(indentationLevel ?? 0) + 1"
       />
     </div>
   </div>
 </template>
 
-<style>
+<style scoped>
 .file-tree-item {
   margin-left: calc(8px * var(--indentation-level));
 
@@ -45,6 +60,7 @@ const hasChildren = computed(() => props.children?.length);
 
     &:hover {
       background-color: #ddd;
+      font-weight: 500;
     }
 
     & .icon {

frontend/src/models.ts

@@ -0,0 +1,13 @@
+export interface Mander {
+  path: string;
+  views: string[];
+  logs: string[];
+  artifacts: {
+    [key: string]: {
+      path: string;
+    };
+  };
+  info: {
+    [key: string]: any;
+  };
+}

frontend/src/router/index.ts

@@ -9,6 +9,11 @@ const router = createRouter({
       name: "home",
       component: DashboardView,
     },
+    {
+      path: "/:slug+",
+      name: "mander",
+      component: DashboardView,
+    },
   ],
 });
 

frontend/src/services/api.ts

@@ -1,3 +1,5 @@
+import { type Mander } from "../models";
+
 const BASE_URL = "http://localhost:8000/api";
 
 function getErrorMessage(error: unknown) {
@@ -9,7 +11,7 @@ function reportError(message: string) {
   console.error(message);
 }
 
-export async function getAllManderPaths(): Promise<string[]> {
+export async function fetchAllManderPaths(): Promise<string[]> {
   try {
     const r = await fetch(`${BASE_URL}/mandrs`);
     const paths = await r.json();
@@ -19,3 +21,14 @@ export async function getAllManderPaths(): Promise<string[]> {
     return [];
   }
 }
+
+export async function fetchMander(path: string): Promise<Mander | null> {
+  try {
+    const r = await fetch(`${BASE_URL}/mandrs/${path}`);
+    const m = await r.json();
+    return m as Mander;
+  } catch (error) {
+    reportError(getErrorMessage(error));
+    return null;
+  }
+}

frontend/src/views/DashboardView.vue

@@ -1,37 +1,88 @@
 <script setup lang="ts">
-import { computed } from "vue";
-import FileTree, { type FileTreeNode } from "@/components/FileTree.vue";
-import { getAllManderPaths } from "@/services/api";
+import { computed, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+
+import { type Mander } from "../models";
+import { fetchAllManderPaths, fetchMander } from "../services/api";
+import FileTree, { type FileTreeNode } from "../components/FileTree.vue";
+import ManderView from "./ManderView.vue";
+
+const route = useRoute();
+const manderPaths = ref<string[]>([]);
+const mander = ref<Mander>();
 
-const manderPaths = await getAllManderPaths();
 const pathsAsFileTreeNodes = computed(() => {
   const tree: FileTreeNode[] = [];
-  for (let p of manderPaths) {
+  for (let p of manderPaths.value) {
     const slugs = p.split("/");
     const rootSlug = slugs[0];
-    let currentNode = tree.find((n) => n.label == rootSlug);
+    let currentNode = tree.find((n) => n.path == rootSlug);
     if (!currentNode) {
-      currentNode = { label: rootSlug };
+      currentNode = { path: rootSlug };
       tree.push(currentNode);
     }
     let n = currentNode!;
     for (let s of slugs.slice(1)) {
       n.children = n.children || [];
-      let childNode = n.children.find((n) => n.label == s);
+      const path = `${n.path}/${s}`;
+      let childNode = n.children.find((n) => n.path == path);
       if (!childNode) {
-        childNode = { label: s };
+        childNode = { path };
         n.children.push(childNode);
       }
       n = childNode;
     }
   }
-
   return tree;
 });
+
+watch(
+  () => route.params.slug,
+  async (newSlug) => {
+    const path = Array.isArray(newSlug) ? newSlug.join("/") : newSlug;
+    const m = await fetchMander(path);
+    if (m) {
+      mander.value = m;
+    }
+    // TODO handle error
+  }
+);
+
+manderPaths.value = await fetchAllManderPaths();
 </script>
 
 <template>
-  <div class="dashboard">
-    <FileTree :nodes="pathsAsFileTreeNodes"></FileTree>
-  </div>
+  <main>
+    <nav>
+      <FileTree :nodes="pathsAsFileTreeNodes" />
+    </nav>
+    <article>
+      <ManderView v-if="mander" :mander="mander" />
+    </article>
+  </main>
 </template>
+
+<style scoped>
+main {
+  display: flex;
+  flex-direction: row;
+
+  nav,
+  article {
+    overflow: scroll;
+    height: 100dvh;
+  }
+
+  nav {
+    width: 285px;
+    flex-shrink: 0;
+    padding: 10px;
+    border-left: 1px solid #e9e9e9;
+    background-color: #f2f1f1;
+  }
+
+  article {
+    flex-grow: 1;
+  }
+}
+</style>

frontend/src/views/ManderView.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { type Mander } from "../models";
+
+const props = defineProps<{ mander: Mander }>();
+</script>
+
+<template>
+  <h1>{{ props.mander.path }}</h1>
+  <aside>
+    <h2>Views</h2>
+    <div v-for="(value, name, index) in props.mander.views" :key="index">
+      <h3>{{ name }}</h3>
+      <div v-html="value" />
+    </div>
+  </aside>
+  <aside>
+    <h2>Logs</h2>
+    <div v-for="(value, name, index) in props.mander.logs" :key="index">
+      <h3>{{ name }}</h3>
+      <div v-html="value" />
+    </div>
+  </aside>
+  <aside>
+    <h2>Artifacts</h2>
+    <div v-for="(value, name, index) in props.mander.artifacts" :key="index">
+      <h3>{{ name }}</h3>
+      <div v-html="value.path" />
+    </div>
+  </aside>
+  <aside>
+    <h2>Info</h2>
+    <div v-for="(value, name, index) in props.mander.info" :key="index">
+      <h3>{{ name }}</h3>
+      <div v-html="value" />
+    </div>
+  </aside>
+</template>
+
+<style scoped>
+aside {
+  border: 1px solid #e9e9e9;
+  margin: 5px;
+
+  h2 {
+    background-color: #f2f1f1;
+    color: #7e7e7e;
+  }
+
+  & > div {
+    padding: 5px;
+  }
+}
+</style>