Merge pull request #162 from klauer/enh_typescript_offline

REF/ENH: typescript + Python-less frontend

.gitattributes

@@ -1 +1,4 @@
 .git_archival.txt  export-subst
+# bash scripts cannot have CRLF on Windows:
+*.sh eol=lf
+*.cmd eol=lf

.pre-commit-config.yaml

@@ -24,7 +24,7 @@ repos:
     -   id: debug-statements
 
 -   repo: https://github.com/pycqa/flake8.git
-    rev: 6.0.0
+    rev: 6.1.0
     hooks:
     -   id: flake8
 
@@ -34,7 +34,7 @@ repos:
     -   id: isort
 
 -   repo: https://github.com/pre-commit/mirrors-prettier
-    rev: v2.7.1
+    rev: v3.0.2
     hooks:
     -   id: prettier
-        types_or: [css, javascript, vue]
+        types_or: [css, javascript, vue, ts]

docker/.env

@@ -1,22 +1,28 @@
-# This is the port the vue.js frontend listens on. You can
-# access it via http://localhost:${FRONTEND_PORT}.
+# This is the port the vue.js frontend listens on. When run with docker, you
+# can access it via http://localhost:${FRONTEND_PORT}.
 WHATRECORD_FRONTEND_PORT=8896
 
 # This is the container name, so the frontend can communicate with the backend
 WHATRECORD_API_HOST=whatrecord
+
 # Alternatively, if run locally or on a different host, you could make this
 # the hostname/IP address:
 # WHATRECORD_API_HOST=127.0.0.1
-
 # This is the port the backend (whatrecord server) listens on. You can
 # access it via localhost:${API_PORT}.
 WHATRECORD_API_PORT=8895
 
+# Finally, as an alternative mode for the vue frontend you can run in a
+# backend-less mode (i.e., no Python API server process).  It requires that
+# WHATRECORD_CACHE_FILE_URL point to the gzipped JSON object generated first by
+# the whatrecord server. This will override WHATRECORD_API_HOST.
+# WHATRECORD_CACHE_FILE_URL=/cache.json.gz
+
 # These are the default plugins to enable.  This is used by the server
 # to selectively enable the plugins, and the frontend to selectively
 # display them to the user. Other plugins include:
 # twincat_pytmc epicsarch netconfig
-WHATRECORD_PLUGINS=happi
+WHATRECORD_PLUGINS="happi twincat_pytmc"
 
 # The default version to use for IOCs
 WHATRECORD_BASE_VERSION=3.15
@@ -36,8 +42,11 @@ WHATRECORD_SERVER_SCAN_PERIOD=600
 WHATRECORD_AUTOSAVE_RELOAD_PERIOD=60
 
 # These are optional to show off the plugins:
-WHATRECORD_HAPPI_CFG=/usr/share/whatrecord/support/happi.cfg
+HAPPI_CFG=/usr/share/whatrecord/support/happi.cfg
 
 # A placeholder for the archiver appliance viewer URL (not supported in this
 # demo):
 WHATRECORD_ARCHIVER_URL=http://localhost/
+
+# PLC source code location:
+BLARK_TWINCAT_ROOT=/usr/local/src/whatrecord/whatrecord/tests/blark_root

docker/Dockerfile

@@ -6,7 +6,7 @@ FROM python:3.10.7-bullseye
 ARG DEBIAN_FRONTEND=noninteractive
 
 RUN apt-get -y update && \
-    apt-get -y install build-essential graphviz gdb && \
+    apt-get -y install build-essential graphviz gdb libldap2-dev libsasl2-dev && \
     apt-get clean
 
 ARG SDIST
@@ -15,7 +15,10 @@ ARG PIP_EXTRAS
 WORKDIR /root
 
 COPY . /usr/local/src/whatrecord
-RUN pip install /usr/local/src/whatrecord ${PIP_EXTRAS}
+RUN pip install /usr/local/src/whatrecord -r /usr/local/src/whatrecord/dev-requirements.txt ${PIP_EXTRAS}
+
+# Hack - we don't include this in the package because it's big:
+RUN cp -r /usr/local/src/whatrecord/whatrecord/tests/blark_root /usr/local/lib/python3.10/site-packages/whatrecord/tests/
 
 WORKDIR /ioc
 

docker/docker-compose.yml

@@ -13,8 +13,8 @@ services:
       - ./support:/usr/share/whatrecord/support
     entrypoint: /bin/sh
     command: /usr/share/whatrecord/support/start_frontend.sh
-    depends_on:
-      - whatrecord
+    # depends_on:
+    #   - whatrecord
 
   whatrecord:
     env_file:

docker/support/start_frontend.sh

@@ -1,11 +1,16 @@
 #!/bin/sh
 #
 WHATRECORD_FRONTEND_PORT=${WHATRECORD_FRONTEND_PORT-8896}
