leyoda/rqbit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Desktop: button to show a modal with logs (#48)

Browse source 
* Add an endpoint to stream logs /stream_logs
* Display logs in desktop app
* UI component to stream logs
This commit is contained in:
Igor Katson 2023-12-08 19:47:48 +00:00 • committed by GitHub
parent f7345ae6df
commit 9385524a1a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
21 changed files with 521 additions and 125 deletions
Download patch file Download diff file Expand all files Collapse all files

84
desktop/src/api.tsx
View file

@ -1,3 +1,4 @@
import { RqbitDesktopConfig } from "./configuration";
import {
AddTorrentResponse,
ListTorrentsResponse,
@ -66,42 +67,49 @@ async function readFileAsBase64(file: File): Promise<string> {
});
}
export const API: RqbitAPI = {
listTorrents: async function (): Promise<ListTorrentsResponse> {
return await invokeAPI<ListTorrentsResponse>("torrents_list");
},
getTorrentDetails: async function (id: number): Promise<TorrentDetails> {
return await invokeAPI<TorrentDetails>("torrent_details", { id });
},
getTorrentStats: async function (id: number): Promise<TorrentStats> {
return await invokeAPI<TorrentStats>("torrent_stats", { id });
},
uploadTorrent: async function (data, opts): Promise<AddTorrentResponse> {
if (data instanceof File) {
let contents = await readFileAsBase64(data);
return await invokeAPI<AddTorrentResponse>(
"torrent_create_from_base64_file",
{
contents,
opts: opts ?? {},
}
);
}
return await invokeAPI<AddTorrentResponse>("torrent_create_from_url", {
url: data,
opts: opts ?? {},
});
},
pause: function (id: number): Promise<void> {
return invokeAPI<void>("torrent_action_pause", { id });
},
start: function (id: number): Promise<void> {
return invokeAPI<void>("torrent_action_start", { id });
},
forget: function (id: number): Promise<void> {
return invokeAPI<void>("torrent_action_forget", { id });
},
delete: function (id: number): Promise<void> {
return invokeAPI<void>("torrent_action_delete", { id });
},
export const makeAPI = (configuration: RqbitDesktopConfig): RqbitAPI => {
return {
getHttpBaseUrl: () => {
return configuration.http_api.listen_addr
? `http://${configuration.http_api.listen_addr}`
: null;
},
listTorrents: async function (): Promise<ListTorrentsResponse> {
return await invokeAPI<ListTorrentsResponse>("torrents_list");
},
getTorrentDetails: async function (id: number): Promise<TorrentDetails> {
return await invokeAPI<TorrentDetails>("torrent_details", { id });
},
getTorrentStats: async function (id: number): Promise<TorrentStats> {
return await invokeAPI<TorrentStats>("torrent_stats", { id });
},
uploadTorrent: async function (data, opts): Promise<AddTorrentResponse> {
if (data instanceof File) {
let contents = await readFileAsBase64(data);
return await invokeAPI<AddTorrentResponse>(
"torrent_create_from_base64_file",
{
contents,
opts: opts ?? {},
}
);
}
return await invokeAPI<AddTorrentResponse>("torrent_create_from_url", {
url: data,
opts: opts ?? {},
});
},
pause: function (id: number): Promise<void> {
return invokeAPI<void>("torrent_action_pause", { id });
},
start: function (id: number): Promise<void> {
return invokeAPI<void>("torrent_action_start", { id });
},
forget: function (id: number): Promise<void> {
return invokeAPI<void>("torrent_action_forget", { id });
},
delete: function (id: number): Promise<void> {
return invokeAPI<void>("torrent_action_delete", { id });
},
};
};

1
desktop/src/configuration.tsx
View file

@ -28,6 +28,7 @@ interface RqbitDesktopConfigHttpApi {
disable: boolean;
listen_addr: SocketAddr;
read_only: boolean;
cors_enable_all: boolean;
}
interface RqbitDesktopConfigUpnp {

9
desktop/src/configure.tsx
View file

@ -295,6 +295,15 @@ export const ConfigModal: React.FC<{
help="If enabled, only GET requests will be allowed through the API"
/>
<FormCheck
label="CORS any"
name="http_api.cors_enable_all"
checked={config.http_api.cors_enable_all}
disabled={config.http_api.disable}
onChange={handleToggleChange}
help="If enabled, the API will allow Cross Origin requests (including this app)"
/>
<FormInput
label="Listen address"
inputType="text"

14
desktop/src/main.tsx
View file

@ -1,10 +1,8 @@
import { StrictMode } from "react";
import ReactDOM from "react-dom/client";
import { API } from "./api";
import { invoke } from "@tauri-apps/api";
import { CurrentDesktopState, RqbitDesktopConfig } from "./configuration";
import { RqbitDesktop } from "./rqbit-desktop";
import { APIContext } from "./rqbit-webui-src/context";
async function get_version(): Promise<string> {
return invoke<string>("get_version");
@ -22,13 +20,11 @@ Promise.all([get_version(), get_default_config(), get_current_config()]).then(
([version, defaultConfig, currentState]) => {
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<StrictMode>
<APIContext.Provider value={API}>
<RqbitDesktop
version={version}
defaultConfig={defaultConfig}
currentState={currentState}
/>
</APIContext.Provider>
<RqbitDesktop
version={version}
defaultConfig={defaultConfig}
currentState={currentState}
/>
</StrictMode>
);
}

32
desktop/src/rqbit-desktop.tsx
View file

@ -3,7 +3,10 @@ import { RqbitWebUI } from "./rqbit-webui-src/rqbit-web";
import { CurrentDesktopState, RqbitDesktopConfig } from "./configuration";
import { ConfigModal } from "./configure";
import { IconButton } from "./rqbit-webui-src/components/IconButton";
import { BsSliders2 } from "react-icons/bs";
import { BsBodyText, BsSliders2 } from "react-icons/bs";
import { LogStreamModal } from "./rqbit-webui-src/components/LogStreamModal";
import { APIContext } from "./rqbit-webui-src/context";
import { makeAPI } from "./api";
export const RqbitDesktop: React.FC<{
version: string;
@ -15,21 +18,27 @@ export const RqbitDesktop: React.FC<{
currentState.config ?? defaultConfig
);
let [configurationOpened, setConfigurationOpened] = useState<boolean>(false);
let [logsOpened, setLogsOpened] = useState<boolean>(false);
return (
<>
<APIContext.Provider value={makeAPI(config)}>
{configured && (
<RqbitWebUI title={`Rqbit Desktop v${version}`}></RqbitWebUI>
)}
{configured && (
<IconButton
className="position-absolute top-0 start-0 p-3 text-primary"
onClick={() => {
setConfigurationOpened(true);
}}
>
<BsSliders2 />
</IconButton>
<div className="position-absolute top-0 start-0">
<IconButton
className="p-3 text-primary"
onClick={() => {
setConfigurationOpened(true);
}}
>
<BsSliders2 />
</IconButton>
<IconButton onClick={() => setLogsOpened(true)}>
<BsBodyText />
</IconButton>
</div>
)}
<ConfigModal
show={!configured || configurationOpened}
@ -47,6 +56,7 @@ export const RqbitDesktop: React.FC<{
initialConfig={config}
defaultConfig={defaultConfig}
/>
</>
<LogStreamModal show={logsOpened} onClose={() => setLogsOpened(false)} />
</APIContext.Provider>
);
};