@ant-design/icons#DeploymentUnitOutlined TypeScript Examples

tabs = [
  { key: "workers", name: "Workers", icon: <RobotFilled /> },
  { key: "tasks", name: "Tasks", icon: <UnorderedListOutlined /> },
  { key: "control", name: "Control", icon: <ControlOutlined /> },
  { key: "queues", name: "Queues", icon: <BoxPlotOutlined /> },
  { key: "issues", name: "Issues", icon: <BugOutlined /> },
  { key: "monitor", name: "Monitor", icon: <RadarChartOutlined /> },
  { key: "agent", name: "Agent", icon: <DeploymentUnitOutlined /> },
  { key: "applications", name: "Applications", icon: <AppstoreOutlined /> },
]

render() {

        let totalPath = this.props.location.pathname
        let prefixPath = (totalPath.match(/^\/[^/]*/) as Array<string>)[0]

        let globalLoading = this.props.globalLoading

        return (
            <Spin spinning={globalLoading} style={{ maxHeight: '100vh' }}>
                <Layout style={{ minHeight: '100vh' }}>

                    <Layout.Sider collapsible>
                        <div className='ui-logo'>金融</div>
                        <Menu theme='dark'
                            defaultSelectedKeys={['/']}
                            defaultOpenKeys={['/menu1']}
                            mode='inline'
                            selectedKeys={[prefixPath]}
                        >

                            <Item key='/'>
                                <HomeOutlined />
                                <span>首页</span>
                                <Link to='/'></Link>
                            </Item>

                            <Menu.SubMenu key='/menu1' title={<span><DeploymentUnitOutlined />各container模板</span>}>
                                <Item key='/Standard'>
                                    <span>普通container</span>
                                    <Link to='/Standard' title='(推荐) 自定义reducer和action'></Link>
                                </Item>
                                <Item key='/UseFactory'>
                                    <span>使用Factory</span>
                                    <Link to='/UseFactory' title='(推荐) 使用框架提供的Factory生成reducer和action'></Link>
                                </Item>
                                <Item key='/Hooks'>
                                    <span>使用hooks</span>
                                    <Link to='/Hooks' title='(推荐) 使用hooks'></Link>
                                </Item>
                                <Item key='/DontUseRedux'>
                                    <span>不使用redux</span>
                                    <Link to='/DontUseRedux' title='(不推荐)'></Link>
                                </Item>
                                <Item key='/UseSaga'>
                                    <span>使用Saga</span>
                                    <Link to='/UseSaga' title='自定义reducer和action以及redux-saga'></Link>
                                </Item>
                            </Menu.SubMenu>

                        </Menu>
                    </Layout.Sider>


                    <Layout>
                        <Layout.Header style={{ background: '#fff', textAlign: 'center' }}>
                            <h1>58金融</h1>
                        </Layout.Header>
                        <Layout.Content style={{ margin: '12px' }}>
                            <BaseRoutes routes={routes} />
                        </Layout.Content>
                    </Layout>

                </Layout>
            </Spin>
        )
    }

apps: Record<
  AppNames,
  {
    path: string;
    render: () => React.ReactNode;
    label: string;
    icon: React.ForwardRefExoticComponent<AntdIconProps & React.RefAttributes<HTMLSpanElement>>;
  }
> = {
  rpiDemos: {
    path: `/rpi-demos`,
    label: "RPI Demos",
    icon: BuildOutlined,
    render: () => <ConnectedRpiDemos />,
  },
  video: {
    path: `/video`,
    label: "Video",
    icon: VideoCameraOutlined,
    render: () => <ConnectedVideoApp />,
  },
  cubemap: {
    path: `/cubemap`,
    label: "Cubemap",
    icon: PictureOutlined,
    render: () => <ConnectedCubemapApp />,
  },
  paint: {
    path: `/paint`,
    label: "Paint",
    icon: HighlightOutlined,
    render: () => <ConnectedPaintApp />,
  },
  debug: {
    path: `/debug`,
    label: "Debug",
    icon: BugOutlined,
    render: () => <ConnectedCommonApp appName={`debug`} />,
  },
  sparkle: {
    path: `/sparkle`,
    label: "Sparkle",
    icon: StarOutlined,
    render: () => <ConnectedCommonApp appName={`sparkle`} />,
  },
  sprinkles: {
    path: `/sprinkles`,
    label: "Sprinkles",
    icon: SmallDashOutlined,
    render: () => <ConnectedCommonApp appName={`sprinkles`} />,
  },
  particles: {
    path: `/particles`,
    label: "Particles",
    icon: MoreOutlined,
    render: () => <ConnectedCommonApp appName={`particles`} />,
  },
  particleFlow: {
    path: `/particleFlow`,
    label: "Particle Flow",
    icon: DeploymentUnitOutlined,
    render: () => <ConnectedCommonApp appName={`particleFlow`} />,
  },
  tilt: {
    path: `/tilt`,
    label: "Tilt",
    icon: RotateRightOutlined,
    render: () => <ConnectedCommonApp appName={`tilt`} />,
  },
  maze: {
    path: `/maze`,
    label: "Maze",
    icon: TableOutlined,
    render: () => <ConnectedCommonApp appName={`maze`} />,
  },
}

/**
 * 路由细节
 * https://github.com/jiajianrong/documents/blob/master/react/react-router%E9%9B%86%E6%88%90antd%20-%20%E8%B7%AF%E7%94%B1%E6%96%B9%E6%A1%88.md
 **/

function App(props: IAppProps) {
    let totalPath = props.location.pathname;
    let prefixPath = (totalPath.match(/^\/[^/]*/) as Array<string>)[0];
    
    let globalLoading = props.globalLoading;
    
    return (
        <Spin spinning={globalLoading} style={{ maxHeight: window.innerHeight }}>
        <Layout style={{ minHeight: '100vh' }}>
        
        <Layout.Sider collapsible>
            <div className="logo">金融</div>
            <Menu theme="dark"
                defaultSelectedKeys={['/']}
                defaultOpenKeys={['/menu1']}                     
                mode="inline"
                selectedKeys={[prefixPath]} >
                
                <Item key="/">
                    <HomeOutlined />
                    <span>首页</span>
                    <Link to="/"></Link>
                </Item>
                
                <Menu.SubMenu key="/menu1" title={<span><DeploymentUnitOutlined />各container模板</span>}>
                    <Item key="/Standard">
                        <span>(推荐)使用redux的class container</span>
                        <Link to="/Standard" title="(推荐)使用redux的class container"></Link>
                    </Item>
                    <Item key="/HooksWithRedux">
                        <span>(强烈推荐)使用redux的hooks container</span>
                        <Link to="/HooksWithRedux" title="(强烈推荐)使用redux的hooks container"></Link>
                    </Item>
                    <Item key="/UseFactory">
                        <span>使用Factory</span>
                        <Link to="/UseFactory" title="使用框架提供的Factory生成reducer和action"></Link>
                    </Item>
                    <Item key="/UseSaga">
                        <span>使用Saga</span>
                        <Link to="/UseSaga" title="使用redux的class container"></Link>
                    </Item>
                    <Item key="/DontUseRedux">
                        <span>不使用redux</span>
                        <Link to="/DontUseRedux" title=""></Link>
                    </Item>
                    <Item key="/HooksWithoutRedux">
                        <span>不使用redux的hooks</span>
                        <Link to="/HooksWithoutRedux" title="不使用redux的hooks"></Link>
                    </Item>
                </Menu.SubMenu>
            </Menu>
        </Layout.Sider>
        
        
        <Layout>
            <Layout.Header style={{ background: '#fff', textAlign: 'center' }}>
                <h1>58金融</h1>
            </Layout.Header>
            <Layout.Content style={{ margin: '0 16px' }}>
                <Suspense fallback={null}>
                <Switch>
                    <Route exact path="/" component={Home}/>
                    <Route path="/Standard" component={Standard}/>
                    <Route path="/UseFactory" component={UseFactory}/>
                    <Route path="/DontUseRedux" component={DontUseRedux}/>
                    <Route path="/UseSaga" component={UseSaga}/>
                    <Route path="/HooksWithoutRedux" component={HooksWithoutRedux}/>
                    <Route path="/HooksWithRedux" component={HooksWithRedux}/>
                </Switch>
                </Suspense>
            </Layout.Content>
        </Layout>
        
        </Layout>
        </Spin>
    )
}

