Ace edit json dialog and redis

openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@openc3/tool-common": "5.5.3-beta0",
-    "ace-builds": "1.15.2",
+    "ace-builds": "1.17.0",
     "axios": "0.27.2",
     "date-fns": "2.29.3",
     "lodash": "4.17.21",

openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/ScriptRunner.vue

@@ -221,7 +221,7 @@
       layout="horizontal"
       @paneResize="editor.resize()"
     >
-      <div id="editorbox" class="pane">
+      <div class="editorbox pane">
         <v-snackbar
           v-model="showSave"
           absolute
@@ -232,7 +232,11 @@
         >
           Saving...
         </v-snackbar>
-        <pre id="editor" @contextmenu.prevent="showExecuteSelectionMenu"></pre>
+        <pre
+          ref="editor"
+          class="editor"
+          @contextmenu.prevent="showExecuteSelectionMenu"
+        ></pre>
         <v-menu
           v-model="executeSelectionMenu"
           :position-x="menuX"
@@ -814,7 +818,7 @@ export default {
     })
   },
   mounted: async function () {
-    this.editor = ace.edit('editor')
+    this.editor = ace.edit(this.$refs.editor)
     this.editor.setTheme('ace/theme/twilight')
     const openC3Mode = this.buildOpenC3Mode()
     this.editor.session.setMode(new openC3Mode())
@@ -913,7 +917,7 @@ export default {
       oop.inherits(Mode, RubyMode)
       ;(function () {
         this.$id = 'ace/mode/openc3'
-      }.call(Mode.prototype))
+      }).call(Mode.prototype)
       return Mode
     },
     fileNameChanged(filename) {
@@ -1981,10 +1985,10 @@ end
   padding-left: 0px;
   padding-right: 0px;
 }
-#editorbox {
+.editorbox {
   height: 50vh;
 }
-#editor {
+.editor {
   height: 100%;
   width: 100%;
   position: relative;

openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-tlmviewer/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@openc3/tool-common": "5.5.3-beta0",
-    "ace-builds": "1.15.2",
+    "ace-builds": "1.17.0",
     "axios": "0.27.2",
     "binary-search": "1.3.6",
     "date-fns": "2.29.3",

openc3-cosmos-init/plugins/packages/openc3-tool-common/src/components/EditScreenDialog.vue

@@ -73,7 +73,7 @@
         </v-row>
         <v-row> Edit the screen definition. </v-row>
         <v-row class="mb-2">
-          <pre id="editscreeneditor"></pre>
+          <pre ref="editor" class="editor"></pre>
         </v-row>
         <v-row v-for="(error, index) in editErrors" :key="index" class="my-3">
           <span class="red--text" v-text="error"></span>
@@ -172,10 +172,8 @@ export default {
       },
     },
   },
