Skip to content

Commit

Permalink
BucketExplorer view files and breadcrumb paths
Browse files Browse the repository at this point in the history
  • Loading branch information
@jmthomas
jmthomas committed Nov 9, 2024
1 parent d5e1fc8 commit d9002ac
Show file tree
Hide file tree
Showing 5 changed files with 307 additions and 181 deletions.
67 changes: 64 additions & 3 deletions ...ns/packages/openc3-cosmos-tool-bucketexplorer/src/tools/BucketExplorer/BucketExplorer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@
:items-per-page="-1"
:items-per-page-options="[10, 20, 50, 100, -1]"
v-model:sort-by="sortBy"
@click:row="fileClick"
@click:row.stop="fileClick"
multi-sort
density="compact"
hover
Expand All @@ -92,11 +92,17 @@
variant="text"
density="compact"
class="mt-1"
@click="backArrow"
@click.stop="backArrow"
data-test="be-nav-back"
/>
<span class=".text-body-1 ma-2 font-size" data-test="file-path">
/{{ path }}
<span
v-for="(part, index) in breadcrumbPath"
:key="index"
@click.stop="gotoPath(part.path)"
style="cursor: pointer"
>/&nbsp;{{ part.name }}&nbsp;
</span>
</span>
<v-spacer />
<div class="pa-1 font-size">
Expand Down Expand Up @@ -127,9 +133,17 @@
</template>
<template v-slot:item.action="{ item }">
<v-icon
v-if="item.icon === 'mdi-file' && !isBinary(item.name)"
@click="viewFile(item.name)"
class="mr-3"
data-test="view-file"
>
mdi-eye
</v-icon>
<v-icon
v-if="item.icon === 'mdi-file'"
@click="downloadFile(item.name)"
class="mr-3"
data-test="download-file"
>
mdi-download-box
Expand Down Expand Up @@ -217,17 +231,28 @@
</v-card-text>
</v-card>
</v-dialog>
<output-dialog
type="File"
:content="dialogContent"
:name="dialogName"
:filename="dialogFilename"
v-model="showDialog"
v-if="showDialog"
@submit="showDialog = false"
/>
</div>
</template>

<script>
import TopBar from '@openc3/tool-common/src/components/TopBar'
import OutputDialog from '@openc3/tool-common/src/components/OutputDialog'
import Api from '@openc3/tool-common/src/services/api'
import axios from 'axios'