export function AnnotationMarker({
    elementId,
    label,
    annotations = [],
    left,
    top,
    onCreate,
    onDelete,
    onClick,
    size = 25,
    color,
    accessoryColor,
    insightId,
    currentDateMarker,
    onClose,
    dynamic,
    onCreateAnnotation,
    graphColor,
    index,
    getPopupContainer,
}: AnnotationMarkerProps): JSX.Element | null {
    const popupRef = useRef<HTMLDivElement | null>(null)
    const [focused, setFocused] = useState(false)
    const [textInput, setTextInput] = useState('')
    const [applyAll, setApplyAll] = useState(true)
    const [textAreaVisible, setTextAreaVisible] = useState(false)
    const [hovered, setHovered] = useState(false)
    const { reportAnnotationViewed } = useActions(eventUsageLogic)

    const visible = focused || (!dynamic && hovered)

    useEffect(() => {
        if (visible) {
            reportAnnotationViewed(annotations)
        } else {
            reportAnnotationViewed(null)
            /* We report a null value to cancel (if applicable) the report because the annotation was closed */
        }
    }, [visible])

    const { user } = useValues(userLogic)
    const { currentTeam } = useValues(teamLogic)
    const { currentOrganization } = useValues(organizationLogic)
    const { diffType, groupedAnnotations } = useValues(annotationsLogic({ insightId }))

    function closePopup(): void {
        setFocused(false)
        onClose?.()
    }

    useEscapeKey(closePopup, [focused])

    const _color = color || 'var(--primary)'
    const _accessoryColor = accessoryColor || 'white'

    function deselect(e: MouseEvent): void {
        if (popupRef.current && coordinateContains(e, popupRef.current.getBoundingClientRect())) {
            return
        }
        closePopup()
    }

    useEffect(() => {
        document.addEventListener('mousedown', deselect)
        return () => {
            document.removeEventListener('mousedown', deselect)
        }
    }, [])

    if (
        dynamic &&
        Object.keys(groupedAnnotations)
            .map((key) => dayjs(key))
            .some((marker) => marker.isSame(dayjs(currentDateMarker).startOf(diffType as dayjs.OpUnitType)))
    ) {
        return null
    }

    return (
        <Popover
            trigger="click"
            visible={visible}
            defaultVisible={false}
            getPopupContainer={() => (getPopupContainer ? getPopupContainer() : document.body)}
            content={
                dynamic ? (
                    <div ref={popupRef}>
                        <div style={{ padding: '12px 16px' }}>
                            <span style={{ marginBottom: 12 }}>{dayjs(currentDateMarker).format('MMMM Do YYYY')}</span>
                            <TextArea
                                maxLength={300}
                                style={{ marginBottom: 12 }}
                                rows={4}
                                value={textInput}
                                onChange={(e) => setTextInput(e.target.value)}
                                autoFocus
                            />
                            <Checkbox
                                checked={applyAll}
                                onChange={(e) => {
                                    setApplyAll(e.target.checked)
                                }}
                            >
                                Create for all charts
                            </Checkbox>
                            <Row justify="end">
                                <Button
                                    style={{ marginRight: 10 }}
                                    onClick={() => {
                                        closePopup()
                                        setTextInput('')
                                    }}
                                >
                                    Cancel
                                </Button>
                                <Button
                                    type="primary"
                                    onClick={() => {
                                        onCreateAnnotation && onCreateAnnotation(textInput, applyAll)
                                        closePopup()
                                        setTextInput('')
                                    }}
                                >
                                    Add
                                </Button>
                            </Row>
                        </div>
                    </div>
                ) : (
                    <div ref={popupRef} style={{ minWidth: 300 }}>
                        <div style={{ overflowY: 'auto', maxHeight: '80vh', padding: '12px 16px 0 16px' }}>
                            {[...annotations]
                                .sort(
                                    (annotationA, annotationB) =>
                                        dayjs(annotationA.created_at).unix() - dayjs(annotationB.created_at).unix()
                                )
                                .map((data) => (
                                    <div key={data.id} style={{ marginBottom: 25 }}>
                                        <Row justify="space-between" align="middle">
                                            <div>
                                                <b style={{ marginRight: 5 }}>
                                                    {data.created_by &&
                                                        (data.created_by.first_name || data.created_by.email)}
                                                </b>
                                                <i style={{ color: 'gray', marginRight: 6 }}>
                                                    {humanFriendlyDetailedTime(data.created_at)}
                                                </i>
                                                {data.scope === AnnotationScope.Project ? (
                                                    <Tooltip
                                                        title={`This annotation is shown on all charts in project ${currentTeam?.name}`}
                                                    >
                                                        <ProjectOutlined />
                                                    </Tooltip>
                                                ) : data.scope === AnnotationScope.Organization ? (
                                                    <Tooltip
                                                        title={`This annotation is shown on all charts in organization ${currentOrganization?.name}`}
                                                    >
                                                        <DeploymentUnitOutlined />
                                                    </Tooltip>
                                                ) : null}
                                            </div>
                                            {(!data.created_by || data.created_by.uuid === user?.uuid) && (
                                                <DeleteOutlined
                                                    className="button-border clickable text-danger"
                                                    onClick={() => onDelete?.(data)}
                                                />
                                            )}
                                        </Row>
                                        <span>{data.content}</span>
                                    </div>
                                ))}
                        </div>
                        <div style={{ padding: '12px 16px', borderTop: '1px solid #f0f0f0' }}>
                            {textAreaVisible ? (
                                <>
                                    <TextArea
                                        maxLength={300}
                                        style={{ marginBottom: 12 }}
                                        rows={4}
                                        value={textInput}
                                        onChange={(e) => setTextInput(e.target.value)}
                                        autoFocus
                                    />
                                    <Checkbox
                                        checked={applyAll}
                                        onChange={(e) => {
                                            setApplyAll(e.target.checked)
                                        }}
                                    >
                                        Create for all charts
                                    </Checkbox>
                                    <Row justify="end">
                                        <Button style={{ marginRight: 10 }} onClick={() => setTextAreaVisible(false)}>
                                            Cancel
                                        </Button>
                                        <Button
                                            type="primary"
                                            onClick={() => {
                                                onCreate && onCreate(textInput, applyAll)
                                                setTextInput('')
                                                setTextAreaVisible(false)
                                            }}
                                        >
                                            Add
                                        </Button>
                                    </Row>
                                </>
                            ) : (
                                <Row justify="end">
                                    <Button
                                        type="primary"
                                        onClick={() => {
                                            setTextAreaVisible(true)
                                        }}
                                    >
                                        Add Note
                                    </Button>
                                </Row>
                            )}
                        </div>
                    </div>
                )
            }
            title={
                <Row justify="space-between" align="middle" style={{ lineHeight: '30px' }}>
                    {label}
                    {focused && (
                        <CloseOutlined
                            className="button-border clickable"
                            onClick={() => {
                                setFocused(false)
                                onClose?.()
                            }}
                        />
                    )}
                </Row>
            }
        >
            <div
                style={{
                    position: 'absolute',
                    left: left,
                    top: top,
                    width: size,
                    height: size,
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                    backgroundColor:
                        focused || dynamic || hovered || elementId === currentDateMarker
                            ? _color
                            : (graphColor ? dashboardColors[graphColor] : null) || 'white',
                    borderRadius: 5,
                    cursor: 'pointer',
                    border: dynamic ? undefined : '1px solid ' + _color,
                    zIndex:
                        dynamic || hovered || elementId === currentDateMarker ? styles.zGraphAnnotationPrompt : index,
                    boxShadow: dynamic ? '0 0 5px 4px rgba(0, 0, 0, 0.2)' : undefined,
                }}
                onClick={() => {
                    onClick?.()
                    setFocused(true)
                }}
                onMouseOver={() => setHovered(true)}
                onMouseLeave={() => setHovered(false)}
            >
                {(annotations?.length || 0) > 0 ? (
                    <span
                        style={{
                            color: focused || hovered || elementId === currentDateMarker ? _accessoryColor : _color,

                            fontSize: 12,
                        }}
                    >
                        {annotations.length}
                    </span>
                ) : (
                    <PlusOutlined style={{ color: _accessoryColor }} />
                )}
            </div>
        </Popover>
    )
}

