🎉 Basic Web Sideload

pkg/sideload/view/src/assets/main.css

@@ -0,0 +1,6 @@
+@import "vfonts/IBMPlexSans.css";
+@import "vfonts/IBMPlexMono.css";
+
+a {
+    color: #3f7ee8;
+}

pkg/sideload/view/src/components/data/sites-table-action.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="flex gap-[4px]">
+    <n-button size="small" @click="publishing = true">
+      <template #icon>
+        <n-icon :component="CloudUpload" />
+      </template>
+    </n-button>
+    <n-button size="small" @click="editConfig()">
+      <template #icon>
+        <n-icon :component="Edit" />
+      </template>
+    </n-button>
+
+    <n-modal
+      v-model:show="publishing"
+      class="w-[720px]"
+      preset="card"
+      title="Publish Artifacts"
+      segmented
+      closable
+    >
+      We are sorry about this tool isn't completed yet. <br>
+      For now, you can use our <b>Wonderful Command Line Tool —— RDS</b> <br>
+      Learn more on our <a href="https://wiki.smartsheep.studio/roadsign/index.html" target="_blank">official wiki</a>.
+      <br>
+      <br>
+      Install it by this command below
+      <n-code code="go install code.smartsheep.studio/goatworks/roadsign/pkg/cmd/rds@latest" />
+      <br>
+      Then connect your rds client to this server
+      <n-code :code="`rds connect <name> ${host} <credentials>`" />
+      <br>
+      After that you can publish your stuff (You need to compress them to zip archive before publish)
+      <n-code :code="`rds deploy <name> ${props.id} <upstream id or process id>`" />
+    </n-modal>
+
+    <n-modal
+      v-model:show="editing"
+      class="w-[720px]"
+      content-style="padding: 0"
+      preset="card"
+      title="Edit Configuration"
+      segmented
+      closable
+    >
+      <div class="relative h-[540px]">
+        <vue-monaco-editor
+          v-model:value="config"
+          :options="{ automaticLayout: true, minimap: { enabled: false } }"
+          language="yaml"
+        />
+
+        <div class="fab">
+          <n-tooltip placement="left">
+            <template #trigger>
+              <n-button
+                circle
+                type="primary"
+                size="large"
+                class="shadow-lg"
+                :loading="submitting"
+                @click="syncConfig()"
+              >
+                <template #icon>
+                  <n-icon :component="Save" />
+                </template>
+              </n-button>
+            </template>
+            This operation will restart all processes related. Service may interrupted for some while.
+          </n-tooltip>
+        </div>
+      </div>
+    </n-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NButton, NCode, NIcon, NModal, NTooltip, useMessage } from "naive-ui"
+import { CloudUpload, Edit, Save } from "@vicons/carbon"
+import { ref } from "vue"
+import { VueMonacoEditor } from "@guolao/vue-monaco-editor"
+import * as yaml from "js-yaml"
+
+const message = useMessage()
+
+const props = defineProps<{ id: string, rules: any[], upstreams: any[], processes: any[] }>()
+const emits = defineEmits(["reload"])
+const host = location.protocol + "//" + location.host
+
+const submitting = ref(false)
+
+const publishing = ref(false)
+const editing = ref(false)
+
+const config = ref<string | null>(null)
+
+async function editConfig() {
+  const resp = await fetch(`/cgi/sites/cfg/${props.id}`)
+  config.value = await resp.text()
+  editing.value = true
+}
+
+async function syncConfig() {
+  let content
+  try {
+    content = yaml.load(config.value)
+  } catch (e: any) {
+    message.warning(`Your configuration has some issue: ${e.message}`)
+    return
+  }
+
+  submitting.value = true
+  const resp = await fetch(`/webhooks/sync/${props.id}`, {
+    method: "PUT",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(content)
+  })
+  if (resp.status != 200) {
+    message.error(`Something went wrong... ${await resp.text()}`)
+  } else {
+    emits("reload")
+  }
+  submitting.value = false
+}
+</script>
+
+<style scoped>
+.fab {
+  position: absolute;
+  bottom: 16px;
+  right: 24px;
+}
+</style>

pkg/sideload/view/src/components/data/sites-table-add.vue

