@blocklet/launcher-workflow 2.4.4 → 2.4.6

package/es/components/launch-serverless/shared/loading-display-layout.js

@@ -0,0 +1,122 @@
+import AnimationWaiter from '@arcblock/ux/lib/AnimationWaiter';
+import { Box, Typography } from '@mui/material';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { useRequest as useRequestHook } from 'ahooks';
+import { withQuery } from 'ufo';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import useRequest from '../../../contexts/request';
+import { ActionCardBox, ErrorDisplay, LoadingContainer, ProductIntroCarousel, StyledProgress, TimeText } from './common-components';
+
+/**
+ * 加载显示的通用布局组件
+ * 抽取三个阶段组件的共同结构，具体内容由外部传入
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function LoadingDisplayLayout({
+  title,
+  // 进度条数据
+  progress,
+  elapsedTime,
+  estimatedTime,
+  // 动作描述数据
+  currentAction,
+  // 动画控制
+  tipFlag = null,
+  // 错误处理
+  error = null,
+  onRetry = null
+}) {
+  const {
+    locale
+  } = useLocaleContext();
+  const {
+    t
+  } = useLocaleContext();
+  const {
+    api
+  } = useRequest();
+  const {
+    data: tips = []
+  } = useRequestHook(() => api.get(withQuery('/public/tips', {
+    locale
+  })).then(res => res.data?.tips || [], {
+    refreshDeps: [locale]
+  }));
+  return /*#__PURE__*/_jsxs(LoadingContainer, {
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "h3",
+      children: title
+    }), /*#__PURE__*/_jsx(Box, {
+      sx: {
+        '& div': {
+          p: 0,
+          m: 0
+        }
+      },
+      children: /*#__PURE__*/_jsx(AnimationWaiter, {
+        increaseSpeed: 0.3,
+        messageLoop: false,
+        size: 200
+      })
+    }), /*#__PURE__*/_jsxs(Box, {
+      sx: {
+        position: 'relative',
+        width: '100%'
+      },
+      children: [/*#__PURE__*/_jsx(Box, {
+        sx: {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'flex-end',
+          mb: 1
+        },
+        children: /*#__PURE__*/_jsx(TimeText, {
+          children: t('loading.remainingTime', {
+            time: estimatedTime
+          })
+        })
+      }), /*#__PURE__*/_jsx(StyledProgress, {
+        value: progress
+      }), /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          my: 1
+        },
+        children: [/*#__PURE__*/_jsxs(Typography, {
+          variant: "caption",
+          color: "text.secondary",
+          children: [Math.round(progress), "% ", t('loading.completed')]
+        }), /*#__PURE__*/_jsx(TimeText, {
+          children: elapsedTime
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(ActionCardBox, {
+      tipFlag: tipFlag || currentAction,
+      children: currentAction
+    }), /*#__PURE__*/_jsx(ProductIntroCarousel, {
+      tips: tips
+    }, locale), /*#__PURE__*/_jsx(ErrorDisplay, {
+      error: error,
+      onRetry: onRetry
+    })]
+  });
+}
+LoadingDisplayLayout.propTypes = {
+  // 基础信息
+  title: PropTypes.string.isRequired,
+  // 进度条数据
+  progress: PropTypes.number.isRequired,
+  elapsedTime: PropTypes.string.isRequired,
+  estimatedTime: PropTypes.string.isRequired,
+  // 动作描述数据
+  currentAction: PropTypes.string.isRequired,
+  // 动画控制
+  tipFlag: PropTypes.any,
+  // 可选项
+  error: PropTypes.string,
+  onRetry: PropTypes.func
+};
+export default LoadingDisplayLayout;

package/es/components/launch-serverless/shared/retry-error-message.js

@@ -0,0 +1,45 @@
+import LaunchResultMessage from '@blocklet/launcher-layout/lib/launch-result-message';
+import Button from '@blocklet/launcher-ux/lib/button';
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+
+/**
+ * 重试错误消息组件
+ * 提供统一的错误展示和重试功能
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function RetryErrorMessage({
+  title,
+  onRetry,
+  retryText
+}) {
+  const [isLoading, setIsLoading] = useState(false);
+  const handleRetry = async e => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsLoading(true);
+    const result = onRetry();
+    if (result instanceof Promise) {
+      await result;
+    }
+    setIsLoading(false);
+  };
+  return /*#__PURE__*/_jsx(LaunchResultMessage, {
+    variant: "error",
+    title: title,
+    footer: /*#__PURE__*/_jsx(Button, {
+      size: "small",
+      style: {
+        marginTop: '-16px'
+      },
+      onClick: handleRetry,
+      loading: isLoading,
+      children: retryText
+    })
+  });
+}
+RetryErrorMessage.propTypes = {
+  title: PropTypes.string.isRequired,
+  onRetry: PropTypes.func.isRequired,
+  retryText: PropTypes.string.isRequired
+};

