+
+
+ 正在获取状态...
+
+
@@ -329,7 +330,9 @@
{{ctx.Locale.Tr "cancel"}}
-
{{ctx.Locale.Tr "appstore.install"}}
+
更新应用
+
暂停应用
+
卸载应用
@@ -352,6 +355,7 @@
let allApps = [];
let filteredApps = [];
let currentApp = null;
+let currentAppStatus = null; // 存储当前应用的运行状态
let storeSource = 'local'; // local | devstar
// 安装位置：local | kubeconfig
let installTarget = 'local';
@@ -503,11 +507,9 @@ function loadApps() {
if (filteredApps.length === 0) {
grid.innerHTML = `
-
-
+
`;
@@ -517,6 +519,8 @@ function loadApps() {
filteredApps.forEach(app => {
const card = createAppCard(app);
grid.appendChild(card);
+ // 异步检查应用安装状态
+ checkAppInstallStatus(app);
});
}
@@ -558,6 +562,12 @@ function createAppCard(app) {
deploymentLabel = '
Docker';
}
+ // 初始显示安装按钮，后续异步检查状态
+ const actionButton = `
`;
+
column.innerHTML = `
@@ -588,10 +598,7 @@ function createAppCard(app) {
详情
-
+ ${actionButton}
@@ -630,9 +637,7 @@ function filterApps() {
// Handle deployment type matching, including 'both' type
let deploymentMatch = false;
- if (selectedDeployment === 'all') {
- deploymentMatch = true;
- } else if (appDeployment === 'both') {
+ if (appDeployment === 'both') {
// 'both' type matches both 'docker' and 'kubernetes' filters
deploymentMatch = true;
} else {
@@ -705,6 +710,12 @@ function showAppDetails(appId) {
if (modal) {
modal.style.display = 'block';
}
+
+ // 初始化按钮显示状态（在状态加载完成前先隐藏所有操作按钮）
+ updateActionButtonsVisibility();
+
+ // 拉取并展示运行状态
+ loadAndRenderAppStatus(app);
}
function showInstallModal(appId) {
@@ -820,7 +831,376 @@ function showInstallModalFromDetails() {
}
}
-function installApp() {
+// 更新应用（从详情弹窗触发）
+async function updateInstalledAppFromDetails() {
+ if (!currentApp) return;
+
+ // 关闭详情弹窗，打开更新弹窗（类似安装）
+ closeDetailsModal();
+ showUpdateModal(currentApp.id || currentApp.app_id);
+}
+
+// 显示更新弹窗
+function showUpdateModal(appId) {
+ const app = allApps.find(a => a.id === appId || a.app_id === appId);
+ if (!app) return;
+
+ currentApp = app;
+ document.getElementById('install-app-name').textContent = app.name + ' - 更新';
+
+ // 生成配置表单（重用安装的逻辑）
+ const form = document.getElementById('install-form');
+ const dyn = document.getElementById('install-dynamic-fields');
+ dyn.innerHTML = '';
+
+ // 配置表单生成逻辑（与 showInstallModal 相同）
+ let configSchema = null;
+ let configDefaults = null;
+ if (app.config && app.config.schema) {
+ configSchema = app.config.schema;
+ configDefaults = app.config.default || {};
+ } else if (app.Config && app.Config.Schema) {
+ configSchema = app.Config.Schema;
+ configDefaults = app.Config.Default || {};
+ }
+ if (!configSchema || typeof configSchema !== 'object') {
+ dyn.innerHTML = `
+
+
+
+
+ `;
+ } else {
+ Object.entries(configSchema).forEach(([key, config]) => {
+ if (!config) return;
+ let field = document.createElement('div');
+ field.className = 'field';
+ let inputHtml = '';
+ const defaultValue = configDefaults[key] || config.default || '';
+ if (config.type === 'int') {
+ const min = config.min || '';
+ const max = config.max || '';
+ inputHtml = `
`;
+ } else if (config.type === 'string') {
+ inputHtml = `
`;
+ } else if (config.type === 'bool' || config.type === 'boolean') {
+ inputHtml = `
+
+
+
+
+ `;
+ } else if (config.type === 'select' && config.options) {
+ let optionsHtml = '';
+ config.options.forEach(option => {
+ const selected = option === defaultValue ? 'selected' : '';
+ optionsHtml += `
`;
+ });
+ inputHtml = `
`;
+ } else {
+ inputHtml = `
`;
+ }
+ field.innerHTML = `
+
+ ${config.description ? `
${config.description}
` : ''}
+ ${inputHtml}
+ `;
+ dyn.appendChild(field);
+ });
+ }
+
+ // 设置安装位置表单
+ const radios = document.querySelectorAll('#install-modal input[name="installTargetRadio"]');
+ radios.forEach(r => { r.checked = (r.value === installTarget); });
+ const kubeconfigFields = document.querySelector('#install-modal #kubeconfig-fields');
+ if (kubeconfigFields) {
+ kubeconfigFields.style.display = (installTarget === 'kubeconfig') ? 'block' : 'none';
+ }
+ const kcContent = document.querySelector('#install-modal #kubeconfig-content');
+ const kcContext = document.querySelector('#install-modal #kubeconfig-context');
+ if (kcContent) kcContent.value = installKubeconfigContent || '';
+ if (kcContext) kcContext.value = installKubeconfigContext || '';
+
+ // 修改安装按钮文字为"更新"
+ const installBtn = document.querySelector('#install-modal .ui.primary.button[onclick="installApp()"]');
+ if (installBtn) {
+ installBtn.textContent = '更新应用';
+ installBtn.onclick = updateApp;
+ }
+
+ const modal = document.getElementById('install-modal');
+ if (modal) {
+ modal.style.display = 'block';
+ }
+}
+
+// 更新应用（表单提交）
+function updateApp() {
+ if (!currentApp) return;
+ const form = document.getElementById('install-form');
+ const formData = new FormData(form);
+ const config = {};
+ for (let [key, value] of formData.entries()) {
+ const input = form.querySelector(`[name="${key}"]`);
+ if (input && input.type === 'checkbox') {
+ config[key] = input.checked;
+ } else if (input && input.type === 'number') {
+ config[key] = parseInt(value) || 0;
+ } else {
+ config[key] = value;
+ }
+ }
+ const appId = currentApp.id || currentApp.app_id;
+ const currentDeploymentFilter = document.querySelector('.deployment-filter .active');
+ const deploymentType = currentDeploymentFilter?.getAttribute('data-deployment');
+
+ // 从安装窗口读取安装位置
+ const selectedTarget = document.querySelector('#install-modal input[name="installTargetRadio"]:checked');
+ installTarget = selectedTarget ? selectedTarget.value : 'local';
+ if (installTarget === 'kubeconfig') {
+ const kcContentEl = document.querySelector('#install-modal #kubeconfig-content');
+ const kcContextEl = document.querySelector('#install-modal #kubeconfig-context');
+ installKubeconfigContent = kcContentEl ? kcContentEl.value.trim() : '';
+ installKubeconfigContext = kcContextEl ? kcContextEl.value.trim() : '';
+ if (!installKubeconfigContent) {
+ alert('请输入 kubeconfig 内容');
+ return;
+ }
+ config.deploy = { type: 'kubernetes' };
+ } else {
+ if (deploymentType === 'docker') {
+ config.deploy = { type: 'docker' };
+ } else if (deploymentType === 'kubernetes') {
+ config.deploy = { type: 'kubernetes' };
+ } else {
+ // 回退到 docker 作为默认选择
+ config.deploy = { type: 'docker' };
+ }
+ }
+
+ // 创建表单提交到更新路由
+ const updateForm = document.createElement('form');
+ updateForm.method = 'POST';
+ updateForm.action = `/user/settings/appstore/update/${appId}`;
+
+ const csrfInput = document.createElement('input');
+ csrfInput.type = 'hidden';
+ csrfInput.name = '_csrf';
+ csrfInput.value = document.querySelector('meta[name="_csrf"]')?.content || '';
+ updateForm.appendChild(csrfInput);
+
+ const appIdInput = document.createElement('input');
+ appIdInput.type = 'hidden';
+ appIdInput.name = 'app_id';
+ appIdInput.value = appId;
+ updateForm.appendChild(appIdInput);
+
+ const configInput = document.createElement('input');
+ configInput.type = 'hidden';
+ configInput.name = 'config';
+ configInput.value = JSON.stringify(config);
+ updateForm.appendChild(configInput);
+
+ const targetInput = document.createElement('input');
+ targetInput.type = 'hidden';
+ targetInput.name = 'install_target';
+ targetInput.value = installTarget;
+ updateForm.appendChild(targetInput);
+
+ const redirectInput = document.createElement('input');
+ redirectInput.type = 'hidden';
+ redirectInput.name = 'redirect_to';
+ redirectInput.value = window.location.pathname;
+ updateForm.appendChild(redirectInput);
+
+ if (installTarget === 'kubeconfig') {
+ const kcInput = document.createElement('input');
+ kcInput.type = 'hidden';
+ kcInput.name = 'kubeconfig';
+ kcInput.value = installKubeconfigContent;
+ updateForm.appendChild(kcInput);
+
+ const kctxInput = document.createElement('input');
+ kctxInput.type = 'hidden';
+ kctxInput.name = 'kubeconfig_context';
+ kctxInput.value = installKubeconfigContext;
+ updateForm.appendChild(kctxInput);
+ }
+
+ document.body.appendChild(updateForm);
+ updateForm.submit();
+ closeInstallModal();
+}
+
+// 检查应用安装状态并更新按钮
+async function checkAppInstallStatus(app) {
+ const appId = app.id || app.app_id;
+ const installBtn = document.getElementById(`install-btn-${appId}`);
+ if (!installBtn) return;
+
+ try {
+ const resp = await fetch(`/user/settings/appstore/api/status/${appId}`);
+ if (resp.ok) {
+ const data = await resp.json();
+ const phase = data.phase || data.status?.phase || 'Unknown';
+ const replicas = data.replicas ?? data.status?.replicas ?? 0;
+ const readyReplicas = data.readyReplicas ?? data.status?.readyReplicas ?? 0;
+
+ // 判断是否已安装且就绪
+ const isInstalled = phase !== 'Not Installed' && phase !== 'Unknown' && (replicas === 0 || readyReplicas > 0);
+
+ if (isInstalled) {
+ installBtn.className = 'ui green compact button disabled';
+ installBtn.innerHTML = '
已安装';
+ installBtn.onclick = null;
+ }
+ }
+ } catch (e) {
+ // 状态检查失败，保持安装按钮不变
+ console.log('Failed to check app status:', e);
+ }
+}
+
+// 卸载应用（从详情弹窗触发）
+function uninstallCurrentAppFromDetails() {
+ if (!currentApp) return;
+ const appId = currentApp.id || currentApp.app_id;
+ const uninstallForm = document.createElement('form');
+ uninstallForm.method = 'POST';
+ uninstallForm.action = `/user/settings/appstore/uninstall/${appId}`;
+ const csrfInput = document.createElement('input');
+ csrfInput.type = 'hidden';
+ csrfInput.name = '_csrf';
+ csrfInput.value = document.querySelector('meta[name="_csrf"]')?.content || '';
+ uninstallForm.appendChild(csrfInput);
+ const appIdInput = document.createElement('input');
+ appIdInput.type = 'hidden';
+ appIdInput.name = 'app_id';
+ appIdInput.value = appId;
+ uninstallForm.appendChild(appIdInput);
+ const redirectInput = document.createElement('input');
+ redirectInput.type = 'hidden';
+ redirectInput.name = 'redirect_to';
+ redirectInput.value = window.location.pathname;
+ uninstallForm.appendChild(redirectInput);
+ document.body.appendChild(uninstallForm);
+ uninstallForm.submit();
+}
+
+// 暂停应用（从详情弹窗触发）
+function stopCurrentAppFromDetails() {
+ if (!currentApp) return;
+ const appId = currentApp.id || currentApp.app_id;
+
+ // 显示确认对话框
+ if (!confirm('确定要暂停应用吗？暂停后应用将停止运行，但数据会保留。')) {
+ return;
+ }
+
+ // 创建暂停应用的请求
+ const stopForm = document.createElement('form');
+ stopForm.method = 'POST';
+ stopForm.action = `/user/settings/appstore/stop/${appId}`;
+
+ const csrfInput = document.createElement('input');
+ csrfInput.type = 'hidden';
+ csrfInput.name = '_csrf';
+ csrfInput.value = document.querySelector('meta[name="_csrf"]')?.content || '';
+ stopForm.appendChild(csrfInput);
+
+ const appIdInput = document.createElement('input');
+ appIdInput.type = 'hidden';
+ appIdInput.name = 'app_id';
+ appIdInput.value = appId;
+ stopForm.appendChild(appIdInput);
+
+ const redirectInput = document.createElement('input');
+ redirectInput.type = 'hidden';
+ redirectInput.name = 'redirect_to';
+ redirectInput.value = window.location.pathname;
+ stopForm.appendChild(redirectInput);
+
+ document.body.appendChild(stopForm);
+ stopForm.submit();
+}
+
+// 加载并渲染运行状态（基于 K8s Application CRD）
+async function loadAndRenderAppStatus(app) {
+ const statusEl = document.getElementById('details-status');
+ if (!statusEl || !app) return;
+ statusEl.innerHTML = '
正在获取状态...';
+ try {
+ const appId = app.id || app.app_id;
+ const resp = await fetch(`/user/settings/appstore/api/status/${appId}`);
+ if (!resp.ok) throw new Error(`status: ${resp.status}`);
+ const data = await resp.json();
+ // 期望后端返回 { phase, replicas, readyReplicas, ready } 或类似结构
+ const phase = data.phase || data.status?.phase || 'Unknown';
+ const replicas = data.replicas ?? data.status?.replicas ?? '-';
+ const readyReplicas = data.readyReplicas ?? data.status?.readyReplicas ?? '-';
+ const ready = (typeof data.ready === 'boolean')
+ ? data.ready
+ : (phase !== 'Not Installed' && phase !== 'Unknown' && (replicas === 0 || readyReplicas > 0));
+
+ // 存储应用状态到全局变量
+ currentAppStatus = {
+ phase: phase,
+ replicas: replicas,
+ readyReplicas: readyReplicas,
+ ready: ready
+ };
+
+ statusEl.innerHTML = `
+
+
${ready ? 'Ready' : 'Not Ready'}
+
${phase} · ${readyReplicas}/${replicas}
+
+ `;
+
+ // 根据状态动态控制按钮显示
+ updateActionButtonsVisibility();
+ } catch (e) {
+ statusEl.innerHTML = '
获取状态失败';
+ currentAppStatus = null;
+ updateActionButtonsVisibility();
+ }
+}
+
+// 根据应用状态动态控制操作按钮的显示
+function updateActionButtonsVisibility() {
+ const updateBtn = document.querySelector('#app-details-modal .ui.primary.button[onclick="updateInstalledAppFromDetails()"]');
+ const stopBtn = document.querySelector('#app-details-modal .ui.orange.button[onclick="stopCurrentAppFromDetails()"]');
+ const uninstallBtn = document.querySelector('#app-details-modal .ui.red.button[onclick="uninstallCurrentAppFromDetails()"]');
+
+ if (!currentAppStatus) {
+ // 状态未知，隐藏所有操作按钮
+ if (updateBtn) updateBtn.style.display = 'none';
+ if (stopBtn) stopBtn.style.display = 'none';
+ if (uninstallBtn) uninstallBtn.style.display = 'none';
+ return;
+ }
+
+ const isInstalled = currentAppStatus.phase !== 'Not Installed' && currentAppStatus.phase !== 'Unknown';
+ const isRunning = isInstalled && currentAppStatus.replicas > 0;
+ const isStopped = isInstalled && currentAppStatus.replicas === 0;
+
+ // 更新按钮：只有已安装的应用才能更新
+ if (updateBtn) {
+ updateBtn.style.display = isInstalled ? 'inline-block' : 'none';
+ }
+
+ // 暂停按钮：只有正在运行的应用才能暂停
+ if (stopBtn) {
+ stopBtn.style.display = isRunning ? 'inline-block' : 'none';
+ }
+
+ // 卸载按钮：只有已安装的应用才能卸载
+ if (uninstallBtn) {
+ uninstallBtn.style.display = isInstalled ? 'inline-block' : 'none';
+ }
+}
+
+async function installApp() {
if (!currentApp) return;
const form = document.getElementById('install-form');
const formData = new FormData(form);
@@ -857,11 +1237,8 @@ function installApp() {
} else if (deploymentType === 'kubernetes') {
config.deploy = { type: 'kubernetes' };
} else {
- if (currentApp.deployment_type === 'both') {
- config.deploy = { type: 'docker' };
- } else {
- config.deploy = { type: currentApp.deployment_type || 'docker' };
- }
+ // 回退到 docker 作为默认选择
+ config.deploy = { type: 'docker' };
}
}
// 避免全局 beforeunload 提示：标记当前表单忽略脏检测
@@ -907,9 +1284,60 @@ function installApp() {
kctxInput.value = installKubeconfigContext;
installForm.appendChild(kctxInput);
}
+ // 提交安装表单
document.body.appendChild(installForm);
- installForm.submit();
- closeInstallModal();
+
+ // 显示安装中状态
+ const installBtn = document.querySelector('#install-modal .ui.primary.button');
+ if (installBtn) {
+ installBtn.className = 'ui loading primary button';
+ installBtn.textContent = '安装中...';
+ installBtn.disabled = true;
+ }
+
+ // 异步提交，成功后更新按钮状态
+ try {
+ const formData = new FormData(installForm);
+ const response = await fetch(installForm.action, {
+ method: 'POST',
+ body: formData
+ });
+
+ if (response.ok) {
+ // 安装成功，更新按钮状态
+ const appId = currentApp.id || currentApp.app_id;
+ const cardInstallBtn = document.getElementById(`install-btn-${appId}`);
+ if (cardInstallBtn) {
+ cardInstallBtn.className = 'ui green compact button disabled';
+ cardInstallBtn.innerHTML = '
已安装';
+ cardInstallBtn.onclick = null;
+ }
+
+ closeInstallModal();
+ // 显示成功消息
+ alert('应用安装成功！');
+ } else {
+ // 安装失败，恢复按钮状态
+ if (installBtn) {
+ installBtn.className = 'ui primary button';
+ installBtn.textContent = '安装应用';
+ installBtn.disabled = false;
+ }
+ const errorData = await response.json();
+ alert('安装失败: ' + (errorData.error || '未知错误'));
+ }
+ } catch (error) {
+ // 网络错误，恢复按钮状态
+ if (installBtn) {
+ installBtn.className = 'ui primary button';
+ installBtn.textContent = '安装应用';
+ installBtn.disabled = false;
+ }
+ alert('安装失败: ' + error.message);
+ }
+
+ // 清理表单
+ document.body.removeChild(installForm);
}
function showAddAppModal() {
@@ -928,27 +1356,48 @@ function closeAddAppModal() {
}
}
async function submitAddApp() {
+ console.log('submitAddApp called'); // 调试信息
const jsonText = document.getElementById('add-app-json').value.trim();
+ console.log('JSON text:', jsonText); // 调试信息
+
let appData;
try {
appData = JSON.parse(jsonText);
+ console.log('Parsed app data:', appData); // 调试信息
} catch (e) {
+ console.error('JSON parse error:', e); // 调试信息
alert('JSON格式错误');
return;
}
- const resp = await fetch('/user/settings/appstore/api/add', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify(appData)
- });
- if (resp.ok) {
- closeAddAppModal();
- loadAppsFromAPI(); // 刷新应用列表
- alert('添加成功');
- } else {
- const err = await resp.json();
- alert('添加失败: ' + (err.error || '未知错误'));
+
+ // 获取 CSRF token
+ const csrfToken = document.querySelector('meta[name="_csrf"]')?.content || '';
+ console.log('CSRF token:', csrfToken); // 调试信息
+
+ try {
+ const resp = await fetch('/user/settings/appstore/api/add', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'X-CSRF-Token': csrfToken
+ },
+ body: JSON.stringify(appData)
+ });
+ console.log('Response status:', resp.status); // 调试信息
+
+ if (resp.ok) {
+ closeAddAppModal();
+ loadAppsFromAPI(); // 刷新应用列表
+ alert('添加成功');
+ } else {
+ const err = await resp.json();
+ console.error('API error:', err); // 调试信息
+ alert('添加失败: ' + (err.error || '未知错误'));
+ }
+ } catch (error) {
+ console.error('Fetch error:', error); // 调试信息
+ alert('网络错误: ' + error.message);
}
}