@@ -0,0 +1,110 @@
+<template>
+  <div>
+    <n-button circle size="small" type="primary" @click="creating = true">
+      <template #icon>
+        <n-icon :component="Add" />
+      </template>
+    </n-button>
+
+    <n-modal
+      v-model:show="creating"
+      class="w-[720px]"
+      content-style="padding: 0"
+      preset="card"
+      title="Create Site"
+      segmented
+      closable
+    >
+      <div class="py-4 px-5 border border-solid border-b border-[#eee]">
+        <n-input
+          v-model:value="data.id"
+          placeholder="Will be the file name of this file"
+        />
+      </div>
+
+      <div class="relative mt-[4px] h-[540px]">
+        <vue-monaco-editor
+          v-model:value="data.content"
+          :options="{ automaticLayout: true, minimap: { enabled: false } }"
+          language="yaml"
+        />
+
+        <div class="fab">
+          <n-tooltip placement="left">
+            <template #trigger>
+              <n-button
+                circle
+                type="primary"
+                size="large"
+                class="shadow-lg"
+                :loading="submitting"
+                @click="submit()"
+              >
+                <template #icon>
+                  <n-icon :component="Checkmark" />
+                </template>
+              </n-button>
+            </template>
+            This operation will publish this site right away.
+          </n-tooltip>
+        </div>
+      </div>
+    </n-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NButton, NIcon, NInput, NModal, NTooltip, useMessage } from "naive-ui"
+import { Add, Checkmark } from "@vicons/carbon"
+import { VueMonacoEditor } from "@guolao/vue-monaco-editor"
+import { ref } from "vue"
+import * as yaml from "js-yaml"
+
+const message = useMessage()
+
+const emits = defineEmits(["reload"])
+
+const submitting = ref(false)
+const creating = ref(false)
+
+const data = ref<any>({})
+
+async function submit() {
+  let content
+  try {
+    content = yaml.load(data.value.content)
+  } catch (e: any) {
+    message.warning(`Your configuration has some issue: ${e.message}`)
+    return
+  }
+
+  submitting.value = true
+  const resp = await fetch(`/webhooks/sync/${data.value.id}`, {
+    method: "PUT",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(content)
+  })
+  if (resp.status != 200) {
+    message.error(`Something went wrong... ${await resp.text()}`)
+  } else {
+    reset()
+    emits("reload")
+    message.success("Your site has been created! 🎉")
+    creating.value = false
+  }
+  submitting.value = false
+}
+
+function reset() {
+  data.value.id = ""
+  data.value.content = ""
+}
+</script>
+
+<style scoped>
+.fab {
+  position: absolute;
+  bottom: 16px;
+  right: 24px;
+}
+</style>

pkg/sideload/view/src/components/data/sites-table-expand.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="flex flex-col gap-1">
+
+    <div>
+      <div class="font-bold">Rules</div>
+      <n-code :hljs="hljs" :code="parseData(props.rules)" language="json" />
+    </div>
+
+    <div>
+      <div class="font-bold">Upstreams</div>
+      <n-code :hljs="hljs" :code="parseData(props.upstreams)" language="json" />
+    </div>
+
+    <div>
+      <div class="font-bold">Processes</div>
+      <n-code :hljs="hljs" :code="parseData(props.processes)" language="json" />
+    </div>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NCode } from "naive-ui"
+import hljs from "highlight.js/lib/core"
+import json from "highlight.js/lib/languages/json"
+
+hljs.registerLanguage("json", json)
+
+const props = defineProps<{ rules: any[], upstreams: any[], processes: any[] }>()
+
+function parseData(data: any): string {
+  return JSON.stringify(data, null, 1)
+    .replace(/  +/g, " ")
+    .replace(/\n/g, "")
+}
+</script>

pkg/sideload/view/src/components/data/sites-table.vue

@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <n-card title="Sites">
+      <template #header-extra>
+        <sites-table-add @reload="readSites()" />
+      </template>
+
+      <n-data-table
+        :columns="columns"
+        :data="data"
+        :row-key="(row: any) => row.id"
+      />
+    </n-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NCard, NDataTable, NTag } from "naive-ui"
+import { h, ref } from "vue"
+import SitesTableExpand from "@/components/data/sites-table-expand.vue"
+import SitesTableAction from "@/components/data/sites-table-action.vue"
+import SitesTableAdd from "@/components/data/sites-table-add.vue"
+
+const columns = [
+  {
+    type: "expand",
+    renderExpand(row: any) {
+      return h(SitesTableExpand, { ...row, class: "pl-[38px]" })
+    }
+  },
+  {
+    title: "ID",
+    key: "id",
+    render(row: any) {
+      return h(NTag, { type: "info", bordered: false, size: "small" }, row?.id)
+    }
+  },
+  {
+    title: "Rules",
+    key: "rules",
+    render(row: any) {
+      return row?.rules?.length ?? 0
+    }
+  },
+  {
+    title: "Upstreams",
+    key: "upstreams",
+    render(row: any) {
+      return row?.upstreams?.length ?? 0
+    }
+  },
+  {
+    title: "Processes",
+    key: "processes",
+    render(row: any) {
+      return row?.processes?.length ?? 0
+    }
+  },
+  {
+    title: "Actions",
+    key: "actions",
+    render(row: any) {
+      return h(SitesTableAction, { ...row, onReload: () => readSites() })
+    }
+  }
+]
+
+const data = ref<any[]>([])
+
+async function readSites() {
+  const resp = await fetch("/cgi/sites")
+  data.value = await resp.json()
+}
+
+readSites()
+</script>