function CreateAnnotationModal(props: CreateAnnotationModalProps): JSX.Element {
    const [scope, setScope] = useState<AnnotationScope>(AnnotationScope.Project)
    const [textInput, setTextInput] = useState('')
    const [modalMode, setModalMode] = useState<ModalMode>(ModalMode.CREATE)
    const [selectedDate, setDate] = useState<dayjs.Dayjs>(dayjs())

    useEffect(() => {
        if (props.annotation) {
            setModalMode(ModalMode.EDIT)
            setTextInput(props.annotation.content)
        } else {
            setModalMode(ModalMode.CREATE)
            setTextInput('')
        }
    }, [props.annotation])

    const _onSubmit = (input: string, date: dayjs.Dayjs): void => {
        props.onSubmit(input, date)
        // Reset input
        setTextInput('')
        setDate(dayjs())
        setScope(AnnotationScope.Project)
    }

    return (
        <Modal
            footer={[
                <Button key="create-annotation-cancel" onClick={(): void => props.onCancel()}>
                    Cancel
                </Button>,
                <Button
                    type="primary"
                    key="create-annotation-submit"
                    data-attr="create-annotation-submit"
                    onClick={(): void => {
                        _onSubmit(textInput, selectedDate)
                    }}
                >
                    {modalMode === ModalMode.CREATE ? 'Submit' : 'Update'}
                </Button>,
            ]}
            closable={false}
            visible={props.visible}
            onCancel={props.onCancel}
            title={modalMode === ModalMode.CREATE ? 'Create annotation' : 'Edit ennotation'}
        >
            {modalMode === ModalMode.CREATE ? (
                <span>
                    This annotation will appear on all
                    <Dropdown
                        overlay={
                            <Menu activeKey={scope} onSelect={(e) => setScope(e.key as AnnotationScope)}>
                                <Menu.Item key={AnnotationScope.Project} icon={<ProjectOutlined />}>
                                    Project
                                </Menu.Item>
                                <Menu.Item key={AnnotationScope.Organization} icon={<DeploymentUnitOutlined />}>
                                    Organization
                                </Menu.Item>
                            </Menu>
                        }
                    >
                        <Button style={{ marginLeft: 8, marginRight: 8 }}>
                            {annotationScopeToName.get(scope)} <DownOutlined />
                        </Button>
                    </Dropdown>{' '}
                    charts
                </span>
            ) : (
                <Row justify="space-between">
                    <span>Change existing annotation text</span>
                    {!props.annotation?.deleted ? (
                        <DeleteOutlined
                            className="text-danger"
                            onClick={(): void => {
                                props.onDelete()
                            }}
                        />
                    ) : (
                        <RedoOutlined
                            className="button-border clickable"
                            onClick={(): void => {
                                props.onRestore()
                            }}
                        />
                    )}
                </Row>
            )}
            <br />
            {modalMode === ModalMode.CREATE && (
                <div>
                    Date:
                    <DatePicker
                        style={{ marginTop: 16, marginLeft: 8, marginBottom: 16 }}
                        getPopupContainer={(trigger): HTMLElement => trigger.parentElement as HTMLElement}
                        value={selectedDate}
                        onChange={(date): void => setDate(date as dayjs.Dayjs)}
                        allowClear={false}
                    />
                </div>
            )}
            <TextArea
                data-attr="create-annotation-input"
                maxLength={300}
                style={{ marginBottom: 12, marginTop: 5 }}
                rows={4}
                value={textInput}
                onChange={(e): void => setTextInput(e.target.value)}
            />
        </Modal>
    )
}

