michael/scrypted
1
0
Fork 0
mirror of https://github.com/koush/scrypted.git synced 2026-04-20 23:20:25 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

core: refactor console on top of pty

Browse Source
This commit is contained in:
Koushik Dutta
2024-03-09 16:44:33 -08:00
parent b83b5196da
commit 90c8e90af7
6 changed files with 106 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
plugins/core/ui/src/components/ConsoleCard.vue
View File

@@ -1,114 +0,0 @@
<template>
<v-card raised>
<v-toolbar dark color="blue">
Console
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn @click="copy" v-on="on" text
><v-icon small> far fa-copy</v-icon>
</v-btn>
</template>
<span>Copy</span>
</v-tooltip>
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn v-on="on" text @click="expanded = !expanded">
<v-icon x-small>fa-angle-double-down</v-icon>
</v-btn>
</template>
<span>Toggle Expand</span>
</v-tooltip>
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn @click="clear" v-on="on" text
><v-icon small> fas fa-trash</v-icon>
</v-btn>
</template>
<span>Clear</span>
</v-tooltip>
</v-toolbar>
<div ref="terminal"></div>
</v-card>
</template>
<script>
import { Terminal } from "xterm";
import { FitAddon } from "xterm-addon-fit";
import eio from "engine.io-client";
import { sleep } from "../common/sleep";
import { getCurrentBaseUrl } from "../../../../../packages/client/src";
export default {
props: ["deviceId"],
socket: null,
buffer: [],
term: null,
watch: {
expanded(oldValue, newValue) {
if (this.expanded) this.term.resize(this.term.cols, this.term.rows * 2.5);
else this.term.resize(this.term.cols, this.term.rows / 2.5);
},
},
data() {
return {
expanded: false,
};
},
methods: {
async clear() {
this.term.clear();
this.buffer = [];
const plugins = await this.$scrypted.systemManager.getComponent(
"plugins"
);
plugins.clearConsole(this.deviceId);
},
reconnect(term) {
this.buffer = [];
const baseUrl = getCurrentBaseUrl();
const eioPath = `endpoint/@scrypted/core/engine.io/console/${this.deviceId}`;
const eioEndpoint = baseUrl ? new URL(eioPath, baseUrl).pathname : '/' + eioPath;
const options = {
path: eioEndpoint,
};
const rootLocation = `${window.location.protocol}//${window.location.host}`;
this.socket = eio(rootLocation, options);
this.socket.on("message", (data) => {
this.buffer.push(Buffer.from(data));
term.write(new Uint8Array(data));
});
this.socket.on("close", async () => {
await sleep(1000);
this.reconnect(term);
});
},
copy() {
this.$copyText(Buffer.concat(this.buffer).toString());
},
},
mounted() {
const term = new Terminal({
theme: this.$vuetify.theme.dark ? undefined : {
foreground: 'black',
background: 'white',
cursor: 'black',
},
convertEol: true,
disableStdin: true,
scrollback: 10000,
});
const fitAddon = new FitAddon();
term.loadAddon(fitAddon);
term.open(this.$refs.terminal);
fitAddon.fit();
this.term = term;
this.reconnect(term);
},
destroyed() {
this.socket?.close();
},
};
</script>

12
plugins/core/ui/src/components/Device.vue
View File