package/es/components/launch-serverless/start-app.js

@@ -0,0 +1,356 @@
+import { useSetState } from 'ahooks';
+import PropTypes from 'prop-types';
+import React, { useEffect, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { LAUNCH_STATUS } from '@blocklet/launcher-util/es/constant';
+import { useLocaleContext } from '../../contexts/locale';
+import useRequest from '../../contexts/request';
+import useSerialPolling from '../../hooks/use-serial-polling';
+import { checkBlockletAccessible, getBlockletUrls, sortUrls, waitingForRaceAccessible } from '../../util';
+import BaseServerlessLayout from './shared/base-serverless-layout';
+import { AppSuccessDisplay, 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 = 3000;
+export default function LaunchServerless({
+  sessionId
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  const {
+    api
+  } = useRequest();
+  const navigate = useNavigate();
+  const [state, setState] = useSetState({
+    starting: true,
+    started: false,
+    checkingBlockletStatus: false,
+    checkingAccessible: false,
+    launchSession: null,
+    blockletInfo: null,
+    accessibleUrl: null,
+    urls: [],
+    error: '',
+    startTime: 0,
+    hasTryStart: false,
+    retryRequestCount: 0
+  });
+  const formatTime = useFormatTime();
+  const time = useElapsedTime(0);
+  const actions = useMemo(() => {
+    // 基础步骤时间
+    const steps = [{
+      message: t('startApp.waiting.starting'),
+      time: 5
+    }, {
+      message: t('startApp.waiting.parsing'),
+      time: 1
+    }, {
+      message: t('startApp.waiting.initializing'),
+      time: 3
+    }, {
+      message: t('startApp.waiting.initializingOwner'),
+      time: 2
+    }, {
+      message: t('startApp.waiting.creatingSecurityRules'),
+      time: 2
+    }, {
+      message: t('startApp.waiting.assigningDomain'),
+      time: 2
+    }, {
+      message: t('startApp.waiting.waitingForDomain'),
+      time: 10
+    }];
+
+    // 计算总时间
+    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, action) => acc + action.time, 0) + additionalTime;
+  }, [actions]);
+  const displayProgress = useDisplayProgress(0, state.started ? 1 : estimatedTime);
+
+  // 根据当前进度获取对应的 action
+  const getCurrentAction = progress => {
+    const action = actions.find(({
+      range: [start, end]
+    }) => progress >= start && progress < end);
+    return action?.message || actions[actions.length - 1].message;
+  };
+  const checkOneAccessibleUrl = async urls => {
+    try {
+      const [accessibleUrl] = await waitingForRaceAccessible(urls);
+      return accessibleUrl;
+    } catch (error) {
+      console.error(error);
+      return null;
+    }
+  };
+  const getUrls = async blocklet => {
+    let {
+      urls
+    } = state;
+    if (urls.length === 0) {
+      urls = getBlockletUrls({
+        blocklet
+      });
+      const sortedUrls = await sortUrls(urls);
+      urls = sortedUrls;
+      if (urls.length > 0) {
+        setState({
+          urls
+        });
+      }
+    }
+    return urls;
+  };
+  const checkLaunchSession = async () => {
+    try {
+      const {
+        accessibleUrl
+      } = state;
+      if (!accessibleUrl) {
+        console.warn('the accessible url is not ready, retry getting accessible url');
+        setState({
+          checkingAccessible: true,
+          checkingBlockletStatus: false
+        });
+        return;
+      }
+      const blockletInfo = await checkBlockletAccessible(accessibleUrl);
+      if (!blockletInfo) {
+        console.warn('the blocklet is not ready or accessible url is not correct, retry getting accessible url');
+        return;
+      }
+      setState({
+        blockletInfo
+      });
+      if (blockletInfo.status === 'running') {
+        setState({
+          blockletInfo,
+          starting: false,
+          started: true,
+          checkingBlockletStatus: false,
+          checkingAccessible: false
+        });
+      } else if (blockletInfo.status === 'starting') {
+        if (!state.hasTryStart) {
+          setState(prev => {
+            if (Date.now() - prev.startTime > estimatedTime * 1000) {
+              api.post(`/launches/${sessionId}/start`);
+              return {
+                ...prev,
+                hasTryStart: true
+              };
+            }
+            return prev;
+          });
+        }
+      } else if (blockletInfo.status === 'stopped') {
+        api.post(`/launches/${sessionId}/start`);
+      } else {
+        console.warn('the blocklet is not installed!', blockletInfo.status, blockletInfo);
+        setState({
+          error: t('startApp.startFailed'),
+          starting: false,
+          checkingBlockletStatus: false
+        });
+      }
+      setState({
+        retryRequestCount: 0
+      });
+    } catch (error) {
+      setState(prev => {
+        if (prev.retryRequestCount < 5) {
+          console.warn('check launch session occurred error, retry', prev.retryRequestCount, error);
+          return {
+            ...prev,
+            retryRequestCount: prev.retryRequestCount + 1
+          };
+        }
+        return {
+          ...prev,
+          error: error.message,
+          starting: false,
+          retryRequestCount: 0
+        };
+      });
+      console.error(error);
+    }
+  };
+
+  // 串行检查，确保前一个请求完成后等待指定时间再发起下一个
+  useSerialPolling({
+    isEnabled: state.checkingBlockletStatus,
+    interval: CHECK_INTERVAL,
+    onPoll: checkLaunchSession
+  });
+
+  // 检查可用性 url
+  const checkAccessibleUrls = async () => {
+    try {
+      const urls = await getUrls(state.launchSession.blocklet);
+      const accessibleUrl = await checkOneAccessibleUrl(urls);
+      setState(prev => {
+        const obj = accessibleUrl ? {
+          ...prev,
+          checkingAccessible: false,
+          checkingBlockletStatus: true,
+          accessibleUrl
+        } : prev;
+        if (Date.now() - prev.startTime > estimatedTime * 1000) {
+          api.post(`/launches/${sessionId}/start`);
+          return {
+            ...obj,
+            hasTryStart: true
+          };
+        }
+        return obj;
+      });
+    } catch (error) {
+      // ignore
+    }
+  };
+  useSerialPolling({
+    isEnabled: state.checkingAccessible,
+    interval: 10000,
+    onPoll: checkAccessibleUrls
+  });
+  useEffect(() => {
+    const fetch = async (tryCount = 0) => {
+      setState({
+        startTime: Date.now()
+      });
+      try {
+        const {
+          data: {
+            launch: launchSession
+          }
+        } = await api.get(`/launches/${sessionId}?health=1`);
+        const urls = await getUrls(launchSession.blocklet);
+        launchSession.urls = urls;
+        [launchSession.appUrl] = urls;
+        setState({
+          launchSession,
+          urls
+        });
+        if (launchSession.status >= LAUNCH_STATUS.consuming) {
+          const notStarting = !['starting', 'running'].includes(launchSession.blockletStatus) && (!launchSession.metadata?.starting || launchSession.metadata.starting !== true);
+          if (notStarting) {
+            await api.post(`/launches/${sessionId}/start`).catch(error => {
+              console.error(error);
+            });
+          }
+          setState({
+            starting: true,
+            checkingAccessible: true
+          });
+        } else if (launchSession.status === LAUNCH_STATUS.allocated) {
+          navigate(`/install/${sessionId}${window.location.search || ''}`);
+        } else {
+          setState(prev => {
+            return {
+              ...prev,
+              starting: false,
+              started: false,
+              checkingBlockletStatus: false,
+              checkingAccessible: false,
+              error: t('startApp.installFailed')
+            };
+          });
+        }
+      } catch (error) {
+        if (tryCount > 0) {
+          setTimeout(() => {
+            fetch(tryCount - 1);
+          }, 1000);
+        } else {
+          setState({
+            error: error.message,
+            starting: false,
+            checkingBlockletStatus: false,
+            checkingAccessible: false
+          });
+        }
+        console.error('get launch session error', error);
+      }
+    };
+    if (window.blocklet.DEVELOPER_WORKFLOW_UI) {
+      setTimeout(() => {
+        fetch(0);
+      }, 10000);
+    } else {
+      fetch(0);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const handleRetry = async () => {
+    if (['starting', 'stopped'].includes(state.blockletInfo.status)) {
+      await api.post(`/launches/${sessionId}/start`);
+    } else if (!state.blockletInfo && state.launchSession.status < LAUNCH_STATUS.allocated) {
+      await api.post('/serverless/allocate', {
+        launchId: sessionId
+      }).catch(error => {
+        console.error(error);
+      });
+      navigate(`/launch/${sessionId}${window.location.search || ''}`);
+    } else if (state.launchSession.status < LAUNCH_STATUS.consuming) {
+      await api.post('/serverless/install', {
+        launchId: sessionId
+      }).catch(error => {
+        console.error(error);
+      });
+      navigate(`/install/${sessionId}${window.location.search || ''}`);
+    } else {
+      await api.post(`/launches/${sessionId}/start`);
+      window.location.reload();
+    }
+  };
+  const showLoading = state.starting || displayProgress < 99;
+  const showSuccess = !showLoading && state.started && state.launchSession && displayProgress >= 99;
+  const showError = !showLoading && !showSuccess && state.error;
+  if (showError) {
+    console.error('showError', state.error);
+  }
+  return /*#__PURE__*/_jsxs(BaseServerlessLayout, {
+    title: t('startApp.pageTitle'),
+    children: [showLoading && /*#__PURE__*/_jsx(LoadingDisplayLayout, {
+      title: t('startApp.pageTitle'),
+      progress: state.started && displayProgress >= 99 ? 100 : displayProgress,
+      elapsedTime: formatTime(time),
+      estimatedTime: formatTime(estimatedTime),
+      currentAction: getCurrentAction(displayProgress),
+      error: null,
+      onRetry: null
+    }), showSuccess && /*#__PURE__*/_jsx(AppSuccessDisplay, {
+      accessibleUrl: state.accessibleUrl,
+      sessionId: sessionId,
+      blockletInfo: state.blockletInfo,
+      launchSession: state.launchSession,
+      urls: state.urls
+    }), showError && /*#__PURE__*/_jsx(RetryErrorMessage, {
+      title: t('startApp.startFailed'),
+      onRetry: handleRetry,
+      retryText: t('common.retry')
+    })]
+  });
+}
+LaunchServerless.propTypes = {
+  sessionId: PropTypes.string.isRequired
+};

package/es/contexts/request.js

@@ -2,7 +2,7 @@ import { create as createRequestInstance } from '@blocklet/launcher-util/es/api'
 import get from 'lodash.get';
 import PropTypes from 'prop-types';
 import { createContext, useContext } from 'react';
-import joinUrl from 'url-join';
+import { joinURL } from 'ufo';
 import { useLocaleContext } from './locale';
 import { useSessionContext } from './session';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -22,7 +22,7 @@ export function RequestProvider({
   } = useLocaleContext();
   const configRequest = r => {
     r.interceptors.request.use(config => {
-      config.url = joinUrl('/api', config.url);
+      config.url = joinURL('/api', config.url);
       if (!config.params) {
         config.params = {};
       }

package/es/hooks/use-serial-polling.js

@@ -0,0 +1,43 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * A hook for serial polling that ensures each request is completed before starting the next one.
+ * This prevents request overlapping and maintains a consistent interval between completed requests.
+ *
+ * @param {Object} options
+ * @param {boolean} options.isEnabled - Whether to enable the polling
+ * @param {number} options.interval - Time to wait after a request completes before starting the next one (in ms)
+ * @param {Function} options.onPoll - Async function to be called for each poll
+ */
+export default function useSerialPolling({
+  isEnabled,
+  interval = 3000,
+  onPoll
+}) {
+  const onPollRef = useRef(onPoll);
+  onPollRef.current = onPoll;
+  useEffect(() => {
+    let timeoutId;
+    let isActive = true;
+    const scheduleNextPoll = async () => {
+      if (!isActive || !isEnabled) return;
+      try {
+        await onPollRef.current();
+      } catch (error) {
+        console.error('Serial polling error:', error);
+      }
+
+      // Only schedule next poll if still active and enabled
+      if (isActive && isEnabled) {
+        timeoutId = setTimeout(scheduleNextPoll, interval);
+      }
+    };
+    if (isEnabled) {
+      scheduleNextPoll();
+    }
+    return () => {
+      isActive = false;
+      if (timeoutId) clearTimeout(timeoutId);
+    };
+  }, [isEnabled, interval]);
+}

package/es/install.js

@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import InstallingServerless from './components/launch-serverless/install';
+import { useSessionContext } from './contexts/session';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Launch() {
+  const {
+    sessionId
+  } = useParams();
+  const {
+    session
+  } = useSessionContext();
+  useEffect(() => {
+    if (!session.user) {
+      return session.login(() => {
+        session.refresh();
+      });
+    }
+    return () => {};
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [session.user]);
+  if (!session.user) {
+    return '';
+  }
+  return /*#__PURE__*/_jsx(InstallingServerless, {
+    sessionId: sessionId
+  });
+}

package/es/launch.js

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { useParams, useSearchParams } from 'react-router-dom';
-import LaunchServerless from './components/launch-serverless';
+import LaunchServerless from './components/launch-serverless/allocate';
 import LaunchDedicated from './components/launch-dedicated';
 import { useSessionContext } from './contexts/session';
 import { jsx as _jsx } from "react/jsx-runtime";