Initial commit

.gitattributes

@@ -0,0 +1,7 @@
+* text=auto eol=lf
+*.bat eol=crlf
+
+**/*.v linguist-language=V
+**/*.vv linguist-language=V
+**/*.vsh linguist-language=V
+**/v.mod linguist-language=V

.github/workflows/build-frontend-dev.yml

@@ -0,0 +1,64 @@
+name: Build Frontend
+
+on:
+  push:
+    branches:
+      - develop
+    paths:
+      - frontend/**
+      - .github/workflows/build-frontend-dev.yml
+  pull_request:
+    branches:
+      - develop
+    paths:
+      - frontend/**
+      - .github/workflows/build-frontend-dev.yml
+
+jobs:
+  build-online:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout ${{ github.event.repository.name }}
+        uses: actions/checkout@v3
+
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20.x'
+
+      - name: Build Frontend
+        working-directory: frontend
+        run: |
+          npm install
+          npm run build
+
+      - name: Archive online application
+        uses: actions/upload-artifact@v3
+        with:
+          name: rpv-web-online
+          path: frontend/dist
+
+  build-offline:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout ${{ github.event.repository.name }}
+        uses: actions/checkout@v3
+
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20.x'
+
+      - name: Build Frontend
+        working-directory: frontend
+        run: |
+          npm install
+          npm run build -- --mode offline
+
+      - name: Archive offline application
+        uses: actions/upload-artifact@v3
+        with:
+          name: rpv-web-offline
+          path: frontend/dist

.github/workflows/build-frontend.yml

@@ -0,0 +1,64 @@
+name: Build Frontend
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - frontend/**
+      - .github/workflows/build-frontend.yml
+  pull_request:
+    branches:
+      - main
+    paths:
+      - frontend/**
+      - .github/workflows/build-frontend.yml
+
+jobs:
+  build-online:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout ${{ github.event.repository.name }}
+        uses: actions/checkout@v3
+
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20.x'
+
+      - name: Build Frontend
+        working-directory: frontend
+        run: |
+          npm install
+          npm run build
+
+      - name: Archive online application
+        uses: actions/upload-artifact@v3
+        with:
+          name: rpv-web-online
+          path: frontend/dist
+
+  build-offline:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout ${{ github.event.repository.name }}
+        uses: actions/checkout@v3
+
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20.x'
+
+      - name: Build Frontend
+        working-directory: frontend
+        run: |
+          npm install
+          npm run build -- --mode offline
+
+      - name: Archive offline application
+        uses: actions/upload-artifact@v3
+        with:
+          name: rpv-web-offline
+          path: frontend/dist

Makefile

@@ -0,0 +1,17 @@
+Options := -os windows -enable-globals
+DebugOptions := ${Options} -d debug
+
+rpv-web-x64 x64:
+	v ${Options} . -o ${@}.exe
+
+rpv-web-x64-debug debug:
+	v ${DebugOptions} . -o ${@}.exe
+
+rpv-web-x86 x86:
+	v -m32 ${Options} . -o ${@}.exe
+
+rpv-web-x86-debug x86-debug:
+	v -m32 ${DebugOptions} . -o ${@}.exe
+
+clean:
+	rm -f *.exe

README.md

@@ -1,2 +1,9 @@
-# rpv-web
-rpv-web is a browser based frontend for the rpv library
+### rpv-web
+
+----
+
+*rpv-web* is a browser based frontend for the [rpv](https://github.com/qtc-de/rpv)
+library. The frontend is written in [Vue](https://vuejs.org/) whereas the backend
+utilizes *v's* builtin [web framework](https://github.com/vlang/v/tree/master/vlib/vweb).
+The overall design was strongly influenced by the *Qt* based application
+[RpcView](https://www.rpcview.org/).

frontend/.env.offline

@@ -0,0 +1 @@
+VITE_OFFLINE_MODE=1

frontend/Dockerfile

@@ -0,0 +1,19 @@
+FROM node:lts-alpine
+
+WORKDIR /app
+COPY package*.json .
+
+RUN adduser --gecos '' --disabled-password rpv       \
+ && chown -R rpv:rpv /app                            \
+ && su rpv -c "npm install"                          \
+ && su rpv -c "npm install http-server"
+
+COPY . .
+
+RUN chown -R rpv:rpv /app                         \
+ && su rpv -c "npm run build -- --mode offline"
+
+USER rpv:rpv
+EXPOSE 5173
+
+CMD ["npm", "run", "dev", "--", "--host"]

frontend/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>rpv</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "rpv-web",
+  "description": "A web frontend for rpv",
+  "version": "1.0.0",
+  "homepage": "https://github.com/qtc-de/rpv-web",
+  "license": "GPL-3.0",
+  "author": {
+      "name": "Tobias Neitzel",
+      "url": "https://twitter.com/qtc_de"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@highlightjs/vue-plugin": "^2.1.0",
+    "@iarna/toml": "^3.0.0",
+    "pinia": "^2.0.32",
+    "vue": "^3.2.47",
+    "vue-router": "^4.1.6",
+    "vue-simple-context-menu": "^4.0.4"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.0.0",
+    "vite": "^4.1.4"
+  }
+}

frontend/src/App.vue

@@ -0,0 +1,9 @@
+<script setup>
+    import { RouterView } from 'vue-router'
+    import Headline from './components/Headline.vue'
+</script>
+
+<template>
+    <Headline />
+    <RouterView />
+</template>

frontend/src/assets/css/main.css

@@ -0,0 +1,82 @@
+@import "primer.css";
+
+html {
+    width: 100%;
+    height: 100%;
+}
+
+body {
+    width: 100%;
+    height: 100%;
+}
+
+#app {
+    width: 100%;
+    height: 100%;
+}
+
+.W-90 {
+    width: 90%;
+}
+
+.WH-100 {
+    width: 100%;
+    height: 100%;
+}
+
+.Fs-8 {
+    font-size: 8pt;
+}
+
+.SmallBorder {
+    border-style: solid;
+    border-width: 1px;
+    border-radius: 15px;
+    overflow: auto;
+    padding: 10px;
+}
+
+.GenericTable {
+    width: 100%;
+    text-align: left;
+    white-space: nowrap;
+    overflow: auto;
+}
+
+.Selected {
+    background-color: #6b77e5 !important;
+}
+
+.Rpc {
+    background-color: #ffd379;
+}
+
+.Dcom {
+    background-color: #c694ff;
+}
+
+.Hybrid {
+    background-color: #acd2ce;
+}
+
+.WrongArch {
+    background-color: #ffabab;
+}
+
+* {
+    scrollbar-width: thin;
+}
+
+*::-webkit-scrollbar {
+  width: 8px !important;
+  height: 8px !important;
+}
+
+*::-webkit-scrollbar-thumb {
+  border-radius: 8px !important;
+  background: #aaaaaa !important;
+}
+
+pre > code {
+    font-size: 12pt;
+}

frontend/src/components/EndpointPane.vue

@@ -0,0 +1,55 @@
+<script>
+    import { storeToRefs } from 'pinia'
+    import { processStore } from '@/stores/processStore.js'
+
+    export default
+    {
+        data()
+        {
+            return {
+                selectedEndpoint: null,
+            }
+        },
+
+        setup()
+        {
+            const store = processStore();
+            const { selectedProcess } = storeToRefs(store);
+            return { selectedProcess }
+        }
+    }
+</script>
+
+<template>
+    <h3 class="ml-2">RPC Endpoints</h3>
+    <aside id="EndpointPane" class="SmallBorder mt-2">
+        <table id="EndpointTable">
+            <tr>
+                <th id="ProtocolColumn">Protocol</th>
+                <th id="EndpointColumn">Endpoint</th>
+            </tr>
+            <tr style="cursor: pointer" v-if="selectedProcess" v-for="endpoint in selectedProcess.rpc_info.server_info.endpoints"
+                :class="{ Selected: selectedEndpoint == endpoint }" @click="selectedEndpoint = endpoint">
+                <td>{{ endpoint.protocol }}</td>
+                <td>{{ endpoint.name }}</td>
+            </tr>
+        </table>
+    </aside>
+</template>
+
+<style>
+    #EndpointPane {
+        height: 100%;
+        width: 90%;
+    }
+
+    #EndpointTable {
+        width: 100%;
+        text-align: left;
+        white-space: nowrap;
+    }
+
+    #ProtocolColumn {
+        width: 20%;
+    }
+</style>

frontend/src/components/ErrorSuccessLabels.vue

@@ -0,0 +1,11 @@
+<script>
+    export default
+    {
+        props: ['error', 'class'],
+    }
+</script>
+
+<template>
+    <p v-if="error !== null && !error" :class="class" style="color: green;">Success.</p>
+    <p v-if="error !== null && error" :class="class" style="color: red;">Error.</p>
+</template>