@@ -22,11 +22,11 @@
</v-flex>
<v-flex xs12 v-if="showConsole" ref="consoleEl">
<ConsoleCard :deviceId="id"></ConsoleCard>
<PtyComponent :reconnect="true" :clearButton="true" @clear="clearConsole" :copyButton="true" title="Console" :hello="(device.nativeId || 'undefined') " nativeId="consoleservice" :control="false" :options="{ pluginId: device.pluginId }"></PtyComponent>
</v-flex>
<v-flex xs12 v-if="showRepl" ref="replEl">
<PtyComponent title="REPL" :hello="device.nativeId + '\n'" nativeId="replservice" :control="false" :options="{ pluginId: device.pluginId }"></PtyComponent>
<PtyComponent :copyButton="true" title="REPL" :hello="(device.nativeId || 'undefined')" nativeId="replservice" :control="false" :options="{ pluginId: device.pluginId }"></PtyComponent>
</v-flex>
<v-flex xs12 md7>
<v-layout row wrap>
@@ -198,7 +198,6 @@ import VueSlider from "vue-slider-component";
import "vue-slider-component/theme/material.css";
import LogCard from "./builtin/LogCard.vue";
import ConsoleCard from "./ConsoleCard.vue";
import PtyComponent from "./builtin/PtyComponent.vue";
import {
getComponentWebPath,
@@ -380,7 +379,6 @@ export default {
PluginAdvancedUpdate,
VueSlider,
LogCard,
ConsoleCard,
PtyComponent,
Readme,
@@ -474,6 +472,12 @@ export default {
onChange() {
// console.log(JSON.stringify(this.device));
},
async clearConsole() {
const plugins = await this.$scrypted.systemManager.getComponent(
"plugins"
);
plugins.clearConsole(this.device.id);
},
cleanupListener() {
if (this.listener) {
this.listener.removeListener();

93
plugins/core/ui/src/components/builtin/PtyComponent.vue
View File

@@ -1,15 +1,45 @@
<template>
<v-card raised>
<v-toolbar dark color="blue">{{ title }}</v-toolbar>
<div ref="terminal" style="height: 700px"></div>
<v-toolbar dark color="blue">{{ title }}
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn @click="copy" v-on="on" text
><v-icon small> far fa-copy</v-icon>
</v-btn>
</template>
<span>Copy</span>
</v-tooltip>
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn v-on="on" text @click="expanded = !expanded">
<v-icon x-small>fa-angle-double-down</v-icon>
</v-btn>
</template>
<span>Toggle Expand</span>
</v-tooltip>
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn @click="clear" v-on="on" text
><v-icon small>fas fa-trash</v-icon>
</v-btn>
</template>
<span>Clear</span>
</v-tooltip>
</v-toolbar>
<div ref="terminal"></div>
</v-card>
</template>
<script>
import { createAsyncQueue } from "@scrypted/common/src/async-queue";
import { Deferred } from "@scrypted/common/src/deferred";
import { sleep } from "@scrypted/common/src/sleep";
import { Terminal } from "xterm";
import { FitAddon } from "xterm-addon-fit";
import { createAsyncQueue } from "@scrypted/common/src/async-queue";
export default {
term: null,
buffer: [],
unmounted: null,
props: {
nativeId: String,
title: String,
@@ -17,8 +47,15 @@ export default {
hello: String,
options: Object,
control: Boolean,
copyButton: Boolean,
clearButton: Boolean,
reconnect: Boolean,
},
destroyed() {
this.unmounted.resolve();
},
mounted() {
this.unmounted = new Deferred();
const term = new Terminal({
theme: this.$vuetify.theme.dark
? undefined
@@ -29,19 +66,42 @@ export default {
},
convertEol: true,
});
this.term = term;
const fitAddon = new FitAddon();
term.loadAddon(fitAddon);
term.open(this.$refs.terminal);
fitAddon.fit();
this.setupShell(term);
this.connectPty(term);
},
watch: {
expanded(oldValue, newValue) {
if (this.expanded) this.term.resize(this.term.cols, this.term.rows * 2.5);
else this.term.resize(this.term.cols, this.term.rows / 2.5);
},
},
data() {
return {
expanded: false,
};
},
methods: {
async setupShell(term) {
async clear() {
this.term.clear();
this.buffer = [];
this.$emit("clear");
},
copy() {
this.$copyText(Buffer.concat(this.buffer).toString());
},
async connectPty(term) {
this.buffer = [];
const termSvcRaw = this.$scrypted.systemManager.getDeviceByName("@scrypted/core");
const termSvc = await termSvcRaw.getDevice(this.$props.nativeId);
const termSvcDirect = await this.$scrypted.connectRPCObject(termSvc);
const dataQueue = createAsyncQueue();
this.unmounted.promise.then(() => dataQueue.end());
if (this.$props.hello) {
const hello = Buffer.from(this.$props.hello, 'utf8');
@@ -100,11 +160,26 @@ export default {
}
const remoteGenerator = await termSvcDirect.connectStream(localGenerator(), this.$props.options);
for await (const message of remoteGenerator) {
if (!message) {
break;
try {
for await (const message of remoteGenerator) {
if (!message) {
break;
}
const buffer = Buffer.from(message);
if (this.$props.copyButton) {
this.buffer.push(buffer);
}
term.write(new Uint8Array(message));
}
term.write(new Uint8Array(Buffer.from(message)));
}
finally {
if (!this.$props.reconnect)
return;
await sleep(1000);
if (this.unmounted.finished)
return;
this.connectPty(term);
}
}
},