-  mounted: async function () {
-    // Wait for things to render per https://github.com/ajaxorg/ace/issues/5012
-    await new Promise((r) => setTimeout(r, 300))
-    this.editor = ace.edit('editscreeneditor')
+  mounted: function () {
+    this.editor = ace.edit(this.$refs.editor)
     this.editor.setTheme('ace/theme/twilight')
     const screenMode = this.buildScreenMode()
     this.editor.session.setMode(new screenMode())
@@ -237,7 +235,7 @@ export default {
       oop.inherits(Mode, TextMode)
       ;(function () {
         this.$id = 'ace/mode/openc3'
-      }.call(Mode.prototype))
+      }).call(Mode.prototype)
       return Mode
     },
     downloadScreen: function () {
@@ -279,7 +277,7 @@ export default {
 }
 </style>
 <style scoped>
-#editscreeneditor {
+.editor {
   height: 50vh;
   width: 75vw;
   position: relative;

openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/admin/EditDialog.vue

@@ -21,7 +21,7 @@
 -->
 
 <template>
-  <v-dialog :persistent="!readonly" v-model="show" width="600">
+  <v-dialog :persistent="!readonly" v-model="show" width="80vw">
     <v-card>
       <form v-on:submit.prevent="submit">
         <v-system-bar>
@@ -73,12 +73,7 @@
               </v-row>
             </div>
             <v-row no-gutters>
-              <v-textarea
-                v-model="json_content"
-                rows="15"
-                :readonly="readonly"
-                data-test="editTextInput"
-              />
+              <pre class="editor" ref="editor"></pre>
             </v-row>
             <v-row class="my-3">
               <span class="red--text" v-show="error" v-text="error" />
@@ -112,19 +107,48 @@
 </template>
 
 <script>
+import * as ace from 'ace-builds'
+import 'ace-builds/src-min-noconflict/mode-ruby'
+import 'ace-builds/src-min-noconflict/mode-json'
+import 'ace-builds/src-min-noconflict/theme-twilight'
+import 'ace-builds/src-min-noconflict/ext-language_tools'
+import 'ace-builds/src-min-noconflict/ext-searchbox'
+
 export default {
   props: {
     content: {
       type: String,
       required: true,
     },
-    title: String,
+    type: String,
+    name: String,
     value: Boolean, // value is the default prop when using v-model
     readonly: Boolean,
   },
   data() {
     return {
-      json_content: this.content,
+      editor: null,
+    }
+  },
+  mounted() {
+    const openPluginMode = this.buildPluginMode()
+    this.editor = ace.edit(this.$refs.editor)
+    this.editor.setTheme('ace/theme/twilight')
+    this.editor.session.setMode(new openPluginMode())
+    this.editor.session.setTabSize(2)
+    this.editor.session.setUseWrapMode(true)
+    this.editor.$blockScrolling = Infinity
+    this.editor.setHighlightActiveLine(false)
+    this.editor.setValue(this.content)
+    this.editor.clearSelection()
+    this.editor.focus()
+    if (this.readonly) {
+      this.editor.setReadOnly(true)
+    }
+  },
+  beforeDestroy() {
+    if (this.editor) {
+      this.editor.destroy()
     }
   },
   computed: {
@@ -136,38 +160,75 @@ export default {
         this.$emit('input', value) // input is the default event when using v-model
       },
     },
+    title: function () {
+      return `${this.type}: ${this.name}`
+    },
     error: function () {
-      if (this.json_content === '' && !this.file) {
+      if (this.editor && this.editor.getValue() === '' && !this.file) {
         return 'Input can not be blank.'
       }
       return null
     },
   },
   methods: {
     submit: function () {
-      this.$emit('submit', this.json_content)
-      this.json_content = null
+      this.$emit('submit', this.editor.getValue())
       this.show = !this.show
     },
     close: function () {
-      this.json_content = null
       this.show = !this.show
     },
     download: function () {
-      const blob = new Blob([this.json_content], {
+      const blob = new Blob([this.editor.getValue()], {
         type: 'text/plain',
       })
       // Make a link and then 'click' on it to start the download
       const link = document.createElement('a')
       link.href = URL.createObjectURL(blob)
-      link.setAttribute('download', `${this.title}.json`)
+      link.setAttribute(
+        'download',
+        `${this.type.toLowerCase()}_${this.name.toLowerCase()}.json`
+      )
       link.click()
     },
+    buildPluginMode() {
+      var oop = ace.require('ace/lib/oop')
+      var JsonHighlightRules = ace.require(
+        'ace/mode/json_highlight_rules'
+      ).JsonHighlightRules
+
+      var MatchingBraceOutdent = ace.require(
+        'ace/mode/matching_brace_outdent'
+      ).MatchingBraceOutdent
+      var CstyleBehaviour = ace.require(
+        'ace/mode/behaviour/cstyle'
+      ).CstyleBehaviour
+      var FoldMode = ace.require('ace/mode/folding/ruby').FoldMode
+      var Mode = function () {
+        this.HighlightRules = JsonHighlightRules
+        this.$outdent = new MatchingBraceOutdent()
+        this.$behaviour = new CstyleBehaviour()
+        this.foldingRules = new FoldMode()
+        this.indentKeywords = this.foldingRules.indentKeywords
+      }
+      var RubyMode = ace.require('ace/mode/ruby').Mode
+      oop.inherits(Mode, RubyMode)
+      ;(function () {
+        this.$id = 'ace/mode/openc3'
+      }).call(Mode.prototype)
+      return Mode
+    },
   },
 }
 </script>
 
 <style scoped>
+.editor {
+  height: 50vh;
+  width: 75vw;
+  position: relative;
+  font-size: 16px;
+}
 .v-card {
   background-color: var(--v-tertiary-darken2);
 }

openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/admin/tabs/InterfacesTab.vue

@@ -16,7 +16,7 @@
 # All changes Copyright 2022, OpenC3, Inc.
 # All Rights Reserved
 #
-# This file may also be used under the terms of a commercial license 
+# This file may also be used under the terms of a commercial license
 # if purchased from OpenC3, Inc.
 -->
 
@@ -51,7 +51,8 @@
     </v-list>
     <edit-dialog
       :content="jsonContent"
-      :title="`Interface: ${dialogTitle}`"
+      type="Interface"
+      :name="dialogTitle"
       readonly
       v-model="showDialog"
       v-if="showDialog"

openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/admin/tabs/MicroservicesTab.vue

@@ -16,7 +16,7 @@
 # All changes Copyright 2022, OpenC3, Inc.
 # All Rights Reserved
 #
-# This file may also be used under the terms of a commercial license 
+# This file may also be used under the terms of a commercial license
 # if purchased from OpenC3, Inc.
 -->
 
@@ -74,7 +74,8 @@
       v-model="showDialog"
       v-if="showDialog"
       :content="jsonContent"
-      :title="`Microservice: ${dialogTitle}`"
+      type="Microservice"
+      :name="dialogTitle"
       readonly
       @submit="dialogCallback"
     />

openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/admin/tabs/RedisTab.vue

@@ -35,10 +35,13 @@
       <v-card-text class="pb-0 ml-2">
         <v-text-field
           label="Redis command"
+          class="monospace"
           v-model="redisCommandText"
           @keydown="commandKeydown"
         />
-        <span v-if="redisResponse"> Response: {{ redisResponse }} </span>
+        <span v-if="redisResponse" class="monospace">
+          Response: {{ redisResponse }}
+        </span>
       </v-card-text>
       <v-card-actions>
         <v-btn
@@ -67,6 +70,8 @@
       <v-data-table
         :headers="headers"
         :items="commands"
+        class="monospace"
+        item-class="monospace"
         calculate-widths
         disable-pagination
         hide-default-footer
@@ -123,3 +128,10 @@ export default {
   },
 }
 </script>
+
+<style scoped>
+.monospace {
+  font-family: monospace;
+  font-size: 20px;
+}
+</style>

openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/admin/tabs/RoutersTab.vue

@@ -16,7 +16,7 @@
 # All changes Copyright 2022, OpenC3, Inc.
 # All Rights Reserved
 #
-# This file may also be used under the terms of a commercial license 
+# This file may also be used under the terms of a commercial license
 # if purchased from OpenC3, Inc.
 -->
 
@@ -46,7 +46,8 @@
       v-model="showDialog"
       v-if="showDialog"
       :content="jsonContent"
-      :title="`Router: ${dialogTitle}`"
+      type="Router"
+      :name="dialogTitle"
       readonly
       @submit="dialogCallback"
     />

openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/admin/tabs/TargetsTab.vue

@@ -67,7 +67,8 @@
       v-model="showDialog"
       v-if="showDialog"
       :content="jsonContent"
-      :title="`Target: ${dialogTitle}`"
+      type="Target"
+      :name="dialogTitle"
       readonly
       @submit="dialogCallback"
     />

openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/admin/tabs/ToolsTab.vue

@@ -87,7 +87,8 @@
       v-model="showDialog"
       v-if="showDialog"
       :content="jsonContent"
-      :title="`Tool: ${dialogTitle}`"
+      type="Tool"
+      :name="dialogTitle"
       @submit="dialogCallback"
     />
   </div>

openc3-cosmos-init/plugins/yarn.lock

@@ -2217,10 +2217,10 @@ accepts@^1.3.5, accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.8:
     mime-types "~2.1.34"
     negotiator "0.6.3"
 
-ace-builds@1.15.2:
-  version "1.15.2"
-  resolved "https://registry.yarnpkg.com/ace-builds/-/ace-builds-1.15.2.tgz#e9be5c4cbc835894e1202ddc8f7a1f0df049f321"
-  integrity sha512-ANXWnANcB4XgC9tyCtG8EXjeDdDY6iJuPQs+pDiZF/2chQMU7LTOBgw9xJdeRzRyNX5+KGZKwgB80XyY2n5QvA==
+ace-builds@1.17.0:
+  version "1.17.0"
+  resolved "https://registry.yarnpkg.com/ace-builds/-/ace-builds-1.17.0.tgz#709dd9cda889678d7f96c763e6c57b38c49180ce"
+  integrity sha512-pu5Rc7Y2Q7WEa8QQvMODxUEJX7GmGko/I8sKkv2lrMvMnHr6hZIIL1NX+Lxc6y3PLRsBJLgi+XTO+4SJItuZpg==
 
 ace-diff@3.0.3:
   version "3.0.3"