@ant-design/icons#DatabaseOutlined JavaScript Examples

function ClusterDetail(props) {
  const { currentInstance, dispatch, config, appName, env } = props;
  const [visibleRestartModal, setVisibleRestartModal] = useState(false);
  const [loading, setLoading] = useState(false);
  const [content, setContent] = useState('');
  const [k8sClusters2, setK8sClusters2] = useState();

  useEffect(() => {
    if (k8sClusters2 == undefined) {
      getCluterInfo(currentInstance.name, appName, env, config.id, currentInstance).then((res) => {
        setK8sClusters2(res.data);
      });
    }
  });

  if (!currentInstance) {
    return <div />;
  }

  return (
    <div className={styles.instanceDetail}>
      <div className={styles.topHeader}>
        <div style={{ fontSize: '48px', textAlign: 'center', padding: '10px' }}>
          <DatabaseOutlined />
        </div>
        <div style={{ padding: '10px' }}>
          <div style={{ fontSize: '24px', fontWeight: 'bold' }}>{currentInstance.host_name}</div>
          <div>
            {currentInstance.region_name} {currentInstance.zone_name} {currentInstance.ip}
          </div>
          <div style={{ marginTop: '10px' }}>
            <Space></Space>
          </div>
        </div>
      </div>

      <ul className={styles.instanceInfoList}>
        <li key="1">
          <div className={styles.instanceInfoName}>
            <div className={styles.instanceInfoTitle}>使用文档</div>
          </div>
          <div className={styles.instanceInfoContent}>
            <a href={k8sClusters2 && k8sClusters2.doc ? k8sClusters2.doc : ''}>点击查看</a>
          </div>
        </li>
        <li key="2">
          <div className={styles.instanceInfoName}>
            <div className={styles.instanceInfoTitle}>同步时间</div>
          </div>
          <div className={styles.instanceInfoContent}>
            {k8sClusters2 && k8sClusters2.created_at
              ? moment(k8sClusters2.created_at).format('YYYY-MM-DD HH:mm:ss')
              : ''}
          </div>
        </li>
        <li key="3">
          <div className={styles.instanceInfoName}>
            <div className={styles.instanceInfoTitle}>配置状态</div>
          </div>
          <div className={styles.instanceInfoContent}>
            {k8sClusters2 && k8sClusters2.sync_status ? k8sClusters2.sync_status : ''}
          </div>
        </li>
        <li key="4">
          <div className={styles.instanceInfoName}>
            <div className={styles.instanceInfoTitle}>配置版本</div>
          </div>
          <div className={styles.instanceInfoContent}>
            {k8sClusters2 && k8sClusters2.version ? (
              <Tag>{k8sClusters2 ? k8sClusters2.version : ''}</Tag>
            ) : (
              ''
            )}{' '}
            {k8sClusters2 ? k8sClusters2.change_log : ''}
          </div>
        </li>
        <li key="5">
          <div className={styles.instanceInfoName}>
            <div className={styles.instanceInfoTitle}>参考路径</div>
          </div>
          <div className={styles.instanceInfoContent}>
            {k8sClusters2 && k8sClusters2.config_file_path ? (
              <div key="0" className={styles.configPathItem}>
                <span>{k8sClusters2.config_file_path}</span>
                <CopyOutlined
                  onClick={() => {
                    copyToClipBoard(k8sClusters2.config_file_path);
                    message.success('已复制到剪切板');
                  }}
                  className={styles.configPathCopyBtn}
                />
              </div>
            ) : (
              ''
            )}
          </div>
        </li>
      </ul>

      <Modal
        title="操作面板"
        visible={visibleRestartModal}
        onOk={() => setVisibleRestartModal(false)}
        onCancel={() => setVisibleRestartModal(false)}
      >
        <div>
          <Spin spinning={loading} />
        </div>
        <div style={{ backgroundColor: 'black', borderRadius: '5px' }}>
          <p style={{ color: 'green' }}>{content}</p>
        </div>
      </Modal>
      <ModalRealtimeConfig />
    </div>
  );
}