IconSymbol: FC = () => {
  return (
    <Row>
      {/*<CaretUpOutlined*/}
      {/*  className="icon"*/}
      {/*  symbolName={'1.General/2.Icons/1.CaretUpOutlined'}*/}
      {/*/>*/}
      {/*  className="icon"*/}
      {/*  symbolName={'1.General/2.Icons/2.MailOutlined'}*/}
      {/*/>*/}
      {/*<StepBackwardOutlined*/}
      {/*  className="icon"*/}
      {/*  symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
      {/*/>*/}
      {/*<StepForwardOutlined*/}
      {/*  className="icon"*/}
      {/*  symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
      {/*/>*/}
      <StepForwardOutlined />
      <ShrinkOutlined />
      <ArrowsAltOutlined />
      <DownOutlined />
      <UpOutlined />
      <LeftOutlined />
      <RightOutlined />
      <CaretUpOutlined />
      <CaretDownOutlined />
      <CaretLeftOutlined />
      <CaretRightOutlined />
      <VerticalAlignTopOutlined />
      <RollbackOutlined />
      <FastBackwardOutlined />
      <FastForwardOutlined />
      <DoubleRightOutlined />
      <DoubleLeftOutlined />
      <VerticalLeftOutlined />
      <VerticalRightOutlined />
      <VerticalAlignMiddleOutlined />
      <VerticalAlignBottomOutlined />
      <ForwardOutlined />
      <BackwardOutlined />
      <EnterOutlined />
      <RetweetOutlined />
      <SwapOutlined />
      <SwapLeftOutlined />
      <SwapRightOutlined />
      <ArrowUpOutlined />
      <ArrowDownOutlined />
      <ArrowLeftOutlined />
      <ArrowRightOutlined />
      <LoginOutlined />
      <LogoutOutlined />
      <MenuFoldOutlined />
      <MenuUnfoldOutlined />
      <BorderBottomOutlined />
      <BorderHorizontalOutlined />
      <BorderInnerOutlined />
      <BorderOuterOutlined />
      <BorderLeftOutlined />
      <BorderRightOutlined />
      <BorderTopOutlined />
      <BorderVerticleOutlined />
      <PicCenterOutlined />
      <PicLeftOutlined />
      <PicRightOutlined />
      <RadiusBottomleftOutlined />
      <RadiusBottomrightOutlined />
      <RadiusUpleftOutlined />
      <RadiusUprightOutlined />
      <FullscreenOutlined />
      <FullscreenExitOutlined />
      <QuestionOutlined />
      <PauseOutlined />
      <MinusOutlined />
      <PauseCircleOutlined />
      <InfoOutlined />
      <CloseOutlined />
      <ExclamationOutlined />
      <CheckOutlined />
      <WarningOutlined />
      <IssuesCloseOutlined />
      <StopOutlined />
      <EditOutlined />
      <CopyOutlined />
      <ScissorOutlined />
      <DeleteOutlined />
      <SnippetsOutlined />
      <DiffOutlined />
      <HighlightOutlined />
      <AlignCenterOutlined />
      <AlignLeftOutlined />
      <AlignRightOutlined />
      <BgColorsOutlined />
      <BoldOutlined />
      <ItalicOutlined />
      <UnderlineOutlined />
      <StrikethroughOutlined />
      <RedoOutlined />
      <UndoOutlined />
      <ZoomInOutlined />
      <ZoomOutOutlined />
      <FontColorsOutlined />
      <FontSizeOutlined />
      <LineHeightOutlined />
      <SortAscendingOutlined />
      <SortDescendingOutlined />
      <DragOutlined />
      <OrderedListOutlined />
      <UnorderedListOutlined />
      <RadiusSettingOutlined />
      <ColumnWidthOutlined />
      <ColumnHeightOutlined />
      <AreaChartOutlined />
      <PieChartOutlined />
      <BarChartOutlined />
      <DotChartOutlined />
      <LineChartOutlined />
      <RadarChartOutlined />
      <HeatMapOutlined />
      <FallOutlined />
      <RiseOutlined />
      <StockOutlined />
      <BoxPlotOutlined />
      <FundOutlined />
      <SlidersOutlined />
      <AndroidOutlined />
      <AppleOutlined />
      <WindowsOutlined />
      <IeOutlined />
      <ChromeOutlined />
      <GithubOutlined />
      <AliwangwangOutlined />
      <DingdingOutlined />
      <WeiboSquareOutlined />
      <WeiboCircleOutlined />
      <TaobaoCircleOutlined />
      <Html5Outlined />
      <WeiboOutlined />
      <TwitterOutlined />
      <WechatOutlined />
      <AlipayCircleOutlined />
      <TaobaoOutlined />
      <SkypeOutlined />
      <FacebookOutlined />
      <CodepenOutlined />
      <CodeSandboxOutlined />
      <AmazonOutlined />
      <GoogleOutlined />
      <AlipayOutlined />
      <AntDesignOutlined />
      <AntCloudOutlined />
      <ZhihuOutlined />
      <SlackOutlined />
      <SlackSquareOutlined />
      <BehanceSquareOutlined />
      <DribbbleOutlined />
      <DribbbleSquareOutlined />
      <InstagramOutlined />
      <YuqueOutlined />
      <AlibabaOutlined />
      <YahooOutlined />
      <RedditOutlined />
      <SketchOutlined />
      <AccountBookOutlined />
      <AlertOutlined />
      <ApartmentOutlined />
      <ApiOutlined />
      <QqOutlined />
      <MediumWorkmarkOutlined />
      <GitlabOutlined />
      <MediumOutlined />
      <GooglePlusOutlined />
      <AppstoreAddOutlined />
      <AppstoreOutlined />
      <AudioOutlined />
      <AudioMutedOutlined />
      <AuditOutlined />
      <BankOutlined />
      <BarcodeOutlined />
      <BarsOutlined />
      <BellOutlined />
      <BlockOutlined />
      <BookOutlined />
      <BorderOutlined />
      <BranchesOutlined />
      <BuildOutlined />
      <BulbOutlined />
      <CalculatorOutlined />
      <CalendarOutlined />
      <CameraOutlined />
      <CarOutlined />
      <CarryOutOutlined />
      <CiCircleOutlined />
      <CiOutlined />
      <CloudOutlined />
      <ClearOutlined />
      <ClusterOutlined />
      <CodeOutlined />
      <CoffeeOutlined />
      <CompassOutlined />
      <CompressOutlined />
      <ContactsOutlined />
      <ContainerOutlined />
      <ControlOutlined />
      <CopyrightCircleOutlined />
      <CopyrightOutlined />
      <CreditCardOutlined />
      <CrownOutlined />
      <CustomerServiceOutlined />
      <DashboardOutlined />
      <DatabaseOutlined />
      <DeleteColumnOutlined />
      <DeleteRowOutlined />
      <DisconnectOutlined />
      <DislikeOutlined />
      <DollarCircleOutlined />
      <DollarOutlined />
      <DownloadOutlined />
      <EllipsisOutlined />
      <EnvironmentOutlined />
      <EuroCircleOutlined />
      <EuroOutlined />
      <ExceptionOutlined />
      <ExpandAltOutlined />
      <ExpandOutlined />
      <ExperimentOutlined />
      <ExportOutlined />
      <EyeOutlined />
      <FieldBinaryOutlined />
      <FieldNumberOutlined />
      <FieldStringOutlined />
      <DesktopOutlined />
      <DingtalkOutlined />
      <FileAddOutlined />
      <FileDoneOutlined />
      <FileExcelOutlined />
      <FileExclamationOutlined />
      <FileOutlined />
      <FileImageOutlined />
      <FileJpgOutlined />
      <FileMarkdownOutlined />
      <FilePdfOutlined />
      <FilePptOutlined />
      <FileProtectOutlined />
      <FileSearchOutlined />
      <FileSyncOutlined />
      <FileTextOutlined />
      <FileUnknownOutlined />
      <FileWordOutlined />
      <FilterOutlined />
      <FireOutlined />
      <FlagOutlined />
      <FolderAddOutlined />
      <FolderOutlined />
      <FolderOpenOutlined />
      <ForkOutlined />
      <FormatPainterOutlined />
      <FrownOutlined />
      <FunctionOutlined />
      <FunnelPlotOutlined />
      <GatewayOutlined />
      <GifOutlined />
      <GiftOutlined />
      <GlobalOutlined />
      <GoldOutlined />
      <GroupOutlined />
      <HddOutlined />
      <HeartOutlined />
      <HistoryOutlined />
      <HomeOutlined />
      <HourglassOutlined />
      <IdcardOutlined />
      <ImportOutlined />
      <InboxOutlined />
      <InsertRowAboveOutlined />
      <InsertRowBelowOutlined />
      <InsertRowLeftOutlined />
      <InsertRowRightOutlined />
      <InsuranceOutlined />
      <InteractionOutlined />
      <KeyOutlined />
      <LaptopOutlined />
      <LayoutOutlined />
      <LikeOutlined />
      <LineOutlined />
      <LinkOutlined />
      <Loading3QuartersOutlined />
      <LoadingOutlined />
      <LockOutlined />
      <MailOutlined />
      <ManOutlined />
      <MedicineBoxOutlined />
      <MehOutlined />
      <MenuOutlined />
      <MergeCellsOutlined />
      <MessageOutlined />
      <MobileOutlined />
      <MoneyCollectOutlined />
      <MonitorOutlined />
      <MoreOutlined />
      <NodeCollapseOutlined />
      <NodeExpandOutlined />
      <NodeIndexOutlined />
      <NotificationOutlined />
      <NumberOutlined />
      <PaperClipOutlined />
      <PartitionOutlined />
      <PayCircleOutlined />
      <PercentageOutlined />
      <PhoneOutlined />
      <PictureOutlined />
      <PoundCircleOutlined />
      <PoundOutlined />
      <PoweroffOutlined />
      <PrinterOutlined />
      <ProfileOutlined />
      <ProjectOutlined />
      <PropertySafetyOutlined />
      <PullRequestOutlined />
      <PushpinOutlined />
      <QrcodeOutlined />
      <ReadOutlined />
      <ReconciliationOutlined />
      <RedEnvelopeOutlined />
      <ReloadOutlined />
      <RestOutlined />
      <RobotOutlined />
      <RocketOutlined />
      <SafetyCertificateOutlined />
      <SafetyOutlined />
      <ScanOutlined />
      <ScheduleOutlined />
      <SearchOutlined />
      <SecurityScanOutlined />
      <SelectOutlined />
      <SendOutlined />
      <SettingOutlined />
      <ShakeOutlined />
      <ShareAltOutlined />
      <ShopOutlined />
      <ShoppingCartOutlined />
      <ShoppingOutlined />
      <SisternodeOutlined />
      <SkinOutlined />
      <SmileOutlined />
      <SolutionOutlined />
      <SoundOutlined />
      <SplitCellsOutlined />
      <StarOutlined />
      <SubnodeOutlined />
      <SyncOutlined />
      <TableOutlined />
      <TabletOutlined />
      <TagOutlined />
      <TagsOutlined />
      <TeamOutlined />
      <ThunderboltOutlined />
      <ToTopOutlined />
      <ToolOutlined />
      <TrademarkCircleOutlined />
      <TrademarkOutlined />
      <TransactionOutlined />
      <TrophyOutlined />
      <UngroupOutlined />
      <UnlockOutlined />
      <UploadOutlined />
      <UsbOutlined />
      <UserAddOutlined />
      <UserDeleteOutlined />
      <UserOutlined />
      <UserSwitchOutlined />
      <UsergroupAddOutlined />
      <UsergroupDeleteOutlined />
      <VideoCameraOutlined />
      <WalletOutlined />
      <WifiOutlined />
      <BorderlessTableOutlined />
      <WomanOutlined />
      <BehanceOutlined />
      <DropboxOutlined />
      <DeploymentUnitOutlined />
      <UpCircleOutlined />
      <DownCircleOutlined />
      <LeftCircleOutlined />
      <RightCircleOutlined />
      <UpSquareOutlined />
      <DownSquareOutlined />
      <LeftSquareOutlined />
      <RightSquareOutlined />
      <PlayCircleOutlined />
      <QuestionCircleOutlined />
      <PlusCircleOutlined />
      <PlusSquareOutlined />
      <MinusSquareOutlined />
      <MinusCircleOutlined />
      <InfoCircleOutlined />
      <ExclamationCircleOutlined />
      <CloseCircleOutlined />
      <CloseSquareOutlined />
      <CheckCircleOutlined />
      <CheckSquareOutlined />
      <ClockCircleOutlined />
      <FormOutlined />
      <DashOutlined />
      <SmallDashOutlined />
      <YoutubeOutlined />
      <CodepenCircleOutlined />
      <AliyunOutlined />
      <PlusOutlined />
      <LinkedinOutlined />
      <AimOutlined />
      <BugOutlined />
      <CloudDownloadOutlined />
      <CloudServerOutlined />
      <CloudSyncOutlined />
      <CloudUploadOutlined />
      <CommentOutlined />
      <ConsoleSqlOutlined />
      <EyeInvisibleOutlined />
      <FileGifOutlined />
      <DeliveredProcedureOutlined />
      <FieldTimeOutlined />
      <FileZipOutlined />
      <FolderViewOutlined />
      <FundProjectionScreenOutlined />
      <FundViewOutlined />
      <MacCommandOutlined />
      <PlaySquareOutlined />
      <OneToOneOutlined />
      <RotateLeftOutlined />
      <RotateRightOutlined />
      <SaveOutlined />
      <SwitcherOutlined />
      <TranslationOutlined />
      <VerifiedOutlined />
      <VideoCameraAddOutlined />
      <WhatsAppOutlined />

      {/*</Col>*/}
    </Row>
  );
}