pkg/sideload/view/src/layouts/main.vue

@@ -0,0 +1,60 @@
+<template>
+  <n-layout>
+    <n-layout-header class="header py-[8px] px-[36px]" bordered>
+      <div class="flex items-center gap-2">
+        <router-link class="link" to="/">
+          RoadSign<i>!</i>
+        </router-link>
+      </div>
+
+      <div class="nav-menu">
+        <div class="h-full flex items-center header-nav">
+          <n-menu v-model:value="key" :options="options" mode="horizontal" />
+        </div>
+      </div>
+    </n-layout-header>
+    <n-layout-content class="h-[calc(100vh-70px)] container mx-auto" content-style="padding: 24px">
+      <router-view />
+    </n-layout-content>
+  </n-layout>
+</template>
+
+<script setup lang="ts">
+import { type MenuOption, NIcon, NLayout, NLayoutContent, NLayoutHeader, NMenu } from "naive-ui"
+import { type Component, h, ref } from "vue"
+import { Dashboard } from "@vicons/carbon"
+import { RouterLink, useRoute, useRouter } from "vue-router"
+
+const route = useRoute()
+const router = useRouter()
+const key = ref(route.name?.toString())
+
+router.afterEach((to) => {
+  key.value = to.name?.toString() ?? "index"
+})
+
+const options: MenuOption[] = [
+  {
+    label: () => h(RouterLink, { to: { name: "dashboard" } }, "Dashboard"),
+    icon: renderIcon(Dashboard),
+    key: "dashboard"
+  }
+]
+
+function renderIcon(icon: Component) {
+  return () => h(NIcon, null, { default: () => h(icon) })
+}
+</script>
+
+<style scoped>
+.header {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: 40px;
+}
+
+.link {
+  all: unset;
+  cursor: pointer;
+}
+</style>

pkg/sideload/view/src/main.ts

@@ -0,0 +1,16 @@
+import "./assets/main.css"
+
+import "virtual:uno.css"
+
+import { createApp } from "vue"
+import { createPinia } from "pinia"
+
+import root from "./root.vue"
+import router from "./router"
+
+const app = createApp(root)
+
+app.use(createPinia())
+app.use(router)
+
+app.mount("#app")

pkg/sideload/view/src/root.vue

@@ -0,0 +1,9 @@
+<template>
+  <n-message-provider>
+    <router-view />
+  </n-message-provider>
+</template>
+
+<script setup lang="ts">
+import { NMessageProvider } from "naive-ui"
+</script>

pkg/sideload/view/src/router/index.ts

@@ -0,0 +1,21 @@
+import { createRouter, createWebHistory } from "vue-router"
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: "/",
+      name: "layouts.main",
+      component: () => import("@/layouts/main.vue"),
+      children: [
+        {
+          path: "/",
+          name: "dashboard",
+          component: () => import("@/views/dashboard.vue")
+        },
+      ]
+    },
+  ]
+})
+
+export default router

pkg/sideload/view/src/views/dashboard.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <div class="grid gap-2 grid-cols-2 lg:grid-cols-4">
+      <n-card embedded>
+        <n-statistic label="Status">{{ data?.status ? "Operational" : "Incident" }}</n-statistic>
+      </n-card>
+      <n-card embedded>
+        <n-statistic label="Sites">{{ data?.sites }}</n-statistic>
+      </n-card>
+      <n-card embedded>
+        <n-statistic label="Upstreams">{{ data?.upstreams }}</n-statistic>
+      </n-card>
+      <n-card embedded>
+        <n-statistic label="Processes">{{ data?.processes }}</n-statistic>
+      </n-card>
+    </div>
+
+    <sites-table />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NCard, NStatistic } from "naive-ui"
+import { ref } from "vue"
+import SitesTable from "@/components/data/sites-table.vue"
+
+const data = ref<any>({})
+
+async function readStatistics() {
+  const resp = await fetch("/cgi/statistics")
+  data.value = await resp.json()
+}
+
+readStatistics()
+</script>