+WHATRECORD_FRONTEND_MODE=${WHATRECORD_FRONTEND_MODE-development}
 
 echo "* Installing frontend dependencies..."
 yarn install
-echo "* Monitoring frontend files in the background to rebuild automatically when they update."
-echo "* Note: it may take a few seconds before the pages are ready to be served"
-yarn build --watch &
-echo "* Running the development server on port ${WHATRECORD_FRONTEND_PORT}."
-yarn serve --port "${WHATRECORD_FRONTEND_PORT}" --host --strictPort  # --debug --logLevel debug
+yarn build
+
+if [ $WHATRECORD_FRONTEND_MODE == "development" ]; then
+  echo "* Running the development server on port ${WHATRECORD_FRONTEND_PORT}."
+  yarn dev --port "${WHATRECORD_FRONTEND_PORT}" --host --mode="${WHATRECORD_FRONTEND_MODE}"
+else
+  yarn build --mode="${WHATRECORD_FRONTEND_MODE}"
+  yarn serve --port "${WHATRECORD_FRONTEND_PORT}" --host --strictPort --mode="${WHATRECORD_FRONTEND_MODE}"
+fi

frontend/Makefile

@@ -4,36 +4,46 @@ endif
 ifneq ("$(wildcard ../docker/.env.local)","")
 	include ../docker/.env.local
 endif
+ifneq ("$(wildcard ./.env)","")
+	include ./.env
+endif
+ifneq ("$(wildcard ./.env.local)","")
+	include ./.env.local
+endif
 
-API_HOST      ?= localhost
-API_PORT      ?= 8895
-FRONTEND_PORT ?= 8896
+WHATRECORD_API_HOST      ?= localhost
+WHATRECORD_API_PORT      ?= 8895
+WHATRECORD_FRONTEND_PORT ?= 8896
 
-dev:
-	@echo "* Starting up the dev server on port ${FRONTEND_PORT} with yarn..."
-	@echo "* Expecting 'whatrec server' to be running on ${API_HOST}:${API_PORT}"
+_show_settings:
+	@echo "* Starting up the dev server on port ${WHATRECORD_FRONTEND_PORT} with yarn..."
+	@echo "* Expecting the whatrecord backend to be running on ${WHATRECORD_API_HOST}:${WHATRECORD_API_PORT}"
 	@echo "* (see .env or .env.local to customize this)"
-	yarn serve --port "${FRONTEND_PORT}"
+
+dev: _show_settings
+	yarn build --mode=development
+	yarn serve --port "${WHATRECORD_FRONTEND_PORT}" --host --strictPort --mode=development
+
+dev-watch:
+	@echo "Building and monitoring source files for changes..."
+	yarn build --mode=development --minify=false --watch
 
 dev-setup:
 	yarn install
 
-docker-dev:
-	@echo "* Starting up the dev server via docker on port ${FRONTEND_PORT}..."
-	@echo "* Expecting 'whatrec server' to be running on ${API_HOST}:${API_PORT}"
-	@echo "* (see .env or .env.local to customize this)"
+docker-dev: _show_settings
 	docker run -it --rm \
 		--name whatrecord-frontend-dev \
 		-v "$(PWD)":/usr/src/app \
 		-w /usr/src/app \
-		-p $(FRONTEND_PORT):$(FRONTEND_PORT) \
+		-p $(WHATRECORD_FRONTEND_PORT):$(WHATRECORD_FRONTEND_PORT) \
 		node:18.9-alpine \
-		yarn serve --port "$(FRONTEND_PORT)"
+		yarn serve --port "$(WHATRECORD_FRONTEND_PORT)"
 
 prod:
 	yarn build
 
 clean:
 	rm -rf ./dist ./node_modules
 
-.PHONY: dev dev-setup prod clean
+.PHONY: _show_settings dev dev-watch dev-setup prod clean

frontend/index.html

@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

frontend/package.json

@@ -2,29 +2,34 @@
   "name": "whatrecord",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "serve": "vite preview",
-    "build": "vite build",
+    "build": "vue-tsc && vite build",
     "dev": "vite",