AddSubscription = (props) => {
  return (
    <Modal
      title={
        <Space>
          <NodeIndexOutlined />
          Add Subscription
        </Space>
      }
      visible={props.visible}
      onCancel={props.reset}
      footer={[
        <Button key="cancel" size="small" onClick={props.reset}>
          Cancel
        </Button>,
        <Button
          form="addSubscription"
          key="submit"
          htmlType="submit"
          size="small"
          type="primary"
          loading={props.loading}
        >
          Create
        </Button>,
      ]}
    >
      <Form
        onFinish={props.onAdd}
        form={props.form}
        id="addSubscription"
        initialValues={{ type: "RabbitMQ" }}
      >
        <FormItem name="type">
          <Select>
            <Option value="RabbitMQ">RabbitMQ</Option>
            <Option value="Redis">Redis</Option>
            <Option value="SQS" disabled>
              SQS (Not Yet Supported)
            </Option>
          </Select>
        </FormItem>

        <FormItem
          name="broker"
          rules={[{ required: true, message: "Please input broker url!" }]}
        >
          <Input
            prefix={<DeploymentUnitOutlined style={{ fontSize: 13 }} />}
            placeholder="Broker"
          />
        </FormItem>

        <FormItem name="backend" rules={[]}>
          <Input
            prefix={<DeploymentUnitOutlined style={{ fontSize: 13 }} />}
            placeholder="Backend"
          />
        </FormItem>

        <FormItem
          name="app_env"
          rules={[
            {
              required: true,
              message: "Please input environment tag!",
            },
            {
              pattern: /^[a-z]*$/g,
              message: "Wrong env tag, only lowercase letters allowed!",
            },
          ]}
        >
          <Input placeholder="Environment Tag - eg: prod" />
        </FormItem>

        <Divider />

        <FormItem name="exchange" rules={[]}>
          <Input placeholder="Exchange - default: celeryev" />
        </FormItem>

        <FormItem name="queue" rules={[]}>
          <Input placeholder="Queue - default: leek.fanout" />
        </FormItem>

        <FormItem name="routing_key" rules={[]}>
          <Input placeholder="Routing Key - default: #" />
        </FormItem>

        <FormItem
          name="prefetch_count"
          rules={[
            ({ __ }) => ({
              validator(_, value) {
                if (value && (value < 1000 || value > 10000)) {
                  return Promise.reject(
                    new Error("Should be between 1000 and 10000")
                  );
                }
                return Promise.resolve();
              },
            }),
          ]}
        >
          <InputNumber
            min={1000}
            max={10000}
            step={1}
            placeholder="Prefetch count - default: 1000"
            style={{ width: "100%" }}
          />
        </FormItem>

        <Divider />

        <FormItem name="concurrency_pool_size" rules={[]}>
          <InputNumber
            min={1}
            max={20}
            step={1}
            placeholder="Concurrency pool size - default: 1"
            style={{ width: "100%" }}
          />
        </FormItem>
        {/* Batch */}
        <FormItem
          name="batch_max_size_in_mb"
          rules={[
            ({ __ }) => ({
              validator(_, value) {
                if (value && (value < 1 || value > 10)) {
                  return Promise.reject(
                    new Error("Should be between 1 and 10")
                  );
                }
                return Promise.resolve();
              },
            }),
          ]}
        >
          <InputNumber
            min={1}
            max={10}
            step={1}
            placeholder="Batch max size in MB - default: 1"
            style={{ width: "100%" }}
          />
        </FormItem>

        <FormItem
          name="batch_max_number_of_messages"
          dependencies={["prefetch_count"]}
          rules={[
            ({ getFieldValue }) => ({
              validator(_, value) {
                if (!value && !getFieldValue("prefetch_count")) {
                  return Promise.resolve();
                }
                if (value && (value < 1000 || value > 10000)) {
                  return Promise.reject(
                    new Error("Should be between 1000 and 10000")
                  );
                }
                if (
                  value &&
                  !getFieldValue("prefetch_count") &&
                  value == 1000
                ) {
                  return Promise.resolve();
                } else if (
                  value &&
                  getFieldValue("prefetch_count") &&
                  value <= getFieldValue("prefetch_count")
                ) {
                  return Promise.resolve();
                }
                return Promise.reject(
                  new Error(
                    "Batch max number of messages should be <= prefetch count!"
                  )
                );
              },
            }),
          ]}
        >
          <InputNumber
            min={1000}
            max={10000}
            step={1}
            placeholder="Batch max number of messages - default: 1000"
            style={{ width: "100%" }}
          />
        </FormItem>

        <FormItem
          name="batch_max_window_in_seconds"
          rules={[
            ({ __ }) => ({
              validator(_, value) {
                if (value && (value < 5 || value > 20)) {
                  return Promise.reject(
                    new Error("Should be between 5 and 20")
                  );
                }
                return Promise.resolve();
              },
            }),
          ]}
        >
          <InputNumber
            min={5}
            max={20}
            step={1}
            placeholder="Batch max window in seconds - default: 5"
            style={{ width: "100%" }}
          />
        </FormItem>
      </Form>
    </Modal>
  );
}

