View Script Logs / Report

openc3-cosmos-cmd-tlm-api/app/controllers/storage_controller.rb

@@ -111,11 +111,26 @@
 
   def download_file
     return unless authorization('system')
-    volume = ENV[params[:volume]] # Get the actual volume name
-    raise "Unknown volume #{params[:volume]}" unless volume
-    filename = "/#{volume}/#{params[:object_id]}"
-    filename = sanitize_path(filename)
+    tmp_dir = nil
+    if params[:volume]
+      volume = ENV[params[:volume]] # Get the actual volume name
+      raise "Unknown volume #{params[:volume]}" unless volume
+      filename = "/#{volume}/#{params[:object_id]}"
+      filename = sanitize_path(filename)
+    elsif params[:bucket]
+      tmp_dir = Dir.mktmpdir
+      bucket_name = ENV[params[:bucket]] # Get the actual bucket name
+      raise "Unknown bucket #{params[:bucket]}" unless bucket_name
+      path = sanitize_path(params[:object_id])
+      filename = File.join(tmp_dir, path)
+      # Ensure dir structure exists, get_object fails if not
+      FileUtils.mkdir_p(File.dirname(filename))
+      OpenC3::Bucket.getClient().get_object(bucket: bucket_name, key: path, path: filename)
+    else
+      raise "No volume or bucket given"
+    end
     file = File.read(filename, mode: 'rb')
+    FileUtils.rm_rf(tmp_dir) if tmp_dir
     render json: { filename: params[:object_id], contents: Base64.encode64(file) }
   rescue Exception => e
     logger.error(e.formatted)

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

@@ -115,37 +115,50 @@
           showFirstLastPage: true,
         }"
       >
+        <template v-slot:item.view="{ item }">
+          <v-btn color="primary" @click="viewScriptLog(item)">
+            <span v-if="item.name.includes('(') && item.name.includes(')')"
+              >Script Report</span
+            >
+            <span v-else>Script Log</span>
+            <v-icon right> mdi-eye </v-icon>
+          </v-btn>
+        </template>
         <template v-slot:item.download="{ item }">
           <v-btn
-            color="primary"
+            icon
             :disabled="downloadScript"
             :loading="downloadScript && downloadScript.name === item.name"
             @click="downloadScriptLog(item)"
           >
-            <span v-if="item.name.includes('(') && item.name.includes(')')"
-              >Script Report</span
-            >
-            <span v-else>Script Log</span>
-            <v-icon right> mdi-file-download-outline </v-icon>
-            <template v-slot:loader>
-              <span>Loading...</span>
-            </template>
+            <v-icon>mdi-file-download-outline</v-icon>
           </v-btn>
         </template>
       </v-data-table>
     </v-card>
+    <output-dialog
+      :content="dialogContent"
+      type="Script"
+      :name="dialogName"
+      :filename="dialogFilename"
+      v-model="showDialog"
+      v-if="showDialog"
+      @submit="showDialog = false"
+    />
   </div>
 </template>
 
 <script>
 import Api from '@openc3/tool-common/src/services/api'
+import OutputDialog from '@openc3/tool-common/src/components/OutputDialog'
 
 export default {
   props: {
     tabId: Number,
     curTab: Number,
     connectInNewTab: Boolean,
   },
+  components: { OutputDialog },
   data() {
     return {
       downloadScript: null,
@@ -182,13 +195,23 @@ export default {
         { text: 'User', value: 'user' },
         { text: 'Name', value: 'name' },
         { text: 'Start Time', value: 'start' },
+        {
+          text: 'View',
+          value: 'view',
+          sortable: false,
+          filterable: false,
+        },
         {
           text: 'Download',
           value: 'download',
           sortable: false,
           filterable: false,
         },
       ],
+      showDialog: false,
+      dialogName: '',
+      dialogContent: '',
+      dialogFilename: '',
     }
   },
   created() {
@@ -275,6 +298,24 @@ export default {
           }
         })
     },