-    "lint": "eslint --ext .js,.vue --ignore-path ../.gitignore --fix src"
+    "lint": "eslint --ext .ts,.js,.vue --ignore-path ../.gitignore --fix src"
   },
   "dependencies": {
+    "@types/d3-graphviz": "^2.6.7",
     "axios": "^1.4.0",
-    "cytoscape": "^3.25.0",
-    "cytoscape-fcose": "^2.2.0",
+    "d3-graphviz": "^5.1.0",
+    "d3-selection": "^3.0.0",
     "es6-promise": "^4.2.8",
-    "primeflex": "^3.3.0",
+    "pinia": "^2.1.6",
+    "primeflex": "^3.3.1",
     "primeicons": "^6.0.1",
-    "primevue": "3.29.1",
+    "primevue": "^3.32.2",
     "vue": "^3.3.4",
-    "vue-router": "^4.2.1",
-    "vuex": "^4.1.0"
+    "vue-router": "^4.2.4",
+    "wildcard-match": "^5.1.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",
-    "eslint": "8",
-    "eslint-plugin-vue": "9.14.0",
-    "vite": "^4.3.8"
+    "eslint": "^8.47.0",
+    "eslint-plugin-vue": "^9.17.0",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9",
+    "vue-tsc": "^1.8.8"
   },
   "eslintConfig": {
     "root": true,

frontend/src/App.vue

@@ -3,9 +3,9 @@
   <router-view />
 </template>
 
-<script>
+<script lang="ts">
 import TabMenu from "primevue/tabmenu";
-import { plugins } from "./settings.js";
+import { plugins } from "./settings.ts";
 
 export default {
   name: "App",
@@ -14,8 +14,8 @@ export default {
   },
   data() {
     let tab_menu_items = [
-      { label: "Records", icon: "pi pi-fw pi-tags", to: "/" },
-      { label: "IOCs", icon: "pi pi-fw pi-sitemap", to: "/iocs" },
+      { label: "Records", icon: "pi pi-fw pi-tags", to: { name: "whatrec" } },
+      { label: "IOCs", icon: "pi pi-fw pi-sitemap", to: { name: "iocs" } },
       {
         label: "PV Map",
         icon: "pi pi-fw pi-compass",
@@ -26,23 +26,23 @@ export default {
       tab_menu_items.push({
         label: plugin.label,
         icon: plugin.icon,
-        to: "/" + plugin.name,
+        to: { name: plugin.name },
       });
     }
     tab_menu_items.push({
       label: "Gateway",
       icon: "pi pi-fw pi-shield",
-      to: "/gateway",
+      to: { name: "gateway" },
     });
     tab_menu_items.push({
       label: "Duplicates",
       icon: "pi pi-pause",
-      to: "/duplicates",
+      to: { name: "duplicates" },
     });
     tab_menu_items.push({
       label: "Logs",
       icon: "pi pi-fw pi-list",
-      to: "/logs",
+      to: { name: "logs" },
     });
     return {
       tab_menu_items: tab_menu_items,

frontend/src/components/asyn-port.vue

@@ -15,20 +15,20 @@
   </template>
 </template>
 
-<script>
-import DictionaryTable from "@/components/dictionary-table.vue";
+<script lang="ts">
+import { PropType } from "vue";
+import DictionaryTable from "./dictionary-table.vue";
+import { AsynPort } from "@/types/asyn";
 
 export default {
   name: "AsynPort",
   props: {
-    asyn_port: Object,
-  },
-  components: [DictionaryTable],
-  beforeCreate() {
-    // TODO: I don't think this is circular; why am I running into this?
-    // V2 ref: https://vuejs.org/v2/guide/components-edge-cases.html#Circular-References-Between-Components
-    this.$options.components.DictionaryTable = DictionaryTable;
+    asyn_port: {
+      type: Object as PropType<AsynPort>,
+      required: true,
+    },
   },
+  components: { DictionaryTable },
 };
 </script>
 

frontend/src/components/dictionary-table.vue

@@ -15,7 +15,7 @@
 
         <td v-if="key == 'context'" class="value">
           <script-context-link
-            :context="value"
+            :context="value as FullLoadContext"
             :short="4"
           ></script-context-link>
         </td>
@@ -30,7 +30,7 @@
         <td v-else-if="value instanceof Array" class="value">
           <ul>
             <li v-for="item of value" :key="item">
-              <template v-if="item && Object.keys(item)[0] != 0">
+              <template v-if="item != null && typeof item == 'object'">
                 <dictionary-table :dict="item" cls="metadata" :skip_keys="[]" />
               </template>
               <template v-else>
@@ -55,15 +55,21 @@
   </table>
 </template>
 
-<script>
+<script lang="ts">
+import { PropType } from "vue";
 import ScriptContextLink from "./script-context-link.vue";
+import { FullLoadContext } from "../types";
 
 export default {
   name: "DictionaryTable",
   props: {
     cls: String,
-    dict: Object,
-    skip_keys: Array,
+    dict: Object as PropType<Record<string, any>>,
+    skip_keys: {
+      type: Object as PropType<string[]>,
+      default: [],
+      required: false,
+    },
     key_column: String,
     value_column: String,
     path: String,
@@ -83,12 +89,12 @@ export default {
       return `nested-${this.nest_level}`;
     },
     filtered_dict() {
-      let filtered = {};
+      let filtered: Record<string, Object> = {};
       if (this.dict === null || this.dict === undefined) {
         return filtered;
       }
       for (const [key, value] of Object.entries(this.dict)) {
-        if (this.skip_keys.indexOf(key) < 0 && value != null) {
+        if (this.skip_keys.indexOf(key) < 0 && value !== null) {
           const looks_worth_displaying =
             typeof value == "boolean" ||
             typeof value == "number" ||