CreateApp = (props) => {
  const [form] = Form.useForm();
  const service = new ApplicationService();
  const { listApplications, applications } = useApplication();
  const [applicationCreating, setApplicationCreating] = useState<boolean>();

  function createApplication(application) {
    setApplicationCreating(true);
    service
      .createApplication(application)
      .then(handleAPIResponse)
      .then((application: any) => {
        props.setCreateAppModalVisible(false);
        form.resetFields();
        listApplications();
      }, handleAPIError)
      .catch(handleAPIError)
      .finally(() => {
        setApplicationCreating(false);
      });
  }

  function reset() {
    props.setCreateAppModalVisible(false);
    form.resetFields();
  }

  return (
    <Modal
      title="New application"
      visible={props.createAppModalVisible}
      onCancel={reset}
      closable={applications.length > 0}
      footer={[
        applications.length > 0 && (
          <Button key="cancel" size="small" onClick={reset}>
            Cancel
          </Button>
        ),
        <Button
          form="createApp"
          key="submit"
          htmlType="submit"
          size="small"
          type="primary"
          loading={applicationCreating}
        >
          Create
        </Button>,
      ]}
    >
      <Form onFinish={createApplication} form={form} id="createApp">
        <FormItem
          name="app_name"
          rules={[
            {
              required: true,
              message: "Please input application name!",
            },
            {
              pattern: /^[a-z]*$/g,
              message: "Wrong app name, only lowercase letters allowed!",
            },
            {
              min: 3,
              max: 16,
              message: "App name must be between 3-16 characters.",
            },
          ]}
        >
          <Input
            prefix={<DeploymentUnitOutlined style={{ fontSize: 13 }} />}
            placeholder="Application name"
          />
        </FormItem>

        <FormItem
          name="app_description"
          rules={[
            {
              required: true,
              message: "Please input application description!",
            },
            {
              max: 46,
              message: "App description must be a maximum of 46 characters.",
            },
          ]}
        >
          <Input
            prefix={<ContainerOutlined style={{ fontSize: 13 }} />}
            placeholder="Short description"
          />
        </FormItem>
      </Form>
    </Modal>
  );
}

