UI Fixes & more dns names #patch (spr-networks#242)

* [packet_logs] Implement dns cache for IP Src/Dst mapping * [api] Populate traffic with dns cache * [build] Run image builds on github * [build] Fix typo for unmount script * [installer] add cloud-guest dep * [ui] Add SrcDomain/DstDomain to traffic list * [docs] Add release note on domains * [ui] bytes == b * [ui] size sm/xs * [ui] DeviceItem * [ui] hide scrollbar * [ui] style generic for protocol * [ui] unique and better names for devices * [ui] fix layout * [ui] Fix Date Picker vs UTC * [ui] Improve firewall hints * [ui] Dont disappear date picker when list is empty * [superd] reload the compose whitelist on the fly * [api] Add tag support for lan_upstream on interfaces * [ui] Add support for tags for custom interface rules * [base] Remove docker0 from fwd_iface_lan by default * [ui] Prepopulate interface names from docker where it makes sense * [ui] add size * [ui] add size * [ui] remove cypress * [ui] fix alert * [ui] set icon and color style for devices * [ui] fix mobile * [build] update release info about container tags * [ui] Fix mock for updated contatainer interface rules * [ui] Fix dockernets mock * [ui] skip alert for now * [ui] fix space * [ui] add device * [ui] set height on web - force use of ScrollView * [ui] ScrollView * [ui] height * [ui] show less if simpleView * [ui] add padding * [ui] force prismjs bump * [api] Add missing release notes * [build] Attempt force-rebuild for main branch * [ui] nuke react native syntax highlighter * [ui] remover stray import * [doc] Update notes * [build] Fix iso runners for ubuntu-latest --------- Co-authored-by: lts-po <[email protected]>
jefferyq2 · Nov 30, 2023 · 5084194 · 5084194
1 parent dd81660
commit 5084194
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 225 deletions.
diff --git a/.github/workflows/clearfog-ubuntu-iso.yml b/.github/workflows/clearfog-ubuntu-iso.yml
@@ -9,7 +9,7 @@ on:
 
 jobs:
   build_iso:
-    runs-on: ubuntu
+    runs-on: ubuntu-latest
     steps:
       - name: Check out the repo
         uses: actions/checkout@v2

diff --git a/.github/workflows/docker-image.yml b/.github/workflows/docker-image.yml
@@ -49,4 +49,6 @@ jobs:
           cp -R base/template_configs configs
           ./build_docker_compose.sh \
             --set "*.platform=linux/amd64,linux/arm64" \
+            `[[ "${{ github.event_name }}" = "workflow_run" && ("${{ github.ref_name }}" = "main") ]] && echo "--force-rebuild"` \
             `[[ "${{ github.event_name }}" = "workflow_run" && ("${{ github.ref_name }}" = "main")  || ( ! -z $RELEASE_CHANNEL && ("${{ github.event_name }}" = "push")) ]] && echo "--push"` || exit 1
+
diff --git a/.github/workflows/pi-ubuntu-iso.yml b/.github/workflows/pi-ubuntu-iso.yml
@@ -9,7 +9,7 @@ on:
 
 jobs:
   build_iso:
-    runs-on: ubuntu
+    runs-on: ubuntu-latest
 
     steps:
       - name: Check out the repo

diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md
@@ -1,7 +1,11 @@
 # Secure Programmable Router (SPR) Release Notes
 ## v0.3.2
+* Fixes for DNS Log date picker 
 * Add Domain info from recent lookups to TrafficList and the packet event log
 * Add tag support and populating interfaces from Docker for Custom Interface rules
+* Further simplify some dialogues in simple mode
+* Fix reload of custom compose paths, without restarting superd
+* Reduce UI load size by switching syntax highlighter for events
 
 ## v0.3.1
 

diff --git a/frontend/package.json b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "supernetworks-SPR-ui",
-  "version": "0.2.25",
+  "version": "0.3.3",
   "description": "Supernetworks Secure Programmable Router",
   "main": "index.js",
   "private": true,
@@ -61,6 +61,7 @@
     "metro-react-native-babel-preset": "^0.77.0",
     "miragejs": "^0.1.43",
     "moment": "^2.29.4",