function InstanceDetail(props) {
  const { currentInstance, dispatch, config, appName, env } = props;
  const [visibleRestartModal, setVisibleRestartModal] = useState(false);
  const [loading, setLoading] = useState(false);
  const [content, setContent] = useState('');

  if (!currentInstance) {
    return <div />;
  }

  const {
    config_file_used,
    config_file_synced,
    config_file_take_effect,
    config_file_path,
    sync_at,
    version,
    change_log,
    host_name,
  } = currentInstance;

  let info = [
    {
      title: '接入状态',
      help: '当前应用是否在该实例上接入配置中心',
      content: config_file_used ? '已接入' : '未接入',
    },
    {
      title: '发布状态',
      help: '配置是否下发到机器上',
      content: config_file_synced ? '已下发' : '未下发',
    },
    {
      title: '生效状态',
      help: '配置是否在应用上生效（依赖Go框架支持）',
      content: config_file_take_effect ? '已生效' : '未生效',
    },
    {
      title: '文件路径',
      content: config_file_path
        ? config_file_path.split(';').map((item, idx) => {
            return (
              <div key={idx} className={styles.configPathItem}>
                <span>{item}</span>
                <CopyOutlined
                  onClick={() => {
                    copyToClipBoard(item);
                    message.success('已复制到剪切板');
                  }}
                  className={styles.configPathCopyBtn}
                />
              </div>
            );
          })
        : '---',
    },
    {
      title: '配置版本',
      content: version ? (
        <span>
          <Tag>{version}</Tag> {change_log}
        </span>
      ) : (
        '---'
      ),
    },
    {
      title: '同步时间',
      content: sync_at,
    },
  ];

  let showConfirm = (action, zoneCode, hostname, usedTyp) => {
    const descMap = {
      start: {
        title: '确定启动应用进程吗？',
        content: `应用进程会被执行 start 命令`,
      },
      restart: {
        title: '确定重启应用进程吗？',
        content: '应用进程会被执行 restart 命令',
      },
      stop: {
        title: '确定停止应用进程吗？',
        content: '应用进程会被执行 stop 命令',
      },
    };

    const desc = descMap[action] || {};
    confirm({
      title: desc.title,
      content: (
        <div>
          <p>{desc.content}</p>
          <h4>操作实例：</h4>
          <p>{hostname}</p>
        </div>
      ),
      onOk() {
        setVisibleRestartModal(true);

        doAction(action, zoneCode, hostname, usedTyp);
      },
      onCancel() {},
      okText: '确定',
      cancelText: '取消',
    });
  };

  let doAction = (action, zoneCode, hostname, usedTyp) => {
    if (usedTyp === 0) {
      setContent('配置文件未接入，无法进行重启操作');
      setLoading(false);
      return;
    }

    setLoading(true);
    ServiceAppAction({
      action: action,
      zone_code: zoneCode,
      node_name: hostname,
      typ: usedTyp,
      app_name: appName,
      env: env,
    }).then((res) => {
      if (res.code !== 0) {
        setContent(res.data);
        setLoading(false);
      } else {
        let result = [];
        for (const itemListKey in res.data) {
          let itemList = res.data[itemListKey];
          if (itemList['code'] !== 0) {
            result.push(<p>状态：重启失败</p>);
          } else {
            result.push(<p>状态：重启成功</p>);
          }
          for (const item in itemList) {
            result.push(<p>{item + ':' + itemList[item]}</p>);
          }
        }
        setContent(result);
        setLoading(false);
      }
    });
  };

  return (
    <div className={styles.instanceDetail}>
      <div className={styles.topHeader}>
        <div style={{ fontSize: '48px', textAlign: 'center', padding: '10px' }}>
          <DatabaseOutlined />
        </div>
        <div style={{ padding: '10px' }}>
          <div style={{ fontSize: '24px', fontWeight: 'bold' }}>{currentInstance.host_name}</div>
          <div>
            {currentInstance.region_name} {currentInstance.zone_name} {currentInstance.ip}
          </div>
          <div style={{ marginTop: '10px' }}>
            <Space>
              <Button
                size={'small'}
                type={'primary'}
                icon={<ReloadOutlined />}
                onClick={() => {
                  showConfirm(
                    'restart',
                    currentInstance.zone_code,
                    currentInstance.host_name,
                    currentInstance.config_file_used,
                  );
                }}
              >
                重启
              </Button>

              <Button
                size={'small'}
                icon={<EyeOutlined />}
                onClick={() => {
                  dispatch({
                    type: 'config/fetchInstanceConfig',
                    payload: {
                      id: config.id,
                      hostName: host_name,
                    },
                  });
                }}
              >
                实时配置
              </Button>
            </Space>
          </div>
        </div>
      </div>

      <ul className={styles.instanceInfoList}>
        {info.map((item, index) => (
          <li key={index}>
            <div className={styles.instanceInfoName}>
              <div className={styles.instanceInfoTitle}>{item.title}</div>
              <div className={styles.instanceInfoHelp}>{item.help}</div>
            </div>
            <div className={styles.instanceInfoContent}>{item.content}</div>
          </li>
        ))}
      </ul>

      <Modal
        title="操作面板"
        visible={visibleRestartModal}
        onOk={() => setVisibleRestartModal(false)}
        onCancel={() => setVisibleRestartModal(false)}
      >
        <div>
          <Spin spinning={loading} />
        </div>
        <div style={{ backgroundColor: 'black', borderRadius: '5px' }}>
          <p style={{ color: 'green' }}>{content}</p>
        </div>
      </Modal>
      <ModalRealtimeConfig />
    </div>
  );
}