export default {
components: {
TopBar,
OutputDialog,
},
data() {
return {
Expand All @@ -244,6 +269,10 @@ export default {
path: '',
file: null,
files: [],
showDialog: false,
dialogName: '',
dialogContent: '',
dialogFilename: '',
sortBy: [
{
key: 'modified',
Expand Down Expand Up @@ -293,6 +322,13 @@ export default {
.reduce((a, b) => a + (b.size ? b.size : 0), 0)
.toLocaleString()
},
breadcrumbPath() {
const parts = this.path.split('/')
return parts.map((part, index) => ({
name: part,
path: parts.slice(0, index + 1).join('/') + '/',
}))
},
},
created() {
Api.get('/openc3-api/storage/buckets').then((response) => {
Expand Down Expand Up @@ -332,6 +368,14 @@ export default {
},
},
methods: {
isBinary(filename) {
let ext = filename.split('.').pop()
return ['gz', 'bin', 'gem', 'zip'].includes(ext)
},
gotoPath(path) {
this.path = path
this.update()
},
update() {
this.$router.push({
name: 'Bucket Explorer',
Expand Down Expand Up @@ -391,6 +435,23 @@ export default {
this.update()
}
},
viewFile(filename) {
let root = this.root.toUpperCase()
if (this.mode === 'volume') {
root = root.slice(1)
}
Api.get(
`/openc3-api/storage/download_file/${encodeURIComponent(
this.path,
)}${filename}?${this.mode}=OPENC3_${root}_${this.mode.toUpperCase()}`,
).then((response) => {
this.dialogName = filename
this.dialogFilename = filename
// Decode Base64 string
this.dialogContent = window.atob(response.data.contents)
this.showDialog = true
})
},
downloadFile(filename) {
let root = this.root.toUpperCase()
let api = 'download'
Expand Down
115 changes: 9 additions & 106 deletions .../plugins/packages/openc3-cosmos-tool-scriptrunner/src/tools/ScriptRunner/ScriptRunner.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -404,12 +404,7 @@
import axios from 'axios'
import Cable from '@openc3/tool-common/src/services/cable.js'
import Api from '@openc3/tool-common/src/services/api'
import * as ace from 'ace-builds'
import 'ace-builds/src-min-noconflict/mode-ruby'
import 'ace-builds/src-min-noconflict/mode-python'
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'
import EditorModes from '@openc3/tool-common/src/components/ace/EditorModes'
import { format } from 'date-fns'
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
Expand Down Expand Up @@ -470,6 +465,7 @@ export default {
ScriptLogMessages,
CriticalCmdDialog,
},
mixins: [EditorModes],
data() {
return {
title: 'Script Runner',
Expand Down Expand Up @@ -1006,11 +1002,11 @@ export default {
mounted: async function () {
this.editor = ace.edit(this.$refs.editor)
this.editor.setTheme('ace/theme/twilight')
const openC3RubyMode = this.buildOpenC3RubyMode()
const openC3PythonMode = this.buildOpenC3PythonMode()
this.openC3RubyMode = new openC3RubyMode()
this.openC3PythonMode = new openC3PythonMode()
this.editor.session.setMode(this.openC3RubyMode)
const RubyMode = this.buildRubyMode()
const PythonMode = this.buildPythonMode()
this.rubyMode = new RubyMode()
this.pythonMode = new PythonMode()
this.editor.session.setMode(this.rubyMode)
this.editor.session.setTabSize(2)
this.editor.session.setUseWrapMode(true)
this.editor.$blockScrolling = Infinity
Expand Down Expand Up @@ -1066,19 +1062,6 @@ export default {
await this.reloadFile(false)
}
}
// TODO: Potentially still bad interactions with autoSave
// see https://github.com/OpenC3/cosmos/issues/915
// this.autoSaveInterval = setInterval(async () => {
// // Only save if not-running, modified, and visible (e.g. not open in another tab)
// if (
// !this.scriptId &&
// this.fileModified.length > 0 &&
// document.visibilityState === 'visible'
// ) {
// await this.saveFile('auto')
// }
// }, 60000) // Save every minute

this.updateInterval = setInterval(async () => {
this.processReceived()
}, 100) // Every 100ms
Expand Down Expand Up @@ -1158,86 +1141,6 @@ export default {
this.inputMetadata.show = true
})
},
buildLanguageMode(HighlightRules, FoldMode) {
let oop = ace.require('ace/lib/oop')
let apis = Object.getOwnPropertyNames(OpenC3Api.prototype)
.filter((a) => a !== 'constructor')
.filter((a) => a !== 'exec')
// Add the Public apis in api_shared but not in OpenC3Api
.concat([
'check',
'check_raw',
'check_formatted',
'check_with_units',
'check_exception',
'check_tolerance',
'check_expression',
'wait',
'wait_tolerance',
'wait_expression',
'wait_check',
'wait_check_tolerance',
'wait_check_expression',
'wait_packet',
'wait_check_packet',
'disable_instrumentation',
'set_line_delay',
'get_line_delay',
'set_max_output',
'get_max_output',
])
let regex = new RegExp(`(\\b${apis.join('\\b|\\b')}\\b)`)
let OpenC3HighlightRules = function () {
HighlightRules.call(this)
// add openc3 rules to the rules
for (let rule in this.$rules) {
this.$rules[rule].unshift({
regex: regex,
token: 'support.function',
})
}
}
oop.inherits(OpenC3HighlightRules, HighlightRules)

let MatchingBraceOutdent = ace.require(
'ace/mode/matching_brace_outdent',
).MatchingBraceOutdent
let CstyleBehaviour = ace.require(
'ace/mode/behaviour/cstyle',
).CstyleBehaviour
let Mode = function () {
this.HighlightRules = OpenC3HighlightRules
this.$outdent = new MatchingBraceOutdent()
this.$behaviour = new CstyleBehaviour()
this.foldingRules = new FoldMode()
this.indentKeywords = this.foldingRules.indentKeywords
}
return [oop, Mode]
},
buildOpenC3RubyMode() {
const [oop, Mode] = this.buildLanguageMode(
ace.require('ace/mode/ruby_highlight_rules').RubyHighlightRules,
ace.require('ace/mode/folding/ruby').FoldMode,
)
let RubyMode = ace.require('ace/mode/ruby').Mode
oop.inherits(Mode, RubyMode)
;(function () {
this.$id = 'ace/mode/openc3'
}).call(Mode.prototype)
return Mode
},
buildOpenC3PythonMode() {
const [oop, Mode] = this.buildLanguageMode(
ace.require('ace/mode/python_highlight_rules').PythonHighlightRules,
ace.require('ace/mode/folding/pythonic').FoldMode,
)
let PythonMode = ace.require('ace/mode/python').Mode
oop.inherits(Mode, PythonMode)
;(function () {
this.$id = 'ace/mode/openc3'
}).call(Mode.prototype)
return Mode
},
messageSortOrder(order) {
// See ScriptLogMessages for these strings
if (order === 'Newest on Top' && this.messagesNewestOnTop === false) {
Expand Down Expand Up @@ -2297,9 +2200,9 @@ class TestSuite(Suite):
document.title = `${parts.pop()} (${parts.join('/')})`

if (this.filename.split('.').pop() === 'py') {
this.editor.session.setMode(this.openC3PythonMode)
this.editor.session.setMode(this.pythonMode)
} else {
this.editor.session.setMode(this.openC3RubyMode)
this.editor.session.setMode(this.rubyMode)
}
this.currentFilename = null
this.editor.session.setValue(file.contents)
Expand Down
Loading

0 comments on commit d9002ac

Please sign in to comment.