mirror of
https://github.com/t8y2/dbx.git
synced 2026-10-30 16:21:39 +00:00
1046 lines
39 KiB
Vue
1046 lines
39 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted, onUnmounted, computed } from "vue";
|
|
import { useI18n } from "vue-i18n";
|
|
import { FolderOpen, Trash2, Download, RotateCcw, Loader2, RefreshCw, Check, Clock3, FileUp } from "lucide-vue-next";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import DriverInstallProgressCircle from "@/components/config/DriverInstallProgressCircle.vue";
|
|
import DatabaseIcon from "@/components/icons/DatabaseIcon.vue";
|
|
import { useToast } from "@/composables/useToast";
|
|
import { isTauriRuntime } from "@/lib/tauriRuntime";
|
|
import { countAvailableDriverUpdates } from "@/lib/agentDriverUpdateBadge";
|
|
import type { JdbcDriverInfo, JdbcPluginStatus } from "@/types/database";
|
|
import * as api from "@/lib/api";
|
|
import type { AgentDriverInfo, DriverStoreUsage, JavaRuntimeConfig } from "@/lib/api";
|
|
import {
|
|
addDriverInstallQueue,
|
|
driverInstallProgressPercent,
|
|
isDriverInstallProgressTarget,
|
|
removeDriverInstallQueue,
|
|
takeNextDriverInstallQueue,
|
|
type DriverInstallProgress,
|
|
} from "@/lib/driverInstallProgressUi";
|
|
|
|
const { t } = useI18n();
|
|
const { toast } = useToast();
|
|
const isWeb = !isTauriRuntime();
|
|
|
|
const emit = defineEmits<{
|
|
"update-count-change": [count: number];
|
|
}>();
|
|
|
|
// ──────────── Agent drivers ────────────
|
|
|
|
const drivers = ref<AgentDriverInfo[]>([]);
|
|
const installing = ref<string | null>(null);
|
|
const upgradingAll = ref(false);
|
|
const upgradingCurrent = ref("");
|
|
const upgradingIndex = ref(0);
|
|
const upgradingTotal = ref(0);
|
|
const queuedDriverInstalls = ref<string[]>([]);
|
|
const reinstallingJre = ref<string | null>(null);
|
|
const refreshing = ref(false);
|
|
const progress = ref<DriverInstallProgress | null>(null);
|
|
const javaRuntimeConfig = ref<JavaRuntimeConfig>({ mode: "managed", custom_java_path: null });
|
|
const customJavaPath = ref("");
|
|
const savingJavaRuntime = ref(false);
|
|
const driverStoreUsage = ref<DriverStoreUsage | null>(null);
|
|
|
|
let unlisten: (() => void) | null = null;
|
|
|
|
const installedJres = computed(() => {
|
|
const jreMap = new Map<string, boolean>();
|
|
for (const d of drivers.value) {
|
|
if (!jreMap.has(d.jre)) {
|
|
jreMap.set(d.jre, d.jre_installed);
|
|
}
|
|
}
|
|
return [...jreMap.entries()]
|
|
.map(([key, installed]) => ({ key, installed }))
|
|
.sort((a, b) => b.key.localeCompare(a.key));
|
|
});
|
|
|
|
const progressText = computed(() => {
|
|
const p = progress.value;
|
|
if (!p) return "";
|
|
if (p.step === "jre-extract") return t("driverStore.progressJreExtract");
|
|
const label = p.step === "jre" ? t("driverStore.progressDownloadJre") : t("driverStore.progressDownloadDriver");
|
|
if (!p.total) return `${label}...`;
|
|
const pct = Math.round(((p.downloaded ?? 0) / p.total) * 100);
|
|
const dl = formatSize(p.downloaded ?? 0);
|
|
const total = formatSize(p.total);
|
|
const prefix =
|
|
upgradingAll.value && upgradingCurrent.value
|
|
? `[${upgradingIndex.value}/${upgradingTotal.value}] ${upgradingCurrent.value} — `
|
|
: "";
|
|
return `${prefix}${label} ${dl} / ${total} (${pct}%)`;
|
|
});
|
|
|
|
const progressNumber = computed(() => driverInstallProgressPercent(progress.value));
|
|
|
|
const updatableCount = computed(() => drivers.value.filter((d) => d.update_available).length);
|
|
const usageSummary = computed(() => {
|
|
const usage = driverStoreUsage.value;
|
|
if (!usage) return [];
|
|
return [
|
|
{ key: "total", label: t("driverStore.usageTotalLabel"), bytes: usage.total_bytes },
|
|
{ key: "jre", label: t("driverStore.usageManagedJre"), bytes: usage.jre_bytes },
|
|
{ key: "agent", label: t("driverStore.usageAgentDrivers"), bytes: usage.agent_driver_bytes },
|
|
{ key: "jdbc-plugin", label: t("driverStore.usageJdbcPlugin"), bytes: usage.jdbc_plugin_bytes },
|
|
{ key: "jdbc-driver", label: t("driverStore.usageJdbcDriverJars"), bytes: usage.jdbc_driver_bytes },
|
|
];
|
|
});
|
|
const jreUsageByKey = computed(() => {
|
|
const map = new Map<string, number>();
|
|
for (const item of driverStoreUsage.value?.jres || []) {
|
|
map.set(String(item.id), Number(item.bytes || 0));
|
|
}
|
|
return map;
|
|
});
|
|
|
|
function updateAgentDrivers(nextDrivers: AgentDriverInfo[]) {
|
|
drivers.value = nextDrivers;
|
|
emitDriverUpdateCount();
|
|
}
|
|
|
|
const agentTabUpdateCount = computed(() => drivers.value.filter((d) => d.update_available).length);
|
|
const jdbcTabUpdateCount = computed(() => (jdbcPluginStatus.value?.update_available ? 1 : 0));
|
|
|
|
function emitDriverUpdateCount() {
|
|
emit("update-count-change", countAvailableDriverUpdates(drivers.value, jdbcPluginStatus.value));
|
|
}
|
|
|
|
function isDriverProgressActive(dbType: string): boolean {
|
|
return isDriverInstallProgressTarget(dbType, {
|
|
installing: installing.value,
|
|
upgradingAll: upgradingAll.value,
|
|
progress: progress.value,
|
|
});
|
|
}
|
|
|
|
function progressTitle(fallback: string): string {
|
|
return progressText.value || fallback;
|
|
}
|
|
|
|
function isDriverQueued(dbType: string): boolean {
|
|
return queuedDriverInstalls.value.includes(dbType);
|
|
}
|
|
|
|
function canInstallOrUpdateDriver(dbType: string): boolean {
|
|
const driver = drivers.value.find((d) => d.db_type === dbType);
|
|
return Boolean(driver && (!driver.installed || driver.update_available));
|
|
}
|
|
|
|
function queueDriverInstall(dbType: string) {
|
|
queuedDriverInstalls.value = addDriverInstallQueue(queuedDriverInstalls.value, dbType, installing.value);
|
|
}
|
|
|
|
function removeQueuedDriverInstall(dbType: string) {
|
|
queuedDriverInstalls.value = removeDriverInstallQueue(queuedDriverInstalls.value, dbType);
|
|
}
|
|
|
|
async function refreshAgents() {
|
|
updateAgentDrivers(await api.listInstalledAgents());
|
|
void loadDriverStoreUsage();
|
|
}
|
|
|
|
async function forceRefresh() {
|
|
refreshing.value = true;
|
|
try {
|
|
await api.invalidateAgentRegistryCache();
|
|
await refreshAgents();
|
|
} finally {
|
|
refreshing.value = false;
|
|
}
|
|
}
|
|
|
|
async function loadJavaRuntimeConfig() {
|
|
const config = await api.getAgentJavaRuntimeConfig();
|
|
javaRuntimeConfig.value = config;
|
|
customJavaPath.value = config.custom_java_path ?? "";
|
|
}
|
|
|
|
function setJavaRuntimeMode(value: any) {
|
|
if (value === "managed" || value === "system" || value === "custom") {
|
|
javaRuntimeConfig.value.mode = value;
|
|
}
|
|
}
|
|
|
|
async function saveJavaRuntimeConfig() {
|
|
savingJavaRuntime.value = true;
|
|
try {
|
|
const config = await api.setAgentJavaRuntimeConfig({
|
|
mode: javaRuntimeConfig.value.mode,
|
|
custom_java_path: javaRuntimeConfig.value.mode === "custom" ? customJavaPath.value.trim() || null : null,
|
|
});
|
|
javaRuntimeConfig.value = config;
|
|
customJavaPath.value = config.custom_java_path ?? "";
|
|
toast(t("driverStore.javaRuntimeSaved"));
|
|
} catch (e: any) {
|
|
toast(t("driverStore.javaRuntimeSaveFailed", { error: e }));
|
|
} finally {
|
|
savingJavaRuntime.value = false;
|
|
}
|
|
}
|
|
|
|
async function chooseCustomJavaPath() {
|
|
if (isWeb) return;
|
|
const { open } = await import("@tauri-apps/plugin-dialog");
|
|
const selected = await open({
|
|
title: t("driverStore.chooseJavaExecutable"),
|
|
multiple: false,
|
|
});
|
|
if (typeof selected === "string") {
|
|
customJavaPath.value = selected;
|
|
}
|
|
}
|
|
|
|
async function installDriver(dbType: string) {
|
|
if (installing.value !== null || upgradingAll.value) {
|
|
queueDriverInstall(dbType);
|
|
return;
|
|
}
|
|
await runDriverInstall(dbType);
|
|
await runQueuedDriverInstalls();
|
|
}
|
|
|
|
async function runDriverInstall(dbType: string) {
|
|
const label = drivers.value.find((d) => d.db_type === dbType)?.label ?? dbType;
|
|
installing.value = dbType;
|
|
progress.value = null;
|
|
try {
|
|
await api.installAgent(dbType);
|
|
await refreshAgents();
|
|
toast(t("driverStore.driverInstallSuccess", { label }));
|
|
} catch (e: any) {
|
|
toast(t("driverStore.driverInstallFailed", { label, error: e }));
|
|
} finally {
|
|
installing.value = null;
|
|
progress.value = null;
|
|
}
|
|
}
|
|
|
|
async function runQueuedDriverInstalls() {
|
|
if (installing.value !== null || upgradingAll.value) return;
|
|
|
|
const result = takeNextDriverInstallQueue(queuedDriverInstalls.value, canInstallOrUpdateDriver);
|
|
queuedDriverInstalls.value = result.queue;
|
|
if (!result.next) return;
|
|
|
|
await runDriverInstall(result.next);
|
|
await runQueuedDriverInstalls();
|
|
}
|
|
|
|
async function upgradeAll() {
|
|
upgradingAll.value = true;
|
|
queuedDriverInstalls.value = [];
|
|
progress.value = null;
|
|
try {
|
|
const count = await api.upgradeAllAgents();
|
|
await refreshAgents();
|
|
toast(t("driverStore.upgradeAllSuccess", { count }));
|
|
} catch (e: any) {
|
|
toast(t("driverStore.upgradeAllFailed", { error: e }));
|
|
} finally {
|
|
upgradingAll.value = false;
|
|
upgradingCurrent.value = "";
|
|
upgradingIndex.value = 0;
|
|
upgradingTotal.value = 0;
|
|
progress.value = null;
|
|
}
|
|
}
|
|
|
|
async function uninstallDriver(dbType: string) {
|
|
const label = drivers.value.find((d) => d.db_type === dbType)?.label ?? dbType;
|
|
try {
|
|
await api.uninstallAgent(dbType);
|
|
await refreshAgents();
|
|
toast(t("driverStore.driverUninstallSuccess", { label }));
|
|
} catch (e: any) {
|
|
toast(t("driverStore.driverUninstallFailed", { label, error: e }));
|
|
}
|
|
}
|
|
|
|
const importingZip = ref(false);
|
|
|
|
function chooseWebOfflineZip(): Promise<File | null> {
|
|
return new Promise((resolve) => {
|
|
const input = document.createElement("input");
|
|
input.type = "file";
|
|
input.accept = ".zip";
|
|
input.onchange = () => resolve(input.files?.[0] ?? null);
|
|
input.click();
|
|
});
|
|
}
|
|
|
|
function chooseWebFiles(accept: string, multiple: boolean): Promise<File[] | null> {
|
|
return new Promise((resolve) => {
|
|
const input = document.createElement("input");
|
|
input.type = "file";
|
|
input.accept = accept;
|
|
input.multiple = multiple;
|
|
input.onchange = () => {
|
|
const files = input.files;
|
|
if (!files || files.length === 0) {
|
|
resolve(null);
|
|
return;
|
|
}
|
|
resolve(Array.from(files));
|
|
};
|
|
input.click();
|
|
});
|
|
}
|
|
|
|
function chooseWebFile(accept: string): Promise<File | null> {
|
|
return new Promise((resolve) => {
|
|
const input = document.createElement("input");
|
|
input.type = "file";
|
|
input.accept = accept;
|
|
input.onchange = () => resolve(input.files?.[0] ?? null);
|
|
input.click();
|
|
});
|
|
}
|
|
|
|
async function importOfflineZip() {
|
|
if (importingZip.value) return;
|
|
let selected: string | File | null = null;
|
|
if (isWeb) {
|
|
selected = await chooseWebOfflineZip();
|
|
} else {
|
|
const { open } = await import("@tauri-apps/plugin-dialog");
|
|
const path = await open({
|
|
title: t("driverStore.chooseOfflineDriverPackage"),
|
|
multiple: false,
|
|
filters: [{ name: "ZIP", extensions: ["zip"] }],
|
|
});
|
|
selected = typeof path === "string" ? path : null;
|
|
}
|
|
if (!selected) return;
|
|
importingZip.value = true;
|
|
progress.value = null;
|
|
try {
|
|
const count = await api.importAgentsFromZip(selected);
|
|
await refreshAgents();
|
|
toast(t("driverStore.offlineImportSuccess", { count }));
|
|
} catch (e: any) {
|
|
toast(t("driverStore.offlineImportFailed", { error: e }));
|
|
} finally {
|
|
importingZip.value = false;
|
|
progress.value = null;
|
|
}
|
|
}
|
|
|
|
async function importDriverJar(dbType: string) {
|
|
const label = drivers.value.find((d) => d.db_type === dbType)?.label ?? dbType;
|
|
if (isWeb) {
|
|
const file = await chooseWebFile(".jar");
|
|
if (!file) return;
|
|
try {
|
|
await api.importAgentJar(dbType, file);
|
|
await refreshAgents();
|
|
toast(t("driverStore.driverImportSuccess", { label }));
|
|
} catch (e: any) {
|
|
toast(t("driverStore.driverImportFailed", { label, error: e }));
|
|
}
|
|
return;
|
|
}
|
|
const { open } = await import("@tauri-apps/plugin-dialog");
|
|
const selected = await open({
|
|
title: t("driverStore.chooseDriverJar"),
|
|
multiple: false,
|
|
filters: [{ name: "JAR", extensions: ["jar"] }],
|
|
});
|
|
if (typeof selected !== "string") return;
|
|
try {
|
|
await api.importAgentJar(dbType, selected);
|
|
await refreshAgents();
|
|
toast(t("driverStore.driverImportSuccess", { label }));
|
|
} catch (e: any) {
|
|
toast(t("driverStore.driverImportFailed", { label, error: e }));
|
|
}
|
|
}
|
|
|
|
async function reinstallJre(jreKey: string) {
|
|
reinstallingJre.value = jreKey;
|
|
progress.value = null;
|
|
try {
|
|
await api.reinstallJre(jreKey);
|
|
await refreshAgents();
|
|
toast(t("driverStore.jreReinstallSuccess", { jre: jreKey }));
|
|
} catch (e: any) {
|
|
toast(t("driverStore.jreReinstallFailed", { jre: jreKey, error: e }));
|
|
} finally {
|
|
reinstallingJre.value = null;
|
|
progress.value = null;
|
|
}
|
|
}
|
|
|
|
async function uninstallJre(jreKey: string) {
|
|
try {
|
|
await api.uninstallJre(jreKey);
|
|
await refreshAgents();
|
|
toast(t("driverStore.jreUninstallSuccess", { jre: jreKey }));
|
|
} catch (e: any) {
|
|
toast(String(e));
|
|
}
|
|
}
|
|
|
|
function formatSize(bytes: number): string {
|
|
if (!bytes) return "";
|
|
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`;
|
|
return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
|
|
}
|
|
|
|
// ──────────── JDBC drivers ────────────
|
|
|
|
const jdbcDrivers = ref<JdbcDriverInfo[]>([]);
|
|
const isLoadingJdbcDrivers = ref(false);
|
|
const jdbcPluginStatus = ref<JdbcPluginStatus | null>(null);
|
|
const isInstallingJdbcPlugin = ref(false);
|
|
const isUninstallingJdbcPlugin = ref(false);
|
|
const jdbcDriverPathInput = ref("");
|
|
|
|
function formatBytes(bytes: number) {
|
|
if (bytes < 1024) return `${bytes} B`;
|
|
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
|
return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
|
|
}
|
|
|
|
function jreUsageLabel(key: string) {
|
|
const bytes = jreUsageByKey.value.get(String(key)) || 0;
|
|
return bytes > 0 ? formatBytes(bytes) : "";
|
|
}
|
|
|
|
async function loadJdbcDrivers() {
|
|
isLoadingJdbcDrivers.value = true;
|
|
try {
|
|
jdbcDrivers.value = await api.listJdbcDrivers();
|
|
} catch (e: any) {
|
|
toast(String(e?.message || e), 5000);
|
|
} finally {
|
|
isLoadingJdbcDrivers.value = false;
|
|
void loadDriverStoreUsage();
|
|
}
|
|
}
|
|
|
|
async function loadDriverStoreUsage() {
|
|
try {
|
|
driverStoreUsage.value = await api.getDriverStoreUsage();
|
|
} catch {
|
|
driverStoreUsage.value = null;
|
|
}
|
|
}
|
|
|
|
async function loadJdbcPluginStatus() {
|
|
try {
|
|
jdbcPluginStatus.value = await api.jdbcPluginStatus();
|
|
emitDriverUpdateCount();
|
|
} catch (e: any) {
|
|
toast(String(e?.message || e), 5000);
|
|
}
|
|
}
|
|
|
|
async function installJdbcPlugin() {
|
|
if (isInstallingJdbcPlugin.value) return;
|
|
isInstallingJdbcPlugin.value = true;
|
|
try {
|
|
jdbcPluginStatus.value = await api.installJdbcPlugin();
|
|
emitDriverUpdateCount();
|
|
toast(t("settings.jdbcPluginInstallSuccess"));
|
|
await loadJdbcDrivers();
|
|
} catch (e: any) {
|
|
toast(String(e?.message || e), 5000);
|
|
} finally {
|
|
isInstallingJdbcPlugin.value = false;
|
|
}
|
|
}
|
|
|
|
async function installJdbcPluginLocal() {
|
|
if (isInstallingJdbcPlugin.value) return;
|
|
let selected: string | File | null = null;
|
|
if (isWeb) {
|
|
selected = await chooseWebFile(".zip");
|
|
} else {
|
|
const { open } = await import("@tauri-apps/plugin-dialog");
|
|
const result = await open({
|
|
title: t("driverStore.chooseJdbcPluginZip"),
|
|
multiple: false,
|
|
filters: [{ name: "ZIP", extensions: ["zip"] }],
|
|
});
|
|
selected = typeof result === "string" ? result : null;
|
|
}
|
|
if (!selected) return;
|
|
isInstallingJdbcPlugin.value = true;
|
|
try {
|
|
jdbcPluginStatus.value = await api.installJdbcPluginLocal(selected);
|
|
emitDriverUpdateCount();
|
|
toast(t("settings.jdbcPluginInstallSuccess"));
|
|
await loadJdbcDrivers();
|
|
} catch (e: any) {
|
|
toast(String(e?.message || e), 5000);
|
|
} finally {
|
|
isInstallingJdbcPlugin.value = false;
|
|
}
|
|
}
|
|
|
|
async function uninstallJdbcPlugin() {
|
|
if (isUninstallingJdbcPlugin.value) return;
|
|
isUninstallingJdbcPlugin.value = true;
|
|
try {
|
|
jdbcPluginStatus.value = await api.uninstallJdbcPlugin();
|
|
emitDriverUpdateCount();
|
|
toast(t("settings.jdbcPluginUninstallSuccess"));
|
|
await loadJdbcDrivers();
|
|
} catch (e: any) {
|
|
toast(String(e?.message || e), 5000);
|
|
} finally {
|
|
isUninstallingJdbcPlugin.value = false;
|
|
}
|
|
}
|
|
|
|
async function importJdbcDriverPaths(paths: string[]) {
|
|
if (!paths.length) return;
|
|
try {
|
|
jdbcDrivers.value = await api.importJdbcDrivers(paths);
|
|
jdbcDriverPathInput.value = "";
|
|
void loadDriverStoreUsage();
|
|
toast(t("settings.jdbcImportSuccess", { count: paths.length }));
|
|
} catch (e: any) {
|
|
toast(String(e?.message || e), 5000);
|
|
}
|
|
}
|
|
|
|
async function importJdbcDrivers() {
|
|
if (isWeb) {
|
|
const files = await chooseWebFiles(".jar", true);
|
|
if (!files || !files.length) return;
|
|
try {
|
|
jdbcDrivers.value = await api.importJdbcDrivers(files);
|
|
void loadDriverStoreUsage();
|
|
toast(t("settings.jdbcImportSuccess", { count: files.length }));
|
|
} catch (e: any) {
|
|
toast(String(e?.message || e), 5000);
|
|
}
|
|
return;
|
|
}
|
|
const { open } = await import("@tauri-apps/plugin-dialog");
|
|
const selected = await open({
|
|
title: t("settings.jdbcImport"),
|
|
multiple: true,
|
|
filters: [{ name: "JDBC Driver", extensions: ["jar"] }],
|
|
});
|
|
if (!selected) return;
|
|
|
|
const paths = (Array.isArray(selected) ? selected : [selected]).filter(
|
|
(path): path is string => typeof path === "string",
|
|
);
|
|
await importJdbcDriverPaths(paths);
|
|
}
|
|
|
|
async function importJdbcDriverPathInput() {
|
|
const paths = jdbcDriverPathInput.value
|
|
.split(/\r?\n/)
|
|
.map((path) => path.trim())
|
|
.filter(Boolean);
|
|
await importJdbcDriverPaths(paths);
|
|
}
|
|
|
|
async function deleteJdbcDriver(path: string) {
|
|
try {
|
|
jdbcDrivers.value = await api.deleteJdbcDriver(path);
|
|
void loadDriverStoreUsage();
|
|
toast(t("settings.jdbcDeleteSuccess"));
|
|
} catch (e: any) {
|
|
toast(String(e?.message || e), 5000);
|
|
}
|
|
}
|
|
|
|
// ──────────── Lifecycle ────────────
|
|
|
|
onMounted(async () => {
|
|
updateAgentDrivers(await api.listInstalledAgentsLocal());
|
|
void loadJavaRuntimeConfig();
|
|
void loadDriverStoreUsage();
|
|
|
|
api.listInstalledAgents().then((result) => {
|
|
updateAgentDrivers(result);
|
|
});
|
|
|
|
unlisten = await api.listenAgentInstallProgress((payload) => {
|
|
if (payload.step === "done" || payload.step === "all-done") {
|
|
progress.value = null;
|
|
} else {
|
|
progress.value = payload as DriverInstallProgress;
|
|
}
|
|
if (payload.db_type && payload.total_drivers) {
|
|
upgradingCurrent.value = drivers.value.find((d) => d.db_type === payload.db_type)?.label ?? payload.db_type;
|
|
upgradingIndex.value = payload.current ?? 0;
|
|
upgradingTotal.value = payload.total_drivers ?? 0;
|
|
}
|
|
});
|
|
void loadJdbcDrivers();
|
|
void loadJdbcPluginStatus();
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
unlisten?.();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="h-full flex flex-col">
|
|
<div class="flex-1 min-h-0 overflow-y-auto">
|
|
<div class="max-w-4xl mx-auto px-6 py-6">
|
|
<Tabs default-value="agent">
|
|
<div class="mb-5 rounded-xl border bg-muted/20 p-4">
|
|
<div class="flex items-center justify-between gap-3">
|
|
<div class="text-sm font-medium">{{ t("driverStore.usageTitle") }}</div>
|
|
<div class="text-xs text-muted-foreground">
|
|
{{
|
|
usageSummary.length
|
|
? t("driverStore.usageTotal", { size: formatBytes(usageSummary[0].bytes) })
|
|
: t("driverStore.calculating")
|
|
}}
|
|
</div>
|
|
</div>
|
|
<div v-if="usageSummary.length" class="mt-3 grid grid-cols-2 gap-2 sm:grid-cols-5">
|
|
<div
|
|
v-for="item in usageSummary"
|
|
:key="item.key"
|
|
class="rounded-lg border bg-background/50 px-2.5 py-2 text-center"
|
|
>
|
|
<div class="text-[11px] text-muted-foreground">{{ item.label }}</div>
|
|
<div class="mt-0.5 text-xs font-medium">{{ formatBytes(item.bytes) }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between">
|
|
<TabsList class="w-fit">
|
|
<TabsTrigger value="agent" class="gap-1.5 relative">
|
|
{{ t("driverStore.agentDrivers") }}
|
|
<span v-if="agentTabUpdateCount > 0" class="inline-block h-2 w-2 rounded-full bg-red-500" />
|
|
</TabsTrigger>
|
|
<TabsTrigger value="jdbc" class="gap-1.5 relative">
|
|
{{ t("driverStore.jdbcDrivers") }}
|
|
<span v-if="jdbcTabUpdateCount > 0" class="inline-block h-2 w-2 rounded-full bg-red-500" />
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
<div class="flex items-center gap-2">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
class="h-7 rounded-full text-xs gap-1 text-muted-foreground"
|
|
:disabled="importingZip"
|
|
@click="importOfflineZip"
|
|
>
|
|
<FileUp class="h-3.5 w-3.5" />
|
|
{{ importingZip ? t("driverStore.importing") : t("driverStore.importOfflinePackage") }}
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
class="h-7 rounded-full text-xs gap-1 text-muted-foreground"
|
|
:disabled="refreshing"
|
|
@click="forceRefresh"
|
|
>
|
|
<RefreshCw class="h-3.5 w-3.5" :class="{ 'animate-spin': refreshing }" />
|
|
{{ t("driverStore.refresh") }}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Agent Tab -->
|
|
<TabsContent value="agent" class="mt-5 space-y-5">
|
|
<!-- Java Runtime Mode -->
|
|
<div class="rounded-xl border bg-muted/20 p-4 space-y-3">
|
|
<div class="flex flex-wrap items-end gap-3">
|
|
<div class="min-w-[220px] flex-1 space-y-1.5">
|
|
<Label>{{ t("driverStore.javaRuntime") }}</Label>
|
|
<Select :model-value="javaRuntimeConfig.mode" @update:model-value="setJavaRuntimeMode">
|
|
<SelectTrigger class="h-8 text-xs">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="managed">{{ t("driverStore.javaRuntimeManaged") }}</SelectItem>
|
|
<SelectItem value="system">{{ t("driverStore.javaRuntimeSystem") }}</SelectItem>
|
|
<SelectItem value="custom">{{ t("driverStore.javaRuntimeCustom") }}</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<Button
|
|
class="h-8 shrink-0 rounded-full text-xs"
|
|
:disabled="savingJavaRuntime || (javaRuntimeConfig.mode === 'custom' && !customJavaPath.trim())"
|
|
@click="saveJavaRuntimeConfig"
|
|
>
|
|
{{ savingJavaRuntime ? t("driverStore.saving") : t("settings.save") }}
|
|
</Button>
|
|
</div>
|
|
<div v-if="javaRuntimeConfig.mode === 'custom'" class="flex items-center gap-2">
|
|
<Input
|
|
v-model="customJavaPath"
|
|
class="h-8 flex-1 text-xs"
|
|
:placeholder="t('driverStore.customJavaPathPlaceholder')"
|
|
@keydown.enter.prevent="saveJavaRuntimeConfig"
|
|
/>
|
|
<Button variant="outline" class="h-8 shrink-0 rounded-full text-xs" @click="chooseCustomJavaPath">
|
|
<FolderOpen class="h-3.5 w-3.5" />
|
|
{{ t("driverStore.choose") }}
|
|
</Button>
|
|
</div>
|
|
<p v-else-if="javaRuntimeConfig.mode === 'system'" class="text-xs text-muted-foreground">
|
|
{{ t("driverStore.systemJavaHint") }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- JRE Runtime -->
|
|
<div v-if="installedJres.length > 0" class="rounded-xl border bg-muted/20 p-4 space-y-2.5">
|
|
<div v-for="jre in installedJres" :key="jre.key" class="flex items-center justify-between gap-3">
|
|
<div class="min-w-0">
|
|
<div class="text-sm font-medium">{{ t("driverStore.jreRuntimeTitle", { jre: jre.key }) }}</div>
|
|
</div>
|
|
<div class="flex shrink-0 items-center gap-3">
|
|
<span
|
|
v-if="jreUsageLabel(jre.key)"
|
|
class="rounded-full bg-muted px-2 py-0.5 text-[11px] text-muted-foreground"
|
|
>
|
|
{{ jreUsageLabel(jre.key) }}
|
|
</span>
|
|
<Check v-if="jre.installed" class="h-4 w-4 text-green-600" />
|
|
<span v-else class="text-xs text-muted-foreground">{{ t("driverStore.notInstalled") }}</span>
|
|
<DriverInstallProgressCircle
|
|
v-if="reinstallingJre === jre.key"
|
|
:percent="progressNumber"
|
|
:title="progressTitle(jre.installed ? t('driverStore.reinstalling') : t('driverStore.installing'))"
|
|
/>
|
|
<Button
|
|
v-else-if="!jre.installed"
|
|
type="button"
|
|
variant="default"
|
|
size="sm"
|
|
class="h-8 rounded-full text-xs"
|
|
:disabled="reinstallingJre !== null || installing !== null"
|
|
@click="reinstallJre(jre.key)"
|
|
>
|
|
<Download class="h-3.5 w-3.5 mr-1" />
|
|
{{ t("driverStore.install") }}
|
|
</Button>
|
|
<Button
|
|
v-else-if="jre.installed"
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
class="h-8 rounded-full text-xs"
|
|
:disabled="reinstallingJre !== null || installing !== null"
|
|
@click="reinstallJre(jre.key)"
|
|
>
|
|
<RotateCcw class="h-3.5 w-3.5 mr-1" />
|
|
{{ t("driverStore.reinstall") }}
|
|
</Button>
|
|
<Button
|
|
v-if="jre.installed"
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
class="h-8 rounded-full text-xs text-muted-foreground hover:text-destructive"
|
|
:disabled="reinstallingJre !== null || installing !== null"
|
|
@click="uninstallJre(jre.key)"
|
|
>
|
|
{{ t("driverStore.uninstall") }}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="rounded-xl border bg-muted/20 p-4">
|
|
<div class="text-sm font-medium">{{ t("driverStore.jreRuntime") }}</div>
|
|
<p class="text-xs text-muted-foreground mt-0.5">{{ t("driverStore.jreRuntimeAutoDownloadHint") }}</p>
|
|
</div>
|
|
|
|
<!-- Driver List -->
|
|
<div v-if="drivers.length === 0" class="py-12 text-center text-sm text-muted-foreground">
|
|
{{ t("common.loading") }}
|
|
</div>
|
|
<div v-else class="rounded-md border divide-y">
|
|
<div v-if="updatableCount > 0" class="flex items-center justify-between px-4 py-2 bg-muted/30">
|
|
<span class="text-xs text-muted-foreground">{{
|
|
t("driverStore.driversUpdatable", { count: updatableCount })
|
|
}}</span>
|
|
<Button
|
|
size="sm"
|
|
class="h-7 rounded-full text-xs"
|
|
:disabled="installing !== null || upgradingAll"
|
|
@click="upgradeAll"
|
|
>
|
|
<Loader2 v-if="upgradingAll" class="h-3 w-3 animate-spin mr-1" />
|
|
<Download v-else class="h-3 w-3 mr-1" />
|
|
{{
|
|
upgradingAll
|
|
? t("driverStore.upgradingProgress", { current: upgradingIndex, total: upgradingTotal })
|
|
: t("driverStore.upgradeAll")
|
|
}}
|
|
</Button>
|
|
</div>
|
|
<div
|
|
v-for="driver in drivers"
|
|
:key="driver.db_type"
|
|
class="flex items-center gap-3 px-4 py-2.5 transition hover:bg-muted/30"
|
|
>
|
|
<span class="flex h-9 w-9 items-center justify-center rounded-lg bg-muted/60 shrink-0">
|
|
<DatabaseIcon :db-type="driver.db_type" class="h-5 w-5" />
|
|
</span>
|
|
<div class="min-w-0 flex-1">
|
|
<div class="text-sm font-medium">{{ driver.label }}</div>
|
|
</div>
|
|
<div class="flex shrink-0 items-center gap-1.5">
|
|
<span
|
|
v-if="driver.jre"
|
|
class="rounded-full px-2 py-0.5 text-[11px]"
|
|
:class="driver.jre !== '21' ? 'bg-blue-500/10 text-blue-600' : 'bg-muted text-muted-foreground'"
|
|
>JRE {{ driver.jre }}</span
|
|
>
|
|
<template v-if="driver.installed">
|
|
<span class="rounded-full bg-muted px-2 py-0.5 text-[11px] text-muted-foreground"
|
|
>v{{ driver.installed_version }}</span
|
|
>
|
|
<span
|
|
v-if="driver.update_available"
|
|
class="rounded-full bg-amber-500/15 px-2 py-0.5 text-[11px] text-amber-600"
|
|
>→ v{{ driver.version }}</span
|
|
>
|
|
</template>
|
|
<template v-else>
|
|
<span
|
|
v-if="driver.version"
|
|
class="rounded-full bg-muted px-2 py-0.5 text-[11px] text-muted-foreground"
|
|
>v{{ driver.version }}</span
|
|
>
|
|
</template>
|
|
<span
|
|
v-if="formatSize(driver.size)"
|
|
class="rounded-full bg-muted px-2 py-0.5 text-[11px] text-muted-foreground"
|
|
>{{ formatSize(driver.size) }}</span
|
|
>
|
|
</div>
|
|
<div class="flex shrink-0 items-center gap-2">
|
|
<Button
|
|
v-if="!driver.installed && isDriverQueued(driver.db_type)"
|
|
size="sm"
|
|
variant="outline"
|
|
class="h-7 rounded-full border-green-500/30 bg-green-500/10 text-xs text-green-700 hover:bg-green-500/15"
|
|
:disabled="upgradingAll"
|
|
@click="removeQueuedDriverInstall(driver.db_type)"
|
|
>
|
|
<Clock3 class="h-3 w-3 mr-1" />
|
|
{{ t("driverStore.queued") }}
|
|
</Button>
|
|
<DriverInstallProgressCircle
|
|
v-else-if="!driver.installed && isDriverProgressActive(driver.db_type)"
|
|
:percent="progressNumber"
|
|
:title="progressTitle(t('driverStore.installing'))"
|
|
/>
|
|
<Button
|
|
v-else-if="!driver.installed"
|
|
size="sm"
|
|
class="h-7 rounded-full text-xs"
|
|
:disabled="upgradingAll"
|
|
@click="installDriver(driver.db_type)"
|
|
>
|
|
<Download class="h-3 w-3 mr-1" />
|
|
{{ t("driverStore.install") }}
|
|
</Button>
|
|
<Button
|
|
v-if="
|
|
!driver.installed && !isDriverProgressActive(driver.db_type) && !isDriverQueued(driver.db_type)
|
|
"
|
|
size="sm"
|
|
variant="ghost"
|
|
class="h-7 w-7 rounded-full text-xs text-muted-foreground"
|
|
:title="t('driverStore.importLocalJar')"
|
|
:disabled="upgradingAll || installing !== null"
|
|
@click="importDriverJar(driver.db_type)"
|
|
>
|
|
<FileUp class="h-3.5 w-3.5" />
|
|
</Button>
|
|
<template v-else>
|
|
<Check
|
|
v-if="!(driver.update_available && isDriverProgressActive(driver.db_type))"
|
|
class="h-4 w-4 text-green-600"
|
|
/>
|
|
<Button
|
|
v-if="driver.update_available && isDriverQueued(driver.db_type)"
|
|
size="sm"
|
|
variant="outline"
|
|
class="h-7 rounded-full border-green-500/30 bg-green-500/10 text-xs text-green-700 hover:bg-green-500/15"
|
|
:disabled="upgradingAll"
|
|
@click="removeQueuedDriverInstall(driver.db_type)"
|
|
>
|
|
<Clock3 class="h-3 w-3 mr-1" />
|
|
{{ t("driverStore.queued") }}
|
|
</Button>
|
|
<DriverInstallProgressCircle
|
|
v-else-if="driver.update_available && isDriverProgressActive(driver.db_type)"
|
|
:percent="progressNumber"
|
|
:title="progressTitle(t('driverStore.updating'))"
|
|
/>
|
|
<Button
|
|
v-else-if="driver.update_available"
|
|
size="sm"
|
|
variant="outline"
|
|
class="h-7 rounded-full text-xs"
|
|
:disabled="upgradingAll"
|
|
@click="installDriver(driver.db_type)"
|
|
>
|
|
{{ t("driverStore.update") }}
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
class="h-7 rounded-full text-xs text-muted-foreground hover:text-destructive"
|
|
:disabled="installing !== null || upgradingAll || isDriverQueued(driver.db_type)"
|
|
@click="uninstallDriver(driver.db_type)"
|
|
>
|
|
{{ t("driverStore.uninstall") }}
|
|
</Button>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
<!-- JDBC Tab -->
|
|
<TabsContent value="jdbc" class="mt-5 space-y-5">
|
|
<!-- JDBC Plugin -->
|
|
<div class="rounded-xl border bg-muted/20 p-4">
|
|
<div class="flex min-h-12 items-center justify-between gap-3">
|
|
<div class="min-w-0 space-y-1">
|
|
<Label>{{ t("settings.jdbcPlugin") }}</Label>
|
|
<p v-if="!jdbcPluginStatus?.installed" class="text-xs text-muted-foreground">
|
|
{{ t("settings.jdbcPluginNotInstalled") }}
|
|
</p>
|
|
</div>
|
|
<div class="flex shrink-0 items-center gap-3">
|
|
<span
|
|
v-if="jdbcPluginStatus?.installed"
|
|
class="text-xs"
|
|
:class="jdbcPluginStatus.compatible ? 'text-green-600' : 'text-destructive'"
|
|
>
|
|
{{
|
|
jdbcPluginStatus.compatible
|
|
? t("settings.jdbcPluginInstalled", {
|
|
version: jdbcPluginStatus.version || "-",
|
|
})
|
|
: t("settings.jdbcPluginIncompatible")
|
|
}}
|
|
</span>
|
|
<span
|
|
v-if="jdbcPluginStatus?.installed && jdbcPluginStatus.update_available"
|
|
class="rounded-full bg-amber-500/15 px-2 py-0.5 text-[11px] text-amber-600"
|
|
>→ v{{ jdbcPluginStatus.latest_version }}</span
|
|
>
|
|
<Button
|
|
v-if="jdbcPluginStatus?.installed && jdbcPluginStatus.update_available"
|
|
type="button"
|
|
variant="outline"
|
|
class="rounded-full"
|
|
:disabled="isInstallingJdbcPlugin"
|
|
@click="installJdbcPlugin"
|
|
>
|
|
{{ isInstallingJdbcPlugin ? t("common.loading") : t("settings.jdbcPluginUpdate") }}
|
|
</Button>
|
|
<Button
|
|
v-if="jdbcPluginStatus?.installed"
|
|
type="button"
|
|
variant="outline"
|
|
class="rounded-full"
|
|
:disabled="isUninstallingJdbcPlugin"
|
|
@click="uninstallJdbcPlugin"
|
|
>
|
|
{{ isUninstallingJdbcPlugin ? t("common.loading") : t("settings.jdbcPluginUninstall") }}
|
|
</Button>
|
|
<Button
|
|
v-else
|
|
type="button"
|
|
variant="default"
|
|
class="rounded-full"
|
|
:disabled="isInstallingJdbcPlugin"
|
|
@click="installJdbcPlugin"
|
|
>
|
|
{{ isInstallingJdbcPlugin ? t("common.loading") : t("settings.jdbcPluginInstall") }}
|
|
</Button>
|
|
<Button
|
|
v-if="!jdbcPluginStatus?.installed"
|
|
type="button"
|
|
variant="outline"
|
|
class="rounded-full"
|
|
:disabled="isInstallingJdbcPlugin"
|
|
@click="installJdbcPluginLocal"
|
|
>
|
|
<FolderOpen class="h-3.5 w-3.5 mr-1" />
|
|
{{ t("driverStore.localInstall") }}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- JDBC Drivers -->
|
|
<div class="space-y-3">
|
|
<div class="space-y-1">
|
|
<Label>{{ t("settings.jdbcDrivers") }}</Label>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<Input
|
|
v-model="jdbcDriverPathInput"
|
|
class="flex-1"
|
|
:placeholder="t('settings.jdbcDriverPathPlaceholder')"
|
|
@keydown.enter.prevent="importJdbcDriverPathInput"
|
|
/>
|
|
<Button
|
|
variant="outline"
|
|
class="rounded-full"
|
|
:disabled="!jdbcDriverPathInput.trim()"
|
|
@click="importJdbcDriverPathInput"
|
|
>
|
|
{{ t("settings.jdbcImportPath") }}
|
|
</Button>
|
|
<Button class="shrink-0 rounded-full" @click="importJdbcDrivers">
|
|
<FolderOpen class="h-4 w-4" />
|
|
{{ t("settings.jdbcImport") }}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-md border">
|
|
<div v-if="isLoadingJdbcDrivers" class="p-4 text-sm text-muted-foreground">
|
|
{{ t("common.loading") }}
|
|
</div>
|
|
<div v-else-if="jdbcDrivers.length === 0" class="p-4 text-sm text-muted-foreground">
|
|
{{ t("settings.jdbcNoDrivers") }}
|
|
</div>
|
|
<div v-else class="divide-y">
|
|
<div v-for="driver in jdbcDrivers" :key="driver.path" class="flex items-center gap-3 p-3">
|
|
<div class="min-w-0 flex-1">
|
|
<div class="truncate text-sm font-medium">{{ driver.name }}</div>
|
|
<div class="truncate text-xs text-muted-foreground">{{ driver.path }}</div>
|
|
</div>
|
|
<div class="shrink-0 text-xs text-muted-foreground">{{ formatBytes(driver.size) }}</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
class="h-8 w-8 shrink-0 rounded-full"
|
|
@click="deleteJdbcDriver(driver.path)"
|
|
>
|
|
<Trash2 class="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|