ContentWrapper = (props) => {
  const dispatch = useDispatch();

  const [isAuth, setIsAuth] = useState(false);
  const [collapsed, setCollapsed] = useState(false);

  const { routeExperimentId, experimentData, children } = props;
  const { navigateTo, currentModule } = useAppRouter();

  const currentExperimentIdRef = useRef(routeExperimentId);
  const activeExperimentId = useSelector((state) => state?.experiments?.meta?.activeExperimentId);
  const activeExperiment = useSelector((state) => state.experiments[activeExperimentId]);

  const samples = useSelector((state) => state.samples);

  useEffect(() => {
    if (!activeExperimentId && !routeExperimentId) return;

    if (currentModule === modules.DATA_MANAGEMENT) {
      currentExperimentIdRef.current = activeExperimentId;
      return;
    }

    if (currentExperimentIdRef.current === routeExperimentId) return;

    currentExperimentIdRef.current = routeExperimentId;
  }, [currentModule, activeExperimentId, routeExperimentId]);

  const currentExperimentId = currentExperimentIdRef.current;
  const experiment = useSelector((state) => state?.experiments[currentExperimentId]);

  const experimentName = experimentData?.experimentName || experiment?.name;

  const {
    loading: backendLoading,
    error: backendError,
    status: backendStatus,
  } = useSelector(getBackendStatus(currentExperimentId));
  const gem2sBackendStatus = backendStatus?.gem2s;
  const backendErrors = [pipelineStatus.FAILED, pipelineStatus.TIMED_OUT, pipelineStatus.ABORTED];

  const pipelineStatusKey = backendStatus?.pipeline?.status;
  const pipelineRunning = pipelineStatusKey === 'RUNNING';
  const pipelineRunningError = backendErrors.includes(pipelineStatusKey);

  const gem2sStatusKey = backendStatus?.gem2s?.status;
  const gem2sparamsHash = backendStatus?.gem2s?.paramsHash;
  const gem2sRunning = gem2sStatusKey === 'RUNNING';
  const gem2sRunningError = backendErrors.includes(gem2sStatusKey);
  const completedGem2sSteps = backendStatus?.gem2s?.completedSteps;

  // This is used to prevent a race condition where the page would start loading immediately
  // when the backend status was previously loaded. In that case, `backendLoading` is `false`
  // and would be set to true only in the `loadBackendStatus` action, the time between the
  // two events would allow pages to load.
  const [backendStatusRequested, setBackendStatusRequested] = useState(false);

  useEffect(() => {
    if (!currentExperimentId) return;
    if (!backendLoading) dispatch(loadBackendStatus(currentExperimentId));

    if (isBrowser) {
      import('utils/socketConnection')
        .then(({ default: connectionPromise }) => connectionPromise)
        .then((io) => {
          const cb = experimentUpdatesHandler(dispatch);

          // Unload all previous socket.io hooks that may have been created for a different
          // experiment.
          io.off();

          io.on(`ExperimentUpdates-${currentExperimentId}`, (update) => cb(currentExperimentId, update));
        });
    }
  }, [routeExperimentId]);

  useEffect(() => {
    if (backendStatusRequested) {
      return;
    }

    setBackendStatusRequested(true);
  }, [backendLoading]);

  const [gem2sRerunStatus, setGem2sRerunStatus] = useState(null);

  useEffect(() => {
    if (!activeExperiment) return;

    const gem2sStatus = calculateGem2sRerunStatus(
      gem2sBackendStatus, activeExperiment, samples, experiment,
    );

    setGem2sRerunStatus(gem2sStatus);
  }, [gem2sBackendStatus, activeExperiment, samples, experiment]);

  useEffect(() => {
    Auth.currentAuthenticatedUser()
      .then(() => setIsAuth(true))
      .catch(() => {
        setIsAuth(false);
        Auth.federatedSignIn();
      });
  }, []);

  if (!isAuth) return <></>;

  const BigLogo = () => (
    <div
      style={{
        background: 'linear-gradient(315deg, #5B070A 0%, #8f0b10 30%, #A80D12 100%)',
        paddingLeft: '32px',
        paddingTop: '15px',
        paddingBottom: '15px',
        pointerEvents: 'none',
        userSelect: 'none',
      }}
    >
      <svg xmlns='http://www.w3.org/2000/svg' width={110} height={30}>
        <defs id='svg_document_defs'>
          <style id='IBM Plex Sans_Google_Webfont_import'>@import url(https://fonts.googleapis.com/css?family=IBM+Plex+Sans);</style>
        </defs>
        <g>
          <text
            style={{ outlineStyle: 'none' }}
            x='1px'
            fontWeight='500'
            textRendering='geometricPrecision'
            fontFamily='IBM Plex Sans'
            y='25px'
            fill='#F0F2F5'
            fontSize='25.00px'
            textAnchor='start'
          >
            Cellenics
          </text>
          <text
            stroke='none'
            style={{ outlineStyle: 'none' }}
            strokeWidth='1px'
            x='3px'
            fontWeight='200'
            textRendering='geometricPrecision'
            fontFamily='IBM Plex Sans'
            fill='#aab6c1'
            fontSize='12.80px'
            textAnchor='start'
          />
        </g>
      </svg>
    </div>
  );

  const SmallLogo = () => (
    <div
      style={{
        background: 'linear-gradient(315deg, #5B070A 0%, #8f0b10 30%, #A80D12 100%)',
        paddingTop: '8px',
        paddingBottom: '8px',
        pointerEvents: 'none',
        userSelect: 'none',
      }}
    >
      <svg xmlns='http://www.w3.org/2000/svg' width={100} height={30}>
        <defs id='svg_document_defs'>
          <style id='IBM Plex Sans_Google_Webfont_import'>@import url(https://fonts.googleapis.com/css?family=IBM+Plex+Sans);</style>
        </defs>
        <g>
          <text
            style={{ outlineStyle: 'none' }}
            x='40px'
            fontWeight='500'
            textRendering='geometricPrecision'
            fontFamily='IBM Plex Sans'
            y='24px'
            fill='#F0F2F5'
            fontSize='25.00px'
            textAnchor='middle'
          >
            Cs
          </text>
        </g>
      </svg>
    </div>
  );

  const menuLinks = [
    {
      module: modules.DATA_MANAGEMENT,
      icon: <FolderOpenOutlined />,
      name: 'Data Management',
      disableIfNoExperiment: false,
      disabledByPipelineStatus: true,
    },
    {
      module: modules.DATA_PROCESSING,
      icon: <BuildOutlined />,
      name: 'Data Processing',
      disableIfNoExperiment: true,
      disabledByPipelineStatus: false,
    },
    {
      module: modules.DATA_EXPLORATION,
      icon: <FundViewOutlined />,
      name: 'Data Exploration',
      disableIfNoExperiment: true,
      disabledByPipelineStatus: true,
    },
    {
      module: modules.PLOTS_AND_TABLES,
      icon: <DatabaseOutlined />,
      name: 'Plots and Tables',
      disableIfNoExperiment: true,
      disabledByPipelineStatus: true,
    },
  ];

  const waitingForQcToLaunch = gem2sStatusKey === pipelineStatus.SUCCEEDED
    && pipelineStatusKey === pipelineStatus.NOT_CREATED;

  const renderContent = () => {
    if (routeExperimentId) {
      if (
        backendLoading || !backendStatusRequested) {
        return <PreloadContent />;
      }

      if (backendError) {
        return <Error errorText={backendError} />;
      }

      if (gem2sRunningError) {
        return <GEM2SLoadingScreen paramsHash={gem2sparamsHash} experimentId={routeExperimentId} gem2sStatus='error' />;
      }

      if (gem2sRunning || waitingForQcToLaunch) {
        return <GEM2SLoadingScreen experimentId={routeExperimentId} gem2sStatus='running' completedSteps={completedGem2sSteps} />;
      }

      if (gem2sStatusKey === pipelineStatus.NOT_CREATED) {
        return <GEM2SLoadingScreen experimentId={routeExperimentId} gem2sStatus='toBeRun' />;
      }

      if (pipelineRunningError && currentModule !== modules.DATA_PROCESSING) {
        return <PipelineRedirectToDataProcessing experimentId={routeExperimentId} pipelineStatus='error' />;
      }

      if (pipelineRunning && currentModule !== modules.DATA_PROCESSING) {
        return <PipelineRedirectToDataProcessing experimentId={routeExperimentId} pipelineStatus='running' />;
      }

      if (process.env.NODE_ENV === 'development') {
        return children;
      }

      if (pipelineStatusKey === pipelineStatus.NOT_CREATED && currentModule !== modules.DATA_PROCESSING) {
        return <PipelineRedirectToDataProcessing experimentId={routeExperimentId} pipelineStatus='toBeRun' />;
      }
    }

    return children;
  };

  const menuItemRender = ({
    module, icon, name, disableIfNoExperiment, disabledByPipelineStatus,
  }) => {
    const notProcessedExperimentDisable = !routeExperimentId && disableIfNoExperiment
      && (!gem2sRerunStatus || gem2sRerunStatus.rerun);

    const pipelineStatusDisable = disabledByPipelineStatus && (
      backendError || gem2sRunning || gem2sRunningError
      || waitingForQcToLaunch || pipelineRunning || pipelineRunningError
    );

    return (
      <Menu.Item
        id={module}
        disabled={notProcessedExperimentDisable || pipelineStatusDisable}
        key={module}
        icon={icon}
        onClick={() => navigateTo(
          module,
          { experimentId: currentExperimentId },
        )}
      >
        {name}
      </Menu.Item>
    );
  };
  return (
    <>
      <BrowserAlert />
      <Layout style={{ minHeight: '100vh' }}>
        <Sider
          style={{
            overflow: 'auto', height: '100vh', position: 'fixed', left: 0,
          }}
          width={210}
          theme='dark'
          mode='inline'
          collapsible
          collapsed={collapsed}
          onCollapse={(collapse) => setCollapsed(collapse)}
        >
          <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
            {collapsed ? <SmallLogo /> : <BigLogo />}
            <Menu
              data-test-id={integrationTestConstants.ids.NAVIGATION_MENU}
              theme='dark'
              selectedKeys={
                menuLinks
                  .filter(({ module }) => module === currentModule)
                  .map(({ module }) => module)
              }
              mode='inline'
            >
              {menuLinks.filter((item) => !item.disableIfNoExperiment).map(menuItemRender)}

              <Menu.ItemGroup
                title={!collapsed && (
                  <Tooltip title={experimentName} placement='right'>
                    <Space direction='vertical' style={{ width: '100%', cursor: 'default' }}>
                      <Text
                        style={{
                          width: '100%',
                          color: '#999999',
                        }}
                        strong
                        ellipsis
                      >
                        {experimentName || 'No analysis'}
                      </Text>
                      {experimentName && (
                        <Text style={{ color: '#999999' }}>
                          Current analysis
                        </Text>
                      )}
                    </Space>
                  </Tooltip>

                )}
              >
                {menuLinks.filter((item) => item.disableIfNoExperiment).map(menuItemRender)}
              </Menu.ItemGroup>

            </Menu>
          </div>
        </Sider>
        <Layout
          style={!collapsed ? { marginLeft: '210px' } : { marginLeft: '80px' }} // this is the collapsed width for our sider
        >
          {renderContent()}
        </Layout>
      </Layout>
    </>
  );
}