+    viewScriptLog: function (script) {
+      if (script.name.includes('(') && script.name.includes(')')) {
+        this.dialogName = 'Report'
+      } else {
+        this.dialogName = 'Log'
+      }
+      Api.get(
+        `/openc3-api/storage/download_file/${encodeURIComponent(
+          script.log,
+        )}?bucket=OPENC3_LOGS_BUCKET`,
+      ).then((response) => {
+        const filenameParts = script.log.split('/')
+        this.dialogFilename = filenameParts[filenameParts.length - 1]
+        // Decode Base64 string
+        this.dialogContent = window.atob(response.data.contents)
+        this.showDialog = true
+      })
+    },
     downloadScriptLog: function (script) {
       this.downloadScript = script
       Api.get(

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

@@ -0,0 +1,172 @@
+<!--
+# Copyright 2022 Ball Aerospace & Technologies Corp.
+# All Rights Reserved.
+#
+# This program is free software; you can modify and/or redistribute it
+# under the terms of the GNU Affero General Public License
+# as published by the Free Software Foundation; version 3 with
+# attribution addendums as found in the LICENSE.txt
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU Affero General Public License for more details.
+
+# Modified by OpenC3, Inc.
+# All changes Copyright 2024, OpenC3, Inc.
+# All Rights Reserved
+#
+# This file may also be used under the terms of a commercial license
+# if purchased from OpenC3, Inc.
+-->
+
+<template>
+  <v-dialog v-model="show" width="85vw">
+    <v-card>
+      <v-system-bar>
+        <v-spacer />
+        <span v-text="title" />
+        <v-spacer />
+        <div class="mx-2">
+          <v-tooltip top>
+            <template v-slot:activator="{ on, attrs }">
+              <div v-on="on" v-bind="attrs">
+                <v-icon data-test="downloadIcon" @click="download">
+                  mdi-download
+                </v-icon>
+              </div>
+            </template>
+            <span> Download </span>
+          </v-tooltip>
+        </div>
+      </v-system-bar>
+      <v-card-text>
+        <pre class="editor" ref="editor"></pre>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn color="primary" @click="close"> Ok </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</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,
+    },
+    type: String,
+    name: String,
+    value: Boolean, // value is the default prop when using v-model
+    filename: {
+      type: String,
+      required: false,
+    },
+  },
+  data() {
+    return {
+      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()
+    this.editor.setReadOnly(true)
+  },
+  beforeDestroy() {
+    if (this.editor) {
+      this.editor.destroy()
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(value) {
+        this.$emit('input', value) // input is the default event when using v-model
+      },
+    },
+    title: function () {
+      return `${this.type}: ${this.name}`
+    },
+  },
+  methods: {
+    close: function () {
+      this.show = !this.show
+    },
+    download: function () {
+      const blob = new Blob([this.editor.getValue()], {
+        type: 'text/plain',
+      })
+      // Make a link and then 'click' on it to start the download
+      let filename = `${this.type.toLowerCase()}_${this.name.toLowerCase()}.json`
+      if (this.filename) {
+        filename = this.filename
+      }
+      const link = document.createElement('a')
+      link.href = URL.createObjectURL(blob)
+      link.setAttribute('download', filename)
+      link.click()
+    },
+    buildPluginMode() {
+      let oop = ace.require('ace/lib/oop')
+      let JsonHighlightRules = ace.require(
+        'ace/mode/json_highlight_rules'
+      ).JsonHighlightRules
+
+      let MatchingBraceOutdent = ace.require(
+        'ace/mode/matching_brace_outdent'
+      ).MatchingBraceOutdent
+      let CstyleBehaviour = ace.require(
+        'ace/mode/behaviour/cstyle'
+      ).CstyleBehaviour
+      let FoldMode = ace.require('ace/mode/folding/ruby').FoldMode
+      let Mode = function () {
+        this.HighlightRules = JsonHighlightRules
+        this.$outdent = new MatchingBraceOutdent()
+        this.$behaviour = new CstyleBehaviour()
+        this.foldingRules = new FoldMode()
+        this.indentKeywords = this.foldingRules.indentKeywords
+      }
+      let 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: 75vh;
+  width: 80vw;
+  position: relative;
+  font-size: 16px;
+}
+.v-textarea :deep(textarea) {
+  padding: 5px;
+}
+</style>