Triggers = (props) => {
  const [form] = Form.useForm();
  const service = new ApplicationService();
  const { updateApplication } = useApplication();

  const [createTriggerModalVisible, setCreateTriggerModalVisible] =
    useState<boolean>(false);
  const [editTriggerModalVisible, setEditTriggerModalVisible] =
    useState<boolean>(false);
  const [patternType, setPatternType] = useState<string>("all");
  const [loading, setLoading] = useState<boolean>(false);
  const [triggerId, setTriggerId] = useState();

  useEffect(() => {}, []);

  function doAddTrigger(trigger) {
    delete trigger.patterns;
    setLoading(true);
    service
      .addFanoutTrigger(props.selectedApp.app_name, trigger)
      .then(handleAPIResponse)
      .then((application: any) => {
        updateApplication(application);
        props.setSelectedApp(application);
        reset();
      }, handleAPIError)
      .catch(handleAPIError)
      .finally(() => {
        setLoading(false);
      });
  }

  function doEditTrigger(trigger) {
    delete trigger.patterns;
    setLoading(true);
    service
      .editFanoutTrigger(props.selectedApp.app_name, triggerId, trigger)
      .then(handleAPIResponse)
      .then((application: any) => {
        updateApplication(application);
        props.setSelectedApp(application);
        reset();
      }, handleAPIError)
      .catch(handleAPIError)
      .finally(() => {
        setLoading(false);
      });
  }

  function doDeleteTrigger(trigger_id) {
    setLoading(true);
    service
      .deleteFanoutTrigger(props.selectedApp.app_name, trigger_id)
      .then(handleAPIResponse)
      .then((application: any) => {
        updateApplication(application);
        props.setSelectedApp(application);
      }, handleAPIError)
      .catch(handleAPIError)
      .finally(() => {
        setLoading(false);
      });
  }

  function handleEditTrigger(trigger_id, selected) {
    setTriggerId(trigger_id);
    if (selected.include && selected.include.length)
      selected.patterns = "include";
    else if (selected.exclude && selected.exclude.length)
      selected.patterns = "exclude";
    else selected.patterns = "all";
    setPatternType(selected.patterns);
    form.setFieldsValue(selected);
    setEditTriggerModalVisible(true);
  }

  function reset() {
    setCreateTriggerModalVisible(false);
    setEditTriggerModalVisible(false);
    setTriggerId(undefined);
    form.resetFields();
  }

  const formItems = (
    <>
      <FormItem name="type">
        <Select>
          <Option value="slack">
            <SlackOutlined />
            Slack
          </Option>
        </Select>
      </FormItem>

      <FormItem
        name="slack_wh_url"
        rules={[
          { required: true, message: "Please input slack webhook url!" },
          {
            type: "url",
            message: "This field must be a valid url.",
          },
        ]}
      >
        <Input
          prefix={<DeploymentUnitOutlined style={{ fontSize: 13 }} />}
          placeholder="Webhook URL"
        />
      </FormItem>

      <FormItem name="states">
        <Select
          mode="multiple"
          tagRender={TaskStateClosable}
          style={{ width: "100%" }}
          placeholder="States"
          options={statesOptions}
        />
      </FormItem>

      <FormItem name="envs">
        <Select
          mode="tags"
          style={{ width: "100%" }}
          placeholder="Environments"
        />
      </FormItem>

      <Divider />

      <FormItem name="runtime_upper_bound">
        <InputNumber
          style={{ width: "100%" }}
          min={0}
          max={1000}
          step={0.00001}
          placeholder="Runtime upper bound (Only succeeded Tasks)"
        />
      </FormItem>

      <FormItem name="patterns" valuePropName="value">
        <Radio.Group
          buttonStyle="solid"
          onChange={(e) => setPatternType(e.target.value)}
        >
          <Radio.Button value="all">All tasks</Radio.Button>
          <Radio.Button value="exclude">Exclude</Radio.Button>
          <Radio.Button value="include">Include</Radio.Button>
        </Radio.Group>
      </FormItem>

      {"include" === patternType && (
        <FormItem name="include">
          <Select
            mode="tags"
            style={{ width: "100%" }}
            placeholder="Tasks names list or patterns to include"
          />
        </FormItem>
      )}

      {"exclude" === patternType && (
        <FormItem name="exclude">
          <Select
            mode="tags"
            style={{ width: "100%" }}
            placeholder="Tasks names list or patterns to exclude"
          />
        </FormItem>
      )}

      <FormItem name="enabled" valuePropName="checked">
        <Switch
          checkedChildren="Enabled"
          unCheckedChildren="Disabled"
          defaultChecked
          size="small"
        />
      </FormItem>
    </>
  );

  return (
    <Row style={{ width: "100%", marginBottom: "16px" }}>
      {/*Create Trigger*/}
      <Modal
        title={
          <Space>
            <BellOutlined />
            Create Trigger
          </Space>
        }
        visible={createTriggerModalVisible}
        onCancel={reset}
        footer={[
          <Button key="cancel" size="small" onClick={reset}>
            Cancel
          </Button>,
          <Button
            form="createTrigger"
            key="submit"
            htmlType="submit"
            size="small"
            type="primary"
            loading={loading}
          >
            Create
          </Button>,
        ]}
      >
        <Form
          onFinish={doAddTrigger}
          form={form}
          id="createTrigger"
          initialValues={{ type: "slack", patterns: "all", enabled: false }}
        >
          {formItems}
        </Form>
      </Modal>

      {/*Edit Trigger*/}
      <Modal
        title={() => (
          <>
            <BellOutlined /> `Edit Trigger ${triggerId}`
          </>
        )}
        visible={editTriggerModalVisible}
        onCancel={reset}
        footer={[
          <Button key="cancel" size="small" onClick={reset}>
            Cancel
          </Button>,
          <Button
            form="editTrigger"
            key="submit"
            htmlType="submit"
            size="small"
            type="primary"
            loading={loading}
          >
            Update
          </Button>,
        ]}
      >
        <Form onFinish={doEditTrigger} form={form} id="editTrigger">
          {formItems}
        </Form>
      </Modal>

      <Card
        size="small"
        style={{ width: "100%" }}
        bodyStyle={{ paddingBottom: 0, paddingRight: 0, paddingLeft: 0 }}
        title={
          <Row justify="space-between">
            <Col>
              <Space>
                <BellOutlined />
                <Text strong>Fanout Triggers</Text>
              </Space>
            </Col>
            <Col>
              <Button
                onClick={() => setCreateTriggerModalVisible(true)}
                size="small"
                type="primary"
                ghost
                icon={<AppstoreAddOutlined />}
              />
            </Col>
          </Row>
        }
      >
        <Table
          dataSource={props.selectedApp.fo_triggers}
          columns={TriggerDataColumns({
            handleEditTrigger: handleEditTrigger,
            handleDeleteTrigger: doDeleteTrigger,
            triggersModifying: loading,
          })}
          showHeader={false}
          pagination={false}
          size="small"
          rowKey="id"
          style={{ width: "100%" }}
          scroll={{ x: "100%" }}
          locale={{
            emptyText: (
              <div style={{ textAlign: "center" }}>
                <Empty
                  image={Empty.PRESENTED_IMAGE_SIMPLE}
                  description={
                    <span>
                      No <a href="#API">triggers</a> found
                    </span>
                  }
                />
              </div>
            ),
          }}
          expandable={{
            expandedRowRender: (record) => (
              <>
                <Row justify="space-between">
                  <Col span={12}>
                    <List.Item.Meta
                      style={{ marginBottom: 16 }}
                      title={"Webhook URL"}
                      description={<Tag>{record.slack_wh_url}</Tag>}
                    />
                  </Col>
                  <Col span={12}>
                    {record.exclude && record.exclude.length > 0 && (
                      <List.Item.Meta
                        style={{ marginBottom: 16 }}
                        title={"Exclusions"}
                        description={record.exclude.map((exclusion, key) => (
                          <Tag key={key}>{exclusion}</Tag>
                        ))}
                      />
                    )}
                    {record.include && record.include.length > 0 && (
                      <List.Item.Meta
                        title={"Inclusions"}
                        description={record.include.map((inclusion, key) => (
                          <Tag key={key}>{inclusion}</Tag>
                        ))}
                      />
                    )}
                  </Col>
                </Row>
              </>
            ),
            rowExpandable: (record) => true,
          }}
        />
      </Card>
    </Row>
  );
}

