@blocklet/launcher-workflow 2.4.4 → 2.4.5

package/es/components/in-progress-session.js

@@ -5,7 +5,7 @@ import Box from '@mui/material/Box';
 import Link from '@mui/material/Link';
 import { useState } from 'react';
 import useAsync from 'react-use/lib/useAsync';
-import joinURL from 'url-join';
+import { joinURL } from 'ufo';
 import { useLocaleContext } from '../contexts/locale';
 import useRequest from '../contexts/request';
 import { useWorkflowContext } from '../contexts/workflow';

package/es/components/launch-serverless/allocate.js

@@ -0,0 +1,181 @@
+import { useSetState } from 'ahooks';
+import PropTypes from 'prop-types';
+import React, { useEffect, useMemo, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { LAUNCH_STATUS } from '@blocklet/launcher-util/lib/constant';
+import { useLocaleContext } from '../../contexts/locale';
+import useRequest from '../../contexts/request';
+import BaseServerlessLayout from './shared/base-serverless-layout';
+import { useDisplayProgress, useElapsedTime, useFormatTime } from './shared/common-components';
+import LoadingDisplayLayout from './shared/loading-display-layout';
+import RetryErrorMessage from './shared/retry-error-message';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function LaunchServerless({
+  sessionId
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  const {
+    api
+  } = useRequest();
+  const navigate = useNavigate();
+  const timerRef = useRef({});
+  const [state, setState] = useSetState({
+    allocating: true,
+    allocated: false,
+    error: '',
+    launchSession: null
+  });
+  const formatTime = useFormatTime();
+  const time = useElapsedTime(0);
+  const actions = useMemo(() => {
+    // 基础步骤时间
+    const steps = [{
+      message: t('launch.waiting.starting'),
+      time: 1
+    }, {
+      message: t('launch.waiting.securing'),
+      time: 1
+    }, {
+      message: t('launch.waiting.prepare'),
+      time: 1
+    }, {
+      message: t('launch.waiting.waiting'),
+      time: 1
+    }, {
+      message: t('launch.waiting.done'),
+      time: 1
+    }];
+
+    // 计算总时间
+    const totalTime = steps.reduce((acc, step) => acc + step.time, 0);
+
+    // 计算每个步骤的进度区间
+    let currentProgress = 0;
+    return steps.map(step => {
+      const progressPercent = step.time / totalTime * 100;
+      const range = [Math.round(currentProgress), Math.round(currentProgress + progressPercent)];
+      currentProgress += progressPercent;
+      return {
+        ...step,
+        range
+      };
+    });
+  }, [t]);
+  const estimatedTime = useMemo(() => {
+    return actions.reduce((acc, action) => acc + action.time, 0);
+  }, [actions]);
+  const displayProgress = useDisplayProgress(0, estimatedTime);
+
+  // 根据当前进度获取对应的 action
+  const getCurrentAction = progress => {
+    const action = actions.find(({
+      range: [start, end]
+    }) => progress >= start && progress < end);
+    return action?.message || actions[actions.length - 1].message;
+  };
+  useEffect(() => {
+    const fetch = async () => {
+      try {
+        const {
+          data: {
+            launch: launchSession
+          }
+        } = await api.get(`/launches/${sessionId}?health=1`);
+        setState({
+          launchSession
+        });
+        if (launchSession.status >= LAUNCH_STATUS.installed) {
+          navigate(`/start-app/${sessionId}${window.location.search || ''}`);
+        } else if (launchSession.status >= LAUNCH_STATUS.allocated) {
+          navigate(`/install/${sessionId}${window.location.search || ''}`);
+        } else {
+          await Promise.all([api.post('/serverless/allocate', {
+            launchId: sessionId
+          }), new Promise(resolve => {
+            timerRef.current.raceTimer = setTimeout(() => {
+              resolve();
+            }, estimatedTime * 1000);
+          })]);
+          setState({
+            allocating: false,
+            allocated: true
+          });
+        }
+      } catch (error) {
+        setState({
+          error: error.message,
+          allocating: false
+        });
+        console.error(error);
+      }
+    };
+    if (window.blocklet.DEVELOPER_WORKFLOW_UI) {
+      timerRef.current.mockTimer = setTimeout(() => {
+        navigate(`/install/${sessionId}${window.location.search || ''}`);
+      }, 5000);
+    } else {
+      fetch();
+    }
+    return () => {
+      const timers = Object.values(timerRef.current); // eslint-disable-line react-hooks/exhaustive-deps
+      timers.forEach(timer => clearTimeout(timer));
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useEffect(() => {
+    if (state.allocated) {
+      const timer = setTimeout(() => {
+        navigate(`/install/${sessionId}${window.location.search || ''}`);
+      }, 1000);
+      return () => clearTimeout(timer);
+    }
+    return () => {};
+  }, [state.allocated, sessionId, navigate]);
+  const handleRetry = async () => {
+    try {
+      setState({
+        error: '',
+        allocating: true
+      });
+      if (!state.launchSession?.status || state.launchSession.status < LAUNCH_STATUS.allocated) {
+        await api.post('/serverless/allocate', {
+          launchId: sessionId
+        });
+      } else {
+        await api.post('/serverless/install', {
+          launchId: sessionId
+        });
+      }
+      setState({
+        allocating: false,
+        allocated: true
+      });
+    } catch (error) {
+      setState({
+        error: error.message,
+        allocating: false
+      });
+    }
+  };
+  return /*#__PURE__*/_jsxs(BaseServerlessLayout, {
+    title: t('launch.pageTitle'),
+    children: [!state.error && /*#__PURE__*/_jsx(LoadingDisplayLayout, {
+      title: t('launch.pageTitle'),
+      progress: state.allocated ? 100 : Math.max(0, Math.min(displayProgress, 100)),
+      elapsedTime: formatTime(time),
+      estimatedTime: formatTime(estimatedTime),
+      currentAction: getCurrentAction(displayProgress),
+      error: null,
+      onRetry: null
+    }), state.error && /*#__PURE__*/_jsx(RetryErrorMessage, {
+      title: t('prepare.serverless.prepareFailed'),
+      onRetry: handleRetry,
+      retryText: t('common.retry')
+    })]
+  });
+}
+LaunchServerless.propTypes = {
+  sessionId: PropTypes.string.isRequired
+};

package/es/components/launch-serverless/install.js

@@ -0,0 +1,203 @@
+import { useSetState } from 'ahooks';
+import PropTypes from 'prop-types';
+import React, { useEffect, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useLocaleContext } from '../../contexts/locale';
+import useRequest from '../../contexts/request';
+import useSerialPolling from '../../hooks/use-serial-polling';
+import BaseServerlessLayout from './shared/base-serverless-layout';
+import { calculateEstimatedTime, useDisplayProgress, useElapsedTime, useFormatTime } from './shared/common-components';
+import LoadingDisplayLayout from './shared/loading-display-layout';
+import RetryErrorMessage from './shared/retry-error-message';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CHECK_INTERVAL = 2000;
+const STATUS = {
+  installing: 1,
+  installed: 2,
+  error: 10
+};
+export default function LaunchServerless({
+  sessionId
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  const {
+    api
+  } = useRequest();
+  const navigate = useNavigate();
+  const [state, setState] = useSetState({
+    status: STATUS.installing,
+    startTime: Date.now(),
+    hasTryInstall: false,
+    retryCount: 0,
+    error: ''
+  });
+  const formatTime = useFormatTime();
+
+  // 定义带进度区间的 actions
+  const actions = useMemo(() => {
+    // 基础步骤时间
+    const steps = [{
+      message: t('install.waiting.verifying'),
+      time: 2
+    }, {
+      message: t('install.waiting.downloading'),
+      time: 5
+    }, {
+      message: t('install.waiting.extracting'),
+      time: 2
+    }, {
+      message: t('install.waiting.installing'),
+      time: 3
+    }, {
+      message: t('install.waiting.installed'),
+      time: 1
+    }];
+
+    // 计算总时间
+    const totalTime = steps.reduce((acc, step) => acc + step.time, 0);
+
+    // 计算每个步骤的进度区间
+    let currentProgress = 0;
+    return steps.map(step => {
+      const progressPercent = step.time / totalTime * 100;
+      const range = [Math.round(currentProgress), Math.round(currentProgress + progressPercent)];
+      currentProgress += progressPercent;
+      return {
+        ...step,
+        range
+      };
+    });
+  }, [t]);
+
+  // 根据组件计算预估时间
+  const estimatedTime = useMemo(() => {
+    const components = window.blockletMeta?.components || [];
+    const additionalTime = calculateEstimatedTime(components);
+    return actions.reduce((acc, {
+      time
+    }) => acc + time, 0) + Math.ceil(additionalTime * 0.6);
+  }, [actions]);
+
+  // 根据当前进度获取对应的 action
+  const getCurrentAction = progress => {
+    const action = actions.find(({
+      range: [start, end]
+    }) => progress >= start && progress < end);
+    return action?.message || actions[actions.length - 1].message;
+  };
+
+  // 时间管理 - 参考 launch-dedicated.js
+  let installStartTime = sessionStorage.getItem(`launcher-install-${sessionId}-time`);
+  if (!installStartTime) {
+    installStartTime = Date.now();
+    sessionStorage.setItem(`launcher-install-${sessionId}-time`, installStartTime);
+  }
+  const time = useElapsedTime(Math.round((Date.now() - installStartTime) / 1000));
+  const startProgress = useMemo(() => {
+    return Math.min(time / estimatedTime * 100, 90);
+  }, [time, estimatedTime]);
+  const displayProgress = useDisplayProgress(startProgress, state.status === STATUS.installed ? Math.min(estimatedTime - time, 2) : estimatedTime);
+  const checkLaunchSession = async () => {
+    if (window.blocklet.DEVELOPER_WORKFLOW_UI) {
+      // 开发模式下的模拟逻辑
+      setTimeout(() => {
+        setState({
+          status: STATUS.installed
+        });
+        sessionStorage.removeItem(`launcher-install-${sessionId}-time`);
+        navigate(`/start-app/${sessionId}${window.location.search || ''}`);
+      }, 47000);
+      return;
+    }
+    try {
+      const {
+        data: {
+          launch: launchSession
+        }
+      } = await api.get(`/launches/${sessionId}?health=1`);
+      const {
+        status
+      } = launchSession.metadata;
+      const hasInstalled = ['starting', 'installed', 'running', 'stopped'].includes(status);
+      if (launchSession.running || hasInstalled) {
+        sessionStorage.removeItem(`launcher-install-${sessionId}-time`);
+        setState({
+          status: STATUS.installed
+        });
+        if (['installed', 'stopped'].includes(status)) {
+          await api.post(`/launches/${sessionId}/start`).catch(error => {
+            console.error(error);
+          });
+        }
+      } else if (!state.hasTryInstall && !hasInstalled && Date.now() - state.startTime > 20000) {
+        setState({
+          hasTryInstall: true
+        });
+        await api.post('/serverless/install', {
+          launchId: sessionId
+        }).catch(error => {
+          console.error(error);
+        });
+      }
+      setState({
+        retryCount: 0
+      });
+    } catch (error) {
+      if (state.retryCount < 5) {
+        console.warn('check launch session occurred error, retry', state.retryCount, error);
+        setState({
+          retryCount: state.retryCount + 1
+        });
+      } else {
+        sessionStorage.removeItem(`launcher-install-${sessionId}-time`);
+        setState({
+          error: error.message,
+          status: STATUS.error,
+          retryCount: 0
+        });
+      }
+    }
+  };
+
+  // 串行检查安装状态
+  useSerialPolling({
+    isEnabled: state.status === STATUS.installing,
+    interval: CHECK_INTERVAL,
+    onPoll: checkLaunchSession
+  });
+  useEffect(() => {
+    if (state.status === STATUS.installed && displayProgress >= 99) {
+      const timer = setTimeout(() => {
+        sessionStorage.removeItem(`launcher-install-${sessionId}-time`);
+        navigate(`/start-app/${sessionId}${window.location.search || ''}`);
+      }, 1500);
+      return () => clearTimeout(timer);
+    }
+    return () => {};
+  }, [state.status, sessionId, navigate, displayProgress]);
+  const handleRetry = () => {
+    sessionStorage.removeItem(`launcher-install-${sessionId}-time`);
+    navigate(`/launch/${sessionId}${window.location.search || ''}`);
+  };
+  return /*#__PURE__*/_jsxs(BaseServerlessLayout, {
+    title: t('install.pageTitle'),
+    children: [state.status !== STATUS.error && /*#__PURE__*/_jsx(LoadingDisplayLayout, {
+      title: t('install.pageTitle'),
+      progress: state.status === STATUS.installed && displayProgress >= 99 ? 100 : displayProgress,
+      elapsedTime: formatTime(time),
+      estimatedTime: formatTime(estimatedTime),
+      currentAction: getCurrentAction(displayProgress),
+      error: null,
+      onRetry: handleRetry
+    }), state.status === STATUS.error && /*#__PURE__*/_jsx(RetryErrorMessage, {
+      title: t('install.installFailed'),
+      onRetry: handleRetry,
+      retryText: t('common.retry')
+    })]
+  });
+}
+LaunchServerless.propTypes = {
+  sessionId: PropTypes.string.isRequired
+};

package/es/components/launch-serverless/shared/base-serverless-layout.js

@@ -0,0 +1,53 @@
+import { Box } from '@mui/material';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+/**
+ * 无服务器启动流程的基础布局组件
+ * 提取公共的样式和结构，避免重复代码
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function BaseServerlessLayout({
+  title,
+  children
+}) {
+  return /*#__PURE__*/_jsx(Box, {
+    sx: {
+      display: 'flex',
+      flexDirection: 'column',
+      width: '100%',
+      height: '100%',
+      paddingTop: '100px',
+      '& .page-logo': {
+        display: 'flex',
+        justifyContent: 'center',
+        marginTop: {
+          xs: '48px',
+          md: '62px'
+        }
+      }
+    },
+    children: /*#__PURE__*/_jsx(Box, {
+      sx: {
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'column',
+        textAlign: 'center',
+        '& .loading-description': {
+          marginTop: '8px'
+        },
+        '& .result-title': {
+          fontSize: '18px'
+        },
+        '& .result-title.color-loading': {
+          color: 'primary.main'
+        }
+      },
+      children: children
+    })
+  }, title);
+}
+BaseServerlessLayout.propTypes = {
+  title: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired
+};