reactstrap#TabContent JavaScript Examples
The following examples show how to use
reactstrap#TabContent.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Desktop-Login-Register.js From Encon-fe with MIT License | 5 votes |
|
LoginRegister = () => {
const [activeTab, setActiveTab] = useState('1');
const toggle = (tab) => {
if (activeTab !== tab) setActiveTab(tab);
};
return (
<div className='desktop-login-reg-container'>
<Nav pills style={{ padding: '1rem' }}>
<NavLink
style={{ borderRadius: '1.25rem' }}
className={classnames({ active: activeTab === '1' })}
onClick={() => {
toggle('1');
}}
>
<h1 className='desktop-register-tab'>Register</h1>
</NavLink>
<NavLink
style={{ borderRadius: '1.25rem' }}
className={classnames({ active: activeTab === '2' })}
onClick={() => {
toggle('2');
}}
>
<h1 className='desktop-login-tab'>Sign In</h1>
</NavLink>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId='1'>
<Col xl='13'>
<Card className='desktop-register-card' style={{ border: 'none' }}>
<Register />
</Card>
</Col>
</TabPane>
<TabPane tabId='2'>
<Col xl='13'>
<Card className='desktop-login-card' style={{ border: 'none' }}>
<Login />
</Card>
</Col>
</TabPane>
</TabContent>
</div>
);
}
Example #2
| Source File: ChartStats.js From study-chain with MIT License | 5 votes |
|
render() {
const { activeTab } = this.state;
const {
blockPerHour,
blockPerMin,
transactionPerHour,
transactionPerMin,
classes
} = this.props;
return (
<div className={classes.chart}>
<Nav tabs>
<NavItem>
<NavLink
className={classnames({
active: activeTab === '1'
})}
onClick={() => {
this.toggle('1');
}}
>
BLOCKS / HOUR
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({
active: activeTab === '2'
})}
onClick={() => {
this.toggle('2');
}}
>
BLOCKS / MIN
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({
active: activeTab === '3'
})}
onClick={() => {
this.toggle('3');
}}
>
TX / HOUR
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({
active: activeTab === '4'
})}
onClick={() => {
this.toggle('4');
}}
>
TX / MIN
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<TimeChart chartData={this.timeDataSetup(blockPerHour)} />
</TabPane>
<TabPane tabId="2">
<TimeChart chartData={this.timeDataSetup(blockPerMin)} />
</TabPane>
<TabPane tabId="3">
<TimeChart chartData={this.timeDataSetup(transactionPerHour)} />
</TabPane>
<TabPane tabId="4">
<TimeChart chartData={this.timeDataSetup(transactionPerMin)} />
</TabPane>
</TabContent>
</div>
);
}
Example #3
| Source File: PodAdd.js From gedge-platform with Apache License 2.0 | 4 votes |
|
PodAdd = observer((props) => {
const { callApiStore } = store;
const [workspaceName, setWorkspaceName] = React.useState("")
// const [duplicate, setduplicate] = React.useState()
const [alias, setAlias] = React.useState("")
const [description, setDescription] = React.useState("")
const [clusterSelect, setClusterSelect] = React.useState("")
const [administrator, setAdministrator] = React.useState("")
const [breadcrumbItems, setBreadcrumbItems] = React.useState([
{ title: "서비스", link: "#" },
{ title: "서비스 추가", link: "#" },
]);
const [activeTabProgress, setActiveTabProgress] = React.useState(1)
const [progressValue, setProgressValue] = React.useState(33)
const [loading, setLoading] = React.useState(false)
const toggleTabProgress = (tab) => {
if (activeTabProgress !== tab) {
if (tab >= 1 && tab <= 3) {
setActiveTabProgress(tab)
if (tab === 1) { setProgressValue(30) }
if (tab === 2) { setProgressValue(60) }
if (tab === 3) { setProgressValue(100) }
}
}
}
const duplicateCheck = () => {
console.log(`workspace name : ${workspaceName}`)
callApiStore.workspaceDuplicationCheck(workspaceName)
console.log(callApiStore.duplicateCheck, "callApiStore.duplicateCheck")
// console.log(duplicate,"duplicate")
// setduplicate(callApiStore.duplicateCheck)
// if(callApiStore.duplicateCheck == 0){
// setduplicate(false)
// }else if(callApiStore.duplicateCheck > 0){
// setduplicate(true)
// }
// console.log(duplicate,"change duplicate")
}
useEffect(() => {
setLoading(false)
return () => {
};
}, [props.history]);
const buttonClick = () => {
const body =
{
workspaceName: "1234",
workspaceDescription: "innogrid",
selectCluster: "cluster1",
workspaceOwner: "innogrid",
workspaceCreator: "innogrid"
}
// callApiStore.postWorkspaceList("workspaces", body)
setLoading(true)
// callApiStore.posteCode = 200
setTimeout(function () {
props.history.push("/workload/pod")
}, 500);
}
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="Service 추가" breadcrumbItems={breadcrumbItems} />
<Row>
<Col lg="12">
<Card>
<CardBody>
<div id="progrss-wizard" className="twitter-bs-wizard">
<ul className="twitter-bs-wizard-nav nav-justified nav nav-pills">
<NavItem>
<NavLink className={classnames({ active: activeTabProgress === 1 })} onClick={() => { toggleTabProgress(1) }} >
<span className="step-number">01</span>
<span className="step-title">기본 정보</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: activeTabProgress === 2 })} onClick={() => { toggleTabProgress(2) }} >
<span className="step-number">02</span>
<span className="step-title">Select Cluster</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: activeTabProgress === 3 })} onClick={() => { toggleTabProgress(3) }} >
<span className="step-number">03</span>
<span className="step-title">Workspace 생성</span>
</NavLink>
</NavItem>
</ul>
<div id="bar" className="mt-4">
<Progress color="success" striped animated value={progressValue} />
</div>
<TabContent activeTab={activeTabProgress} className="twitter-bs-wizard-tab-content">
<TabPane tabId={1}>
<div>
<Form>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-namecard-input24">Workspace Name</Label>
{/* {this.props.loginError && this.props.loginError ? <Alert color="danger">{this.props.loginError}</Alert> : null} */}
<Input type="text" className="form-control" id="basicpill-namecard-input24" name="workspaceName" value={workspaceName} onChange={(e) => (setWorkspaceName(e.target.value))} />
</FormGroup>
{callApiStore.duplicateCheck > 0 ? <Alert color="danger">중복입니다</Alert> : <></>}
<Link to="#" className="btn btn-success" onClick={duplicateCheck}> 중복체크</Link>
</Col>
<Col lg="6">
<FormGroup>
<Label for="basicpill-namecard-input24">Alias</Label>
<Input type="text" className="form-control" id="basicpill-namecard-input24" name="alias" onChange={(e) => setAlias(e.target.value)} />
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="12">
<FormGroup>
<Label for="basicpill-pancard-input18">Administrator</Label>
<select className="custom-select" name="administrator" onChange={(e) => setAdministrator(e.target.value)}>
<option defaultValue>Select Administrator</option>
<option value="user">user</option>
<option value="admin">admin</option>
<option value="multi_test">multi_test</option>
</select>
</FormGroup>
</Col>
<Col lg="12">
<Label>Workspace Description</Label>
<Input
type="textarea"
id="textarea"
name="description"
onChange={(e) => setDescription(e.target.value)}
maxLength="225"
rows="3"
placeholder="This description has a limit of 225 chars."
/>
</Col>
</Row>
</Form>
</div>
</TabPane>
<TabPane tabId={2}>
<div>
<Form>
<Row>
<Col lg="12">
<FormGroup>
<Label for="basicpill-pancard-input18">Clusters</Label>
<select className="custom-select" name="clusterSelect" onChange={(e) => setClusterSelect(e.target.value)}>
<option defaultValue>Select Cluster</option>
<option value="cluster1">cluster1</option>
<option value="cluster2">cluster2</option>
<option value="cluster3">cluster3</option>
</select>
</FormGroup>
</Col>
</Row>
</Form>
</div>
</TabPane>
<TabPane tabId={3}>
<div className="row justify-content-center">
<Col lg="6">
<div className="text-center">
<div className="mb-4">
<i className="mdi mdi-check-circle-outline text-success display-4"></i>
</div>
<div>
<h5>Confirm Detail</h5>
<p className="text-muted">Cluster Name :{workspaceName}</p>
</div>
</div>
</Col>
</div>
<div className="mt-4 text-right" onClick={buttonClick}>
<Backdrop
sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
open={loading}
>
<CircularProgress color="inherit" />
</Backdrop>
{/* <Link to="/workspace" className="btn btn-success" onClick={buttonClick}>
완료
</Link> */}
완료
</div>
</TabPane>
</TabContent>
<ul className="pager wizard twitter-bs-wizard-pager-link">
<li className={activeTabProgress === 1 ? "previous disabled" : "previous"} onClick={() => { toggleTabProgress(activeTabProgress - 1); }}> 이전</li>
<li className={activeTabProgress === 3 ? "next disabled" : "next"} onClick={() => { toggleTabProgress(activeTabProgress + 1); }}>다음</li>
</ul>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
})
Example #4
| Source File: ProjectSystemAdd.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
const options = [
{ value: "TO", label: "Touchscreen" },
{ value: "CF", label: "Call Function" },
{ value: "NO", label: "Notifications" },
{ value: "FI", label: "Fitness" },
{ value: "OU", label: "Outdoor" },
]
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="시스템 프로젝트 추가" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col lg="12">
<Card>
<CardBody>
{/* <h4 className="card-title mb-4">코어 클라우드 추가</h4> */}
<div id="progrss-wizard" className="twitter-bs-wizard">
<ul className="twitter-bs-wizard-nav nav-justified nav nav-pills">
<NavItem>
<NavLink className={classnames({ active: this.state.activeTabProgress === 1 })} onClick={() => { this.toggleTabProgress(1); }} >
<span className="step-number">01</span>
<span className="step-title">기본 정보</span>
</NavLink>
</NavItem>
{/* <NavItem>
<NavLink className={classnames({ active: this.state.activeTabProgress === 2 })} onClick={() => { this.toggleTabProgress(2); }} >
<span className="step-number">02</span>
<span className="step-title">서비스 설정</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: this.state.activeTabProgress === 3 })} onClick={() => { this.toggleTabProgress(3); }} >
<span className="step-number">03</span>
<span className="step-title">고급 설정</span>
</NavLink>
</NavItem> */}
<NavItem>
<NavLink className={classnames({ active: this.state.activeTabProgress === 4 })} onClick={() => { this.toggleTabProgress(4); }} >
<span className="step-number">02</span>
<span className="step-title">Confirm Detail</span>
</NavLink>
</NavItem>
</ul>
<div id="bar" className="mt-4">
<Progress color="success" striped animated value={this.state.progressValue} />
</div>
<TabContent activeTab={this.state.activeTabProgress} className="twitter-bs-wizard-tab-content">
<TabPane tabId={1}>
<Form>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-firstname-input14">프로젝트 명 *</Label>
<Input type="text" className="form-control" id="basicpill-firstname-input14" />
</FormGroup>
</Col>
<Col lg="6">
<FormGroup>
<Label for="basicpill-lastname-input15">별칭</Label>
<Input type="text" className="form-control" id="basicpill-lastname-input15" />
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-phoneno-input16">워크스페이스 *</Label>
<FormGroup>
<select className="custom-select">
<option defaultValue>워크스페이스를 선택해주세요</option>
<option value="AE">A</option>
<option value="VI">B</option>
<option value="MC">C</option>
<option value="DI">D</option>
</select>
</FormGroup>
</FormGroup>
</Col>
<Col lg="6">
<FormGroup>
<Label for="basicpill-address-input2">설명</Label>
<textarea id="basicpill-address-input2" className="form-control" rows="2"></textarea>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-phoneno-input16">프로젝트 소유자 *</Label>
<FormGroup>
<select className="custom-select">
<option defaultValue>프로젝트 소유자를 선택해주세요</option>
<option value="AE">A</option>
<option value="VI">B</option>
<option value="MC">C</option>
<option value="DI">D</option>
</select>
</FormGroup>
</FormGroup>
</Col>
</Row>
{/* <Row>
<Col lg="12">
<FormGroup>
<Label for="basicpill-address-input2">Address</Label>
<textarea id="basicpill-address-input2" className="form-control" rows="2"></textarea>
</FormGroup>
</Col>
</Row> */}
</Form>
</TabPane>
<TabPane tabId={2}>
<div className="row justify-content-center">
<Col lg="6">
<div className="text-center">
<div className="mb-4">
<i className="mdi mdi-check-circle-outline text-success display-4"></i>
</div>
<div>
<h5>Confirm Detail</h5>
<p className="text-muted">If several languages coalesce, the grammar of the resulting</p>
</div>
</div>
</Col>
</div>
<div className="mt-4 text-right">
<Link to="/project/system" className="btn btn-success">
완료
</Link>
</div>
</TabPane>
</TabContent>
<ul className="pager wizard twitter-bs-wizard-pager-link">
<li className={this.state.activeTabProgress === 1 ? "previous disabled" : "previous"}><Link to="#" onClick={() => { this.toggleTabProgress(this.state.activeTabProgress - 1); }}>이전</Link></li>
<li className={this.state.activeTabProgress === 2 ? "next disabled" : "next"}><Link to="#" onClick={() => { this.toggleTabProgress(this.state.activeTabProgress + 1); }}>다음</Link></li>
</ul>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #5
| Source File: ProjectUserAdd.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
const options = [
{ value: "TO", label: "Touchscreen" },
{ value: "CF", label: "Call Function" },
{ value: "NO", label: "Notifications" },
{ value: "FI", label: "Fitness" },
{ value: "OU", label: "Outdoor" },
]
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="사용자 프로젝트 추가" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col lg="12">
<Card>
<CardBody>
{/* <h4 className="card-title mb-4">코어 클라우드 추가</h4> */}
<div id="progrss-wizard" className="twitter-bs-wizard">
<ul className="twitter-bs-wizard-nav nav-justified nav nav-pills">
<NavItem>
<NavLink className={classnames({ active: this.state.activeTabProgress === 1 })} onClick={() => { this.toggleTabProgress(1); }} >
<span className="step-number">01</span>
<span className="step-title">기본 정보</span>
</NavLink>
</NavItem>
{/* <NavItem>
<NavLink className={classnames({ active: this.state.activeTabProgress === 2 })} onClick={() => { this.toggleTabProgress(2); }} >
<span className="step-number">02</span>
<span className="step-title">서비스 설정</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: this.state.activeTabProgress === 3 })} onClick={() => { this.toggleTabProgress(3); }} >
<span className="step-number">03</span>
<span className="step-title">고급 설정</span>
</NavLink>
</NavItem> */}
<NavItem>
<NavLink className={classnames({ active: this.state.activeTabProgress === 4 })} onClick={() => { this.toggleTabProgress(4); }} >
<span className="step-number">02</span>
<span className="step-title">Confirm Detail</span>
</NavLink>
</NavItem>
</ul>
<div id="bar" className="mt-4">
<Progress color="success" striped animated value={this.state.progressValue} />
</div>
<TabContent activeTab={this.state.activeTabProgress} className="twitter-bs-wizard-tab-content">
<TabPane tabId={1}>
<Form>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-firstname-input14">프로젝트 명 *</Label>
<Input type="text" className="form-control" id="basicpill-firstname-input14" />
</FormGroup>
</Col>
<Col lg="6">
<FormGroup>
<Label for="basicpill-lastname-input15">별칭</Label>
<Input type="text" className="form-control" id="basicpill-lastname-input15" />
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-phoneno-input16">워크스페이스 *</Label>
<FormGroup>
<select className="custom-select">
<option defaultValue>워크스페이스를 선택해주세요</option>
<option value="AE">A</option>
<option value="VI">B</option>
<option value="MC">C</option>
<option value="DI">D</option>
</select>
</FormGroup>
</FormGroup>
</Col>
<Col lg="6">
<FormGroup>
<Label for="basicpill-address-input2">설명</Label>
<textarea id="basicpill-address-input2" className="form-control" rows="2"></textarea>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-phoneno-input16">프로젝트 소유자 *</Label>
<FormGroup>
<select className="custom-select">
<option defaultValue>프로젝트 소유자를 선택해주세요</option>
<option value="AE">A</option>
<option value="VI">B</option>
<option value="MC">C</option>
<option value="DI">D</option>
</select>
</FormGroup>
</FormGroup>
</Col>
</Row>
{/* <Row>
<Col lg="12">
<FormGroup>
<Label for="basicpill-address-input2">Address</Label>
<textarea id="basicpill-address-input2" className="form-control" rows="2"></textarea>
</FormGroup>
</Col>
</Row> */}
</Form>
</TabPane>
<TabPane tabId={2}>
<div className="row justify-content-center">
<Col lg="6">
<div className="text-center">
<div className="mb-4">
<i className="mdi mdi-check-circle-outline text-success display-4"></i>
</div>
<div>
<h5>Confirm Detail</h5>
<p className="text-muted">If several languages coalesce, the grammar of the resulting</p>
</div>
</div>
</Col>
</div>
<div className="mt-4 text-right">
<Link to="#" className="btn btn-success">
완료
</Link>
</div>
</TabPane>
</TabContent>
<ul className="pager wizard twitter-bs-wizard-pager-link">
<li className={this.state.activeTabProgress === 1 ? "previous disabled" : "previous"}><Link to="#" onClick={() => { this.toggleTabProgress(this.state.activeTabProgress - 1); }}>이전</Link></li>
<li className={this.state.activeTabProgress === 2 ? "next disabled" : "next"}><Link to="#" onClick={() => { this.toggleTabProgress(this.state.activeTabProgress + 1); }}>다음</Link></li>
</ul>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #6
| Source File: Appadd.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
const options = [
{ value: "TO", label: "Touchscreen" },
{ value: "CF", label: "Call Function" },
{ value: "NO", label: "Notifications" },
{ value: "FI", label: "Fitness" },
{ value: "OU", label: "Outdoor" },
]
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="앱 추가" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col lg="12">
<Card>
<CardBody>
<h4 className="card-title mb-4">앱 추가</h4>
<div id="progrss-wizard" className="twitter-bs-wizard">
<ul className="twitter-bs-wizard-nav nav-justified nav nav-pills">
<NavItem>
<NavLink className={classnames({ active: this.state.activeTabProgress === 1 })} onClick={() => { this.toggleTabProgress(1); }} >
<span className="step-number">01</span>
<span className="step-title">앱 선택</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: this.state.activeTabProgress === 2 })} onClick={() => { this.toggleTabProgress(2); }} >
<span className="step-number">02</span>
<span className="step-title">기본 정보</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: this.state.activeTabProgress === 3 })} onClick={() => { this.toggleTabProgress(3); }} >
<span className="step-number">03</span>
<span className="step-title">컴포넌트</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: this.state.activeTabProgress === 4 })} onClick={() => { this.toggleTabProgress(4); }} >
<span className="step-number">04</span>
<span className="step-title">인터넷 접근</span>
</NavLink>
</NavItem>
</ul>
<div id="bar" className="mt-4">
<Progress color="success" striped animated value={this.state.progressValue} />
</div>
<TabContent activeTab={this.state.activeTabProgress} className="twitter-bs-wizard-tab-content">
<TabPane tabId={1}>
<Form>
{/* <Row> */}
{/* <Col lg="6"> */}
<FormGroup>
<AppTable />
</FormGroup>
{/* </Col> */}
{/* </Row> */}
</Form>
</TabPane>
<TabPane tabId={2}>
<div>
<Form>
<Row>
<Col lg="12">
<FormGroup>
<Label for="basicpill-pancard-input18">엑세스 타입</Label>
<select className="custom-select">
<option defaultValue>Virtual IP: 클러스터의 내부 IP를 통해 서비스에 엑세스 합니다</option>
<option value="AE">A</option>
<option value="VI">B</option>
<option value="MC">C</option>
<option value="DI">D</option>
</select>
</FormGroup>
</Col>
{/* <Col lg="6">
<FormGroup>
<Label for="basicpill-vatno-input19">VAT/TIN No.</Label>
<Input type="text" className="form-control" id="basicpill-vatno-input19" />
</FormGroup>
</Col> */}
</Row>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-cstno-input20">CST No.</Label>
<select className="custom-select">
<option defaultValue>키</option>
<option value="AE">A</option>
<option value="VI">B</option>
<option value="MC">C</option>
<option value="DI">D</option>
</select>
</FormGroup>
</Col>
{/*
<Col lg="6">
<FormGroup>
<select className="custom-select">
<option defaultValue>값</option>
<option value="AE">A</option>
<option value="VI">B</option>
<option value="MC">C</option>
<option value="DI">D</option>
</select>
</FormGroup>
</Col> */}
</Row>
<Row>
<Col lg="12">
<FormGroup>
<Label for="basicpill-companyuin-input22">Company UIN</Label>
<Input type="text" className="form-control" id="basicpill-companyuin-input22" />
</FormGroup>
</Col>
{/* <Col lg="6">
<FormGroup>
<Label for="basicpill-declaration-input23">Declaration</Label>
<Input type="text" className="form-control" id="basicpill-Declaration-input23" />
</FormGroup>
</Col> */}
</Row>
</Form>
</div>
</TabPane>
<TabPane tabId={3}>
<div>
<Form>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-namecard-input24">Name on Card</Label>
<Input type="text" className="form-control" id="basicpill-namecard-input24" />
</FormGroup>
</Col>
<Col lg="6">
<FormGroup>
<Label>Credit Card Type</Label>
<select className="custom-select">
<option defaultValue>Select Card Type</option>
<option value="AE">American Express</option>
<option value="VI">Visa</option>
<option value="MC">MasterCard</option>
<option value="DI">Discover</option>
</select>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-cardno-input25">Credit Card Number</Label>
<Input type="text" className="form-control" id="basicpill-cardno-input25" />
</FormGroup>
</Col>
<Col lg="6">
<FormGroup>
<Label for="basicpill-card-verification-input26">Card Verification Number</Label>
<Input type="text" className="form-control" id="basicpill-card-verification-input26" />
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-expiration-input27">Expiration Date</Label>
<Input type="text" className="form-control" id="basicpill-expiration-input27" />
</FormGroup>
</Col>
</Row>
</Form>
</div>
</TabPane>
<TabPane tabId={4}>
<div className="row justify-content-center">
<Col lg="6">
<div className="text-center">
<div className="mb-4">
<i className="mdi mdi-check-circle-outline text-success display-4"></i>
</div>
<div>
<h5>Confirm Detail</h5>
<p className="text-muted">If several languages coalesce, the grammar of the resulting</p>
</div>
</div>
</Col>
</div>
<div className="mt-4 text-right">
<Link to="#" className="btn btn-success">
완료
</Link>
</div>
</TabPane>
</TabContent>
<ul className="pager wizard twitter-bs-wizard-pager-link">
<li className={this.state.activeTabProgress === 1 ? "previous disabled" : "previous"}><Link to="#" onClick={() => { this.toggleTabProgress(this.state.activeTabProgress - 1); }}>이전</Link></li>
<li className={this.state.activeTabProgress === 4 ? "next disabled" : "next"}><Link to="#" onClick={() => { this.toggleTabProgress(this.state.activeTabProgress + 1); }}>다음</Link></li>
</ul>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #7
| Source File: Appdetail.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
const { params } = this.props.match;
// <tr>
// <td>클러스터</td>
// <td>
// cluster1
// </td>
// </tr>
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="App Detail" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col lg={4}>
<Card className="checkout-order-summary">
<CardBody>
{/* <div className="p-3 bg-light mb-4"> */}
<h5 className="text-dark font-weight-bold">{params.name} </h5>
<Card>
</Card>
<Row>
<div>
<Link
onClick={() =>
this.setState({ isModal: !this.state.modal })
}
to="#"
className="popup-form btn btn-primary"
>
정보수정
</Link>
</div>
<Modal
size="xl"
isOpen={this.state.isModal}
centered={true}
toggle={() =>
this.setState({ isModal: !this.state.isModal })
}
>
<ModalHeader
toggle={() =>
this.setState({ isModal: !this.state.isModal })
}
>
Form
</ModalHeader>
<ModalBody>
<Form>
<Row>
<Col lg={4}>
<FormGroup>
<Label htmlFor="name">Name</Label>
<Input
type="text"
className="form-control"
id="name"
placeholder="Enter Name"
required
/>
</FormGroup>
</Col>
<Col lg={4}>
<FormGroup>
<Label htmlFor="email">Email</Label>
<Input
type="email"
className="form-control"
id="email"
placeholder="Enter Email"
required
/>
</FormGroup>
</Col>
<Col lg={4}>
<FormGroup>
<Label htmlFor="password">Password</Label>
<Input
type="text"
className="form-control"
id="password"
placeholder="Enter Password"
required
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg={12}>
<FormGroup>
<Label htmlFor="subject">Subject</Label>
<textarea
className="form-control"
id="subject"
rows="3"
></textarea>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg={12}>
<div className="text-right">
<Button
type="submit"
color="primary"
>
Submit
</Button>
</div>
</Col>
</Row>
</Form>
</ModalBody>
</Modal>
<Col sm={3}>
{/* 정보 수정 */}
{/* 더보기 */}
<Dropdown
isOpen={this.state.singlebtn}
toggle={() =>
this.setState({ singlebtn: !this.state.singlebtn })
}
>
<DropdownToggle color="primary" caret>
더보기{" "}
<i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>서비스 수정</DropdownItem>
<DropdownItem>접근 수정</DropdownItem>
<DropdownItem>수정(YAML)</DropdownItem>
<DropdownItem>삭제</DropdownItem>
</DropdownMenu>
</Dropdown>
</Col>
{/* <h4 className="card-title">Popup with form</h4> */}
</Row>
{/* </div> */}
<div className="table-responsive">
<Table responsive className="mb-0">
<thead>
<tr>
<th style={{ width: "100%" }}>상세정보</th>
{/* <th>Examples</th> */}
</tr>
</thead>
<tbody>
<tr>
<td>클러스터</td>
<td>
cluster1
</td>
</tr>
<tr>
<td>프로젝트</td>
<td>
test
</td>
</tr>
<tr>
<td>상태</td>
<td>
Running
</td>
</tr>
<tr>
<td>앱</td>
<td>
redis
</td>
</tr>
<tr>
<td>
버전
</td>
<td>
14.6.1
</td>
</tr>
<tr>
<td>
생성일
</td>
<td>
@@@@
</td>
</tr>
<tr>
<td>
업데이트일
</td>
<td>
@@@@
</td>
</tr>
<tr>
<td>
생성자
</td>
<td>
yby654
</td>
</tr>
</tbody>
</Table>
</div>
</CardBody>
</Card>
</Col>
<Col lg={8}>
<Card>
<CardBody>
{/* <h4 className="card-title">Justify Tabs</h4> */}
{/* <p className="card-title-desc">
Use the tab JavaScript plugin—include it individually or through the compiled{" "} <code className="highlighter-rouge">bootstrap.js</code> file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus.
</p> */}
<Nav pills className="navtab-bg nav-justified">
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "5"
})}
onClick={() => {
this.toggle1("5");
}}
>
리소스 상태
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "8"
})}
onClick={() => {
this.toggle1("8");
}}
>
앱 Configurations
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={this.state.activeTab1}>
<TabPane tabId="5" className="p-3">
<Row>
<Col sm="12">
<CardText>
<div className="table-responsive">
{/* <Table className=" table-centered mb-0 table-nowrap"> */}
<Table hover className=" mb-0 table-centered table-nowrap">
<thead>
<tr>
<th className="border-top-0" style={{ width: "110px" }} scope="col">서비스</th>
</tr>
</thead>
<tbody>
<tr>
<div class="div-content-detail">
<div class="div-content-detail-0">
<div className="avatar-xs">
<div className="avatar-title rounded-circle bg-light">
img
</div>
</div>
</div>
<div class="div-content-detail-1">
<div>
<div class="div-content-text-1"><a>redis-7qgzmk-headless</a></div>
<div class="div-contetn-text-2"><a>Headless</a></div>
</div>
</div>
<div class="div-content-detail-2">
<div>
<div class="div-content-text-1">Off</div>
<div class="div-content-text-2">Application Governance</div>
</div>
</div>
<div class="div-content-detail-2">
<div>
<div class="div-content-text-1">None</div>
<div class="div-content-text-2">ClusterIP</div>
</div>
</div>
</div>
</tr>
</tbody>
</Table>
</div>
<div className="table-responsive">
<Table hover className=" mb-0 table-centered table-nowrap">
<thead>
<tr>
<th className="border-top-0" style={{ width: "110px" }} scope="col">디플로이먼트</th>
</tr>
</thead>
<tbody>
<tr>
<div class="div-content-detail">
<div class="div-content-detail-0">
<div className="avatar-xs">
<div className="avatar-title rounded-circle bg-light">
img
</div>
</div>
</div>
<div class="div-content-detail-1">
<div>
<div class="div-content-text-1"><a>redis-7qgzmk-master</a></div>
<div class="div-contetn-text-2"><a>Updated at 21 hours ago</a></div>
</div>
</div>
<div class="div-content-detail-2">
<div>
<div class="div-content-text-1">Running (1/1)</div>
<div class="div-content-text-2">Status</div>
</div>
</div>
<div class="div-content-detail-2">
<div>
<div class="div-content-text-1">v1.0.0</div>
<div class="div-content-text-2">Version</div>
</div>
</div>
</div>
</tr>
</tbody>
</Table>
</div>
</CardText>
</Col>
</Row>
</TabPane>
<TabPane tabId="6" className="p-3">
<Row>
<Col sm="12">
<CardText>
</CardText>
</Col>
</Row>
</TabPane>
<TabPane tabId="7" className="p-3">
<Row>
<Col sm="12">
<CardText>
</CardText>
</Col>
</Row>
</TabPane>
<TabPane tabId="8" className="p-3">
<Row>
<Col sm="12">
<div className="table-responsive" style>
<AceEditor
placeholder="Placeholder Text"
mode="javascript"
theme="monokai"
name="blah2"
onLoad={this.onLoad}
onChange={this.onChange}
fontSize={14}
showPrintMargin={true}
showGutter={true}
highlightActiveLine={true}
value={`function onLoad(editor) {
console.log("seohwa yeonguwonnim babo melong~~~~~~~");
}`}
setOptions={{
enableBasicAutocompletion: false,
enableLiveAutocompletion: false,
enableSnippets: false,
showLineNumbers: true,
tabSize: 3,
}} />
</div>
</Col>
</Row>
</TabPane>
</TabContent>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #8
| Source File: Apptable.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Row>
<Col xl={12}>
<Nav pills className="navtab-bg nav-justified">
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "5"
})}
onClick={() => {
this.toggle1("5");
}}
>
App Store
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "6"
})}
onClick={() => {
this.toggle1("6");
}}
>
App Template
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "7"
})}
onClick={() => {
this.toggle1("7");
}}
>
App Repository
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={this.state.activeTab1}>
<TabPane tabId="5" className="p-3">
<Row>
<Col sm="12">
<LatestTransactions />
</Col>
</Row>
</TabPane>
<TabPane tabId="6" className="p-3">
<Row>
<Col sm="12">
<LatestTransactions />
</Col>
</Row>
</TabPane>
<TabPane tabId="7" className="p-3">
<Row>
<Col sm="12">
<LatestTransactions />
</Col>
</Row>
</TabPane>
</TabContent>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #9
| Source File: CronjobDetail.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
// console.log(this.props);
const apiList = this.state.apiList;
const { params } = this.props.match;
console.log(this.state.apiList, "jobdetail");
let status = "";
let apitoData = [];
let dataFromApi = apiList.map((list) => {
console.log(list, "list");
if (list.spec.suspend == false) {
status = "READY"
} else {
status = "NOR READY"
}
return {
name: list.metadata.name,
namespace: list.metadata.namespace,
uid: list.metadata.uid,
schedule: list.spec.schedule,
successfulJobsHistoryLimit: list.spec.successfulJobsHistoryLimit,
failedJobsHistoryLimit: list.spec.failedJobsHistoryLimit,
status: status,
backoffLimit: list.spec.backoffLimit,
completions: list.spec.completions,
parallelism: list.spec.parallelism,
// restartCount: list.status.containerStatuses[0].restartCount,
qosClass: list.status.qosClass,
creationTimestamp: list.metadata.creationTimestamp
};
});
apitoData = dataFromApi;
const joblist = this.state.joblist;
const eventlist = this.state.eventlist;
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="CronJOB Detail" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col lg={4}>
<Card className="checkout-order-summary">
<CardBody>
{/* <div className="p-3 bg-light mb-4"> */}
<h5 className="text-dark font-weight-bold">
{params.name}
</h5>
<Card></Card>
<Row>
{/* 정보 수정 */}
<div>
<Link onClick={() => this.setState({ isModal: !this.state.modal })} to="#" className="popup-form btn btn-primary" >정보 수정</Link>
</div>
<Col sm={3}>
<Modal
size="xl"
isOpen={this.state.isModal}
centered={true}
toggle={() =>
this.setState({ isModal: !this.state.isModal })
}
>
<ModalHeader
toggle={() =>
this.setState({ isModal: !this.state.isModal })
}
>
정보수정
</ModalHeader>
<ModalBody>
<Form>
<Row>
<Col lg={6}>
<FormGroup>
<Label htmlFor="name">이름</Label>
<Input
type="text"
className="form-control"
id="name"
placeholder={params.name}
disabled
required
/>
</FormGroup>
</Col>
<Col lg={6}>
<FormGroup>
<Label htmlFor="email">Alias</Label>
<Input
type="email"
className="form-control"
id="email"
placeholder="Enter Alias"
required
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg={12}>
<FormGroup>
<Label htmlFor="subject">Description</Label>
<textarea
className="form-control"
id="subject"
rows="3"
></textarea>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg={12}>
<div className="text-right">
<Button
type="submit"
color="primary"
>
Update
</Button>
</div>
</Col>
</Row>
</Form>
</ModalBody>
</Modal>
{/* 더보기 */}
<Dropdown
isOpen={this.state.singlebtn}
toggle={() =>
this.setState({ singlebtn: !this.state.singlebtn })
}
>
<DropdownToggle color="primary" caret> 더보기 <i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Rerun</DropdownItem>
<DropdownItem href="/view_yaml">View YAML</DropdownItem>
<DropdownItem>삭제</DropdownItem>
</DropdownMenu>
</Dropdown>
</Col>
{/* <h4 className="card-title">Popup with form</h4> */}
</Row>
{/* </div> */}
<div className="table-responsive">
<Table responsive className="mb-0">
<div>
<thead>
<tr>
<th style={{ width: "100%" }} className="border-top-0">상세정보</th>
</tr>
</thead>
</div>
{apitoData.map((test) => (
<tbody key={test.name}>
<tr>
<td>클러스터</td>
<td>{test.name}</td>
</tr>
<tr>
<td>프로젝트</td>
<td>{test.namespace}</td>
</tr>
<tr>
<td>Status</td>
<td>{test.status}</td>
</tr>
<tr>
<td>schedule</td>
<td>{test.schedule}</td>
</tr>
<tr>
<td>successfulJobsHistoryLimit</td>
<td>{test.successfulJobsHistoryLimit}</td>
</tr>
<tr>
<td>failedJobsHistoryLimit</td>
<td>{test.failedJobsHistoryLimit}</td>
</tr>
<tr>
<td>Created</td>
<td>{test.creationTimestamp}</td>
</tr>
<tr>
<td>Creator</td>
<td></td>
</tr>
</tbody>
))}
</Table>
</div>
</CardBody>
</Card>
</Col>
<Col lg={8}>
<Card>
<CardBody>
{/* <h4 className="card-title">Justify Tabs</h4> */}
{/* <p className="card-title-desc">
Use the tab JavaScript plugin—include it individually or through the compiled{" "} <code className="highlighter-rouge">bootstrap.js</code> file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus.
</p> */}
<Nav pills className="navtab-bg nav-justified">
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "5",
})}
onClick={() => {
this.toggle1("5");
}}
>
job Records
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "6",
})}
onClick={() => {
this.toggle1("6");
}}
>
메타 데이터
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "7",
})}
onClick={() => {
this.toggle1("7");
}}
>
이벤트
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={this.state.activeTab1}>
<TabPane tabId="5" className="p-3">
<Row>
<Col sm="12">
<div >
<CronjobResource joblist={joblist} />
</div>
</Col>
</Row>
</TabPane>
<TabPane tabId="6" className="p-3">
<Row>
<Col sm="12">
<JobDetailMeta apiList={apiList} />
</Col>
</Row>
</TabPane>
<TabPane tabId="7" className="p-3">
<Row>
<Col sm="12">
<div className="table-responsive">
<Event eventlist={eventlist} />
</div>
</Col>
</Row>
</TabPane>
</TabContent>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #10
| Source File: DeploymentAdd.js From gedge-platform with Apache License 2.0 | 4 votes |
|
DeploymentAdd2 = observer((props) => {
const { callApiStore } = store;
const [breadcrumbItems, setBreadcrumbItems] = React.useState([
{ title: "디플로이먼트", link: "#" },
{ title: "디플로이먼트 추가", link: "#" },
]);
const [name, setName] = React.useState("")
const [description, setDescription] = React.useState("")
const [workspace, setWorkspace] = React.useState("")
const [project, setProject] = React.useState("")
const [cluster, setCluster] = React.useState("")
const [containerImage, setContainerImage] = React.useState("")
const [containerName, setContainerName] = React.useState("")
const [containerType, setContainerType] = React.useState("")
const [cpuReserv, setCpuReservation] = React.useState("0m")
const [cpuLimit, setCpuLimit] = React.useState("0m")
const [memoryReserv, setMemoryReservation] = React.useState("0Mi")
const [memoryLimit, setMemoryLimit] = React.useState("0Mi")
const [activeTabProgress, setActiveTabProgress] = React.useState(1)
const [progressValue, setProgressValue] = React.useState(33)
//replicas 쪽 변수
const [empty_val, setEmpty_val] = React.useState(0)
const [toggleSwitch, setToggleSwitch] = React.useState(true)
const [content, setContent] = React.useState("")
const [loading, setLoading] = React.useState(false)
const template = {
"apiVersion": "apps/v1",
"kind": "Deployment",
"metadata": {
"labels": {
"app": name
},
"name": name,
"namespace:": project
},
"spec": {
"replicas": empty_val,
"selector": {
"matchLabels": {
"app": name
}
},
"template": {
"metadata": {
"labels": {
"app": name
}
},
"spec": {
"containers": [
{
"image": containerImage,
"name": containerName
}
],
"resources":
{
"limits": {
"memory": memoryLimit,
"cpu": cpuLimit
},
"requests": {
"memory": memoryReserv,
"cpu": cpuReserv
}
}
}
}
}
}
const toggleTabProgress = (tab) => {
if (activeTabProgress !== tab) {
if (tab >= 1 && tab <= 3) {
setActiveTabProgress(tab)
if (tab === 1) { setProgressValue(30) }
if (tab === 2) { setProgressValue(60) }
if (tab === 3) { setProgressValue(100) }
}
}
}
const buttonClick = () => {
// console.log(`workspace name : ${workspace}\nAlias : ${alias} \ntest: ${description} \ntest: ${empty_val} \ntest: ${toggleSwitch}`);
// const YAML = require('yamljs');
// const nativeObject = YAML.parse(content);
// console.log(nativeObject.apiVersion)
const body =
{
workspaceName: workspace,
workspaceDescription: description,
selectCluster: cluster,
cluster: "cluster1",
clusterName: "cluster1",
// workspaceOwner: "innogrid",
// workspaceCreator: "innogrid"
}
callApiStore.postDeployment("deployments", body)
setLoading(true)
setTimeout(function () {
setLoading(false)
props.history.push("/workload/deployment")
}, 500);
}
const formChange = (value, kind) => {
if (kind === "workspace") {
setWorkspace(value)
setProject("")
setCluster("")
}
if (kind === "project") {
setProject(value)
setCluster("")
}
if (kind === "cluster") {
setCluster(value)
}
}
useEffect(() => {
// console.log(template)
if (activeTabProgress === 3) {
const YAML = require('json-to-pretty-yaml');
setContent(YAML.stringify(template))
}
}, [activeTabProgress]);
useEffect(() => {
if (content !== "") {
if (activeTabProgress !== 3) {
const YAML = require('yamljs');
const nativeObject = YAML.parse(content);
if (nativeObject?.metadata.name !== null) {
setName(nativeObject?.metadata.name)
}
else {
setName("")
}
if (nativeObject?.spec.replicas !== null) {
setEmpty_val(nativeObject?.spec.replicas)
}
else {
setEmpty_val(0)
}
if (nativeObject?.spec.template.spec.containers[0].image !== null) {
setContainerImage(nativeObject?.spec.template.spec.containers[0].image)
}
else {
setContainerImage("")
}
if (nativeObject?.spec.template.spec.containers[0].name !== null) {
setContainerName(nativeObject?.spec.template.spec.containers[0].name)
}
else {
setContainerName("")
}
if (nativeObject?.spec.template.spec.resources.limits.cpu !== null) {
setCpuLimit(nativeObject?.spec.template.spec.resources.limits.cpu)
}
else {
setCpuLimit("")
}
if (nativeObject?.spec.template.spec.resources.requests.cpu !== null) {
setCpuReservation(nativeObject?.spec.template.spec.resources.requests.cpu)
}
else {
setCpuReservation("")
}
if (nativeObject?.spec.template.spec.resources.limits.memory !== null) {
setMemoryLimit(nativeObject?.spec.template.spec.resources.limits.memory)
}
else {
setMemoryLimit("")
}
if (nativeObject?.spec.template.spec.resources.requests.memory !== null) {
setMemoryReservation(nativeObject?.spec.template.spec.resources.requests.memory)
}
else {
setMemoryReservation("")
}
}
}
}, [content, activeTabProgress]);
useEffect(() => {
callApiStore.getDBProejct("userprojects")
}, []);
const data = callApiStore.userprojects
let workspaceList = data.map((item) => {
return (
item.workspaceName
)
})
workspaceList = Array.from(new Set(workspaceList));
const projectList = data.map((item) => {
if (item.workspaceName == workspace) {
return (
item.projectName
)
}
})
let clusterList = []
data.map((item) => {
if (item.projectName == project) {
const arr = item.selectCluster.split(",")
clusterList = arr
}
})
// console.log(name, description, workspace, project, cluster, empty_val, containerImage, containerName, containerType)
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="디플로이먼트" breadcrumbItems={breadcrumbItems} />
<Row>
<Col lg="12">
<Card>
<CardBody>
<div id="progrss-wizard" className="twitter-bs-wizard">
<ul className="twitter-bs-wizard-nav nav-justified nav nav-pills">
<NavItem>
<NavLink className={classnames({ active: activeTabProgress === 1 })} onClick={() => { toggleTabProgress(1); }} >
<span className="step-number">01</span>
<span className="step-title">기본 정보</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: activeTabProgress === 2 })} onClick={() => { toggleTabProgress(2); }} >
<span className="step-number">02</span>
<span className="step-title">컨테이너 이미지</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: activeTabProgress === 3 })} onClick={() => { toggleTabProgress(3); }} >
<span className="step-number">03</span>
<span className="step-title">Cluster 생성</span>
</NavLink>
</NavItem>
</ul>
<div id="bar" className="mt-4">
<Progress color="success" striped animated value={progressValue} />
</div>
<TabContent activeTab={activeTabProgress} className="twitter-bs-wizard-tab-content">
<TabPane tabId={1}>
<div>
<Form>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-namecard-input24"> Name</Label>
<Input type="text" className="form-control" id="basicpill-namecard-input24" name="Name" value={name} required onChange={(e) => setName(e.target.value)} />
</FormGroup>
<FormGroup>
<Label> Description</Label>
<Input
type="textarea"
id="textarea"
name="description"
value={description}
onChange={(e) => setDescription(e.target.value)}
maxLength="225"
rows="3"
placeholder="This description has a limit of 225 chars."
/>
</FormGroup>
<FormGroup>
<Label> Istio</Label>
<div className="custom-control custom-switch mb-2" dir="ltr">
<Input type="checkbox" className="custom-control-input" id="customSwitch1" defaultChecked />
<Label className="custom-control-label" htmlFor="customSwitch1" name="toggleSwitch" onClick={(e) => { setToggleSwitch(!toggleSwitch) }}>Use istio</Label>
</div>
</FormGroup>
</Col>
<Col lg="6">
<FormGroup>
<Label for="basicpill-namecard-input24">Workspaces</Label>
<Dropdown
placeholder="Select an Workspace"
className="selectWorkspace"
options={workspaceList}
value={workspace}
onChange={(value) => { formChange(value.value, "workspace") }
}
/>
</FormGroup>
<FormGroup>
<Label for="basicpill-namecard-input24">Project</Label>
{workspace !== "" ?
<Dropdown
placeholder="Select an Project"
className="selectProject"
options={projectList}
value={project}
onChange={(value) =>
formChange(value.value, "project")
}
/>
:
<Dropdown
placeholder="Select an Project"
className="selectProject my-disabled"
value=""
disabled />}
</FormGroup>
<FormGroup>
<Label for="basicpill-namecard-input24">Cluster</Label>
{project !== "" ?
<Dropdown
placeholder="Select an Cluster"
className="selectCluster "
options={clusterList}
value={cluster}
onChange={(value) =>
formChange(value.value, "cluster")
}
/>
:
<Dropdown
placeholder="Select an Cluster"
className="selectCluster my-disabled"
value=""
disabled />}
</FormGroup>
</Col>
</Row>
</Form>
</div>
</TabPane>
<TabPane tabId={2}>
<div>
<Form>
<Row>
<Col lg="2">
<FormGroup>
<Label>Pod Replicas</Label>
<InputGroup>
<InputGroupAddon addonType="prepend"
onClick={() =>
setEmpty_val(empty_val - 1)
}
>
<Button type="button" color="primary">
<i className="mdi mdi-minus"></i>
</Button>
</InputGroupAddon>
<Input
type="number"
className="form-control"
value={empty_val}
placeholder="number"
readOnly
/>
<InputGroupAddon addonType="prepend" name="empty_val"
onClick={() =>
setEmpty_val(empty_val + 1)
}
>
<Button type="button" color="primary">
<i className="mdi mdi-plus"></i>
</Button>
</InputGroupAddon>
</InputGroup>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="3">
<Label> Container </Label>
</Col>
</Row>
<Row>
<Col lg="4">
<FormGroup>
<Label for="basicpill-namecard-input24">Container Image</Label>
<Input type="text" className="form-control" id="basicpill-namecard-input24"
placeholder="e.g. nginx:lastest" name="containerImage" value={containerImage} onChange={(e) => setContainerImage(e.target.value)} />
</FormGroup>
</Col>
<Col lg="4">
<FormGroup>
<Label for="basicpill-namecard-input24">Container Name</Label>
<Input type="text" className="form-control" id="basicpill-namecard-input24"
placeholder="e.g. container-1" name="containerName" value={containerName} onChange={(e) => setContainerName(e.target.value)} />
</FormGroup>
</Col>
<Col lg="4">
<FormGroup>
<Label for="basicpill-namecard-input24">Container Type</Label>
<select className="custom-select" name="containerType" value={containerType} onChange={(e) => setContainerType(e.target.value)}>
<option defaultValue>Select Container Type</option>
<option value="worker">Worker Container</option>
<option value="init">Init Container</option>
</select>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="3">
<Label> Resources </Label>
</Col>
</Row>
<Row>
<Col lg="3">
<FormGroup>
<Label for="basicpill-namecard-input24">CPU Reservation</Label>
<Input type="text" className="form-control" id="basicpill-namecard-input24" placeholder="e.g. 1000" name="cpuReservation" value={cpuReserv} onChange={(e) => setCpuReservation(e.target.value)} />
</FormGroup>
</Col>
<Col lg="3">
<FormGroup>
<Label for="basicpill-namecard-input24">CPU Limit</Label>
<Input type="text" className="form-control" id="basicpill-namecard-input24" placeholder="e.g. 1000" name="cpuLimit" value={cpuLimit} onChange={(e) => setCpuLimit(e.target.value)} />
</FormGroup>
</Col>
<Col lg="3">
<FormGroup>
<Label for="basicpill-namecard-input24">Memory Reservation</Label>
<Input type="text" className="form-control" id="basicpill-namecard-input24" placeholder="e.g. 128" name="memoryReservation" value={memoryReserv} onChange={(e) => setMemoryReservation(e.target.value)} />
</FormGroup>
</Col>
<Col lg="3">
<FormGroup>
<Label for="basicpill-namecard-input24">Memory Limit</Label>
<Input type="text" className="form-control" id="basicpill-namecard-input24" placeholder="e.g. 128" name="memoryLimit" value={memoryLimit} onChange={(e) => setMemoryLimit(e.target.value)} />
</FormGroup>
</Col>
</Row>
</Form>
</div>
</TabPane>
<TabPane tabId={3}>
<div className="row justify-content-center">
<Col lg="6">
<div className="text-center">
<div className="mb-4">
<i className="mdi mdi-check-circle-outline text-success display-4"></i>
</div>
<div>
<h5>Confirm Detail</h5>
<p className="text-muted">Shows the set yaml file.</p>
</div>
</div>
<Col sm="12">
<div className="table-responsive">
<AceEditor
placeholder="Placeholder Text"
mode="javascript"
theme="monokai"
name="editor"
width="100%"
// onLoad={this.onLoad}
// onChange={this.onChange}
onChange={value => {
setContent(value);
}}
fontSize={14}
showPrintMargin={true}
showGutter={true}
highlightActiveLine={true}
// value={`function onLoad(editor) {
// console.log("hello world");
// }`}
value={content}
setOptions={{
enableBasicAutocompletion: false,
enableLiveAutocompletion: false,
enableSnippets: false,
showLineNumbers: true,
tabSize: 4,
}}
/>
</div>
</Col>
<br />
<div className="row justify-content-center" onClick={() => buttonClick()}>
생성 요청
<Backdrop
sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
open={loading}
>
<CircularProgress color="inherit" />
</Backdrop>
{/* <FormGroup> */}
{/* <Link to="/workload/deployment" className="btn btn-success" onClick={(e) => appChange()}> */}
{/* <Button className="btn btn-success" onClick={() => buttonClick()}>
생성 요청
</Button>
<Backdrop
sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
open={loading}
>
<CircularProgress color="inherit" />
</Backdrop>
</FormGroup> */}
</div>
</Col>
</div>
</TabPane>
</TabContent>
<ul className="pager wizard twitter-bs-wizard-pager-link">
<li className={activeTabProgress === 1 ? "previous disabled" : "previous"}><Link to="#" onClick={() => { toggleTabProgress(activeTabProgress - 1); }}>이전</Link></li>
<li className={activeTabProgress === 3 ? "next disabled" : "next"}><Link to="#" onClick={() => { toggleTabProgress(activeTabProgress + 1); }}>다음</Link></li>
</ul>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment >
)
})
Example #11
| Source File: Deploymentdetail.js From gedge-platform with Apache License 2.0 | 4 votes |
|
Deploymentdetail = observer((props) => {
const classes = useStyles();
const { match } = props
const query = queryString.parse(props.location.search);
const { callApiStore } = store;
const [breadcrumbItems, setBreadcrumbItems] = React.useState([
{ title: "워크로드", link: "#" },
{ title: "디플로이먼트", link: "#" },
{ title: "상세 보기", link: "#" },
]);
const [activeTabTop, setActiveTabTop] = React.useState("1")
const [activeTabCont, setActiveTabCont] = React.useState("1")
// const [activeTab2, setActiveTab2] = React.useState("9")
// const [activeTab3, setActiveTab3] = React.useState("13")
// const [customActiveTab, setCustomActiveTab] = React.useState("1")
// const [activeTabJustify, setActiveTabJustify] = React.useState("5")
const [col1, setCol1] = React.useState(false)
// const [col2, setCol2] = React.useState(false)
// const [col3, setCol3] = React.useState(false)
// const [col5, setCol5] = React.useState(true)
// const [projectType, setProjectType] = React.useState()
useEffect(() => {
callApiStore.getWorkloadDetail("deployments", match.params.name, query.workspace, query.project, query.cluster);
return () => {
}
}, [])
const toggleTop = (tab) => {
if (activeTabTop !== tab) {
setActiveTabTop(tab)
}
}
const toggleCont = (tab) => {
if (activeTabCont !== tab) {
setActiveTabCont(tab)
}
}
const t_col1 = () => {
setCol1(!col1)
}
let workloadData = []
let workloadInvolveData = []
console.log(workloadData, "workloadData")
if (callApiStore.deploymentDetail == undefined || workloadData.length < 0) {
workloadData = []
} else {
workloadData = callApiStore.deploymentDetail
}
if (callApiStore.deploymentDetailInvolve == undefined || workloadInvolveData.length < 0) {
workloadInvolveData = []
} else {
workloadInvolveData = callApiStore.deploymentDetailInvolve
}
console.log(workloadData, "workloadData")
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="디플로이먼트" breadcrumbItems={breadcrumbItems} />
<Row>
<Col lg={4}>
<Card className="checkout-order-summary">
<CardBody>
{/* <div className="p-3 bg-light mb-4"> */}
<h5 className="text-dark font-weight-bold">{match.params.name}</h5>
<Row>
<Col sm={3}>
</Col>
</Row>
<div className="table-responsive">
<Table responsive className="mb-0">
{/* Overview */}
{workloadData.length != 0 ? <DeploymentDetail_detail workloadData={workloadData} /> : <></>}
{/* <DeploymentDetail_detail workloadData={workloadData} /> */}
</Table>
</div>
</CardBody>
</Card>
</Col>
<Col lg={8}>
<Card>
<CardBody>
<Nav pills className="navtab-bg nav-justified">
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: activeTabTop === "1"
})}
onClick={() => {
toggleTop("1");
}}
>
리소스 상태
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: activeTabTop === "2"
})}
onClick={() => {
toggleTop("2");
}}
>
메타데이터
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: activeTabTop === "3"
})}
onClick={() => {
toggleTop("3");
}}
>
환경변수
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: activeTabTop === "4"
})}
onClick={() => {
toggleTop("4");
}}
>
이벤트
</NavLink>
</NavItem>
</Nav>
{/* 리소스 상태 탭 내용 */}
<TabContent activeTab={activeTabTop}>
<TabPane tabId="1" className="p-3">
{workloadData.length != 0 ? <DeploymentReplicaStatus workloadData={workloadData} /> : <></>}
{workloadInvolveData.length != 0 ? <DeploymentPorts workloadInvolveData={workloadInvolveData} query={query} /> : <></>}
{workloadInvolveData.length != 0 ? <DeploymentPodState workloadInvolveData={workloadInvolveData} query={query} /> : <></>}
{/* <CoreDetailResource resource={resource} /> */}
</TabPane>
</TabContent>
<TabContent activeTab={activeTabTop}>
<TabPane tabId="2" className="p-3">
{workloadData.length != 0 ? <DeploymentMeta workloadData={workloadData} /> : <></>}
{/* <CoreDetailNode clusterWorkerData={clusterWorkerData} /> */}
</TabPane>
</TabContent>
<TabContent activeTab={activeTabTop}>
<TabPane tabId="3" className="p-3">
{/* <CoreDetailMeta labels={labels} annotations={annotations} /> */}
</TabPane>
</TabContent>
<TabContent activeTab={activeTabTop}>
<TabPane tabId="4" className="p-3">
{/* <CoreDetailEvent events={events} /> */}
{workloadData.length != 0 ? <DeploymentEvent events={workloadData.events} /> : <></>}
</TabPane>
</TabContent>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
)
})
Example #12
| Source File: Job.js From gedge-platform with Apache License 2.0 | 4 votes |
|
// document.getElementsByClassName("pagination")[0].classList.add("pagination-rounded");
// this.loadApilist().then(res => {
// // console.log(res);
// this.setState({
// infoList: res
// })
// })
// this.loadApilist2().then(res => {
// // console.log(res);
// this.setState({
// infoList2: res
// })
// })
// }
// loadApilist() {
// let test = ""
// test = getAPI('jobs', 'GET')
// console.log(api.getAPI('jobs', 'GET'), "jobs")
// return test;
// }
// loadApilist2() {
// let test = ""
// test = getAPI('cronjobs', 'GET')
// console.log(api.getAPI('cronjobs', 'GET'), "jobs")
// return test;
// }
render() {
const params = this.state.params;
console.log(params)
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="잡" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col lg={12}>
<Card>
<CardBody className="pt-0">
<Nav tabs className="nav-tabs-custom mb-4">
</Nav>
<div>
<Link to="/workload/job/add" onClick={() => this.setState({ modal_static: true, isAlertOpen: false })} className="btn btn-success mb-2"><i className="mdi mdi-plus mr-2"></i> 추가</Link>
<WorkspaceFilter params={params} />
<ProjectFilter params={params} />
</div>
<div>
<Nav pills className="pricing-nav-tabs">
<NavItem>
<NavLink className={classnames({ active: this.state.activeTab === '1' })} onClick={() => { this.toggleTab('1'); }}>
잡
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: this.state.activeTab === '2' })} onClick={() => { this.toggleTab('2'); }}>
크론잡
</NavLink>
</NavItem>
</Nav>
</div>
<TabContent activeTab={this.state.activeTab} className="pt-5">
<TabPane tabId="1">
<JobTable params={params} />
</TabPane>
<TabPane tabId="2">
<CronjobTable params={params} />
</TabPane>
</TabContent>
{/* <JobTable params={params} /> */}
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #13
| Source File: JobAdd.js From gedge-platform with Apache License 2.0 | 4 votes |
|
JobAdd = observer((props) => {
const { callApiStore } = store;
const [workspaceName, setWorkspaceName] = React.useState("")
// const [duplicate, setduplicate] = React.useState()
const [alias, setAlias] = React.useState("")
const [description, setDescription] = React.useState("")
const [clusterSelect, setClusterSelect] = React.useState("")
const [administrator, setAdministrator] = React.useState("")
const [breadcrumbItems, setBreadcrumbItems] = React.useState([
{ title: "서비스", link: "#" },
{ title: "서비스 추가", link: "#" },
]);
const [activeTabProgress, setActiveTabProgress] = React.useState(1)
const [progressValue, setProgressValue] = React.useState(33)
const [loading, setLoading] = React.useState(false)
const toggleTabProgress = (tab) => {
if (activeTabProgress !== tab) {
if (tab >= 1 && tab <= 3) {
setActiveTabProgress(tab)
if (tab === 1) { setProgressValue(30) }
if (tab === 2) { setProgressValue(60) }
if (tab === 3) { setProgressValue(100) }
}
}
}
const duplicateCheck = () => {
console.log(`workspace name : ${workspaceName}`)
callApiStore.workspaceDuplicationCheck(workspaceName)
console.log(callApiStore.duplicateCheck, "callApiStore.duplicateCheck")
// console.log(duplicate,"duplicate")
// setduplicate(callApiStore.duplicateCheck)
// if(callApiStore.duplicateCheck == 0){
// setduplicate(false)
// }else if(callApiStore.duplicateCheck > 0){
// setduplicate(true)
// }
// console.log(duplicate,"change duplicate")
}
useEffect(() => {
setLoading(false)
return () => {
};
}, [props.history]);
const buttonClick = () => {
const body =
{
workspaceName: "1234",
workspaceDescription: "innogrid",
selectCluster: "cluster1",
workspaceOwner: "innogrid",
workspaceCreator: "innogrid"
}
// callApiStore.postWorkspaceList("workspaces", body)
setLoading(true)
// callApiStore.posteCode = 200
setTimeout(function () {
props.history.push("/workload/job")
}, 500);
}
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="Service 추가" breadcrumbItems={breadcrumbItems} />
<Row>
<Col lg="12">
<Card>
<CardBody>
<div id="progrss-wizard" className="twitter-bs-wizard">
<ul className="twitter-bs-wizard-nav nav-justified nav nav-pills">
<NavItem>
<NavLink className={classnames({ active: activeTabProgress === 1 })} onClick={() => { toggleTabProgress(1) }} >
<span className="step-number">01</span>
<span className="step-title">기본 정보</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: activeTabProgress === 2 })} onClick={() => { toggleTabProgress(2) }} >
<span className="step-number">02</span>
<span className="step-title">Select Cluster</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: activeTabProgress === 3 })} onClick={() => { toggleTabProgress(3) }} >
<span className="step-number">03</span>
<span className="step-title">Workspace 생성</span>
</NavLink>
</NavItem>
</ul>
<div id="bar" className="mt-4">
<Progress color="success" striped animated value={progressValue} />
</div>
<TabContent activeTab={activeTabProgress} className="twitter-bs-wizard-tab-content">
<TabPane tabId={1}>
<div>
<Form>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-namecard-input24">Workspace Name</Label>
{/* {this.props.loginError && this.props.loginError ? <Alert color="danger">{this.props.loginError}</Alert> : null} */}
<Input type="text" className="form-control" id="basicpill-namecard-input24" name="workspaceName" value={workspaceName} onChange={(e) => (setWorkspaceName(e.target.value))} />
</FormGroup>
{callApiStore.duplicateCheck > 0 ? <Alert color="danger">중복입니다</Alert> : <></>}
<Link to="#" className="btn btn-success" onClick={duplicateCheck}> 중복체크</Link>
</Col>
<Col lg="6">
<FormGroup>
<Label for="basicpill-namecard-input24">Alias</Label>
<Input type="text" className="form-control" id="basicpill-namecard-input24" name="alias" onChange={(e) => setAlias(e.target.value)} />
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="12">
<FormGroup>
<Label for="basicpill-pancard-input18">Administrator</Label>
<select className="custom-select" name="administrator" onChange={(e) => setAdministrator(e.target.value)}>
<option defaultValue>Select Administrator</option>
<option value="user">user</option>
<option value="admin">admin</option>
<option value="multi_test">multi_test</option>
</select>
</FormGroup>
</Col>
<Col lg="12">
<Label>Workspace Description</Label>
<Input
type="textarea"
id="textarea"
name="description"
onChange={(e) => setDescription(e.target.value)}
maxLength="225"
rows="3"
placeholder="This description has a limit of 225 chars."
/>
</Col>
</Row>
</Form>
</div>
</TabPane>
<TabPane tabId={2}>
<div>
<Form>
<Row>
<Col lg="12">
<FormGroup>
<Label for="basicpill-pancard-input18">Clusters</Label>
<select className="custom-select" name="clusterSelect" onChange={(e) => setClusterSelect(e.target.value)}>
<option defaultValue>Select Cluster</option>
<option value="cluster1">cluster1</option>
<option value="cluster2">cluster2</option>
<option value="cluster3">cluster3</option>
</select>
</FormGroup>
</Col>
</Row>
</Form>
</div>
</TabPane>
<TabPane tabId={3}>
<div className="row justify-content-center">
<Col lg="6">
<div className="text-center">
<div className="mb-4">
<i className="mdi mdi-check-circle-outline text-success display-4"></i>
</div>
<div>
<h5>Confirm Detail</h5>
<p className="text-muted">Cluster Name :{workspaceName}</p>
</div>
</div>
</Col>
</div>
<div className="mt-4 text-right" onClick={buttonClick}>
<Backdrop
sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
open={loading}
>
<CircularProgress color="inherit" />
</Backdrop>
{/* <Link to="/workspace" className="btn btn-success" onClick={buttonClick}>
완료
</Link> */}
완료
</div>
</TabPane>
</TabContent>
<ul className="pager wizard twitter-bs-wizard-pager-link">
<li className={activeTabProgress === 1 ? "previous disabled" : "previous"} onClick={() => { toggleTabProgress(activeTabProgress - 1); }}> 이전</li>
<li className={activeTabProgress === 3 ? "next disabled" : "next"} onClick={() => { toggleTabProgress(activeTabProgress + 1); }}>다음</li>
</ul>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
})
Example #14
| Source File: JobDetail.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
// console.log(this.props);
const apiList = this.state.apiList;
const apilistinfo = this.state.apilistinfo;
const involveData = this.state.involveData;
const { params } = this.props.match;
console.log(this.state.apiList, "jobdetail");
console.log(this.state.apiListtest, "jobdetailcteawrah");
let status = "";
let apitoData = [];
let dataFromApi = apiList.map((list) => {
console.log(list, "list");
console.log(list.status.conditions[0].status == "True")
if (list.status.conditions[0].status == "True") {
status = "running"
} else {
status = "not runnig"
}
return {
name: list.metadata.name,
namespace: list.metadata.namespace,
uid: list.metadata.uid,
status: status,
backoffLimit: list.spec.backoffLimit,
completions: list.spec.completions,
parallelism: list.spec.parallelism,
// restartCount: list.status.containerStatuses[0].restartCount,
qosClass: list.status.qosClass,
creationTimestamp: list.metadata.creationTimestamp
};
});
apitoData = dataFromApi;
const apiPodlist = this.state.apiPodlist;
const eventlist = this.state.eventlist;
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="JOB Detail" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col lg={4}>
<Card className="checkout-order-summary">
<CardBody>
{/* <div className="p-3 bg-light mb-4"> */}
<h5 className="text-dark font-weight-bold">
{params.name}
</h5>
<Card></Card>
<Row>
{/* 정보 수정 */}
<div>
<Link onClick={() => this.setState({ isModal: !this.state.modal })} to="#" className="popup-form btn btn-primary" >정보 수정</Link>
</div>
<Col sm={3}>
<Modal
size="xl"
isOpen={this.state.isModal}
centered={true}
toggle={() =>
this.setState({ isModal: !this.state.isModal })
}
>
<ModalHeader
toggle={() =>
this.setState({ isModal: !this.state.isModal })
}
>
Form
</ModalHeader>
<ModalBody>
<Form>
<Row>
<Col lg={6}>
<FormGroup>
<Label htmlFor="name">Name</Label>
<Input
type="text"
className="form-control"
id="name"
placeholder="Enter Name"
required
/>
</FormGroup>
</Col>
<Col lg={6}>
<FormGroup>
<Label htmlFor="email">Alias</Label>
<Input
type="email"
className="form-control"
id="email"
placeholder="Enter Email"
required
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg={12}>
<FormGroup>
<Label htmlFor="subject">Description</Label>
<textarea
className="form-control"
id="subject"
rows="3"
></textarea>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg={12}>
<div className="text-right">
<Button
type="submit"
color="primary"
>
Update
</Button>
</div>
</Col>
</Row>
</Form>
</ModalBody>
</Modal>
{/* 더보기 */}
<Dropdown
isOpen={this.state.singlebtn}
toggle={() =>
this.setState({ singlebtn: !this.state.singlebtn })
}
>
<DropdownToggle color="primary" caret> 더보기 <i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem onClick={this.toggle_modal} toggle={false}>Rerun</DropdownItem>
<DropdownItem>View YAML</DropdownItem>
<DropdownItem>삭제</DropdownItem>
</DropdownMenu>
</Dropdown>
</Col>
{/* <h4 className="card-title">Popup with form</h4> */}
</Row>
{/* </div> */}
<div className="table-responsive">
<JobDetail_detail apilistinfo={apilistinfo} />
</div>
</CardBody>
</Card>
</Col>
<Col lg={8}>
<Card>
<CardBody>
<Nav pills className="navtab-bg nav-justified">
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "5",
})}
onClick={() => {
this.toggle1("5");
}}
>
리소스 상태
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "6",
})}
onClick={() => {
this.toggle1("6");
}}
>
메타 데이터
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "7",
})}
onClick={() => {
this.toggle1("7");
}}
>
이벤트
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={this.state.activeTab1}>
<TabPane tabId="5" className="p-3">
<Row>
<Col sm="12">
{/* <JobDetailResource apilistinfo={apilistinfo} involveData={involveData} /> */}
{Object.keys(apilistinfo).length !== 0 ? <JobDetailResource apilistinfo={apilistinfo} involveData={involveData} /> : <></>}
</Col>
</Row>
</TabPane>
<TabPane tabId="6" className="p-3">
<Row>
<Col sm="12">
{/* <PoddetailMeta apilistinfo={apilistinfo} /> */}
{Object.keys(apilistinfo).length !== 0 ? <PoddetailMeta apilistinfo={apilistinfo} /> : <></>}
</Col>
</Row>
</TabPane>
<TabPane tabId="7" className="p-3">
<Row>
<Col sm="12">
<div className="table-responsive">
{/* <Event apilistinfo={apilistinfo} /> */}
{Object.keys(apilistinfo).length !== 0 ? <Event apilistinfo={apilistinfo} /> : <></>}
{/* <Event eventlist={eventlist} /> */}
</div>
</Col>
</Row>
</TabPane>
</TabContent>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #15
| Source File: ProjectDetail.js From gedge-platform with Apache License 2.0 | 4 votes |
|
ProjectDetail = observer((props) => {
const classes = useStyles();
const { match } = props
// console.log(match)
const { callApiStore } = store;
const query = queryString.parse(props.location.search);
const [breadcrumbItems, setBreadcrumbItems] = React.useState([
{ title: "프로젝트", link: "#" },
{ title: "프로젝트", link: "#" },
{ title: "상세 보기", link: "#" },
]);
const [breadcrumbTitle, setBreadcrumbTitle] = React.useState("프로젝트");
const projectTitle = () => {
if (match.params.projectType == "user") {
setBreadcrumbItems([
{ title: "프로젝트", link: "#" },
{ title: "사용자 프로젝트", link: "#" },
{ title: "상세 보기", link: "#" },
])
setBreadcrumbTitle("사용자 프로젝트")
} else {
setBreadcrumbItems([
{ title: "프로젝트", link: "#" },
{ title: "시스템 프로젝트", link: "#" },
{ title: "상세 보기", link: "#" },
])
setBreadcrumbTitle("시스템 프로젝트")
}
}
const [activeTabTop, setActiveTabTop] = React.useState("1")
const [activeTabCont, setActiveTabCont] = React.useState("1")
// const [activeTab2, setActiveTab2] = React.useState("9")
// const [activeTab3, setActiveTab3] = React.useState("13")
// const [customActiveTab, setCustomActiveTab] = React.useState("1")
// const [activeTabJustify, setActiveTabJustify] = React.useState("5")
const [col1, setCol1] = React.useState(false)
// const [col2, setCol2] = React.useState(false)
// const [col3, setCol3] = React.useState(false)
// const [col5, setCol5] = React.useState(true)
// const [projectType, setProjectType] = React.useState()
console.log(query)
useEffect(() => {
projectTitle()
if (query != undefined && match != undefined) {
const clusters = query.cluster.split(",");
console.log(clusters)
callApiStore.getProjectDetail("projects", match.params.name, clusters, query.workspace);
}
return () => {
}
}, [])
const toggleTop = (tab) => {
if (activeTabTop !== tab) {
setActiveTabTop(tab)
}
}
const toggleCont = (tab) => {
if (activeTabCont !== tab) {
setActiveTabCont(tab)
}
}
const t_col1 = () => {
setCol1(!col1)
}
let projectData = []
if (callApiStore.projectDetail == undefined || projectData.length > 0) {
projectData = []
} else {
projectData = callApiStore.projectDetail
}
console.log(projectData)
console.log(projectData.length, "length")
// let deployment_count = 0;
// let pod_count = 0;
// let service_count = 0;
// let cronjob_count = 0;
// let job_count = 0;
// let volume_count = 0;
// let annotations = []
// let clusterName = ""
// let created_at = ""
// let events = ""
// let labels = []
// let projectCreator = ""
// let projectDescription = ""
// let projectName = ""
// let projectNum = ""
// let projectOwner = ""
// let projectType = ""
// let resource = ""
// let selectCluster = ""
// let status = ""
// let workspaceName = ""
// if (clusterMasterData.length != 0) {
// ipAddr = clusterMasterData[0].ipAddr
// clusterEndpoint = clusterMasterData[0].clusterEndpoint
// clusterCreator = clusterMasterData[0].clusterCreator
// gpu = clusterMasterData[0].gpu
// kubeVersion = clusterMasterData[0].kubeVersion
// status = clusterMasterData[0].stauts
// network = clusterMasterData[0].network
// os = clusterMasterData[0].os
// kernel = clusterMasterData[0].kernel
// created_at = clusterMasterData[0].created_at
// events = clusterMasterData[0].events
// labels = clusterMasterData[0].lables
// annotations = clusterMasterData[0].annotations
// resource = clusterMasterData[0].resource
// }
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title={breadcrumbTitle} breadcrumbItems={breadcrumbItems} />
<Row>
<Col lg={4}>
<Card className="checkout-order-summary" >
<CardBody>
{/* <div className="p-3 bg-light mb-4"> */}
<h5 className="text-dark font-weight-bold" style={{ width: "100%" }}>{match.params.name}</h5>
{/* <Row>
<Col sm={3}>
// button
</Col>
</Row> */}
<div className="table-responsive">
{projectData.length != 0 ? <ProjectDetail_detail projectData={projectData} query={query} /> : <></>}
</div>
</CardBody>
</Card>
</Col>
<Col lg={8}>
<Card>
<CardBody>
<Nav pills className="navtab-bg nav-justified">
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: activeTabTop === "1"
})}
onClick={() => {
toggleTop("1");
}}
>
리소스 상태
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: activeTabTop === "2"
})}
onClick={() => {
toggleTop("2");
}}
>
모니터링
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: activeTabTop === "3"
})}
onClick={() => {
toggleTop("3");
}}
>
메타데이터
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: activeTabTop === "4"
})}
onClick={() => {
toggleTop("4");
}}
>
이벤트
</NavLink>
</NavItem>
</Nav>
{/* 리소스 상태 탭 내용 */}
<TabContent activeTab={activeTabTop}>
<TabPane tabId="1" className="p-3">
{projectData.length != 0 ? <ProjectResource projectData={projectData} query={query} /> : <></>}
</TabPane>
</TabContent>
<TabContent activeTab={activeTabTop}>
<TabPane tabId="2" className="p-3">
{/* <CoreDetailNode clusterWorkerData={clusterWorkerData} /> */}
</TabPane>
</TabContent>
<TabContent activeTab={activeTabTop}>
<TabPane tabId="3" className="p-3">
{projectData.length != 0 ? <ProjectMetadata projectData={projectData} query={query} /> : <></>}
{/* <ProjectMetadata projectData={projectData} /> */}
</TabPane>
</TabContent>
<TabContent activeTab={activeTabTop}>
<TabPane tabId="4" className="p-3">
{projectData.length != 0 ? <ProjectEvent events={[]} query={query} /> : <></>}
{/* <CoreDetailEvent events={events} /> */}
</TabPane>
</TabContent>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
)
})
Example #16
| Source File: PodDetail back.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
// console.log(this.props);
const apiList = this.state.apiList;
const { params } = this.props.match;
console.log(this.state.apiList, "poddetail");
let labels = []
let apitoData = [];
let annotations = [];
let restartCount = [];
// if (apiList.length > 0) {
// let dataFromApi = apiList.map((list, key) => {
// console.log(list, "list");
// if (list.metadata.annotations == undefined) {
// annotations = "-"
// } else {
// annotations = list.metadata.annotations;
// }
// if (list.metadata.labels == undefined) {
// labels = "-"
// } else {
// labels = list.metadata.labels;
// }
// if (list.status.containerStatuses == undefined) {
// restartCount = "-";
// } else {
// restartCount = list.status.containerStatuses[0].restartCount
// }
// return {
// name: list.metadata.name,
// namespace: list.metadata.namespace,
// labels: labels,
// phase: list.status.phase,
// podIP: list.status.podIP,
// nodeName: list.spec.nodeName,
// hostIP: list.status.hostIP,
// restartCount: restartCount,
// qosClass: list.status.qosClass,
// creationTimestamp: list.metadata.creationTimestamp,
// annotations: annotations
// };
// });
// apitoData = dataFromApi;
// console.log(apitoData)
// }
// const eventlist = this.state.eventlist;
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="POD Detail" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col lg={4}>
<Card className="checkout-order-summary">
<CardBody>
<h5 className="text-dark font-weight-bold">
{params.name}
</h5>
<Card></Card>
<Row>
<div>
<Link onClick={() => this.setState({ isModal: !this.state.modal })} to="#" className="popup-form btn btn-primary" >VIEW YAML</Link>
</div>
<Modal size="xl" isOpen={this.state.isModal} centered={true} toggle={() => this.setState({ isModal: !this.state.isModal })}>
<ModalHeader toggle={() => this.setState({ isModal: !this.state.isModal })} > YAML </ModalHeader>
<ModalBody>
<TabPane tabId="8" className="p-3">
<Row>
<Col sm="12">
<CardText>
<AceEditor
placeholder="Placeholder Text"
mode="javascript"
theme="xcode"
name="blah2"
onLoad={this.onLoad}
onChange={this.onChange}
fontSize={14}
showPrintMargin={true}
showGutter={true}
highlightActiveLine={true}
value={`function onLoad(editor) {
console.log("seohwa yeonguwonnim babo melong~~~~~~~");
}`}
setOptions={{
enableBasicAutocompletion: false,
enableLiveAutocompletion: false,
enableSnippets: false,
showLineNumbers: true,
tabSize: 2,
}} />
</CardText>
</Col>
</Row>
</TabPane>
</ModalBody>
</Modal>
<Col sm={3}>
{/* 더보기 */}
<Dropdown isOpen={this.state.singlebtn} toggle={() =>
this.setState({ singlebtn: !this.state.singlebtn })
} >
<DropdownToggle color="primary" caret>
더보기 <i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>삭제</DropdownItem>
</DropdownMenu>
</Dropdown>
</Col>
{/* <h4 className="card-title">Popup with form</h4> */}
</Row>
{/* </div> */}
<div className="table-responsive">
<Table responsive className="mb-0">
<thead>
<tr>
<th style={{ width: "100%" }} className="border-top-0">상세정보</th>
</tr>
</thead>
<tbody>
<tr></tr>
</tbody>
</Table>
<Table responsive className="mb-0">
<thead>
<tr>
</tr>
</thead>
{apitoData.map((test) => (
<tbody key={test.name}>
<tr>
<td >클러스터</td>
<td>{params.cluster}</td>
</tr>
<tr>
<td>프로젝트</td>
<td>{test.namespace}</td>
</tr>
<tr>
<td>APP</td>
<td>수정 필요</td>
</tr>
<tr>
<td>Status</td>
<td>{test.phase}</td>
</tr>
<tr>
<td>Pod IP</td>
<td>{test.podIP}</td>
</tr>
<tr>
<td>Node Name</td>
<td>{test.nodeName}</td>
</tr>
<tr>
<td>Node IP</td>
<td>{test.hostIP}</td>
</tr>
<tr>
<td>Restart Count</td>
<td>{test.restartCount}</td>
</tr>
<tr>
<td>Qos Class</td>
<td>{test.qosClass}</td>
</tr>
<tr>
<td>Created</td>
<td>{test.creationTimestamp}</td>
</tr>
</tbody>
))}
</Table>
</div>
</CardBody>
</Card>
</Col>
<Col lg={8}>
<Card>
<CardBody>
<Nav pills className="navtab-bg nav-justified">
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "5",
})}
onClick={() => {
this.toggle1("5");
}}
>
리소스 상태
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "6",
})}
onClick={() => {
this.toggle1("6");
}}
>
메타 데이터
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "7",
})}
onClick={() => {
this.toggle1("7");
}}
>
상태
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "8",
})}
onClick={() => {
this.toggle1("8");
}}
>
모니터링
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "9",
})}
onClick={() => {
this.toggle1("9");
}}
>
이벤트
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={this.state.activeTab1}>
<TabPane tabId="5" className="p-3">
<Row>
<Col sm="12">
<div className="table-responsive">
<PodDetailResorce apiList={apiList} />
</div>
</Col>
</Row>
</TabPane>
<TabPane tabId="6" className="p-3">
<Row>
<Col sm="12">
<PoddetailMeta apiList={apiList} />
</Col>
</Row>
</TabPane>
<TabPane tabId="7" className="p-3">
<Row>
<Col sm="12">
<PodStatus apiList={apiList} />
</Col>
</Row>
</TabPane>
<TabPane tabId="8" className="p-3">
<Row>
<Col sm="12">
<div className="table-responsive">
</div>
</Col>
</Row>
</TabPane>
<TabPane tabId="9" className="p-3">
<Row>
<Col sm="12">
<div className="table-responsive">
</div>
</Col>
</Row>
</TabPane>
</TabContent>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #17
| Source File: PodDetail.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
const apilistinfo = this.state.apilistinfo;
const involveData = this.state.involveData;
const { params } = this.props.match;
let labels = []
let apitoData = [];
let annotations = [];
let restartCount = [];
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="POD Detail" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col lg={4}>
<Card className="checkout-order-summary">
<CardBody>
<h5 className="text-dark font-weight-bold">
{params.name}
</h5>
<Card></Card>
<Row>
<div>
<Link onClick={() => this.setState({ isModal: !this.state.modal })} to="#" className="popup-form btn btn-primary" >VIEW YAML</Link>
</div>
<Modal size="xl" isOpen={this.state.isModal} centered={true} toggle={() => this.setState({ isModal: !this.state.isModal })}>
<ModalHeader toggle={() => this.setState({ isModal: !this.state.isModal })} > YAML </ModalHeader>
<ModalBody>
<TabPane tabId="8" className="p-3">
<Row>
<Col sm="12">
<CardText>
<AceEditor
placeholder="Placeholder Text"
mode="javascript"
theme="xcode"
name="blah2"
onLoad={this.onLoad}
onChange={this.onChange}
fontSize={14}
showPrintMargin={true}
showGutter={true}
highlightActiveLine={true}
value={`function onLoad(editor) {
console.log("seohwa yeonguwonnim babo melong~~~~~~~");
}`}
setOptions={{
enableBasicAutocompletion: false,
enableLiveAutocompletion: false,
enableSnippets: false,
showLineNumbers: true,
tabSize: 2,
}} />
</CardText>
</Col>
</Row>
</TabPane>
</ModalBody>
</Modal>
<Col sm={3}>
{/* 더보기 */}
<Dropdown isOpen={this.state.singlebtn} toggle={() =>
this.setState({ singlebtn: !this.state.singlebtn })
} >
<DropdownToggle color="primary" caret>
더보기 <i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>삭제</DropdownItem>
</DropdownMenu>
</Dropdown>
</Col>
{/* <h4 className="card-title">Popup with form</h4> */}
</Row>
{/* </div> */}
<div className="table-responsive">
<PodDetail_detail apilistinfo={apilistinfo} />
</div>
</CardBody>
</Card>
</Col>
<Col lg={8}>
<Card>
<CardBody>
<Nav pills className="navtab-bg nav-justified">
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "5",
})}
onClick={() => {
this.toggle1("5");
}}
>
리소스 상태
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "6",
})}
onClick={() => {
this.toggle1("6");
}}
>
메타 데이터
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "7",
})}
onClick={() => {
this.toggle1("7");
}}
>
상태
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "8",
})}
onClick={() => {
this.toggle1("8");
}}
>
모니터링
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "9",
})}
onClick={() => {
this.toggle1("9");
}}
>
이벤트
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={this.state.activeTab1}>
<TabPane tabId="5" className="p-3">
<Row>
<Col sm="12">
<div className="table-responsive">
{/* <PodDetailResorce apilistinfo={apilistinfo} /> */}
{Object.keys(apilistinfo).length !== 0 ? <PodDetailResorce apilistinfo={apilistinfo} /> : <></>}
</div>
</Col>
</Row>
</TabPane>
<TabPane tabId="6" className="p-3">
<Row>
<Col sm="12">
{/* <PoddetailMeta apilistinfo={apilistinfo} /> */}
{Object.keys(apilistinfo).length !== 0 ? <PoddetailMeta apilistinfo={apilistinfo} /> : <></>}
</Col>
</Row>
</TabPane>
<TabPane tabId="7" className="p-3">
<Row>
<Col sm="12">
{/* <PodStatus apilistinfo={apilistinfo} /> */}
{Object.keys(apilistinfo).length !== 0 ? <PodStatus apilistinfo={apilistinfo} /> : <></>}
</Col>
</Row>
</TabPane>
<TabPane tabId="8" className="p-3">
<Row>
<Col sm="12">
{Object.keys(apilistinfo).length !== 0 ? <PodDetailMonit apilistinfo={apilistinfo} /> : <></>}
{/* <PodDetailMonit apilistinfo={apilistinfo} /> */}
</Col>
</Row>
</TabPane>
<TabPane tabId="9" className="p-3">
<Row>
<Col sm="12">
<div className="table-responsive">
{/* <PodDetailEvent apilistinfo={apilistinfo} /> */}
{Object.keys(apilistinfo).length !== 0 ? <PodDetailEvent apilistinfo={apilistinfo} /> : <></>}
</div>
</Col>
</Row>
</TabPane>
</TabContent>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #18
| Source File: ServiceAdd.js From gedge-platform with Apache License 2.0 | 4 votes |
|
ServiceAdd = observer((props) => {
const { callApiStore } = store;
const [workspaceName, setWorkspaceName] = React.useState("")
// const [duplicate, setduplicate] = React.useState()
const [alias, setAlias] = React.useState("")
const [description, setDescription] = React.useState("")
const [clusterSelect, setClusterSelect] = React.useState("")
const [administrator, setAdministrator] = React.useState("")
const [breadcrumbItems, setBreadcrumbItems] = React.useState([
{ title: "서비스", link: "#" },
{ title: "서비스 추가", link: "#" },
]);
const [activeTabProgress, setActiveTabProgress] = React.useState(1)
const [progressValue, setProgressValue] = React.useState(33)
const [loading, setLoading] = React.useState(false)
const toggleTabProgress = (tab) => {
if (activeTabProgress !== tab) {
if (tab >= 1 && tab <= 3) {
setActiveTabProgress(tab)
if (tab === 1) { setProgressValue(30) }
if (tab === 2) { setProgressValue(60) }
if (tab === 3) { setProgressValue(100) }
}
}
}
const duplicateCheck = () => {
console.log(`workspace name : ${workspaceName}`)
callApiStore.workspaceDuplicationCheck(workspaceName)
console.log(callApiStore.duplicateCheck, "callApiStore.duplicateCheck")
// console.log(duplicate,"duplicate")
// setduplicate(callApiStore.duplicateCheck)
// if(callApiStore.duplicateCheck == 0){
// setduplicate(false)
// }else if(callApiStore.duplicateCheck > 0){
// setduplicate(true)
// }
// console.log(duplicate,"change duplicate")
}
useEffect(() => {
setLoading(false)
return () => {
};
}, [props.history]);
const buttonClick = () => {
const body =
{
workspaceName: "1234",
workspaceDescription: "innogrid",
selectCluster: "cluster1",
workspaceOwner: "innogrid",
workspaceCreator: "innogrid"
}
// callApiStore.postWorkspaceList("workspaces", body)
setLoading(true)
// callApiStore.posteCode = 200
setTimeout(function () {
props.history.push("/workload/service")
}, 500);
}
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="Service 추가" breadcrumbItems={breadcrumbItems} />
<Row>
<Col lg="12">
<Card>
<CardBody>
<div id="progrss-wizard" className="twitter-bs-wizard">
<ul className="twitter-bs-wizard-nav nav-justified nav nav-pills">
<NavItem>
<NavLink className={classnames({ active: activeTabProgress === 1 })} onClick={() => { toggleTabProgress(1) }} >
<span className="step-number">01</span>
<span className="step-title">기본 정보</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: activeTabProgress === 2 })} onClick={() => { toggleTabProgress(2) }} >
<span className="step-number">02</span>
<span className="step-title">Select Cluster</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: activeTabProgress === 3 })} onClick={() => { toggleTabProgress(3) }} >
<span className="step-number">03</span>
<span className="step-title">Workspace 생성</span>
</NavLink>
</NavItem>
</ul>
<div id="bar" className="mt-4">
<Progress color="success" striped animated value={progressValue} />
</div>
<TabContent activeTab={activeTabProgress} className="twitter-bs-wizard-tab-content">
<TabPane tabId={1}>
<div>
<Form>
<Row>
<Col lg="6">
<FormGroup>
<Label for="basicpill-namecard-input24">Workspace Name</Label>
{/* {this.props.loginError && this.props.loginError ? <Alert color="danger">{this.props.loginError}</Alert> : null} */}
<Input type="text" className="form-control" id="basicpill-namecard-input24" name="workspaceName" value={workspaceName} onChange={(e) => (setWorkspaceName(e.target.value))} />
</FormGroup>
{callApiStore.duplicateCheck > 0 ? <Alert color="danger">중복입니다</Alert> : <></>}
<Link to="#" className="btn btn-success" onClick={duplicateCheck}> 중복체크</Link>
</Col>
<Col lg="6">
<FormGroup>
<Label for="basicpill-namecard-input24">Alias</Label>
<Input type="text" className="form-control" id="basicpill-namecard-input24" name="alias" onChange={(e) => setAlias(e.target.value)} />
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="12">
<FormGroup>
<Label for="basicpill-pancard-input18">Administrator</Label>
<select className="custom-select" name="administrator" onChange={(e) => setAdministrator(e.target.value)}>
<option defaultValue>Select Administrator</option>
<option value="user">user</option>
<option value="admin">admin</option>
<option value="multi_test">multi_test</option>
</select>
</FormGroup>
</Col>
<Col lg="12">
<Label>Workspace Description</Label>
<Input
type="textarea"
id="textarea"
name="description"
onChange={(e) => setDescription(e.target.value)}
maxLength="225"
rows="3"
placeholder="This description has a limit of 225 chars."
/>
</Col>
</Row>
</Form>
</div>
</TabPane>
<TabPane tabId={2}>
<div>
<Form>
<Row>
<Col lg="12">
<FormGroup>
<Label for="basicpill-pancard-input18">Clusters</Label>
<select className="custom-select" name="clusterSelect" onChange={(e) => setClusterSelect(e.target.value)}>
<option defaultValue>Select Cluster</option>
<option value="cluster1">cluster1</option>
<option value="cluster2">cluster2</option>
<option value="cluster3">cluster3</option>
</select>
</FormGroup>
</Col>
</Row>
</Form>
</div>
</TabPane>
<TabPane tabId={3}>
<div className="row justify-content-center">
<Col lg="6">
<div className="text-center">
<div className="mb-4">
<i className="mdi mdi-check-circle-outline text-success display-4"></i>
</div>
<div>
<h5>Confirm Detail</h5>
<p className="text-muted">Cluster Name :{workspaceName}</p>
</div>
</div>
</Col>
</div>
<div className="mt-4 text-right" onClick={buttonClick}>
<Backdrop
sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
open={loading}
>
<CircularProgress color="inherit" />
</Backdrop>
{/* <Link to="/workspace" className="btn btn-success" onClick={buttonClick}>
완료
</Link> */}
완료
</div>
</TabPane>
</TabContent>
<ul className="pager wizard twitter-bs-wizard-pager-link">
<li className={activeTabProgress === 1 ? "previous disabled" : "previous"} onClick={() => { toggleTabProgress(activeTabProgress - 1); }}> 이전</li>
<li className={activeTabProgress === 3 ? "next disabled" : "next"} onClick={() => { toggleTabProgress(activeTabProgress + 1); }}>다음</li>
</ul>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
})
Example #19
| Source File: Servicedetail.js From gedge-platform with Apache License 2.0 | 4 votes |
|
Servicedetail = observer((props) => {
const classes = useStyles();
const { match } = props
const query = queryString.parse(props.location.search);
// console.log(match)
// console.log(query)
const { callApiStore } = store;
const [breadcrumbItems, setBreadcrumbItems] = React.useState([
{ title: "워크로드", link: "#" },
{ title: "서비스", link: "#" },
{ title: "상세 보기", link: "#" },
]);
const [activeTabTop, setActiveTabTop] = React.useState("1")
const [activeTabCont, setActiveTabCont] = React.useState("1")
const [col1, setCol1] = React.useState(false)
useEffect(() => {
callApiStore.getWorkloadDetail("services", match.params.name, query.workspace, query.project, query.cluster);
//params = param + "/" + name + "?workspace=" + workspaceName + "&project=" + projectName + "&cluster=" + clusterName
//param, name, workspaceName, projectName, clusterName
return () => {
}
}, [])
const toggleTop = (tab) => {
if (activeTabTop !== tab) {
setActiveTabTop(tab)
}
}
const toggleCont = (tab) => {
if (activeTabCont !== tab) {
setActiveTabCont(tab)
}
}
const t_col1 = () => {
setCol1(!col1)
}
let serviceData = []
serviceData = callApiStore.serviceDetail
if (serviceData === undefined) {
serviceData = []
}
let serviceinvolvesData = []
serviceinvolvesData = callApiStore.serviceDetailInvolve
// console.log(serviceData, "serviceData")
if (serviceinvolvesData === undefined) {
serviceinvolvesData = []
}
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="서비스" breadcrumbItems={breadcrumbItems} />
<Row>
<Col lg={4}>
<Card className="checkout-order-summary">
<CardBody>
{/* <div className="p-3 bg-light mb-4"> */}
<h5 className="text-dark font-weight-bold">{match.params.name}</h5>
<Row>
<Col sm={3}>
</Col>
</Row>
<div className="table-responsive">
<Table responsive className="mb-0">
{/* Overview */}
{/* {apilistinfo.length != 0 ? <PodDetailMonit apilistinfo={apilistinfo} /> : <></>} */}
{serviceData.length != 0 ? <ServiceDetail_detail workloadData={serviceData} /> : <></>}
{/* <DeploymentDetail_detail workloadData={serviceData} /> */}
</Table>
</div>
</CardBody>
</Card>
</Col>
<Col lg={8}>
<Card>
<CardBody>
<Nav pills className="navtab-bg nav-justified">
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: activeTabTop === "1"
})}
onClick={() => {
toggleTop("1");
}}
>
리소스 상태
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: activeTabTop === "2"
})}
onClick={() => {
toggleTop("2");
}}
>
포트 정보
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: activeTabTop === "3"
})}
onClick={() => {
toggleTop("3");
}}
>
메타데이터
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: activeTabTop === "4"
})}
onClick={() => {
toggleTop("4");
}}
>
이벤트
</NavLink>
</NavItem>
</Nav>
{/* 리소스 상태 탭 내용 */}
<TabContent activeTab={activeTabTop}>
<TabPane tabId="1" className="p-3">
{/* <CoreDetailResource resource={resource} /> */}
{Object.keys(serviceData).length !== 0 ? <ServiceDetailResource resource={serviceinvolvesData} /> : <></>}
{/* {serviceData.length != 0 ? <ServiceDetailResource resource={serviceinvolvesData} /> : <></>} */}
</TabPane>
</TabContent>
<TabContent activeTab={activeTabTop}>
<TabPane tabId="2" className="p-3">
{/* <CoreDetailNode clusterWorkerData={clusterWorkerData} /> */}
{Object.keys(serviceData).length !== 0 ? <ServiceDetailPort port={serviceData.port} /> : <></>}
{/* {serviceData.length != 0 ? <ServiceDetailPort port={serviceData.port} /> : <></>} */}
</TabPane>
</TabContent>
<TabContent activeTab={activeTabTop}>
<TabPane tabId="3" className="p-3">
{/* <CoreDetailMeta labels={labels} annotations={annotations} /> */}
{Object.keys(serviceData).length !== 0 ? <ServiceDetailMeta selector={serviceData.selector} /> : <></>}
{/* {serviceData.length != 0 ? <ServiceDetailMeta selector={serviceData.selector} /> : <></>} */}
{/* <ServiceDetailMeta selector={serviceData.selector} /> */}
</TabPane>
</TabContent>
<TabContent activeTab={activeTabTop}>
<TabPane tabId="4" className="p-3">
{Object.keys(serviceData).length !== 0 ? <ServiceDetailEvent events={serviceData.events} /> : <></>}
{/* {serviceData.length != 0 ? <ServiceDetailEvent events={serviceData.events} /> : <></>} */}
{/* <ServiceDetailEvent events={events} /> */}
</TabPane>
</TabContent>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
})
Example #20
| Source File: index.js From gobench with Apache License 2.0 | 4 votes |
|
render() {
const { activeTab } = this.state
return (
<div>
<div className="row">
<div className="col-lg-6">
<h5 className="mb-4">
<strong>Custom Tabs</strong>
</h5>
<div className="mb-5">
<Nav tabs className="nav-tabs-line">
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => {
this.toggle('1')
}}
>
Active
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '2' })}
onClick={() => {
this.toggle('2')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '3' })}
onClick={() => {
this.toggle('3')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<div className="p-4 mt-4 border rounded">Tab 1 Contents</div>
</TabPane>
<TabPane tabId="2">
<div className="p-4 mt-4 border rounded">Tab 2 Contents</div>
</TabPane>
<TabPane tabId="3">
<div className="p-4 mt-4 border rounded">Tab 3 Contents</div>
</TabPane>
</TabContent>
</div>
</div>
<div className="col-lg-6">
<h5 className="mb-4">
<strong>No Bottom Border</strong>
</h5>
<div className="mb-5">
<Nav tabs className="nav-tabs-line nav-tabs-noborder">
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => {
this.toggle('1')
}}
>
Active
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '2' })}
onClick={() => {
this.toggle('2')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '3' })}
onClick={() => {
this.toggle('3')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<div className="p-4 mt-4 border rounded">Tab 1 Contents</div>
</TabPane>
<TabPane tabId="2">
<div className="p-4 mt-4 border rounded">Tab 2 Contents</div>
</TabPane>
<TabPane tabId="3">
<div className="p-4 mt-4 border rounded">Tab 3 Contents</div>
</TabPane>
</TabContent>
</div>
</div>
<div className="col-lg-6">
<h5 className="mb-4">
<strong>Custom Tabs Bold</strong>
</h5>
<div className="mb-5">
<Nav tabs className="nav-tabs-line nav-tabs-line-bold">
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => {
this.toggle('1')
}}
>
Active
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '2' })}
onClick={() => {
this.toggle('2')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '3' })}
onClick={() => {
this.toggle('3')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<div className="p-4 mt-4 border rounded">Tab 1 Contents</div>
</TabPane>
<TabPane tabId="2">
<div className="p-4 mt-4 border rounded">Tab 2 Contents</div>
</TabPane>
<TabPane tabId="3">
<div className="p-4 mt-4 border rounded">Tab 3 Contents</div>
</TabPane>
</TabContent>
</div>
</div>
<div className="col-lg-6">
<h5 className="mb-4">
<strong>Custom Tabs Bold with Icons</strong>
</h5>
<div className="mb-5">
<Nav tabs className="nav-tabs-line nav-tabs-line-bold">
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => {
this.toggle('1')
}}
>
<i className="fe fe-activity mr-1" />
Active
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '2' })}
onClick={() => {
this.toggle('2')
}}
>
<i className="fe fe-clock mr-1" />
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '3' })}
onClick={() => {
this.toggle('3')
}}
>
<i className="fe fe-trash mr-1" />
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>
<i className="fe fe-plus-circle" />
Disabled
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<div className="p-4 mt-4 border rounded">Tab 1 Contents</div>
</TabPane>
<TabPane tabId="2">
<div className="p-4 mt-4 border rounded">Tab 2 Contents</div>
</TabPane>
<TabPane tabId="3">
<div className="p-4 mt-4 border rounded">Tab 3 Contents</div>
</TabPane>
</TabContent>
</div>
</div>
<div className="col-lg-6">
<h5 className="mb-4">
<strong>Custom Tabs Bold with Dropdown</strong>
</h5>
<div className="mb-5">
<Nav tabs className="nav-tabs-line nav-tabs-line-bold">
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => {
this.toggle('1')
}}
>
Active
</NavLink>
</NavItem>
<UncontrolledDropdown nav>
<DropdownToggle nav caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '3' })}
onClick={() => {
this.toggle('3')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<div className="p-4 mt-4 border rounded">Tab 1 Contents</div>
</TabPane>
<TabPane tabId="2">
<div className="p-4 mt-4 border rounded">Tab 2 Contents</div>
</TabPane>
<TabPane tabId="3">
<div className="p-4 mt-4 border rounded">Tab 3 Contents</div>
</TabPane>
</TabContent>
</div>
</div>
<div className="col-lg-6">
<h5 className="mb-4">
<strong>Default Tabs</strong>
</h5>
<div className="mb-5">
<Nav tabs>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => {
this.toggle('1')
}}
>
Active
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '2' })}
onClick={() => {
this.toggle('2')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '3' })}
onClick={() => {
this.toggle('3')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<div className="p-4 mt-4 border rounded">Tab 1 Contents</div>
</TabPane>
<TabPane tabId="2">
<div className="p-4 mt-4 border rounded">Tab 2 Contents</div>
</TabPane>
<TabPane tabId="3">
<div className="p-4 mt-4 border rounded">Tab 3 Contents</div>
</TabPane>
</TabContent>
</div>
</div>
<div className="col-lg-6">
<h5 className="mb-4">
<strong>Default Pills</strong>
</h5>
<div className="mb-5">
<Nav pills>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => {
this.toggle('1')
}}
>
Active
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '2' })}
onClick={() => {
this.toggle('2')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '3' })}
onClick={() => {
this.toggle('3')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<div className="p-4 mt-4 border rounded">Tab 1 Contents</div>
</TabPane>
<TabPane tabId="2">
<div className="p-4 mt-4 border rounded">Tab 2 Contents</div>
</TabPane>
<TabPane tabId="3">
<div className="p-4 mt-4 border rounded">Tab 3 Contents</div>
</TabPane>
</TabContent>
</div>
</div>
<div className="col-lg-6">
<h5 className="mb-4">
<strong>Justified Pills</strong>
</h5>
<div className="mb-5">
<Nav pills justified>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => {
this.toggle('1')
}}
>
Active
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '2' })}
onClick={() => {
this.toggle('2')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '3' })}
onClick={() => {
this.toggle('3')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<div className="p-4 mt-4 border rounded">Tab 1 Contents</div>
</TabPane>
<TabPane tabId="2">
<div className="p-4 mt-4 border rounded">Tab 2 Contents</div>
</TabPane>
<TabPane tabId="3">
<div className="p-4 mt-4 border rounded">Tab 3 Contents</div>
</TabPane>
</TabContent>
</div>
</div>
<div className="col-lg-6">
<h5 className="mb-4">
<strong>Default Pills with Icons</strong>
</h5>
<div className="mb-5">
<Nav pills>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => {
this.toggle('1')
}}
>
<i className="fe fe-activity mr-1" />
Active
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '2' })}
onClick={() => {
this.toggle('2')
}}
>
<i className="fe fe-clock mr-1" />
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '3' })}
onClick={() => {
this.toggle('3')
}}
>
<i className="fe fe-trash mr-1" />
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>
<i className="fe fe-plus-circle" />
Disabled
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<div className="p-4 mt-4 border rounded">Tab 1 Contents</div>
</TabPane>
<TabPane tabId="2">
<div className="p-4 mt-4 border rounded">Tab 2 Contents</div>
</TabPane>
<TabPane tabId="3">
<div className="p-4 mt-4 border rounded">Tab 3 Contents</div>
</TabPane>
</TabContent>
</div>
</div>
<div className="col-lg-6">
<h5 className="mb-4">
<strong>Default Pills with Dropdown</strong>
</h5>
<div className="mb-5">
<Nav pills>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => {
this.toggle('1')
}}
>
Active
</NavLink>
</NavItem>
<UncontrolledDropdown nav>
<DropdownToggle nav caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '3' })}
onClick={() => {
this.toggle('3')
}}
>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<div className="p-4 mt-4 border rounded">Tab 1 Contents</div>
</TabPane>
<TabPane tabId="2">
<div className="p-4 mt-4 border rounded">Tab 2 Contents</div>
</TabPane>
<TabPane tabId="3">
<div className="p-4 mt-4 border rounded">Tab 3 Contents</div>
</TabPane>
</TabContent>
</div>
</div>
<div className="col-lg-12">
<h5 className="mb-4">
<strong>Vertical Pills</strong>
</h5>
<div className="mb-5">
<div className="row">
<div className="col-3">
<Nav pills vertical>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '1' })}
onClick={() => {
this.toggle('1')
}}
>
Home
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '2' })}
onClick={() => {
this.toggle('2')
}}
>
Profile
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === '3' })}
onClick={() => {
this.toggle('3')
}}
>
Messages
</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
</div>
<div className="col-9">
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industrys standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.
</TabPane>
<TabPane tabId="2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
When an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.
</TabPane>
<TabPane tabId="3">
Lorem Ipsum has been the industrys standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.
</TabPane>
</TabContent>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
Example #21
| Source File: ListGroups.js From id.co.moonlay-eworkplace-admin-web with MIT License | 4 votes |
|
render() {
return (
<div className="animated fadeIn">
<Row>
<Col sm="12" xl="6">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>List Group</strong>
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/listgroup/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
</CardHeader>
<CardBody>
<ListGroup>
<ListGroupItem>Cras justo odio</ListGroupItem>
<ListGroupItem>Dapibus ac facilisis in</ListGroupItem>
<ListGroupItem>Morbi leo risus</ListGroupItem>
<ListGroupItem>Porta ac consectetur ac</ListGroupItem>
<ListGroupItem>Vestibulum at eros</ListGroupItem>
</ListGroup>
</CardBody>
</Card>
</Col>
<Col sm="12" xl="6">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>List Group</strong>
<small> tags</small>
</CardHeader>
<CardBody>
<ListGroup>
<ListGroupItem className="justify-content-between">Cras justo odio <Badge className="float-right" pill>14</Badge></ListGroupItem>
<ListGroupItem className="justify-content-between">Dapibus ac facilisis in <Badge className="float-right" pill>2</Badge></ListGroupItem>
<ListGroupItem className="justify-content-between">Morbi leo risus <Badge className="float-right" pill
color="warning">1</Badge></ListGroupItem>
</ListGroup>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col sm="12" xl="6">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>List Group</strong>
<small> disabled items</small>
</CardHeader>
<CardBody>
<ListGroup>
<ListGroupItem disabled tag="a" href="#">Cras justo odio</ListGroupItem>
<ListGroupItem tag="a" href="#">Dapibus ac facilisis in</ListGroupItem>
<ListGroupItem disabled tag="a" href="#">Morbi leo risus</ListGroupItem>
<ListGroupItem tag="a" href="#">Porta ac consectetur ac</ListGroupItem>
<ListGroupItem tag="a" href="#">Vestibulum at eros</ListGroupItem>
</ListGroup>
</CardBody>
</Card>
</Col>
<Col sm="12" xl="6">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>List Group</strong>
<small> contextual classes</small>
</CardHeader>
<CardBody>
<ListGroup>
<ListGroupItem action color="success">Cras justo odio</ListGroupItem>
<ListGroupItem action color="info">Dapibus ac facilisis in</ListGroupItem>
<ListGroupItem action color="warning">Morbi leo risus</ListGroupItem>
<ListGroupItem action color="danger">Porta ac consectetur ac</ListGroupItem>
</ListGroup>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col sm="12" xl="6">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>List Group</strong>
<small> anchors</small>
</CardHeader>
<CardBody>
<p>Be sure to <strong>not use the standard <code>.btn</code> classes here</strong>.</p>
<ListGroup>
<ListGroupItem active tag="a" href="#" action>Cras justo odio</ListGroupItem>
<ListGroupItem tag="a" href="#" action>Dapibus ac facilisis in</ListGroupItem>
<ListGroupItem tag="a" href="#" action>Morbi leo risus</ListGroupItem>
<ListGroupItem tag="a" href="#" action>Porta ac consectetur ac</ListGroupItem>
<ListGroupItem disabled tag="a" href="#" action>Vestibulum at eros</ListGroupItem>
</ListGroup>
<p />
</CardBody>
</Card>
</Col>
<Col sm="12" xl="6">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>List Group</strong>
<small> buttons</small>
</CardHeader>
<CardBody>
<ListGroup>
<ListGroupItem active tag="button" action>Cras justo odio</ListGroupItem>
<ListGroupItem tag="button" action>Dapibus ac facilisis in</ListGroupItem>
<ListGroupItem tag="button" action>Morbi leo risus</ListGroupItem>
<ListGroupItem tag="button" action>Porta ac consectetur ac</ListGroupItem>
<ListGroupItem disabled tag="button" action>Vestibulum at eros</ListGroupItem>
</ListGroup>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col sm="12" xl="6">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>List Group</strong>
<small> custom content</small>
</CardHeader>
<CardBody>
<ListGroup>
<ListGroupItem active action>
<ListGroupItemHeading>List group item heading</ListGroupItemHeading>
<ListGroupItemText>
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
</ListGroupItemText>
</ListGroupItem>
<ListGroupItem action>
<ListGroupItemHeading>List group item heading</ListGroupItemHeading>
<ListGroupItemText>
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
</ListGroupItemText>
</ListGroupItem>
<ListGroupItem action>
<ListGroupItemHeading>List group item heading</ListGroupItemHeading>
<ListGroupItemText>
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
</ListGroupItemText>
</ListGroupItem>
</ListGroup>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>List Group</strong> <small>with TabPanes</small>
<div className="card-header-actions">
<Badge>NEW</Badge>
</div>
</CardHeader>
<CardBody>
<Row>
<Col xs="4">
<ListGroup id="list-tab" role="tablist">
<ListGroupItem onClick={() => this.toggle(0)} action active={this.state.activeTab === 0} >Home</ListGroupItem>
<ListGroupItem onClick={() => this.toggle(1)} action active={this.state.activeTab === 1} >Profile</ListGroupItem>
<ListGroupItem onClick={() => this.toggle(2)} action active={this.state.activeTab === 2} >Messages</ListGroupItem>
<ListGroupItem onClick={() => this.toggle(3)} action active={this.state.activeTab === 3} >Settings</ListGroupItem>
</ListGroup>
</Col>
<Col xs="8">
<TabContent activeTab={this.state.activeTab}>
<TabPane tabId={0} >
<p>Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt
nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim
tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip
eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.</p>
</TabPane>
<TabPane tabId={1}>
<p>Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia
dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt
anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum
reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.</p>
</TabPane>
<TabPane tabId={2}>
<p>Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris
nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur
est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et
deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla
laborum elit adipisicing pariatur cillum.</p>
</TabPane>
<TabPane tabId={3}>
<p>Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna
sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore
aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco
nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor
eiusmod eu pariatur culpa mollit in irure.</p>
</TabPane>
</TabContent>
</Col>
</Row>
</CardBody>
</Card>
</Col>
</Row>
</div>
);
}
Example #22
| Source File: Tabs.js From id.co.moonlay-eworkplace-admin-web with MIT License | 4 votes |
|
render() {
return (
<div className="animated fadeIn">
<Row>
<Col xs="12" md="6" className="mb-4">
<Nav tabs>
<NavItem>
<NavLink
active={this.state.activeTab[0] === '1'}
onClick={() => { this.toggle(0, '1'); }}
>
Home
</NavLink>
</NavItem>
<NavItem>
<NavLink
active={this.state.activeTab[0] === '2'}
onClick={() => { this.toggle(0, '2'); }}
>
Profile
</NavLink>
</NavItem>
<NavItem>
<NavLink
active={this.state.activeTab[0] === '3'}
onClick={() => { this.toggle(0, '3'); }}
>
Messages
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={this.state.activeTab[0]}>
{this.tabPane()}
</TabContent>
</Col>
<Col xs="12" md="6" className="mb-4">
<Nav tabs>
<NavItem>
<NavLink
active={this.state.activeTab[1] === '1'}
onClick={() => { this.toggle(1, '1'); }}
>
<i className="icon-calculator"></i>
</NavLink>
</NavItem>
<NavItem>
<NavLink
active={this.state.activeTab[1] === '2'}
onClick={() => { this.toggle(1, '2'); }}
>
<i className="icon-basket-loaded"></i>
</NavLink>
</NavItem>
<NavItem>
<NavLink
active={this.state.activeTab[1] === '3'}
onClick={() => { this.toggle(1, '3'); }}
>
<i className="icon-pie-chart"></i>
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={this.state.activeTab[1]}>
{this.tabPane()}
</TabContent>
</Col>
<Col xs="12" md="6" className="mb-4">
<Nav tabs>
<NavItem>
<NavLink
active={this.state.activeTab[2] === '1'}
onClick={() => { this.toggle(2, '1'); }}
>
<i className="icon-calculator"></i> <span className={this.state.activeTab[2] === '1' ? '' : 'd-none'}> Calculator</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
active={this.state.activeTab[2] === '2'}
onClick={() => { this.toggle(2, '2'); }}
>
<i className="icon-basket-loaded"></i> <span
className={this.state.activeTab[2] === '2' ? '' : 'd-none'}> Shopping cart</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: this.state.activeTab[2] === '3' })}
onClick={() => { this.toggle(2,'3'); }}
>
<i className="icon-pie-chart"></i> <span className={this.state.activeTab[2] === '3' ? '' : 'd-none'}> Charts</span>
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={this.state.activeTab[2]}>
{this.tabPane()}
</TabContent>
</Col>
<Col xs="12" md="6" className="mb-4">
<Nav tabs>
<NavItem>
<NavLink
active={this.state.activeTab[3] === '1'}
onClick={() => { this.toggle(3, '1'); }}
>
<i className="icon-calculator"></i>
<span className={this.state.activeTab[3] === '1' ? '' : 'd-none'}> Calc</span>
{'\u00A0'}<Badge color="success">New</Badge>
</NavLink>
</NavItem>
<NavItem>
<NavLink
active={this.state.activeTab[3] === '2'}
onClick={() => { this.toggle(3, '2'); }}
>
<i className="icon-basket-loaded"></i>
<span className={this.state.activeTab[3] === '2' ? '' : 'd-none'}> Cart</span>
{'\u00A0'}<Badge pill color="danger">29</Badge>
</NavLink>
</NavItem>
<NavItem>
<NavLink
active={this.state.activeTab[3] === '3'}
onClick={() => { this.toggle(3, '3'); }} >
<i className="icon-pie-chart"></i>
<span className={this.state.activeTab[3] === '3' ? '' : 'd-none'}> Charts</span>
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={this.state.activeTab[3]}>
{this.tabPane()}
</TabContent>
</Col>
</Row>
</div>
);
}
Example #23
| Source File: TaskBoard.js From covidsos with MIT License | 4 votes |
|
render() {
const {pendingTasks, completedTasks, activeTab} = this.state;
return (
<>
<Header showCards={false}/>
{/* Page content */}
<Container className="mt--7" fluid>
<Row className="justify-content-center">
<Col lg="8" md="8">
<Card className="bg-secondary shadow border-0">
<CardBody className="px-lg-3 py-lg-3 text-justify">
<div className="text-uppercase text-center mt-2 mb-2">
Task List
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
<Container className="request-card-container task-container" fluid>
<Row>
<Col sm="12">
<Nav tabs className='cursor-pointer'>
<NavItem>
<NavLink
className={classnames({active: activeTab === '1'})}
onClick={() => {
this.setState({activeTab: '1'})
}}
>
Pending
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({active: activeTab === '2'})}
onClick={() => {
this.setState({activeTab: '2'})
}}
>
Completed
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<Row>
<Col>
{
pendingTasks.length !== 0 && pendingTasks.map(
({name, address, last_updated, uuid}, index) => (
<Card className='task-card' key={index}>
<CardBody className='tb-task'>
<div className='tb-task-content margin-bottom-10'>
<div>{name || 'Name unavailable'}</div>
<div>{new Intl.DateTimeFormat('en-IN',
{dateStyle: 'medium', timeStyle: 'medium'}).format(
new Date(last_updated))}</div>
</div>
<div className='tb-task-content'>
<div>{address}</div>
<div>
<a href={`/task-status-update/${uuid}`}><Button
color="primary" size="sm">View</Button></a></div>
</div>
</CardBody>
</Card>
))
}
{
pendingTasks.length === 0 && (
<Card className='task-card'>
<CardBody className='tb-task'>
No Pending Tasks
</CardBody>
</Card>
)
}
</Col>
</Row>
</TabPane>
<TabPane tabId="2">
<Row>
<Col>
{
completedTasks.length !== 0 && completedTasks.map(
({name, address, last_updated, uuid}, index) => (
<Card className='task-card' key={index}>
<CardBody className='tb-task'>
<div className='tb-task-content margin-bottom-10'>
<div>{name || 'Unknown User'}</div>
<div>{new Intl.DateTimeFormat('en-IN',
{dateStyle: 'medium', timeStyle: 'medium'}).format(
new Date(last_updated))}</div>
</div>
<div className='tb-task-content'>
<div>{address}</div>
<a href={`/task-status-update/${uuid}`}><Button
color="primary" size="sm">View</Button></a>
</div>
</CardBody>
</Card>
))
}
{
completedTasks.length === 0 && (
<Card className='task-card'>
<CardBody className='tb-task'>
No Completed Tasks
</CardBody>
</Card>
)
}
</Col>
</Row>
</TabPane>
</TabContent>
</Col>
</Row>
<Row className='tb-task-content'>
<Col lg="8" md="8">
<a href={'/pending-requests/'}><Button
color="primary" size="sm">Help another person</Button></a>
</Col>
</Row>
</Container>
</>
)
}
Example #24
| Source File: Tabs.jsx From nodejs-rest-api-boilerplate with MIT License | 4 votes |
|
render() {
return (
<>
<h3 className="h4 text-success font-weight-bold mb-4">Tabs</h3>
<Row className="justify-content-center">
<Col lg="6">
{/* Tabs with icons */}
<div className="mb-3">
<small className="text-uppercase font-weight-bold">
With icons
</small>
</div>
<div className="nav-wrapper">
<Nav
className="nav-fill flex-column flex-md-row"
id="tabs-icons-text"
pills
role="tablist"
>
<NavItem>
<NavLink
aria-selected={this.state.iconTabs === 1}
className={classnames("mb-sm-3 mb-md-0", {
active: this.state.iconTabs === 1
})}
onClick={e => this.toggleNavs(e, "iconTabs", 1)}
href="#pablo"
role="tab"
>
<i className="ni ni-cloud-upload-96 mr-2" />
Home
</NavLink>
</NavItem>
<NavItem>
<NavLink
aria-selected={this.state.iconTabs === 2}
className={classnames("mb-sm-3 mb-md-0", {
active: this.state.iconTabs === 2
})}
onClick={e => this.toggleNavs(e, "iconTabs", 2)}
href="#pablo"
role="tab"
>
<i className="ni ni-bell-55 mr-2" />
Profile
</NavLink>
</NavItem>
<NavItem>
<NavLink
aria-selected={this.state.iconTabs === 3}
className={classnames("mb-sm-3 mb-md-0", {
active: this.state.iconTabs === 3
})}
onClick={e => this.toggleNavs(e, "iconTabs", 3)}
href="#pablo"
role="tab"
>
<i className="ni ni-calendar-grid-58 mr-2" />
Messages
</NavLink>
</NavItem>
</Nav>
</div>
<Card className="shadow">
<CardBody>
<TabContent activeTab={"iconTabs" + this.state.iconTabs}>
<TabPane tabId="iconTabs1">
<p className="description">
Raw denim you probably haven't heard of them jean shorts
Austin. Nesciunt tofu stumptown aliqua, retro synth master
cleanse. Mustache cliche tempor, williamsburg carles vegan
helvetica. Reprehenderit butcher retro keffiyeh
dreamcatcher synth.
</p>
<p className="description">
Raw denim you probably haven't heard of them jean shorts
Austin. Nesciunt tofu stumptown aliqua, retro synth master
cleanse.
</p>
</TabPane>
<TabPane tabId="iconTabs2">
<p className="description">
Cosby sweater eu banh mi, qui irure terry richardson ex
squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher voluptate
nisi qui.
</p>
</TabPane>
<TabPane tabId="iconTabs3">
<p className="description">
Raw denim you probably haven't heard of them jean shorts
Austin. Nesciunt tofu stumptown aliqua, retro synth master
cleanse. Mustache cliche tempor, williamsburg carles vegan
helvetica. Reprehenderit butcher retro keffiyeh
dreamcatcher synth.
</p>
</TabPane>
</TabContent>
</CardBody>
</Card>
</Col>
<Col className="mt-5 mt-lg-0" lg="6">
{/* Menu */}
<div className="mb-3">
<small className="text-uppercase font-weight-bold">
With text
</small>
</div>
<div className="nav-wrapper">
<Nav
className="nav-fill flex-column flex-md-row"
id="tabs-icons-text"
pills
role="tablist"
>
<NavItem>
<NavLink
aria-selected={this.state.plainTabs === 1}
className={classnames("mb-sm-3 mb-md-0", {
active: this.state.plainTabs === 1
})}
onClick={e => this.toggleNavs(e, "plainTabs", 1)}
href="#pablo"
role="tab"
>
Home
</NavLink>
</NavItem>
<NavItem>
<NavLink
aria-selected={this.state.plainTabs === 2}
className={classnames("mb-sm-3 mb-md-0", {
active: this.state.plainTabs === 2
})}
onClick={e => this.toggleNavs(e, "plainTabs", 2)}
href="#pablo"
role="tab"
>
Profile
</NavLink>
</NavItem>
<NavItem>
<NavLink
aria-selected={this.state.plainTabs === 3}
className={classnames("mb-sm-3 mb-md-0", {
active: this.state.plainTabs === 3
})}
onClick={e => this.toggleNavs(e, "plainTabs", 3)}
href="#pablo"
role="tab"
>
Messages
</NavLink>
</NavItem>
</Nav>
</div>
<Card className="shadow">
<CardBody>
<TabContent activeTab={"plainTabs" + this.state.plainTabs}>
<TabPane tabId="plainTabs1">
<p className="description">
Raw denim you probably haven't heard of them jean shorts
Austin. Nesciunt tofu stumptown aliqua, retro synth master
cleanse. Mustache cliche tempor, williamsburg carles vegan
helvetica. Reprehenderit butcher retro keffiyeh
dreamcatcher synth.
</p>
<p className="description">
Raw denim you probably haven't heard of them jean shorts
Austin. Nesciunt tofu stumptown aliqua, retro synth master
cleanse.
</p>
</TabPane>
<TabPane tabId="plainTabs2">
<p className="description">
Cosby sweater eu banh mi, qui irure terry richardson ex
squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher voluptate
nisi qui.
</p>
</TabPane>
<TabPane tabId="plainTabs3">
<p className="description">
Raw denim you probably haven't heard of them jean shorts
Austin. Nesciunt tofu stumptown aliqua, retro synth master
cleanse. Mustache cliche tempor, williamsburg carles vegan
helvetica. Reprehenderit butcher retro keffiyeh
dreamcatcher synth.
</p>
</TabPane>
</TabContent>
</CardBody>
</Card>
</Col>
</Row>
</>
);
}
Example #25
| Source File: FAQs.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="FAQs" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col lg={12}>
<Card>
<CardBody>
<Row className="mt-4">
<Col lg={12}>
<div className="text-center">
<h4>Have any Questions ?</h4>
<p className="text-muted">It will be as simple as in fact, it will be occidental. it will seem like simplified English, as a skeptical Cambridge friend</p>
<div>
<Button color="primary" type="button" className="mt-2 mr-2 waves-effect waves-light">Email Us</Button>
<Button color="info" type="button" className=" mt-2 waves-effect waves-light ml-1">Send us a tweet</Button>
</div>
</div>
</Col>
</Row>
<Row className="mt-5 justify-content-center">
<Col lg="10">
<div>
<Nav pills className="faq-nav-tabs justify-content-center" role="tablist">
<NavItem>
<NavLink className={classnames({ active: this.state.activeTab === '1' })} onClick={() => { this.toggleTab('1'); }}>
General Questions
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: this.state.activeTab === '2' })} onClick={() => { this.toggleTab('2'); }}>
Privacy Policy
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: this.state.activeTab === '3' })} onClick={() => { this.toggleTab('3'); }}>
Pricing & Plans
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={this.state.activeTab} className="pt-5">
<TabPane tabId="1">
<div>
<div className="text-center mb-5">
<h5>General Questions</h5>
<p>Sed ut perspiciatis unde omnis iste natus error sit</p>
</div>
<div id="gen-question-accordion" className="custom-accordion-arrow">
{/* accoridan */}
<Accordian
question1 = "What is Lorem Ipsum ?"
answer1 = "Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words."
question2 = "Why do we use it ?"
answer2 = "If several languages coalesce, the grammar of the resulting language is more simple and regular than that of the individual languages. The new common language will be more simple and regular than the existing European languages."
question3 = "Where does it come from ?"
answer3 = "It will be as simple as Occidental; in fact, it will be Occidental. To an English person, it will seem like simplified English, as a skeptical Cambridge friend of mine told me what Occidental."
question4 = "Where can I get some ?"
answer4 = "To an English person, it will seem like simplified English, as a skeptical Cambridge friend of mine told me what Occidental is. The European languages are members of the same family. Their separate existence is a myth."
question5 = "Where can I get some ?"
answer5 = "To an English person, it will seem like simplified English, as a skeptical Cambridge friend of mine told me what Occidental is. The European languages are members of the same family. Their separate existence is a myth."
/>
</div>
</div>
</TabPane>
<TabPane tabId="2">
<div>
<div className="text-center mb-5">
<h5>Privacy Policy</h5>
<p>Neque porro quisquam est, qui dolorem ipsum quia</p>
</div>
<div id="privacy-accordion" className="custom-accordion-arrow">
{/* accoridan */}
<Accordian
question1 = "Why do we use it ?"
answer1 = "If several languages coalesce, the grammar of the resulting language is more simple and regular than that of the individual languages. The new common language will be more simple and regular than the existing European languages."
question2 = "What is Lorem Ipsum ?"
answer2 = "It will be as simple as Occidental; in fact, it will be Occidental. To an English person, it will seem like simplified English, as a skeptical Cambridge friend of mine told me what Occidental."
question3 = "Where can I get some ?"
answer3 = "Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words."
question4 = "Where does it come from ?"
answer4 = "To an English person, it will seem like simplified English, as a skeptical Cambridge friend of mine told me what Occidental is. The European languages are members of the same family. Their separate existence is a myth."
question5 = "Where can I get some ?"
answer5 = "To an English person, it will seem like simplified English, as a skeptical Cambridge friend of mine told me what Occidental is. The European languages are members of the same family. Their separate existence is a myth."
/>
</div>
</div>
</TabPane>
<TabPane tabId="3">
<div>
<div className="text-center mb-5">
<h5>Pricing & Plans</h5>
<p>Sed ut perspiciatis unde omnis iste natus error sit</p>
</div>
<div id="pricing-accordion" className="custom-accordion-arrow">
{/* accoridan */}
<Accordian
question1 = "Where does it come from ?"
answer1 = "To an English person, it will seem like simplified English, as a skeptical Cambridge friend of mine told me what Occidental is. The European languages are members of the same family. Their separate existence is a myth."
question2 = "What is Lorem Ipsum ?"
answer2 = "It will be as simple as Occidental; in fact, it will be Occidental. To an English person, it will seem like simplified English, as a skeptical Cambridge friend of mine told me what Occidental."
question3 = "Where can I get some ?"
answer3 = "Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words."
question4 = "Why do we use it ?"
answer4 = "If several languages coalesce, the grammar of the resulting language is more simple and regular than that of the individual languages. The new common language will be more simple and regular than the existing European languages."
question5 = "Where can I get some ?"
answer5 = "To an English person, it will seem like simplified English, as a skeptical Cambridge friend of mine told me what Occidental is. The European languages are members of the same family. Their separate existence is a myth."
/>
</div>
</div>
</TabPane>
</TabContent>
</div>
</Col>
</Row>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #26
| Source File: SectionProgress.js From Website2020 with MIT License | 4 votes |
|
// core components
function SectionProgress() {
const [activeTab, setActiveTab] = React.useState("1");
const toggle = tab => {
if (activeTab !== tab) {
setActiveTab(tab);
}
};
return (
<>
<div className="section">
<Container>
<Row>
<Col md="6">
<div className="title">
<h3>Progress Bar</h3>
<br />
</div>
<Progress
max="100"
value="25"
barClassName="progress-bar-success"
/>
<br />
<Progress max="100" value="50" barClassName="progress-bar-info" />
<br />
<Progress
max="100"
value="100"
barClassName="progress-bar-danger"
/>
<br />
<Progress multi>
<Progress bar max="100" value="15" />
<Progress
bar
barClassName="progress-bar-success"
max="100"
value="30"
/>
<Progress
bar
barClassName="progress-bar-warning"
max="100"
value="20"
/>
</Progress>
</Col>
<Col md="6">
<div className="title">
<h3>Pagination</h3>
<br />
</div>
<nav aria-label="Page navigation example">
<Pagination>
<PaginationItem>
<PaginationLink
aria-label="Previous"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i aria-hidden={true} className="fa fa-angle-left" />
<span className="sr-only">Previous</span>
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink
href="#pablo"
onClick={e => e.preventDefault()}
>
1
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink
href="#pablo"
onClick={e => e.preventDefault()}
>
2
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink
href="#pablo"
onClick={e => e.preventDefault()}
>
3
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink
href="#pablo"
onClick={e => e.preventDefault()}
>
4
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink
href="#pablo"
onClick={e => e.preventDefault()}
>
5
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink
aria-label="Next"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i aria-hidden={true} className="fa fa-angle-right" />
<span className="sr-only">Next</span>
</PaginationLink>
</PaginationItem>
</Pagination>
</nav>
<br />
<nav aria-label="...">
<Pagination>
<PaginationItem>
<PaginationLink
href="#pablo"
onClick={e => e.preventDefault()}
tabIndex="-1"
>
Previous
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink
href="#pablo"
onClick={e => e.preventDefault()}
>
1
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink
href="#pablo"
onClick={e => e.preventDefault()}
>
2
</PaginationLink>
</PaginationItem>
<PaginationItem className="active">
<PaginationLink
href="#pablo"
onClick={e => e.preventDefault()}
>
3 <span className="sr-only">(current)</span>
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink
href="#pablo"
onClick={e => e.preventDefault()}
>
4
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink
href="#pablo"
onClick={e => e.preventDefault()}
>
5
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink
href="#pablo"
onClick={e => e.preventDefault()}
>
Next
</PaginationLink>
</PaginationItem>
</Pagination>
</nav>
</Col>
</Row>
<br />
<Row>
<Col md="6">
<div className="title">
<h3>Navigation Tabs</h3>
</div>
<div className="nav-tabs-navigation">
<div className="nav-tabs-wrapper">
<Nav id="tabs" role="tablist" tabs>
<NavItem>
<NavLink
className={activeTab === "1" ? "active" : ""}
onClick={() => {
toggle("1");
}}
>
Home
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={activeTab === "2" ? "active" : ""}
onClick={() => {
toggle("2");
}}
>
Profile
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={activeTab === "3" ? "active" : ""}
onClick={() => {
toggle("3");
}}
>
Messages
</NavLink>
</NavItem>
</Nav>
</div>
</div>
<TabContent activeTab={activeTab} className="text-center">
<TabPane tabId="1">
<p>
Larger, yet dramatically thinner. More powerful, but
remarkably power efficient. With a smooth metal surface that
seamlessly meets the new Retina HD display.
</p>
</TabPane>
<TabPane tabId="2">
<p>Here is your profile.</p>
</TabPane>
<TabPane tabId="3">
<p>Here are your messages.</p>
</TabPane>
</TabContent>
</Col>
<Col md="6">
<div className="title">
<h3>Labels</h3>
</div>
<label className="label label-default mr-1">Default</label>
<label className="label label-primary mr-1">Primary</label>
<label className="label label-info mr-1">Info</label>
<label className="label label-success mr-1">Success</label>
<label className="label label-warning mr-1">Warning</label>
<label className="label label-danger">Danger</label>
</Col>
</Row>
</Container>
</div>{" "}
</>
);
}
Example #27
| Source File: WalletModal.js From ErgoAuctionHouse with MIT License | 4 votes |
|
render() {
return (
<span className="mb-2 mr-2" style={{display:'flex',alignItems:'center'}}>
{/*{this.walletOk() ? <p>ok</p> : <p>fuck no</p>}*/}
<NotificationCenter/>
<div className="notificationContainer " onClick={this.toggle}>
<span className="notificationIcon pe-7s-wallet font-weight-bold"/>
</div>
<Modal
isOpen={this.state.modal}
toggle={this.toggle}
className={this.props.className}
>
<ModalHeader toggle={this.toggle}>
<div className="btn-actions-pane-right">
<Button
outline
className={
'mr-2 ml-2 btn-wide btn-pill ' +
classnames({
active:
this.state.activeTab === 'yoroi',
})
}
color="light"
onClick={() => {
this.toggleTab('yoroi');
}}
>
<img
style={{height: '20px', width: '20px'}}
src={yoroiWallet}
/>
<span className="ml-2">Yoroi Wallet</span>
</Button>
<Button
outline
className={
'mr-2 ml-2 btn-wide btn-pill ' +
classnames({
active:
this.state.activeTab ===
'assembler',
})
}
color="light"
onClick={() => {
this.toggleTab('assembler');
}}
>
<span>Any Wallet</span>
</Button>
</div>
</ModalHeader>
<ModalBody>
<TabContent activeTab={this.state.activeTab}>
<TabPane tabId="yoroi">
<p>
Connects to your Yoroi wallet.
</p>
<p>
Currently, you should use <a target='_blank' href='https://chrome.google.com/webstore/detail/yoroi-nightly/poonlenmfdfbjfeeballhiibknlknepo?hl=en&authuser=0'>Yoroi Nightly</a>
{' '}with <a target='_blank' href='https://chrome.google.com/webstore/detail/yoroi-ergo-dapp-connector/chifollcalpmjdiokipacefnpmbgjnle/related?hl=en&authuser=0'>Ergo dapp Connector</a>
{' '}to be able to use this section.
</p>
</TabPane>
<TabPane tabId="assembler">
<p>
You can use <b>any wallet</b> including <b>Yoroi</b> and <b>Ergo Wallet Android</b> to place bid and start new auctions.
</p>
{/*<p>*/}
{/* This uses the assembler service which is an intermediate*/}
{/* step; you can find out more about it{' '}*/}
{/* <a*/}
{/* target="_blank"*/}
{/* href="https://www.ergoforum.org/t/tx-assembler-service-bypassing-node-requirement-for-dapps/443"*/}
{/* >*/}
{/* here*/}
{/* </a>*/}
{/* . Your funds will be safe, find out more*/}
{/* about how{' '}*/}
{/* <a target="_blank"*/}
{/* href="https://www.ergoforum.org/t/some-details-about-ergo-auction-house/428/6">*/}
{/* here*/}
{/* </a>*/}
{/* .*/}
{/*</p>*/}
<b>If you are an artist, make sure you read <a target='_blank' href='https://www.ergoforum.org/t/artist-guideline/2929'>this</a> before using the Ergo Auction House.</b>
<br/>
<br/>
<FormGroup>
<Label for="apiKey">Address</Label>
<Input
value={this.state.userAddress}
type="text"
name="address"
id="address"
invalid={!isAddressValid(this.state.userAddress)}
onChange={(event) =>
this.setState({
userAddress: event.target.value,
})
}
placeholder="Your ergo address"
/>
<FormFeedback invalid>
Invalid ergo address.
</FormFeedback>
<FormText>
Your funds and winning tokens will be sent to this address. {' '}
<b>Make sure your wallet supports custom tokens!</b> {' '}
Currently, <a href="https://github.com/ergoplatform/ergo">Ergo Node</a>, {' '}
<a href="https://yoroi-wallet.com/">Yoroi</a>, {' '}
<a href="https://github.com/ergoplatform/ergo-wallet-android">Ergo Wallet Android</a>, {' '}
<a href="https://github.com/coinbarn/coinbarn-extension">Coinbarn</a> and {' '}
<a href="https://ergowallet.io/">Ergo Wallet</a> support tokens.
</FormText>
</FormGroup>
</TabPane>
</TabContent>
</ModalBody>
<ModalFooter>
<SyncLoader
css={override}
size={8}
color={'#0086d3'}
loading={this.state.processing}
/>
<Button
disabled={this.state.walletState === 'Configure'}
className="ml-5 mr-2 btn-transition"
color="secondary"
onClick={this.clearWallet}
>
Clear wallet info
</Button>
<Button
className="ml mr-2 btn-transition"
color="secondary"
onClick={this.toggle}
>
Cancel
</Button>
<Button
className="mr-2 btn-transition"
color="secondary"
disabled={
this.state.processing ||
(this.state.activeTab === 'assembler' && !isAddressValid(this.state.userAddress))
}
onClick={() => this.saveWallet()}
>
{this.state.activeTab !== 'yoroi' ? 'Save' : (isYoroi()? 'reconnect' : 'Connect')} {this.state.processing}
</Button>
</ModalFooter>
</Modal>
</span>
);
}
Example #28
| Source File: index.js From relay_09 with MIT License | 4 votes |
|
Tab = (props) => {
const dispatch = useDispatch();
const [activeTab, setActiveTab] = useState("1");
const videoList = useSelector((state) => state.video.videoList);
const toggle = (tab) => {
if (activeTab !== tab) setActiveTab(tab);
};
const getVideoList = async () => {
const data = await getVideolist();
dispatch(saveVideo(data));
};
useEffect(() => {
getVideoList();
}, []);
const VideoList =
videoList &&
videoList.map((video, index) => (
<Col sm="6" style={{ maxWidth: "30%", minHeight: "200px", paddingBottom: "30px" }}>
<div className="card" style={{ height: "100%" }}>
<VideoThumbnail key={index} video={video}></VideoThumbnail>
</div>
</Col>
));
return (
<div>
<Nav tabs>
<NavItem>
<NavLink
className={classnames({ active: activeTab === "1" })}
onClick={() => {
toggle("1");
}}
>
✨ Best
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === "2" })}
onClick={() => {
toggle("2");
}}
>
? 월 랭킹
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === "3" })}
onClick={() => {
toggle("3");
}}
>
? 맞춤영상
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === "4" })}
onClick={() => {
toggle("4");
}}
>
? etc
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<Row>
<Col sm="12">
<br />
<h6>Best Video ?</h6>
</Col>
{VideoList}
</Row>
</TabPane>
<TabPane tabId="2">
<Row>
<Col sm="12">
<br />
<h6> Monthly ranking ?</h6>
</Col>
<Col sm="6">
<Card body>
<CardTitle>Special Title Treatment</CardTitle>
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
<Button>Go somewhere</Button>
</Card>
</Col>
<Col sm="6">
<Card body>
<CardTitle>Special Title Treatment</CardTitle>
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
<Button>Go somewhere</Button>
</Card>
</Col>
</Row>
</TabPane>
<TabPane tabId="3">
<Row>
<Col sm="12">
<br />
<h6> Custom video ?</h6>
</Col>
</Row>
</TabPane>
<TabPane tabId="4">
<Row>
<Col sm="12">
<br />
<h6> etc ?</h6>
</Col>
</Row>
</TabPane>
</TabContent>
</div>
);
}
Example #29
| Source File: IconsPage.js From sofia-react-template with MIT License | 4 votes |
|
IconsPage = () => {
const [activeTab, setActiveTab] = useState('1')
const toggleTab = (tab) => {
if (activeTab !== tab) {
setActiveTab(tab)
}
}
return (
<Widget className="widget-p-md">
<Nav tabs className="mb-4">
<NavItem>
<NavLink
className={classnames({ active: activeTab === "1"})}
onClick={() => toggleTab("1")}
>
<p className="headline-3">Eva Icons</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === "2"})}
onClick={() => toggleTab("2")}
>
<p className="headline-3">Material Icons</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === "3"})}
onClick={() => toggleTab("3")}
>
<p className="headline-3">Font Awesome</p>
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<Row className={s.iconList}>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-github"></i><span>GitHub</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-award"></i><span>Award</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-activity"></i><span>Activity</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-archive"></i><span>Archive</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-battery"></i><span>Battery</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-behance"></i><span>Behance</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-bell"></i><span>Bell</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-book"></i><span>Book</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-browser"></i><span>Browser</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-bookmark"></i><span>Bookmark</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-bulb"></i><span>Bulb</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-brush"></i><span>Brush</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-calendar"></i><span>Calendar</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-camera"></i><span>Camera</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-car"></i><span>Car</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-cast"></i><span>Cast</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-checkmark"></i><span>Checkmark</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-clipboard"></i><span>Clipboard</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-clock"></i><span>Clock</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-close"></i><span>Close</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-code"></i><span>Code</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-compass"></i><span>Compass</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-copy"></i><span>Copy</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-crop"></i><span>Crop</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-cube"></i><span>Cube</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-download"></i><span>Download</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-droplet"></i><span>Droplet</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-edit"></i><span>Edit</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-email"></i><span>Email</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-expand"></i><span>Expand</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-eye"></i><span>Eye</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-facebook"></i><span>Facebook</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-file"></i><span>File</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-film"></i><span>Film</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-flag"></i><span>Flag</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-flash"></i><span>Flash</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-flip"></i><span>Flip</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-folder"></i><span>Folder</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-funnel"></i><span>Funnel</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-list"></i><span>List</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-gift"></i><span>Gift</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-globe"></i><span>Globe</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-grid"></i><span>Grid</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-hash"></i><span>Hash</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-heart"></i><span>Heart</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-home"></i><span>Home</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-image"></i><span>Image</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-inbox"></i><span>Inbox</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-info"></i><span>Info</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-keypad"></i><span>Keypad</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-layers"></i><span>Layers</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-layout"></i><span>Layout</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-link"></i><span>Link</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-lock"></i><span>Lock</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-map"></i><span>Map</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-menu"></i><span>Menu</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-mic"></i><span>Mic</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-monitor"></i><span>Monitor</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-moon"></i><span>Moon</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-move"></i><span>Move</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-music"></i><span>Music</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-navigation"></i><span>Navigation</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-npm"></i><span>Npm</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-options"></i><span>Options</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-pantone"></i><span>Pantone</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-people"></i><span>People</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-percent"></i><span>Percent</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-person"></i><span>Person</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-phone"></i><span>Phone</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-pin"></i><span>Pin</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-plus"></i><span>Plus</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-power"></i><span>Power</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-pricetags"></i><span>Pricetags</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-printer"></i><span>Printer</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-radio"></i><span>Radio</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-recording"></i><span>Recording</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-refresh"></i><span>Refresh</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-repeat"></i><span>Repeat</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-save"></i><span>Save</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-scissors"></i><span>Scissors</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-search"></i><span>Search</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-settings"></i><span>Settings</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-shake"></i><span>Shake</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-share"></i><span>Share</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-shield"></i><span>Shield</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-shuffle"></i><span>Shuffle</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-smartphone"></i><span>Smartphone</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-speaker"></i><span>Speaker</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-star"></i><span>Star</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="eva eva-sun"></i><span>Sun</span></Col>
</Row>
</TabPane>
<TabPane tabId="2">
<div>
<Row className={s.iconList}>
<Col xs={12} sm={4} md={3} lg={2}><Icons.AccessAlarm /><span>AccessAlarm</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.AccessAlarms /><span>AccessAlarms</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Accessibility /><span>Accessibility</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Accessible /><span>Accessible</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.AccessAlarms /><span>AccessAlarms</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.AccessibleForward /><span>AccessibleForward</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.AccessTime /><span>AccessTime</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.AccountBalance /><span>AccountBalance</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Chat /><span>Chat</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.AccountBox /><span>AccountBox</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.AccountCircle /><span>AccountCircle</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.AcUnit /><span>AcUnit</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Adb /><span>Adb</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Adjust /><span>Adjust</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Games /><span>Games</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.GitHub /><span>GitHub</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Money /><span>Money</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Nfc /><span>Nfc</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Facebook /><span>Facebook</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Telegram /><span>Telegram</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Toys /><span>Toys</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Deck /><span>Deck</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Dashboard /><span>Dashboard</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Wifi /><span>Wifi</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Airplay /><span>Airplay</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.AirportShuttle /><span>AirportShuttle</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Alarm /><span>Alarm</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Album /><span>Album</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.AllInbox /><span>AllInbox</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.AllInclusive /><span>AllInclusive</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.AllOut /><span>AllOut</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.AlternateEmail /><span>AlternateEmail</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Android /><span>Android</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Apps /><span>Apps</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Archive /><span>Archive</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Code /><span>Code</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Cake /><span>Cake</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Dns /><span>Dns</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Flag /><span>Flag</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Grain /><span>Grain</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Http /><span>Http</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Link /><span >Link</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Opacity /><span>Opacity</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Person /><span>Person</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Palette /><span>Palette</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Panorama /><span>Panorama</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Router /><span>Router</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.ArtTrack /><span>ArtTrack</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.AspectRatio /><span>AspectRatio</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Assessment /><span>Assessment</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Assignment /><span>Assignment</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.AssignmentInd /><span>AssignmentInd</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.AssignmentLate /><span>AssignmentLate</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.AssignmentReturn /><span>AssignmentReturn</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.AssignmentReturned /><span>AssignmentReturned</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.AssignmentTurnedIn /><span>AssignmentTurnedIn</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Assistant /><span>Assistant</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.AssistantPhoto /><span>AssistantPhoto</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Atm /><span>Atm</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.AttachFile /><span>AttachFile</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Attachment /><span>Attachment</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.AttachMoney /><span>AttachMoney</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Audiotrack /><span>Audiotrack</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Autorenew /><span>Autorenew</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.AvTimer /><span>AvTimer</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Backspace /><span>Backspace</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Backup /><span>Backup</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Ballot /><span>Ballot</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.BarChart /><span>BarChart</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Battery20 /><span>Battery20</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Battery30 /><span>Battery30</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Battery50 /><span>Battery50</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Battery60 /><span>Battery60</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Battery80 /><span>Battery80</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Battery90 /><span>Battery90</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.BatteryAlert /><span>BatteryAlert</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.BatteryCharging20 /><span>BatteryCharging20</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.BatteryCharging30 /><span>BatteryCharging30</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.BatteryCharging50 /><span>BatteryCharging50</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.BatteryCharging60 /><span>BatteryCharging60</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.BatteryCharging80 /><span>BatteryCharging80</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.BatteryCharging90 /><span>BatteryCharging90</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.BatteryChargingFull /><span>BatteryChargingFull</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.BatteryFull /><span>BatteryFull</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.BatteryStd /><span>BatteryStd</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.BatteryUnknown /><span>BatteryUnknown</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.BeachAccess /><span>BeachAccess</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Beenhere /><span>Beenhere</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Block /><span>Block</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><Icons.Bluetooth /><span>Bluetooth</span></Col>
</Row>
</div>
</TabPane>
<TabPane tabId="3">
<div>
<Row className={s.iconList}>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-bed" /><span>Bed</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-bank" /><span>Bank</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-behance" /><span>Behance</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-ban" /><span>Ban</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-bomb" /><span>Bomb</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-building" /><span>Building</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-cab" /><span>Cab</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-child" /><span>Car</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-bed" /><span>Child</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-bath" /><span>Bath</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-circle" /><span>Circle</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-codepen" /><span>Codepen</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-cube" /><span>Cubes</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-database" /><span>Database</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-delicious" /><span>Delicious</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-deviantart" /><span>Deviantart</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-digg" /><span>Digg</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-empire" /><span>Empire</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-envelope" /><span>Envelope</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-fax" /><span>Fax</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-file" /><span>File</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-amazon" /><span>Amazon</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-android" /><span>Android</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-apple" /><span>Apple</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-beer" /><span>Beer</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-bolt" /><span>Bolt</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-child" /><span>Child</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-chrome" /><span>Chrome</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-contao" /><span>Contao</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-yahoo" /><span>Yahoo</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-diamond" /><span>Diamond</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-cloud" /><span>Cloud</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-code" /><span>Code</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-codepen" /><span>Codepen</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-git" /><span>Git</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-github" /><span>Github</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-gitlab" /><span>Gitlab</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-gittip" /><span>Gittip</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-header" /><span>Header</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-history" /><span>History</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-institution" /><span>Institution</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-joomla" /><span>Joomla</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-jsfiddle" /><span>Jsfiddle</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-language" /><span>Language</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-drupal" /><span>Drupal</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-dropbox" /><span>Dropbox</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-etsy" /><span>Etsy</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-empire" /><span>Empire</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-openid" /><span>Openid</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-envira" /><span>Envira</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-eraser" /><span>eraser</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-paragraph" /><span>Paragraph</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-paw" /><span>Paw</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-euro" /><span>Euro</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-female" /><span>Female</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-film" /><span>Film</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-qq" /><span>Qq</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-renren" /><span>Renren</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-rebel" /><span>Rebel</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-recycle" /><span>Recycle</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-reddit" /><span>Reddit</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-firefox" /><span>Firefox</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-send" /><span>Send</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-flask" /><span>Flask</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-flickr" /><span>Flickr</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-imdb" /><span>Imdb</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-slack" /><span>Slack</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-sliders" /><span>Sliders</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-soundcloud" /><span>Soundcloud</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-safari" /><span>Safari</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-spoon" /><span>Spoon</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-spotify" /><span>Spotify</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-steam" /><span>Steam</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-sheqel" /><span>Sheqel</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-terminal" /><span>Terminal</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-snapchat" /><span>Snapchat</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-support" /><span>Support</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-taxi" /><span>Taxi</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa la-patreon" /><span>Patreon</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-tree" /><span>Tree</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-university" /><span>University</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-vine" /><span>Wine</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-wechat" /><span>Wechat</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-css3" /><span>CSS3</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-wordpress" /><span>Wordpress</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-yahoo" /><span>Yahoo</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-telegram" /><span>Telegram</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-weibo" /><span>Weibo</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-houzz" /><span>Houzz</span></Col>
<Col xs={12} sm={4} md={3} lg={2}><i className="fa fa-html5" /><span>HTML5</span></Col>
</Row>
</div>
</TabPane>
</TabContent>
</Widget>
);
}