+    "prism-react-renderer": "^2.3.0",
     "prop-types": "^15.7.2",
     "react": "^18.2.0",
     "react-chartjs-2": "^4.0.1",
@@ -73,7 +74,6 @@
     "react-native-safe-area-context": "^4.2.5",
     "react-native-svg": "13.4.0",
     "react-native-swipe-list-view": "^3.2.9",
-    "react-native-syntax-highlighter": "^2.1.0",
     "react-native-tab-view": "^3.1.1",
     "react-native-web": "^0.19.9",
     "react-qr-code": "^2.0.5",

diff --git a/frontend/src/components/Logs/LogListItem.js b/frontend/src/components/Logs/LogListItem.js
@@ -285,8 +285,8 @@ const PrettyItem = ({ item, selected, showJSON, setIsParsable, ...props }) => {
         borderWidth="$0"
         w="$full"
       >
-        <JSONSyntax>{jsonData}</JSONSyntax>
-        {hexLines ? <HEXSyntax>{hexLines}</HEXSyntax> : null}
+        <JSONSyntax code={jsonData} />
+        {hexLines ? <HEXSyntax code={hexLines}/> : null}
         <Button
           action="secondary"
           variant="link"

diff --git a/frontend/src/components/SyntaxHighlighter.js b/frontend/src/components/SyntaxHighlighter.js
@@ -1,5 +1,5 @@
-import { default as RNSyntaxHighlighter } from 'react-native-syntax-highlighter'
-import { github, ocean } from 'react-syntax-highlighter/styles/hljs'
+import React from "react";
+import { Highlight, themes } from "prism-react-renderer"
 import { useColorMode } from '@gluestack-ui/themed'
 
 //skip some properties
@@ -12,40 +12,53 @@ const dumpJSON = (item, clean = false) => {
   return JSON.stringify(rest)
 }
 
+
 const JSONSyntax = ({ language, ...props }) => {
   const colorMode = useColorMode()
-  const syntaxTheme = colorMode == 'light' ? github : ocean
+  const syntaxTheme = colorMode == 'light' ? themes.nightOwlLight : themes.nightOwlDark
 
   return (
-    <RNSyntaxHighlighter
-      highlighter="hljs"
-      language="json"
-      style={syntaxTheme}
-      wrapLongLines={true}
-      lineProps={{ style: { flexWrap: 'wrap', lineHeight: 1.5 } }} // Adjusted line height
-      customStyle={{
-        backgroundColor: 'transparent'
-      }}
+    <Highlight
+      theme={syntaxTheme}
+      code={props.code}
+      language="js"
     >
-      {props.children}
-    </RNSyntaxHighlighter>
+      {({ className, style, tokens, getLineProps, getTokenProps }) => (
+        <pre style={style}>
+          {tokens.map((line, i) => (
+            <div key={i} {...getLineProps({ line })}>
+              {line.map((token, key) => (
+                <span key={key} {...getTokenProps({ token })} />
+              ))}
+            </div>
+          ))}
+        </pre>
+      )}
+    </Highlight>
   )
 }
 
 const HEXSyntax = ({ ...props }) => {
   const colorMode = useColorMode()
-  const syntaxTheme = colorMode == 'light' ? github : ocean
-
+  const syntaxTheme = colorMode == 'light' ? themes.nightOwlLight : themes.nightOwlDark
   return (
-    <RNSyntaxHighlighter
-      language="brainfuck"
-      style={syntaxTheme}
-      customStyle={{
-        backgroundColor: 'transparent'
-      }}
+    <Highlight
+      theme={syntaxTheme}
+      code={props.code}
+      language="none"
     >
-      {props.children}
-    </RNSyntaxHighlighter>
+      {({ className, style, tokens, getLineProps, getTokenProps }) => (
+        <pre style={style}>
+          {tokens.map((line, i) => (
+            <div key={i} {...getLineProps({ line })}>
+              {line.map((token, key) => (
+                <span key={key} {...getTokenProps({ token })} />
+              ))}
+            </div>
+          ))}
+        </pre>
+      )}
+    </Highlight>
   )
 }