AgentPage = () => {
  const service = new AgentService();

  const [loading, setLoading] = useState<boolean>();
  const [agent, setAgent] = useState<any>();

  const retrieveAgent = () => {
    setLoading(true);
    service
      .retrieveAgent()
      .then(handleAPIResponse)
      .then((agent: any) => {
        setAgent(agent);
      }, handleAPIError)
      .catch(handleAPIError)
      .finally(() => setLoading(false));
  };

  const startOrRestartAgent = () => {
    setLoading(true);
    service
      .startOrRestartAgent()
      .then(handleAPIResponse)
      .then((agent: any) => {
        setAgent(agent);
      }, handleAPIError)
      .catch(handleAPIError)
      .finally(() => setLoading(false));
  };

  const stopAgent = () => {
    setLoading(true);
    service
      .stopAgent()
      .then(handleAPIResponse)
      .then((agent: any) => {
        setAgent(agent);
      }, handleAPIError)
      .catch(handleAPIError)
      .finally(() => setLoading(false));
  };

  useEffect(() => {
    retrieveAgent();
  }, []);

  return (
    <>
      <Helmet>
        <html lang="en" />
        <title>Agent</title>
        <meta name="description" content="Leek agent" />
        <meta name="keywords" content="leek, agent" />
      </Helmet>

      {agent && agent.type === "local" && (
        <>
          <Row justify="center" style={{ width: "100%", marginBottom: 13 }}>
            <Card
              size="small"
              style={{ width: "100%" }}
              title={
                <Space>
                  <DeploymentUnitOutlined />
                  <Text strong>Agent Process</Text>
                </Space>
              }
              loading={loading}
              extra={[
                <Button
                  key="restart"
                  size="small"
                  disabled={loading}
                  type="primary"
                  onClick={startOrRestartAgent}
                  style={{ marginRight: 10, color: "#222" }}
                >
                  Start/Restart
                </Button>,
                <Button
                  key="stop"
                  size="small"
                  disabled={loading || (agent && agent.statename === "STOPPED")}
                  danger
                  onClick={stopAgent}
                >
                  Stop
                </Button>,
              ]}
            >
              {agent && (
                <>
                  <Row>
                    <Space
                      direction="horizontal"
                      style={{ marginBottom: "16px" }}
                    >
                      <Text strong>State</Text>
                      <AgentState state={agent.statename} />
                    </Space>
                  </Row>

                  <Row style={{ marginBottom: "16px" }}>
                    <Space direction="horizontal">
                      <Text strong>Last started</Text>
                      <Text copyable code>
                        {adaptTime(agent.start * 1000)}
                      </Text>
                    </Space>
                  </Row>

                  <Row style={{ marginBottom: "16px" }}>
                    <Space direction="horizontal">
                      <Text strong>Last stopped</Text>
                      <Text code>{adaptTime(agent.stop * 1000)}</Text>
                    </Space>
                  </Row>

                  <Row>
                    <Space direction="horizontal">
                      <Text strong>Description</Text>
                      <Text code>{agent.description}</Text>
                    </Space>
                  </Row>
                </>
              )}
            </Card>
          </Row>

          <Subscriptions />
        </>
      )}

      {agent && agent.type === "standalone" && (
        <Row
          justify="center"
          align="middle"
          style={{ width: "100%", minHeight: "calc(100vh - 100px)" }}
        >
          <div>
            <Row justify="center" style={{ width: "100%" }}>
              <Typography.Title code level={3}>
                AGENT IS NOT LOCAL
              </Typography.Title>
            </Row>
            <Row justify="center" style={{ width: "100%" }}>
              <Typography.Text>
                There is no local agent deployed with the API. Leek API cannot
                control standalone agents
              </Typography.Text>
            </Row>
            <Row justify="center" style={{ width: "100%" }}>
              <Typography.Text>
                <a
                  href="https://tryleek.com/docs/getting-started/agent"
                  target="_blank"
                  rel="noopener norefferer"
                >
                  More info
                </a>
              </Typography.Text>
            </Row>
          </div>
        </Row>
      )}
    </>
  );
}

OperatorBar: React.FC<OperatorBarProps> = () => {
  const dispatch = useDispatch();

  const menus = [
    {
      id: 'inbox',
      name: 'Inbox',
      icon: <InboxOutlined />,
      onClick: () => {
        dispatch({
          type: 'CHANGE_PAGE',
          payload: {
            page: 'inbox',
          },
        });
      },
    },
    {
      id: 'notes',
      name: 'Notes & Highlights',
      icon: <ReadOutlined />,
      onClick: () => {
        dispatch({
          type: 'CHANGE_PAGE',
          payload: {
            page: 'notes',
          },
        });
      },
    },
    {
      id: 'search',
      name: 'Search',
      icon: <SearchOutlined />,
    },
    {
      id: 'divider1',
      isDivider: true,
    },
    {
      id: 'tag_management',
      name: 'Tag Management',
      icon: <ApartmentOutlined />,
      onClick: () => {
        dispatch({
          type: 'CHANGE_PAGE',
          payload: {
            page: 'tag_management',
          },
        });
      },
    },
    {
      id: 'diffuse',
      name: 'Knowledge Map',
      icon: <DeploymentUnitOutlined />,
      onClick: () => {
        dispatch({
          type: 'CHANGE_PAGE',
          payload: {
            page: 'graph',
          },
        });
      },
    },
    {
      id: 'divider2',
      isDivider: true,
    },

    {
      id: 'save',
      name: 'Save',
      icon: <SaveOutlined />,
    },
    {
      id: 'clear',
      name: 'Delete',
      icon: <DeleteOutlined />,
    },
    {
      id: 'setting',
      name: 'Settings',
      icon: <SettingOutlined />,
    },
  ];
  return (
    <div>
      <ToolBar data={menus} className="operator-bar" />
    </div>
  );
}