reactstrap#UncontrolledTooltip JavaScript Examples
The following examples show how to use
reactstrap#UncontrolledTooltip.
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: Skills.jsx From developer-portfolio with Apache License 2.0 | 5 votes |
|
Skills = () => {
return (
<Container className="text-center my-5 section section-lg">
<h1 className="h1">{skillsSection.title}</h1>
<p className="lead">{skillsSection.subTitle}</p>
{skillsSection.data.map((section, index) => {
return (
<Row className="my-5" key={index}>
<Col lg="6" className="order-2 order-lg-1">
<Fade left duration={2000}>
<DisplayLottie
animationPath={section.lottieAnimationFile}
/>
</Fade>
</Col>
<Col lg="6" className="order-1 order-lg-2">
<Fade right duration={2000}>
<h3 className="h3 mb-2">{section.title}</h3>
<div className="d-flex justify-content-center flex-wrap mb-2">
{section.softwareSkills.map((skill, i) => {
return (
<Fragment key={i}>
<div
className="icon icon-lg icon-shape shadow-sm rounded-circle m-1"
id={skill.skillName.replace(/\s/g, '')}
>
<Icon
icon={
skill.fontAwesomeClassname
}
data-inline="false"
></Icon>
</div>
<UncontrolledTooltip
delay={0}
placement="bottom"
target={skill.skillName.replace(/\s/g, '')}
>
{skill.skillName}
</UncontrolledTooltip>
</Fragment>
);
})}
</div>
<div>
{section.skills.map((skill, i) => {
return <p key={i}>{skill}</p>;
})}
</div>
</Fade>
</Col>
</Row>
);
})}
</Container>
);
}
Example #2
| Source File: Progress.js From light-blue-react-template with MIT License | 5 votes |
|
render() {
return (
<ListGroup className={[s.listGroup, 'thin-scroll'].join(' ')}>
<ListGroupItem className={s.listGroupItem}>
<span className="text-muted float-right">60%</span>
<h6 className="m-0 mb-1">
<strong>Urgent:</strong>
Rails 4.1.0 upgrade
</h6>
<Progress className={['m-0'].join(' ')} color="primary" value="60" />
<span className="help-block">3 notes added by James 2h ago...</span>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className="text-muted float-right">83%</span>
<h6 className="m-0 mb-1">
<strong>Primary:</strong>
Light Blue App
</h6>
<Progress className={['progress-sm', 'm-0'].join(' ')} color="success" value="83" />
<span className="help-block">verifying stable probability status</span>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className="text-muted float-right">44%</span>
<h6 className="m-0 mb-1">
<span className="circle bg-gray-dark text-warning" id="TooltipQuestion">
<i className="fa fa-question" />
</span>
<UncontrolledTooltip placement="bottom" target="TooltipQuestion">
2 issues require your attention
</UncontrolledTooltip>
Finish The Road to Hell Song
</h6>
<Progress className={['progress-sm', 'm-0'].join(' ')} color="gray-dark" value="44" />
<span className="help-block">last update: 2h ago</span>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className="text-muted float-right">86%</span>
<h6 className="m-0 mb-1">
Complete project planning
</h6>
<Progress className={['progress-xs', 'm-0'].join(' ')} color="danger" value="86" />
<span className="help-block">no, no way this is not working...</span>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className="text-muted float-right">100%</span>
<h6 className="m-0 mb-1">
<strong>Completed:</strong>
Instruct newbies on coding standards
</h6>
<Progress className={['progress-xs', 'm-0'].join(' ')} color="primary" value="100" />
<span className="help-block">last update: April 22, 2014 2:36 pm</span>
</ListGroupItem>
</ListGroup>
);
}
Example #3
| Source File: Tooltips.js From id.co.moonlay-eworkplace-admin-web with MIT License | 5 votes |
|
render() {
return (
<div className="animated fadeIn">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Tooltips</strong>
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/tooltips/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
</CardHeader>
<CardBody>
{/*eslint-disable-next-line*/}
<p>Somewhere in here is a <a href="#" id="TooltipExample">tooltip</a>.</p>
<Tooltip placement="right" isOpen={this.state.tooltipOpen[0]} target="TooltipExample" toggle={() => {this.toggle(0);}}>
Hello world!
</Tooltip>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Tooltip</strong>
<small> disable autohide</small>
</CardHeader>
<CardBody>
{/*eslint-disable-next-line*/}
<p>Sometimes you need to allow users to select text within a <a href="#" id="DisabledAutoHideExample">tooltip</a>.</p>
<Tooltip placement="top" isOpen={this.state.tooltipOpen[1]} autohide={false} target="DisabledAutoHideExample" toggle={() => {this.toggle(1);}}>
Try to select this text!
</Tooltip>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Tooltip</strong>
<small> list</small>
</CardHeader>
<CardBody>
{this.state.tooltips.map((tooltip, i) => {
return <TooltipItem key={i} item={tooltip} id={i} />;
})}
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Tooltip</strong>
<small> uncontrolled</small>
</CardHeader>
<CardBody>
{/*eslint-disable-next-line*/}
<p>Somewhere in here is a <a href="#" id="UncontrolledTooltipExample">tooltip</a>.</p>
<UncontrolledTooltip placement="right" target="UncontrolledTooltipExample">
Hello world!
</UncontrolledTooltip>
</CardBody>
</Card>
</div>
);
}
Example #4
| Source File: CardBox.js From gedge-platform with Apache License 2.0 | 5 votes |
|
render() {
return (
<React.Fragment>
<Card className="task-box">
<Progress className="progress-sm animated-progess" value={this.props.data['progressValue']} style={{height: "3px"}}></Progress>
<CardBody className="borad-width">
<div className="float-right ml-2">
<div>
{this.props.data['date']}
</div>
</div>
<div className="mb-3">
<Link to="#" className="">{this.props.data['id']}</Link>
</div>
<div>
<h5 className="font-size-16"><Link to="#" className="text-dark">{this.props.data['title']}</Link></h5>
<p className="mb-4">{this.props.data['subtitle']}</p>
</div>
<div className="d-inline-flex team mb-0">
<div className="mr-3 align-self-center">
Team :
</div>
{
this.props.data['team'].map((member, key) =>
<div className="team-member" key={key}>
<Link to="# " className="team-member d-inline-block" id={"memberTooltip"+member.id} >
{
member.img === "Null" ?
<div className="avatar-xs">
<span className="avatar-title bg-soft-primary text-primary rounded-circle">
{member.name.charAt(0)}
</span>
</div>
: <img src={member.img} className="rounded-circle avatar-xs" alt="Nazox"/>
}
</Link>
<UncontrolledTooltip target={"memberTooltip"+member.id} placement="top">
{member.name}
</UncontrolledTooltip>
</div>
)
}
</div>
</CardBody>
</Card>
</React.Fragment>
);
}
Example #5
| Source File: index.js From gedge-platform with Apache License 2.0 | 5 votes |
|
render() {
const breadcrumbItems = [
{ title : "Tables", link : "#" },
{ title : "Kanban Board", link : "#" },
];
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="Kanban Board" breadcrumbItems={breadcrumbItems} />
<Row className="mb-2">
<Col lg={6}>
<Media>
<div className="mr-3">
<img src={logosmlight} alt="" className="avatar-xs"/>
</div>
<Media body>
<h5>Nazox admin Dashboard</h5>
<span className="badge badge-soft-success">Open</span>
</Media>
</Media>
</Col>
<Col lg={6}>
<div className="text-lg-right">
<ul className="list-inline mb-0">
<li className="list-inline-item">
<Link to="#" className="d-inline-block" id="member1">
<img src={avatar2} className="rounded-circle avatar-xs" alt="Nazox"/>
</Link>
<UncontrolledTooltip target="member1" placement="top">
Aaron Williams
</UncontrolledTooltip>
</li>
<li className="list-inline-item">
<Link to="#" className="d-inline-block" id="member2">
<div className="avatar-xs">
<span className="avatar-title rounded-circle bg-soft-primary text-primary">
J
</span>
</div>
</Link>
<UncontrolledTooltip target="member2" placement="top">
Jonathan McKinney
</UncontrolledTooltip>
</li>
<li className="list-inline-item">
<Link to="#" className="d-inline-block" id="member3">
<img src={avatar4} className="rounded-circle avatar-xs" alt="Nazox"/>
</Link>
<UncontrolledTooltip target="member3" placement="top">
Carole Connolly
</UncontrolledTooltip>
</li>
<li className="list-inline-item">
<Link to="#" className="py-1">
<i className="mdi mdi-plus mr-1"></i> New member
</Link>
</li>
</ul>
</div>
</Col>
</Row>
<Row>
<KanbanBoard board={this.state} content={this.state.columns}/>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #6
| Source File: index.js From gobench with Apache License 2.0 | 5 votes |
|
render() {
const { tooltipOpen } = this.state
return (
<div>
<h5 className="mb-4">
<strong>Default Tooltip</strong>
</h5>
<div className="mb-5">
<p>
Somewhere in here is a{' '}
<span className="kit__utils__link" id="TooltipExample">
tooltip
</span>
.
</p>
<Tooltip
placement="right"
isOpen={tooltipOpen}
target="TooltipExample"
toggle={this.toggle}
>
Hello world!
</Tooltip>
</div>
<h5 className="mb-4">
<strong>Directions</strong>
</h5>
<div className="mb-5">
<Button color="light" id="u1" className="mr-3">
Tooltip on top
</Button>
<Button color="light" id="u2" className="mr-3">
Tooltip on top
</Button>
<Button color="light" id="u3" className="mr-3">
Tooltip on top
</Button>
<Button color="light" id="u4" className="mr-3">
Tooltip on top
</Button>
<UncontrolledTooltip placement="top" target="u1">
Hello world!
</UncontrolledTooltip>
<UncontrolledTooltip placement="right" target="u2">
Hello world!
</UncontrolledTooltip>
<UncontrolledTooltip placement="right" target="u3">
Hello world!
</UncontrolledTooltip>
<UncontrolledTooltip placement="right" target="u4">
Hello world!
</UncontrolledTooltip>
</div>
</div>
)
}
Example #7
| Source File: JobData.js From gedge-platform with Apache License 2.0 | 4 votes |
|
JobData = observer((props) => {
const { workloadStore } = store;
const { dbApiStore } = store;
const { apitoData, job, activeTab } = props
// const [activeTab, setactiveTab] = useState("1");
let joblist = [];
let joblistall = [];
//test
let clusterpodlist = []
useEffect(() => {
console.log(workloadStore.getJobList(), "joblist")
workloadStore.getJobList()
dbApiStore.getWorkspaceList("workspaces");
//cronjob test
workloadStore.getPodList()
}, []);
clusterpodlist = workloadStore.podList;
console.log(clusterpodlist)
joblist = workloadStore.jobList
console.log(joblist)
// console.log(workloadStore.temp2)
// joblist.map((list, key) => {
// console.log(list, "joballlist")
// joblistall.push(list)
// })
// const toggleTab = (tab) => {
// if (activeTab !== tab) {
// setactiveTab({
// activeTab: tab,
// });
// }
// }
console.log(joblistall)
console.log(job, "workloadData")
let jobfilterdata = []
jobfilterdata = workloadStore.jobList
// let apitoData = [];
let dataFromApi = [];
console.log(workloadStore.temp3)
if (workloadStore.temp3[0] == null || workloadStore.temp3 == "All Cluster") {
console.log(workloadStore.temp3);
joblistall = jobfilterdata
}
else {
console.log(workloadStore.temp3)
joblist.map((list, key) => {
if (list.cluster == workloadStore.temp3) {
console.log(list.cluster, "joballlist")
joblistall.push(list)
}
})
}
console.log(workloadStore.jobtab)
dataFromApi = joblistall.map(list => {
let updateTimes = '';
let imageName = '';
let status = '';
let owner = '';
if (list.metadata.managedFields.length > 1) {
list.metadata.managedFields.map(time => {
updateTimes = time.time
})
} else {
updateTimes = list.metadata.managedFields[0].time;
}
if (list.spec.template.spec.containers[0].image == undefined) {
imageName = '-';
} else {
imageName = list.spec.template.spec.containers[0].image
}
if (list.status.succeeded == 1) {
status = "running"
} else {
status = "pending"
}
if (list.metadata.ownerReferences == undefined) {
owner = "-"
} else {
owner = list.metadata.ownerReferences[0].kind + " / " + list.metadata.ownerReferences[0].name;
}
return {
cluster: list.cluster,
link: "/workload/job/" + list.metadata.namespace + "/" + list.metadata.name,
name: list.metadata.name,
image: imageName,
status: status,
updateTime: updateTimes,
ownerReferences: owner,
kind: list.kind
}
})
jobfilterdata = dataFromApi;
console.log(jobfilterdata, "apitoData")
let Tabledata = '';
// if (activeTab == '1') {
// job = "jobs"
// if (job == "jobs") {
// console.log(activeTab, "jobtab")
console.log(workloadStore.jobtab)
// if (workloadStore.jobtab === "jobtab") {
// if (workloadStore.jobtab === '1') {
const rows = jobfilterdata.map(test => ({
checkbox:
<div className="custom-control custom-checkbox">
<Input type="checkbox" className="custom-control-input" id="ordercheck1" />
<Label className="custom-control-label" htmlFor="ordercheck1"> </Label>
</div>,
name: <Link to={test.link} className="text-dark font-weight-bold">{test.name}</Link>,
namespace: <Link to={test.link} className="text-dark font-weight-bold">{test.namespace}</Link>,
createTime: <Link to={test.link} className="text-dark font-weight-bold">{test.createTime}</Link>,
ownerReferences: <Link to={test.link} className="text-dark font-weight-bold">{test.ownerReferences}</Link>,
cluster: <Link to={test.link} className="text-dark font-weight-bold">{test.cluster}</Link>,
updateTime: <Link to={test.link} className="text-dark font-weight-bold">{test.updateTime}</Link>,
status: <div className="badge badge-soft-success font-size-12">{test.status}</div>,
//invoice: <Button className="btn-rounded" color="light">//invoice <i className="mdi mdi-download ml-2"></i></Button>,
action: <><Link to="#" className="mr-3 text-primary" id="edit1"><i className="mdi mdi-pencil font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="edit1">
Edit
</UncontrolledTooltip >
<Link to="#" className="text-danger" id="delete1"><i className="mdi mdi-trash-can font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="delete1">
Delete
</UncontrolledTooltip >
</>
}
))
const columns = [
{
label: <div className="custom-control custom-checkbox"> <Input type="checkbox" className="custom-control-input" id="ordercheck" /><Label className="custom-control-label" htmlFor="ordercheck"> </Label></div>,
field: "checkbox",
sort: "asc",
width: 28
},
{
label: "이름",
field: "name",
sort: "asc",
width: 78
},
// {
// label: "프로젝트",
// field: "namespace",
// sort: "asc",
// width: 78
// },
{
label: "상위",
field: "ownerReferences",
sort: "asc",
width: 135
},
{
label: "클러스터",
field: "cluster",
sort: "asc",
width: 135
},
{
label: "상태",
field: "status",
sort: "asc",
width: 135
},
{
label: "업데이트 시간",
field: "updateTime",
sort: "asc",
width: 48
},
{
label: "Action",
field: "action",
sort: "asc",
width: 120
},
]
Tabledata = { columns, rows };
// }
// else if (workloadStore.jobtab === "cron") {
// console.log(activeTab, "cron")
// else if (workloadStore.jobtab === '2') {
// else {
// const rows = clusterpodlist.map(test => ({
// checkbox:
// <div className="custom-control custom-checkbox">
// <Input type="checkbox" className="custom-control-input" id="ordercheck1" />
// <Label className="custom-control-label" htmlFor="ordercheck1"> </Label>
// </div>,
// name: <Link to={test.link} className="text-dark font-weight-bold">{test.metadata.name}</Link>,
// image: <Link to={test.link} className="text-dark font-weight-bold">{test.image}</Link>,
// schedule: <Link to={test.link} className="text-dark font-weight-bold">{test.schedule}</Link>,
// lastSchedule: <Link to={test.link} className="text-dark font-weight-bold">{test.lastSchedule}</Link>,
// createTime: <Link to={test.link} className="text-dark font-weight-bold">{test.createTime}</Link>,
// status: <div className="badge badge-soft-success font-size-12">{test.status}</div>,
// //invoice: <Button className="btn-rounded" color="light">//invoice <i className="mdi mdi-download ml-2"></i></Button>,
// action: <><Link to="#" className="mr-3 text-primary" id="edit1"><i className="mdi mdi-pencil font-size-18"></i></Link>
// <UncontrolledTooltip placement="top" target="edit1">
// Edit
// </UncontrolledTooltip >
// <Link to="#" className="text-danger" id="delete1"><i className="mdi mdi-trash-can font-size-18"></i></Link>
// <UncontrolledTooltip placement="top" target="delete1">
// Delete
// </UncontrolledTooltip >
// </>
// }
// ))
// const columns = [
// {
// label: <div className="custom-control custom-checkbox"> <Input type="checkbox" className="custom-control-input" id="ordercheck" /><Label className="custom-control-label" htmlFor="ordercheck"> </Label></div>,
// field: "checkbox",
// sort: "asc",
// width: 28
// },
// {
// label: "이름",
// field: "name",
// sort: "asc",
// width: 78
// },
// {
// label: "이미지",
// field: "image",
// sort: "asc",
// width: 78
// },
// {
// label: "스케쥴",
// field: "schedule",
// sort: "asc",
// width: 135
// },
// {
// label: "Last 스케쥴",
// field: "lastSchedule",
// sort: "asc",
// width: 135
// },
// {
// label: "생성 시간",
// field: "createTime",
// sort: "asc",
// width: 48
// },
// {
// label: "Action",
// field: "action",
// sort: "asc",
// width: 120
// },
// ////
// ]
// Tabledata = { columns, rows };
// // }
return (
<div>
{/* <Nav pills className="pricing-nav-tabs">
<NavItem>
<NavLink className={classnames({ active: activeTab === 'jobs' })} onClick={() => { toggleTab('jobs'); }}>
잡
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: activeTab === 'cron' })} onClick={() => { toggleTab('cron'); }}>
크론잡
</NavLink>
</NavItem>
</Nav> */}
<MDBDataTable responsive data={Tabledata} className="mt-4" />
</div>
)
})
Example #8
| Source File: Applist.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
const data = {
columns: [
{
label: (
<div className="custom-control custom-checkbox">
{" "}
<Input
type="checkbox"
className="custom-control-input"
id="ordercheck"
/>
<Label className="custom-control-label" htmlFor="ordercheck">
</Label>
</div>
),
field: "checkbox",
sort: "asc",
width: 28,
},
{
label: "이름",
field: "id",
sort: "asc",
width: 78,
},
{
label: "상태",
field: "status",
sort: "asc",
width: 135,
},
{
label: "앱",
field: "appName",
sort: "asc",
width: 93,
},
{
label: "버전",
field: "appVersion",
sort: "asc",
width: 109,
},
{
label: "마지막 업데이트",
field: "updateTime",
sort: "asc",
width: 48,
},
// {
// label: "//invoice",
// field: "//invoice",
// sort: "asc",
// width: 110
// },
{
label: "Action",
field: "action",
sort: "asc",
width: 120,
},
],
rows: [
{
checkbox: (
<div className="custom-control custom-checkbox">
<Input
type="checkbox"
className="custom-control-input"
id="ordercheck1"
/>
<Label className="custom-control-label" htmlFor="ordercheck1">
</Label>
</div>
),
id: (
<Link to="/workload/app/default/1234" className="text-dark font-weight-bold">
1234
</Link>
),
date: "04 Apr, 2020",
billingName: "Walter Brown",
total: "$172",
status: (
<div className="badge badge-soft-success font-size-12">running</div>
),
//invoice: <Button className="btn-rounded" color="light">//invoice <i className="mdi mdi-download ml-2"></i></Button>,
action: (
<>
<Link to="#" className="mr-3 text-primary" id="edit1">
<i className="mdi mdi-pencil font-size-18"></i>
</Link>
<UncontrolledTooltip placement="top" target="edit1">
Edit
</UncontrolledTooltip>
<Link to="#" className="text-danger" id="delete1">
<i className="mdi mdi-trash-can font-size-18"></i>
</Link>
<UncontrolledTooltip placement="top" target="delete1">
Delete
</UncontrolledTooltip>
</>
),
},
],
};
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">
<NavItem>
<NavLink
onClick={() => {
this.toggleTab("1");
}}
className={classnames(
{ active: this.state.activeTab === "1" },
"font-weight-bold p-3"
)}
>
All Project
</NavLink>
</NavItem>
<NavItem>
<NavLink
onClick={() => {
this.toggleTab("2");
}}
className={classnames(
{ active: this.state.activeTab === "2" },
"p-3 font-weight-bold"
)}
>
Active
</NavLink>
</NavItem>
<NavItem>
<NavLink
onClick={() => {
this.toggleTab("3");
}}
className={classnames(
{ active: this.state.activeTab === "3" },
" p-3 font-weight-bold"
)}
>
Unpaid
</NavLink>
</NavItem>
</Nav>
<Col sm={6}>
<div>
<Link
to="/workload/app/add"
onClick={() =>
this.setState({
modal_static: true,
isAlertOpen: false,
})
}
className="btn btn-success mb-2"
>
<i className="mdi mdi-plus mr-2"></i> 추가
</Link>
</div>
<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>프로젝트1</DropdownItem>
</DropdownMenu>
</Dropdown>
</Col>
<MDBDataTable responsive data={data} className="mt-4" />
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #9
| Source File: JobListTable.js From gedge-platform with Apache License 2.0 | 4 votes |
|
JobListTable = observer((props) => {
const { dbApiStore } = store;
const { workloadStore } = store;
let podList = []
let clusterpodlist = []
let clusterlists = []
let clustername = []
let podlisttest = [];
let podData = [];
let podData1 = [];
let temp = [];
let data1 = [];
let pod_count = 0;
let restart = 0;
useEffect(() => {
console.log(workloadStore.getPodList(), "podlist")
workloadStore.getPodList()
dbApiStore.getClusterList("clusters")
}, []);
temp = dbApiStore.clusterList
console.log(temp, "clustername")
clusterpodlist = workloadStore.podList;
console.log(clusterpodlist)
console.log(workloadStore.temp1[0])
if (workloadStore.temp1[0] == null || workloadStore.temp1 == "All Namespace") {
console.log(workloadStore.temp1)
podList = clusterpodlist
console.log(podList)
} else {
console.log(workloadStore.temp1)
clusterpodlist.map((list, key) => {
if (list.metadata.namespace == workloadStore.temp1) {
console.log(list.metadata.namespace)
podList.push(list)
}
})
// console.log(clusterpodlist.filter(data => data.metadata.namespace == workloadStore.temp1))
}
console.log(podList)
const statusDiv = (test) => {
if (test == "Running") {
return <div className="badge badge-soft-success font-size-12">{test}</div>
} else if (test == "Pending") {
return <div className="badge badge-soft-warning font-size-12">{test}</div>
} else {
return <div className="badge badge-soft-danger font-size-12">{test}</div>
}
}
podData = podList.map((list, key) => {
console.log(list.cluster)
// podlisttest.push(listtest.metadata.name)
// link: "/workload/pod/" + listtest.metadata.namespace + "/" + listtest.metadata.name,
let images = '';
let deploy_status = "Running"
let temp = ""
let podIP = ""
restart = 0;
if (list.status.containerStatuses !== undefined) {
list.status.containerStatuses.map(container => {
pod_count = 0;
restart = restart + container.restartCount;
if (container.ready) {
pod_count++;
}
if (container.state.running == undefined) {
temp = Object.values(container.state)
deploy_status = temp[0].reason
if (temp[0].reason == "ContainerCreating") {
deploy_status = "Pending"
}
}
images = container.image + "\n" + images
})
}
if (list.status.podIP == undefined) {
podIP = "-"
} else {
podIP = list.status.podIP
}
return {
link: "pod/" + list.cluster + "/" + list.metadata.namespace + "/" + list.metadata.name,
name: list.metadata.name,
clustername: list.cluster,
namespace: list.metadata.namespace,
// nodeName: list.spec.nodeName + " \n( " + list.status.hostIP + " )",
podIp: podIP,
status: deploy_status,
// image: images,
ready: pod_count + "/ " + list.spec.containers.length,
restart: restart,
createTime: list.status.startTime
}
// console.log(podlisttest)
// console.log(data1, "data1")
// list.map((listdata) => {
// // console.log(listdata.metadata.name)
// })
}
)
data1 = podData
// apitoData = dataFromApi;
console.log(data1, "apitoData")
const rows = data1.map(test => ({
checkbox:
<div className="custom-control custom-checkbox">
<Input type="checkbox" className="custom-control-input" id="ordercheck1" />
<Label className="custom-control-label" htmlFor="ordercheck1"> </Label>
</div>,
name: <Link to={test.link} className="text-dark font-weight-bold" searchvalue={test.name} >{test.name}</Link>,
// node: <Link to={test.link} className="text-dark font-weight-bold" style={{ whiteSpace: 'pre-line' }} searchvalue={test.nodeName} >{test.nodeName}</Link>,
podIp: <Link to={test.link} className="text-dark font-weight-bold" searchvalue={test.podIp} >{test.podIp}</Link>,
ready: <Link to={test.link} className="text-dark font-weight-bold" >{test.ready}</Link>,
status: statusDiv(test.status),
// image: <Link to={test.link} className="text-dark font-weight-bold" style={{ whiteSpace: 'pre-line' }} searchvalue={test.image} >{test.image}</Link>,
clustername: <Link to={test.link} className="text-dark font-weight-bold" searchvalue={test.clustername} >{test.clustername}</Link>,
restart: <Link to={test.link} className="text-dark font-weight-bold" >{test.restart}</Link>,
createTime: <Link to={test.link} className="text-dark font-weight-bold" searchvalue={test.createTime} >{test.createTime}</Link>,
action: <><Link to="#" className="mr-3 text-primary" id="edit1"><i className="mdi mdi-pencil font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="edit1">
Edit
</UncontrolledTooltip >
<Link to="#" className="text-danger" id="delete1"><i className="mdi mdi-trash-can font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="delete1">
Delete
</UncontrolledTooltip >
</>
}
))
const columns = [
{
label: <div className="custom-control custom-checkbox"> <Input type="checkbox" className="custom-control-input" id="ordercheck" /><Label className="custom-control-label" htmlFor="ordercheck"> </Label></div>,
field: "checkbox",
sort: "asc",
width: 28
},
{
label: "이름",
field: "name",
sort: "asc",
width: 78
},
{
label: "READY",
field: "ready",
sort: "asc",
width: 135
},
{
label: "상태",
field: "status",
sort: "asc",
width: 135
},
// {
// label: "노드",
// field: "node",
// sort: "asc",
// width: 135
// },
{
label: "Pod IP",
field: "podIp",
sort: "asc",
width: 135
},
// {
// label: "이미지",
// field: "image",
// sort: "asc",
// width: 135
// },
{
label: "클러스터 이름",
field: "clustername",
sort: "asc",
width: 135
},
{
label: "재시작",
field: "restart",
sort: "asc",
width: 135
},
{
label: "생성 시간",
field: "createTime",
sort: "asc",
width: 48
},
{
label: "Action",
field: "action",
sort: "asc",
width: 120
},
],
Tabledata = { columns, rows };
return (
<div>
<MDBDataTable responsive data={Tabledata} className="mt-4" />
</div>
)
})
Example #10
| Source File: JobTable.js From gedge-platform with Apache License 2.0 | 4 votes |
|
JobTable = observer((props) => {
const { params = "jobs" } = props;
const { callApiStore } = store;
let rows = ""
let columns = []
// const [isLoading, setLoading] = useState(true)
let DataList = [];
let check = true
useEffect(() => {
callApiStore.dataCheck = true
if (callApiStore.projectFilter == "all") {
callApiStore.getFilterList(params, callApiStore.workspaceFilter, null)
}
}, []);
DataList = callApiStore.jobFilterList
check = callApiStore.dataCheck
console.log(check, "check")
function status(jobstatus) {
let state = ""
if (jobstatus == '1') {
state = "succeeded"
}
return state
}
columns = [
{
label: <div className="custom-control custom-checkbox"> <Input type="checkbox" className="custom-control-input" id="ordercheck" /><Label className="custom-control-label" htmlFor="ordercheck"> </Label></div>,
field: "checkbox",
sort: "asc",
width: 28
},
{
label: "이름",
field: "name",
sort: "asc",
width: 78
},
{
label: "클러스터",
field: "cluster",
sort: "asc",
width: 135
},
{
label: "프로젝트",
field: "project",
sort: "asc",
width: 78
},
{
label: "상태",
field: "status",
sort: "asc",
width: 135
},
{
label: "완료 시간",
field: "completionTime",
sort: "asc",
width: 48
},
{
label: "Action",
field: "action",
sort: "asc",
width: 120
},
]
if (callApiStore.jobFilterList != null) {
rows = DataList.map(test => ({
checkbox:
<div className="custom-control custom-checkbox">
<Input type="checkbox" className="custom-control-input" id="ordercheck1" />
<Label className="custom-control-label" htmlFor="ordercheck1"> </Label>
</div>,
// name: <Link to={test.link} className="text-dark font-weight-bold" searchvalue={test.name} >{test.name}</Link>,
name: <Link to={"/workload/job/" + test.name + "?cluster=" + test.cluster + "&project=" + test.project + "&workspace=" + callApiStore.workspaceFilter} className="text-dark font-weight-bold" searchvalue={test.name} > {test.name}</Link >,
cluster: <Link to={test.link} className="text-dark font-weight-bold" searchvalue={test.cluster} >{test.cluster}</Link>,
project: <Link to={test.link} className="text-dark font-weight-bold" searchvalue={test.project} >{test.project}</Link>,
// type: <Link to={test.link} className="text-dark font-weight-bold" searchvalue={test.type} >{test.type}</Link>,
// clusterIP: <div className="text-dark font-weight-bold">{test.clusterIp}</div>,
// port: setport(test.port),
// externalIp: status(test.type, test.externalIp),
status: <div className="text-dark font-weight-bold">{test.status}</div>,
completionTime: <Link to={test.link} className="text-dark font-weight-bold" searchvalue={test.completionTime} >{test.completionTime}</Link>,
action: <><Link to="#" className="mr-3 text-primary" id="edit1"><i className="mdi mdi-pencil font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="edit1">
Edit
</UncontrolledTooltip >
<Link to="#" className="text-danger" id="delete1"><i className="mdi mdi-trash-can font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="delete1">
Delete
</UncontrolledTooltip >
</>
}))
}
const Tabledata = { columns, rows };
if (check) {
return (
<div>
<LinearProgress />
</div>
)
} else {
return (
<div>
<MDBDataTable responsive data={Tabledata} className="mt-4" />
</div>
)
}
})
Example #11
| Source File: PodListTable.js From gedge-platform with Apache License 2.0 | 4 votes |
|
PodListTable = observer((props) => {
const { params = "" } = props;
const { callApiStore } = store;
let rows = ""
let columns = []
// const [isLoading, setLoading] = useState(true)
let DataList = [];
let check = true
useEffect(() => {
callApiStore.dataCheck = true
if (callApiStore.projectFilter == "all") {
callApiStore.getFilterList("pods", callApiStore.workspaceFilter, null)
}
// DeploymentList = [];
}, []);
console.log(callApiStore.workspaceFilter)
// if (callApiStore.workspaceFilterList.length > 0) {
DataList = callApiStore.podFilterList
check = callApiStore.dataCheck
console.log(check, "check")
const statusDiv = (test) => {
if (test == "Running") {
return <div className="badge badge-soft-success font-size-12">{test}</div>
} else if (test == "Pending") {
return <div className="badge badge-soft-warning font-size-12">{test}</div>
} else {
return <div className="badge badge-soft-danger font-size-12">{test}</div>
}
}
const podIps = (test) => {
let IP = ""
// console.log(test)
if (test == undefined) {
return <div>-</div>
} else {
return <div className="text-dark font-weight-bold" style={{ whiteSpace: 'pre-line' }}>{test}</div>
}
}
columns = [
{
label: <div className="custom-control custom-checkbox"> <Input type="checkbox" className="custom-control-input" id="ordercheck" /><Label className="custom-control-label" htmlFor="ordercheck"> </Label></div>,
field: "checkbox",
sort: "asc",
width: 28
},
{
label: "이름",
field: "name",
sort: "asc",
width: 78
},
{
label: "상태",
field: "status",
sort: "asc",
width: 135
},
{
label: "HostIP",
field: "hostIP",
sort: "asc",
width: 135
},
{
label: "Pod IP",
field: "podIp",
sort: "asc",
width: 135
},
{
label: "클러스터",
field: "clustername",
sort: "asc",
width: 135
},
{
label: "생성 시간",
field: "createTime",
sort: "asc",
width: 48
},
{
label: "Action",
field: "action",
sort: "asc",
width: 120
},
]
if (callApiStore.podFilterList != null) {
rows = DataList.map(test => ({
checkbox:
<div className="custom-control custom-checkbox">
<Input type="checkbox" className="custom-control-input" id="ordercheck1" />
<Label className="custom-control-label" htmlFor="ordercheck1"> </Label>
</div>,
name: <Link to={"/workload/pod/" + test.name + "?cluster=" + test.cluster + "&project=" + test.project + "&workspace=" + callApiStore.workspaceFilter} className="text-dark font-weight-bold" searchvalue={test.name} > {test.name}</Link >,
hostIP: <Link to={test.link} className="text-dark font-weight-bold" style={{ whiteSpace: 'pre-line' }} searchvalue={test.hostIP} >{test.hostIP}</Link>,
// podIp: <Link to={test.link} className="text-dark font-weight-bold" searchvalue={test.podIP} >{test.podIP}</Link>,
podIp: podIps(test.podIP),
ready: <Link to={test.link} className="text-dark font-weight-bold" >{test.ready}</Link>,
status: statusDiv(test.status),
clustername: <Link to={test.link} className="text-dark font-weight-bold" searchvalue={test.cluster} >{test.cluster}</Link>,
restart: <Link to={test.link} className="text-dark font-weight-bold" >{test.restart}</Link>,
createTime: <Link to={test.link} className="text-dark font-weight-bold" searchvalue={test.creationTimestamp} >{test.creationTimestamp}</Link>,
action: <><Link to="#" className="mr-3 text-primary" id="edit1"><i className="mdi mdi-pencil font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="edit1">
Edit
</UncontrolledTooltip >
<Link to="#" className="text-danger" id="delete1"><i className="mdi mdi-trash-can font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="delete1">
Delete
</UncontrolledTooltip >
</>
}
))
}
const Tabledata = { columns, rows };
if (check) {
return (
<div>
<LinearProgress />
</div>
)
} else {
return (
<div>
<MDBDataTable responsive data={Tabledata}
searching={true}
sortRows={['name'], ['status'], ['clustername']} className="mt-4" />
</div>
)
}
})
Example #12
| Source File: Route.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
const data = {
columns: [
{
label: <div className="custom-control custom-checkbox"> <Input type="checkbox" className="custom-control-input" id="ordercheck" /><Label className="custom-control-label" htmlFor="ordercheck"> </Label></div>,
field: "checkbox",
sort: "asc",
width: 28
},
{
label: "이름",
field: "id",
sort: "asc",
width: 78
},
{
label: "게이트웨이 주소",
field: "gatewayAddr",
sort: "asc",
width: 135
},
{
label: "앱",
field: "appName",
sort: "asc",
width: 93
},
{
label: "생성 시간",
field: "createTime",
sort: "asc",
width: 48
},
{
label: "Action",
field: "action",
sort: "asc",
width: 120
},
],
rows: [
{
checkbox:
<div className="custom-control custom-checkbox">
<Input type="checkbox" className="custom-control-input" id="ordercheck1" />
<Label className="custom-control-label" htmlFor="ordercheck1"> </Label>
</div>,
id: <Link to="maps-google" className="text-dark font-weight-bold">#NZ1572</Link>,
date: "04 Apr, 2020",
billingName: "Walter Brown",
total: "$172",
status: <div className="badge badge-soft-success font-size-12">running</div>,
//invoice: <Button className="btn-rounded" color="light">//invoice <i className="mdi mdi-download ml-2"></i></Button>,
action: <><Link to="#" className="mr-3 text-primary" id="edit1"><i className="mdi mdi-pencil font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="edit1">
Edit
</UncontrolledTooltip >
<Link to="#" className="text-danger" id="delete1"><i className="mdi mdi-trash-can font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="delete1">
Delete
</UncontrolledTooltip >
</>
},
]
}
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">
<NavItem>
<NavLink onClick={() => { this.toggleTab('1'); }} className={classnames({ active: this.state.activeTab === '1' }, "font-weight-bold p-3")}>All workspace</NavLink>
</NavItem>
<NavItem>
<NavLink onClick={() => { this.toggleTab('2'); }} className={classnames({ active: this.state.activeTab === '2' }, "p-3 font-weight-bold")}>workspace1</NavLink>
</NavItem>
<NavItem>
<NavLink onClick={() => { this.toggleTab('3'); }} className={classnames({ active: this.state.activeTab === '3' }, " p-3 font-weight-bold")}>workspace2</NavLink>
</NavItem>
</Nav>
<Col sm={6}>
<div>
<Link to="appadd" onClick={() => this.setState({ modal_static: true, isAlertOpen: false })} className="btn btn-success mb-2"><i className="mdi mdi-plus mr-2"></i> 추가</Link>
</div>
<div>
<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>프로젝트1</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
</Col>
<MDBDataTable responsive data={data} className="mt-4" />
</CardBody>
</Card>
</Col>
</Row>
</Container>s
</div>
</React.Fragment>
);
}
Example #13
| Source File: ServiceTable.js From gedge-platform with Apache License 2.0 | 4 votes |
|
ServiceTable = observer((props) => {
const { params = "" } = props;
const { callApiStore } = store;
let rows = ""
let columns = []
// const [isLoading, setLoading] = useState(true)
let DataList = [];
let check = true
useEffect(() => {
callApiStore.dataCheck = true
if (callApiStore.projectFilter == "all") {
callApiStore.getFilterList("services", callApiStore.workspaceFilter, null)
}
// DeploymentList = [];
}, []);
// if (callApiStore.workspaceFilterList.length > 0) {
DataList = callApiStore.serviceFilterList
check = callApiStore.dataCheck
console.log(check, "check")
function status(clusterType, Ip) {
let externalIp = ""
if (clusterType == "LoadBalancer") {
if (Ip == undefined) {
externalIp = "Pending"
} else {
externalIp = Ip
}
} else {
externalIp = "-"
}
return <div className="text-dark font-weight-bold">{externalIp}</div>
}
function setport(portList) {
let ports = ""
let temp = ""
if (portList == undefined) {
ports = "-"
} else {
portList.forEach(port => {
if (port.nodePort == undefined) {
temp = port.port + " / " + port.protocol + "\n";
} else {
temp = port.port + " : " + port.nodePort + " / " + port.protocol + "\n";
}
ports = ports + temp
});
}
return <div className="text-dark font-weight-bold" style={{ whiteSpace: 'pre-line' }}>{ports}</div>
}
columns = [
{
label: <div className="custom-control custom-checkbox"> <Input type="checkbox" className="custom-control-input" id="ordercheck" /><Label className="custom-control-label" htmlFor="ordercheck"> </Label></div>,
field: "checkbox",
sort: "asc",
width: 28
},
{
label: "이름",
field: "name",
sort: "asc",
width: 78
},
{
label: "클러스터",
field: "cluster",
sort: "asc",
width: 93
},
{
label: "프로젝트",
field: "project",
sort: "asc",
width: 93
},
{
label: "서비스 타입",
field: "type",
sort: "asc",
width: 93
},
{
label: "클러스터IP",
field: "clusterIP",
sort: "asc",
width: 109
},
{
label: "포트",
field: "port",
sort: "asc",
width: 109
},
{
label: "ExternalIp",
field: "externalIp",
sort: "asc",
width: 109
},
{
label: "생성 시간",
field: "createTime",
sort: "asc",
width: 48
},
{
label: "Action",
field: "action",
sort: "asc",
width: 120
},
]
console.log(DataList)
if (callApiStore.serviceFilterList != null) {
rows = DataList.map(test => ({
checkbox:
<div className="custom-control custom-checkbox">
<Input type="checkbox" className="custom-control-input" id="ordercheck1" />
<Label className="custom-control-label" htmlFor="ordercheck1"> </Label>
</div>,
name: <Link to={"/workload/service/" + test.name + "?workspace=" + test.workspace + "&project=" + test.project + "&cluster=" + test.cluster} className="text-dark font-weight-bold" searchvalue={test.name} >{test.name}</Link>,
cluster: <Link to={test.link} className="text-dark font-weight-bold" searchvalue={test.cluster} >{test.cluster}</Link>,
project: <Link to={test.link} className="text-dark font-weight-bold" searchvalue={test.project} >{test.project}</Link>,
type: <Link to={test.link} className="text-dark font-weight-bold" searchvalue={test.type} >{test.type}</Link>,
clusterIP: <div className="text-dark font-weight-bold">{test.clusterIp}</div>,
port: setport(test.port),
externalIp: status(test.type, test.externalIp),
// status: status(test.stauts),
createTime: <Link to={test.link} className="text-dark font-weight-bold" searchvalue={test.createAt} >{test.createAt}</Link>,
action: <><Link to="#" className="mr-3 text-primary" id="edit1"><i className="mdi mdi-pencil font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="edit1">
Edit
</UncontrolledTooltip >
<Link to="#" className="text-danger" id="delete1"><i className="mdi mdi-trash-can font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="delete1">
Delete
</UncontrolledTooltip >
</>
}))
}
const Tabledata = { columns, rows };
if (check) {
return (
<div>
<LinearProgress />
</div>
)
} else {
return (
<div>
<MDBDataTable responsive data={Tabledata} className="mt-4" />
</div>
)
}
})
Example #14
| Source File: CardsFooter.jsx From nodejs-rest-api-boilerplate with MIT License | 4 votes |
|
render() {
return (
<>
<footer className="footer has-cards">
<Container className="container-lg">
<Row>
<Col className="mb-5 mb-md-0" md="6">
<Card className="card-lift--hover shadow border-0">
<Link to="/landing-page">
<CardImg
alt="..."
src={require("../../assets//img/theme/landing.jpg")}
/>
</Link>
</Card>
</Col>
<Col className="mb-5 mb-lg-0" md="6">
<Card className="card-lift--hover shadow border-0">
<Link to="/profile-page">
<CardImg
alt="..."
src={require("../../assets//img/theme/profile.jpg")}
/>
</Link>
</Card>
</Col>
</Row>
</Container>
<Container>
<Row className="row-grid align-items-center my-md">
<Col lg="6">
<h3 className="text-primary font-weight-light mb-2">
Thank you for supporting us!
</h3>
<h4 className="mb-0 font-weight-light">
Let's get in touch on any of these platforms.
</h4>
</Col>
<Col className="text-lg-center btn-wrapper" lg="6">
<Button
className="btn-neutral btn-icon-only btn-round"
color="twitter"
href="https://twitter.com/creativetim"
id="tooltip475038074"
size="lg"
target="_blank"
>
<i className="fa fa-twitter" />
</Button>
<UncontrolledTooltip delay={0} target="tooltip475038074">
Follow us
</UncontrolledTooltip>
<Button
className="btn-neutral btn-icon-only btn-round ml-1"
color="facebook"
href="https://www.facebook.com/creativetim"
id="tooltip837440414"
size="lg"
target="_blank"
>
<i className="fa fa-facebook-square" />
</Button>
<UncontrolledTooltip delay={0} target="tooltip837440414">
Like us
</UncontrolledTooltip>
<Button
className="btn-neutral btn-icon-only btn-round ml-1"
color="dribbble"
href="https://dribbble.com/creativetim"
id="tooltip829810202"
size="lg"
target="_blank"
>
<i className="fa fa-dribbble" />
</Button>
<UncontrolledTooltip delay={0} target="tooltip829810202">
Follow us
</UncontrolledTooltip>
<Button
className="btn-neutral btn-icon-only btn-round ml-1"
color="github"
href="https://github.com/creativetimofficial"
id="tooltip495507257"
size="lg"
target="_blank"
>
<i className="fa fa-github" />
</Button>
<UncontrolledTooltip delay={0} target="tooltip495507257">
Star on Github
</UncontrolledTooltip>
</Col>
</Row>
<hr />
<Row className="align-items-center justify-content-md-between">
<Col md="6">
<div className="copyright">
© {new Date().getFullYear()}{" "}
<a
href="https://www.creative-tim.com?ref=adsr-footer"
target="_blank"
>
Creative Tim
</a>
.
</div>
</Col>
<Col md="6">
<Nav className="nav-footer justify-content-end">
<NavItem>
<NavLink
href="https://www.creative-tim.com?ref=adsr-footer"
target="_blank"
>
Creative Tim
</NavLink>
</NavItem>
<NavItem>
<NavLink
href="https://www.creative-tim.com/presentation?ref=adsr-footer"
target="_blank"
>
About Us
</NavLink>
</NavItem>
<NavItem>
<NavLink
href="http://blog.creative-tim.com?ref=adsr-footer"
target="_blank"
>
Blog
</NavLink>
</NavItem>
<NavItem>
<NavLink
href="https://github.com/creativetimofficial/argon-design-system-react/blob/master/LICENSE.md"
target="_blank"
>
MIT License
</NavLink>
</NavItem>
</Nav>
</Col>
</Row>
</Container>
</footer>
</>
);
}
Example #15
| Source File: SimpleFooter.jsx From nodejs-rest-api-boilerplate with MIT License | 4 votes |
|
render() {
return (
<>
<footer className=" footer">
<Container>
<Row className=" row-grid align-items-center mb-5">
<Col lg="6">
<h3 className=" text-primary font-weight-light mb-2">
Thank you for supporting us!
</h3>
<h4 className=" mb-0 font-weight-light">
Let's get in touch on any of these platforms.
</h4>
</Col>
<Col className=" text-lg-center btn-wrapper" lg="6">
<Button
className=" btn-neutral btn-icon-only btn-round"
color="twitter"
href="https://twitter.com/creativetim"
id="tooltip126536702"
size="lg"
target="_blank"
>
<i className=" fa fa-twitter" />
</Button>
<UncontrolledTooltip delay={0} target="tooltip126536702">
Follow us
</UncontrolledTooltip>
<Button
className=" btn-neutral btn-icon-only btn-round ml-1"
color="facebook"
href="https://www.facebook.com/creativetim"
id="tooltip383967593"
size="lg"
target="_blank"
>
<i className=" fa fa-facebook-square" />
</Button>
<UncontrolledTooltip delay={0} target="tooltip383967593">
Like us
</UncontrolledTooltip>
<Button
className=" btn-neutral btn-icon-only btn-round ml-1"
color="dribbble"
href="https://dribbble.com/creativetim"
id="tooltip568564532"
size="lg"
target="_blank"
>
<i className=" fa fa-dribbble" />
</Button>
<UncontrolledTooltip delay={0} target="tooltip568564532">
Follow us
</UncontrolledTooltip>
<Button
className=" btn-neutral btn-icon-only btn-round ml-1"
color="github"
href="https://github.com/creativetimofficial"
id="tooltip626177562"
size="lg"
target="_blank"
>
<i className=" fa fa-github" />
</Button>
<UncontrolledTooltip delay={0} target="tooltip626177562">
Star on Github
</UncontrolledTooltip>
</Col>
</Row>
<hr />
<Row className=" align-items-center justify-content-md-between">
<Col md="6">
<div className=" copyright">
© {new Date().getFullYear()}{" "}
<a
href="https://www.creative-tim.com?ref=adsr-footer"
target="_blank"
>
Creative Tim
</a>
.
</div>
</Col>
<Col md="6">
<Nav className=" nav-footer justify-content-end">
<NavItem>
<NavLink
href="https://www.creative-tim.com?ref=adsr-footer"
target="_blank"
>
Creative Tim
</NavLink>
</NavItem>
<NavItem>
<NavLink
href="https://www.creative-tim.com/presentation?ref=adsr-footer"
target="_blank"
>
About Us
</NavLink>
</NavItem>
<NavItem>
<NavLink
href="http://blog.creative-tim.com?ref=adsr-footer"
target="_blank"
>
Blog
</NavLink>
</NavItem>
<NavItem>
<NavLink
href="https://github.com/creativetimofficial/argon-design-system-react/blob/master/LICENSE.md"
target="_blank"
>
MIT License
</NavLink>
</NavItem>
</Nav>
</Col>
</Row>
</Container>
</footer>
</>
);
}
Example #16
| Source File: DemoNavbar.jsx From nodejs-rest-api-boilerplate with MIT License | 4 votes |
|
render() {
return (
<>
<header className="header-global">
<Navbar
className="navbar-main navbar-transparent navbar-light headroom"
expand="lg"
id="navbar-main"
>
<Container>
<NavbarBrand className="mr-lg-5" to="/" tag={Link}>
<img
alt="..."
src={require("../../assets//img/brand/argon-react-white.png")}
/>
</NavbarBrand>
<button className="navbar-toggler" id="navbar_global">
<span className="navbar-toggler-icon" />
</button>
<UncontrolledCollapse navbar toggler="#navbar_global">
<div className="navbar-collapse-header">
<Row>
<Col className="collapse-brand" xs="6">
<Link to="/">
<img
alt="..."
src={require("../../assets//img/brand/argon-react.png")}
/>
</Link>
</Col>
<Col className="collapse-close" xs="6">
<button className="navbar-toggler" id="navbar_global">
<span />
<span />
</button>
</Col>
</Row>
</div>
<Nav className="navbar-nav-hover align-items-lg-center" navbar>
<UncontrolledDropdown nav>
<DropdownToggle nav>
<i className="ni ni-ui-04 d-lg-none mr-1" />
<span className="nav-link-inner--text">Components</span>
</DropdownToggle>
<DropdownMenu className="dropdown-menu-xl">
<div className="dropdown-menu-inner">
<Media
className="d-flex align-items-center"
href="https://demos.creative-tim.com/argon-design-system-react/#/documentation/overview?ref=adsr-navbar"
target="_blank"
>
<div className="icon icon-shape bg-gradient-primary rounded-circle text-white">
<i className="ni ni-spaceship" />
</div>
<Media body className="ml-3">
<h6 className="heading text-primary mb-md-1">
Getting started
</h6>
<p className="description d-none d-md-inline-block mb-0">
Learn how to use Argon compiling Scss, change
brand colors and more.
</p>
</Media>
</Media>
<Media
className="d-flex align-items-center"
href="https://demos.creative-tim.com/argon-design-system-react/#/documentation/colors?ref=adsr-navbar"
target="_blank"
>
<div className="icon icon-shape bg-gradient-success rounded-circle text-white">
<i className="ni ni-palette" />
</div>
<Media body className="ml-3">
<h6 className="heading text-primary mb-md-1">
Foundation
</h6>
<p className="description d-none d-md-inline-block mb-0">
Learn more about colors, typography, icons and the
grid system we used for Argon.
</p>
</Media>
</Media>
<Media
className="d-flex align-items-center"
href="https://demos.creative-tim.com/argon-design-system-react/#/documentation/alert?ref=adsr-navbar"
target="_blank"
>
<div className="icon icon-shape bg-gradient-warning rounded-circle text-white">
<i className="ni ni-ui-04" />
</div>
<Media body className="ml-3">
<h5 className="heading text-warning mb-md-1">
Components
</h5>
<p className="description d-none d-md-inline-block mb-0">
Browse our 50 beautiful handcrafted components
offered in the Free version.
</p>
</Media>
</Media>
</div>
</DropdownMenu>
</UncontrolledDropdown>
<UncontrolledDropdown nav>
<DropdownToggle nav>
<i className="ni ni-collection d-lg-none mr-1" />
<span className="nav-link-inner--text">Examples</span>
</DropdownToggle>
<DropdownMenu>
<DropdownItem to="/" tag={Link}>
Landing
</DropdownItem>
<DropdownItem to="/profile" tag={Link}>
Profile
</DropdownItem>
<DropdownItem to="/login" tag={Link}>
Login
</DropdownItem>
<DropdownItem to="/addpost" tag={Link}>
Add Post
</DropdownItem>
<DropdownItem to="/posts" tag={Link}>
List Posts
</DropdownItem>
<DropdownItem to="/register" tag={Link}>
Register
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
<Nav className="align-items-lg-center ml-lg-auto" navbar>
<NavItem>
<NavLink
className="nav-link-icon"
href="https://www.facebook.com/creativetim"
id="tooltip333589074"
target="_blank"
>
<i className="fa fa-facebook-square" />
<span className="nav-link-inner--text d-lg-none ml-2">
Facebook
</span>
</NavLink>
<UncontrolledTooltip delay={0} target="tooltip333589074">
Like us on Facebook
</UncontrolledTooltip>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="https://www.instagram.com/creativetimofficial"
id="tooltip356693867"
target="_blank"
>
<i className="fa fa-instagram" />
<span className="nav-link-inner--text d-lg-none ml-2">
Instagram
</span>
</NavLink>
<UncontrolledTooltip delay={0} target="tooltip356693867">
Follow us on Instagram
</UncontrolledTooltip>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="https://twitter.com/creativetim"
id="tooltip184698705"
target="_blank"
>
<i className="fa fa-twitter-square" />
<span className="nav-link-inner--text d-lg-none ml-2">
Twitter
</span>
</NavLink>
<UncontrolledTooltip delay={0} target="tooltip184698705">
Follow us on Twitter
</UncontrolledTooltip>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="https://github.com/creativetimofficial/argon-design-system-react"
id="tooltip112445449"
target="_blank"
>
<i className="fa fa-github" />
<span className="nav-link-inner--text d-lg-none ml-2">
Github
</span>
</NavLink>
<UncontrolledTooltip delay={0} target="tooltip112445449">
Star us on Github
</UncontrolledTooltip>
</NavItem>
<NavItem className="d-none d-lg-block ml-lg-4">
<Button
className="btn-neutral btn-icon"
color="default"
href="https://www.creative-tim.com/product/argon-design-system-react?ref=adsr-navbar"
target="_blank"
>
<span className="btn-inner--icon">
<i className="fa fa-cloud-download mr-2" />
</span>
<span className="nav-link-inner--text ml-1">
Download
</span>
</Button>
</NavItem>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
</header>
</>
);
}
Example #17
| Source File: Download.jsx From nodejs-rest-api-boilerplate with MIT License | 4 votes |
|
render() {
return (
<>
<section className="section section-lg">
<Container>
<Row className="row-grid justify-content-center">
<Col className="text-center" lg="8">
<h2 className="display-3">
Do you love this awesome{" "}
<span className="text-success">
Design System for Bootstrap 4?
</span>
</h2>
<p className="lead">
Cause if you do, it can be yours for FREE. Hit the button
below to navigate to Creative Tim where you can find the
Design System in React. Start a new project or give an old
Bootstrap project a new look!
</p>
<div className="btn-wrapper">
<Button
className="mb-3 mb-sm-0"
color="primary"
href="https://www.creative-tim.com/product/argon-design-system-react?ref=adsr-landing-page"
>
Download React
</Button>
</div>
<div className="text-center">
<h4 className="display-4 mb-5 mt-5">
Available on these technologies
</h4>
<Row className="justify-content-center">
<Col lg="2" xs="4">
<a
href="https://www.creative-tim.com/product/argon-design-system?ref=adsr-landing-page"
id="tooltip255035741"
target="_blank"
>
<img
alt="..."
className="img-fluid"
src="https://s3.amazonaws.com/creativetim_bucket/tim_static_images/presentation-page/bootstrap.jpg"
/>
</a>
<UncontrolledTooltip delay={0} target="tooltip255035741">
Bootstrap 4 - Most popular front-end component library
</UncontrolledTooltip>
</Col>
<Col lg="2" xs="4">
<a
href="https://www.creative-tim.com/product/vue-argon-design-system?ref=adsr-landing-page"
id="tooltip265846671"
target="_blank"
>
<img
alt="..."
className="img-fluid"
src="https://s3.amazonaws.com/creativetim_bucket/tim_static_images/presentation-page/vue.jpg"
/>
</a>
<UncontrolledTooltip delay={0} target="tooltip265846671">
Vue.js - The progressive javascript framework
</UncontrolledTooltip>
</Col>
<Col lg="2" xs="4">
<a
href="https://www.creative-tim.com/product/argon-design-system-angular?ref=adsr-landing-page"
id="tooltip233150499"
target="_blank"
>
<img
alt="..."
className="img-fluid"
src="https://s3.amazonaws.com/creativetim_bucket/tim_static_images/presentation-page/angular.jpg"
/>
</a>
<UncontrolledTooltip delay={0} target="tooltip233150499">
Angular - One framework. Mobile & Desktop
</UncontrolledTooltip>
</Col>
<Col lg="2" xs="4">
<a
href="https://www.creative-tim.com/product/argon-design-system-react?ref=adsr-landing-page"
id="tooltip308866163"
target="_blank"
>
<img
alt="..."
className="img-fluid"
src="https://s3.amazonaws.com/creativetim_bucket/tim_static_images/presentation-page/react.jpg"
/>
</a>
<UncontrolledTooltip delay={0} target="tooltip308866163">
React - A JavaScript library for building user
interfaces
</UncontrolledTooltip>
</Col>
<Col lg="2" xs="4">
<a
href="https://www.creative-tim.com/product/argon-design-system-react?ref=adsr-landing-page"
id="tooltip76119384"
target="_blank"
>
<img
alt="..."
className="img-fluid"
src="https://s3.amazonaws.com/creativetim_bucket/tim_static_images/presentation-page/sketch.jpg"
/>
</a>
<UncontrolledTooltip delay={0} target="tooltip76119384">
Sketch - Digital design toolkit
</UncontrolledTooltip>
</Col>
<Col lg="2" xs="4">
<a
href="https://www.creative-tim.com/product/argon-design-system-react?ref=adsr-landing-page"
id="tooltip646643508"
target="_blank"
>
<img
alt="..."
className="img-fluid"
src="https://s3.amazonaws.com/creativetim_bucket/tim_static_images/presentation-page/ps.jpg"
/>
</a>
<UncontrolledTooltip delay={0} target="tooltip646643508">
Adobe Photoshop - Software for digital images
manipulation
</UncontrolledTooltip>
</Col>
</Row>
</div>
</Col>
</Row>
</Container>
</section>
</>
);
}
Example #18
| Source File: TooltipPopover.jsx From nodejs-rest-api-boilerplate with MIT License | 4 votes |
|
render() {
return (
<>
<h3 className="h4 text-success font-weight-bold mt-md mb-4">
Tooltips & Popovers
</h3>
<Row>
<Col lg="6">
<small className="d-block text-uppercase font-weight-bold mb-3">
Tooltips
</small>
<Button
className="btn-tooltip"
color="primary"
id="tooltip38321129"
size="sm"
>
On left
</Button>
<UncontrolledTooltip
delay={0}
placement="left"
target="tooltip38321129"
trigger="hover focus"
>
Tooltip on left
</UncontrolledTooltip>
<Button
className="btn-tooltip"
color="primary"
id="tooltip556394744"
size="sm"
>
On top
</Button>
<UncontrolledTooltip
delay={0}
placement="top"
target="tooltip556394744"
trigger="hover focus"
>
Tooltip on top
</UncontrolledTooltip>
<Button
className="btn-tooltip"
color="primary"
id="tooltip613577679"
size="sm"
>
On bottom
</Button>
<UncontrolledTooltip
delay={0}
placement="bottom"
target="tooltip613577679"
trigger="hover focus"
>
Tooltip on bottom
</UncontrolledTooltip>
<Button
className="btn-tooltip"
color="primary"
id="tooltip476554683"
size="sm"
>
On right
</Button>
<UncontrolledTooltip
delay={0}
placement="right"
target="tooltip476554683"
trigger="hover focus"
>
Tooltip on right
</UncontrolledTooltip>
</Col>
<Col className="mt-4 mt-lg-0" lg="6">
<small className="d-block text-uppercase font-weight-bold mb-3">
Popovers
</small>
<Button color="default" id="tooltip391311689" size="sm">
On left
</Button>
<UncontrolledPopover
trigger="focus"
placement="left"
target="tooltip391311689"
>
<PopoverHeader>Popover On Left</PopoverHeader>
<PopoverBody>
Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
</PopoverBody>
</UncontrolledPopover>
<Button color="default" id="tooltip62844899" size="sm">
On top
</Button>
<UncontrolledPopover
trigger="focus"
placement="top"
target="tooltip62844899"
>
<PopoverHeader>Popover on Top</PopoverHeader>
<PopoverBody>
Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
</PopoverBody>
</UncontrolledPopover>
<Button color="default" id="tooltip969535472" size="sm">
On right
</Button>
<UncontrolledPopover
trigger="focus"
placement="right"
target="tooltip969535472"
>
<PopoverHeader>Popover on Right</PopoverHeader>
<PopoverBody>
Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
</PopoverBody>
</UncontrolledPopover>
<Button color="default" id="tooltip60850592" size="sm">
On bottom
</Button>
<UncontrolledPopover
trigger="focus"
placement="bottom"
target="tooltip60850592"
>
<PopoverHeader>Popover on Bottom</PopoverHeader>
<PopoverBody>
Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
</PopoverBody>
</UncontrolledPopover>
</Col>
</Row>
</>
);
}
Example #19
| Source File: DeploymentTable.js From gedge-platform with Apache License 2.0 | 4 votes |
|
DeploymentTable = observer((props) => {
const { params = "" } = props;
const { callApiStore } = store;
let rows = ""
let columns = []
// const [isLoading, setLoading] = useState(true)
let DataList = [];
let check = true
useEffect(() => {
callApiStore.dataCheck = true
if (callApiStore.projectFilter == "all") {
callApiStore.getFilterList("deployments", callApiStore.workspaceFilter, null)
}
// DeploymentList = [];
}, []);
// if (callApiStore.workspaceFilterList.length > 0) {
DataList = callApiStore.deploymentFilterList
check = callApiStore.dataCheck
console.log(check, "check")
function status(deploystatus) {
if (deploystatus == "True") {
return (
<div className="badge badge-soft-success font-size-12">Active</div>
)
} else {
return (
<div className="badge badge-soft-warning font-size-12">Fail</div>
)
}
}
function setReplica(replica) {
let data = 0
// console.log(replica, replica)
if (replica != undefined) {
data = replica
return data
} else {
return data
}
}
columns = [
{
label: <div className="custom-control custom-checkbox"> <Input type="checkbox" className="custom-control-input" id="ordercheck" /><Label className="custom-control-label" htmlFor="ordercheck"> </Label></div>,
field: "checkbox",
sort: "asc",
width: 28
},
{
label: "이름",
field: "name",
sort: "asc",
width: 78
},
{
label: "READY",
field: "ready",
sort: "asc",
width: 135
},
{
label: "클러스터",
field: "cluster",
sort: "asc",
width: 135
},
{
label: "AVAILABLE",
field: "available",
sort: "asc",
width: 135
},
{
label: "상태",
field: "status",
sort: "asc",
width: 135
},
{
label: "업데이트 시간",
field: "updateTime",
sort: "asc",
width: 48
},
{
label: "Action",
field: "action",
sort: "asc",
width: 120
},
]
if (callApiStore.deploymentFilterList != null) {
rows = DataList.map(test => ({
checkbox:
<div className="custom-control custom-checkbox">
<Input type="checkbox" className="custom-control-input" id="ordercheck1" />
<Label className="custom-control-label" htmlFor="ordercheck1"> </Label>
</div>,
name: <Link to={"/workload/deployment/" + test.name + "?workspace=" + test.workspace + "&project=" + test.project + "&cluster=" + test.cluster} className="text-dark font-weight-bold" searchvalue={test.name} >{test.name}</Link>,
cluster: <Link to={test.link} className="text-dark font-weight-bold" searchvalue={test.cluster} >{test.cluster}</Link>,
ready: <div className="text-dark font-weight-bold">{setReplica(test.replica.readyReplicas) + " / " + setReplica(test.replica.replicas)}</div>,
available: <div className="text-dark font-weight-bold">{setReplica(test.replica.availableReplicas)}</div>,
status: status(test.status),
updateTime: <Link to={test.link} className="text-dark font-weight-bold" searchvalue={test.updateAt} >{test.updateAt}</Link>,
action: <><Link to="#" className="mr-3 text-primary" id="edit1"><i className="mdi mdi-pencil font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="edit1">
Edit
</UncontrolledTooltip >
<Link to="#" className="text-danger" id="delete1"><i className="mdi mdi-trash-can font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="delete1">
Delete
</UncontrolledTooltip >
</>
}))
}
const Tabledata = { columns, rows };
if (check) {
return (
<div>
<LinearProgress />
</div>
)
} else {
return (
<div>
<MDBDataTable responsive data={Tabledata} className="mt-4" />
</div>
)
}
})
Example #20
| Source File: CronjobTable.js From gedge-platform with Apache License 2.0 | 4 votes |
|
CronjobTable = observer((props) => {
const { params = "" } = props;
const { callApiStore } = store;
let rows = ""
let columns = []
// const [isLoading, setLoading] = useState(true)
let DataList = [];
let check = true
useEffect(() => {
callApiStore.dataCheck = true
// if (callApiStore.projectFilter == "all") {
if (callApiStore.projectFilter == "all") {
callApiStore.getFilterList("cronjobs", callApiStore.workspaceFilter, null)
}
// }
}, []);
console.log(callApiStore.workspaceFilter, callApiStore.projectFilter)
DataList = callApiStore.cronjobFilterList
check = callApiStore.dataCheck
console.log(check, "check")
function status(jobstatus) {
let state = ""
if (jobstatus == '1') {
state = "succeeded"
}
return state
}
columns = [
{
label: <div className="custom-control custom-checkbox"> <Input type="checkbox" className="custom-control-input" id="ordercheck" /><Label className="custom-control-label" htmlFor="ordercheck"> </Label></div>,
field: "checkbox",
sort: "asc",
width: 28
},
{
label: "이름",
field: "name",
sort: "asc",
width: 78
},
{
label: "클러스터",
field: "cluster",
sort: "asc",
width: 135
},
{
label: "프로젝트",
field: "project",
sort: "asc",
width: 78
},
{
label: "스케쥴",
field: "schedule",
sort: "asc",
width: 135
},
{
label: "생성 시간",
field: "creationTimestamp",
sort: "asc",
width: 48
},
{
label: "완료 시간",
field: "lastScheduleTime",
sort: "asc",
width: 48
},
{
label: "Action",
field: "action",
sort: "asc",
width: 120
},
]
if (callApiStore.cronjobFilterList != null) {
rows = DataList.map(test => ({
checkbox:
<div className="custom-control custom-checkbox">
<Input type="checkbox" className="custom-control-input" id="ordercheck1" />
<Label className="custom-control-label" htmlFor="ordercheck1"> </Label>
</div>,
name: <Link to={test.link} className="text-dark font-weight-bold" searchvalue={test.name} >{test.name}</Link>,
cluster: <Link to={test.link} className="text-dark font-weight-bold" searchvalue={test.cluster} >{test.cluster}</Link>,
project: <Link to={test.link} className="text-dark font-weight-bold" searchvalue={test.project} >{test.project}</Link>,
// type: <Link to={test.link} className="text-dark font-weight-bold" searchvalue={test.type} >{test.type}</Link>,
// clusterIP: <div className="text-dark font-weight-bold">{test.clusterIp}</div>,
// port: setport(test.port),
// externalIp: status(test.type, test.externalIp),
schedule: <div className="text-dark font-weight-bold">{test.schedule}</div>,
lastScheduleTime: <Link to={test.link} className="text-dark font-weight-bold" searchvalue={test.lastScheduleTime} >{test.lastScheduleTime}</Link>,
creationTimestamp: <Link to={test.link} className="text-dark font-weight-bold" searchvalue={test.creationTimestamp} >{test.creationTimestamp}</Link>,
action: <><Link to="#" className="mr-3 text-primary" id="edit1"><i className="mdi mdi-pencil font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="edit1">
Edit
</UncontrolledTooltip >
<Link to="#" className="text-danger" id="delete1"><i className="mdi mdi-trash-can font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="delete1">
Delete
</UncontrolledTooltip >
</>
}))
}
const Tabledata = { columns, rows };
if (check) {
return (
<div>
<LinearProgress />
</div>
)
} else {
return (
<div>
<MDBDataTable responsive data={Tabledata} className="mt-4" />
</div>
)
}
})
Example #21
| Source File: ProjectTable.js From gedge-platform with Apache License 2.0 | 4 votes |
|
ProjectTable = observer((props) => {
const { projectType = "" } = props
const { callApiStore } = store;
let ProjectList = [];
let check = true
let workspaceName = callApiStore.workspaceFilter
console.log(workspaceName, "workspaceFilter")
let clusterName = callApiStore.clusterFilter
console.log(clusterName, "clusterFilter")
useEffect(() => {
if (projectType == "user") {
callApiStore.getProjectWorkspaceFilterList("projects", callApiStore.workspaceFilter, projectType)
ProjectList = callApiStore.workspaceFilterList
// callApiStore.getFilterList("projects", workspaceName, "", projectType)
// ProjectList = callApiStore.filterList
} else if (projectType == "system") {
callApiStore.getClusterFilterList("projects", callApiStore.clusterFilter, projectType)
ProjectList = callApiStore.clusterFilterList
// callApiStore.getFilterList("projects", clusterName, "", projectType)
// ProjectList = callApiStore.filterList
}
}, []);
// console.log(callApiStore.filterList, "callApiStore.filterList")
// ProjectList = callApiStore.filterList
if (projectType == "user" && callApiStore.workspaceFilterList.length > 0) {
ProjectList = callApiStore.workspaceFilterList
// ProjectList = ProjectList.filter((schema, index, self) => index === self.findIndex((obj) => (obj.projectName === schema.projectName)))
} else if (projectType == "system" && callApiStore.clusterFilterList.length > 0) {
console.log(projectType, "projectType")
ProjectList = callApiStore.clusterFilterList
}
check = callApiStore.dataCheck
console.log(ProjectList, "ProjectList")
function workspaceTemp(projectName, workspaceName, projectType) {
let workspaceTemp = "";
if (projectType == "user") {
workspaceTemp = <Link to={"/project/" + projectType + "/" + projectName + "?workspace=" + workspaceName} className="text-dark font-weight-bold" >{workspaceName}</Link>;
} else if (projectType == "system") {
workspaceTemp = <Link to={"/project/" + projectType + "/" + projectName + "?cluster=" + workspaceName} className="text-dark font-weight-bold" >SystemProject</Link>;
}
return workspaceTemp
}
function status(status) {
if (status == "Active") {
return (
<div className="badge badge-soft-success font-size-12">{status}</div>
)
} else if (status == "Terminating") {
return (
<div className="badge badge-soft-warning font-size-12">{status}</div>
)
}
}
const rows = ProjectList.map(list => ({
// const rows = apilistinfo.map((test, index) => ({
checkbox:
<div className="custom-control custom-checkbox">
<Input type="checkbox" className="custom-control-input" id="ordercheck1" />
<Label className="custom-control-label" htmlFor="ordercheck1"> </Label>
</div>,
name: <Link to={"/project/" + projectType + "/" + list.projectName + "?workspace=" + list.workspaceName + "&cluster=" + list.selectCluster} className="text-dark font-weight-bold" searchvalue={list.projectName}>{list.projectName}</Link>,
workspace: workspaceTemp(list.projectName, list.workspaceName, projectType),
cluster: <Link to={"/project/" + projectType + "/" + list.projectName + "?workspace=" + list.workspaceName + "&cluster=" + list.selectCluster} className="text-dark font-weight-bold" searchvalue={list.selectCluster}> {list.selectCluster}</Link>,
status: status(list.status),
cpu: <div className="text-dark font-weight-bold">{list.resourceUsage.namespace_cpu}</div>,
memory: <div className="text-dark font-weight-bold">{list.resourceUsage.namespace_memory}</div>,
pods: <div className="text-dark font-weight-bold">{list.resourceUsage.namespace_pod_count}</div>,
action: <><Link to="#" className="mr-3 text-primary" id="edit1"><i className="mdi mdi-pencil font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="edit1">
Edit
</UncontrolledTooltip >
<Link to="#" className="text-danger" id="delete1"><i className="mdi mdi-trash-can font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="delete1">
Delete
</UncontrolledTooltip >
</>
}))
const columns = [
{
label: <div className="custom-control custom-checkbox"> <Input type="checkbox" className="custom-control-input" id="ordercheck" /><Label className="custom-control-label" htmlFor="ordercheck"> </Label></div>,
field: "checkbox",
sort: "asc",
width: 28
},
{
label: "이름",
field: "name",
sort: "asc",
width: 78
},
{
label: "상태",
field: "status",
sort: "asc",
width: 93
},
{
label: "워크스페이스",
field: "workspace",
sort: "asc",
width: 109
},
{
label: "클러스터 명",
field: "cluster",
sort: "asc",
width: 109
},
{
label: "CPU 사용량(core)",
field: "cpu",
sort: "asc",
width: 100,
},
{
label: "Memory 사용량(Gi)",
field: "memory",
sort: "asc",
width: 100,
},
{
label: "Pods 수(개)",
field: "pods",
sort: "asc",
width: 150,
},
{
label: "",
field: "action",
sort: "asc",
width: 120
},
]
const Tabledata = { columns, rows };
return (
<div>
<MDBDataTable responsive data={Tabledata} className="mt-4" />
</div>
)
})
Example #22
| Source File: CoreCloud_bak.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
const apilistinfo = this.state.apilistinfo;
// const infoList = this.state.infoList;
console.log(apilistinfo)
let apitoData = [];
let deploy_status = '';
let appName = '';
// let labels = apilistinfo.metadata.labels.beta.kubernetes.io;
// console.log(labels)
let dataFromApi = apilistinfo.map(list => {
// if (list.status.availableReplicas == list.status.replicas) {
// deploy_status = "running"
// } else {
// deploy_status = "provisioning"
// }
// if (list.metadata.labels.app == undefined) {
// appName = "-"
// } else {
// appName = list.metadata.labels.app
// }
return {
link: "/cluster/namespace=" + list.metadata.resourceVersion + "/edge/" + list.metadata.name,
// link: "/workload/deployment/" + list.metadata.name,
name: list.metadata.name,
cpu: list.status.capacity.cpu,
memeory: list.status.capacity.memeory,
version: list.status.nodeInfo.kubeletVersion,
}
})
apitoData = dataFromApi;
console.log(apitoData, "apitoData")
const rows = apitoData.map(test => ({
// const rows = apilistinfo.map((test, index) => ({
checkbox:
<div className="custom-control custom-checkbox">
<Input type="checkbox" className="custom-control-input" id="ordercheck1" />
<Label className="custom-control-label" htmlFor="ordercheck1"> </Label>
</div>,
id: <Link to="/cluster/core-detail" className="text-dark font-weight-bold">{test.id}</Link>,
// name: <Link to={`/cluster/namespace=${test.metadata.resourceVersion}/edge/${test.metadata.name}`} className="text-dark font-weight-bold" searchvalue={test.metadata.name}>{test.metadata.name}</Link>,
name: <Link to={test.link} className="text-dark font-weight-bold" searchvalue={test.name}>{test.name}</Link>,
// Target: <Link to="/cluster/edge-detail" className="text-dark font-weight-bold" searchvalue={port[index]} key={index}>{port[index]}</Link>,
// status: <Link to="/cluster/edge-detail" className="text-dark font-weight-bold" searchvalue={test.username}> <Moment format="YYYY/MM/DD HH:mm:ss" date={test.metadata.creationTimestamp}></Moment></Link>,
status: <Link to="/cluster/edge-detail" className="text-dark font-weight-bold" searchvalue={test.username}> {test.username}</Link>,
role: <div className="badge badge-soft-success font-size-12">{test.name}</div>,
cpu: <div className="text-dark font-weight-bold">{test.cpu}</div>,
memeory: <div className="text-dark font-weight-bold">{test.memory}</div>,
version: <div className="text-dark font-weight-bold">{test.version}</div>,
// status: <div className="badge badge-soft-success font-size-12"></div>,
action: <><Link to="#" className="mr-3 text-primary" id="edit1"><i className="mdi mdi-pencil font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="edit1">
Edit
</UncontrolledTooltip >
<Link to="#" className="text-danger" id="delete1"><i className="mdi mdi-trash-can font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="delete1">
Delete
</UncontrolledTooltip >
</>
}))
const data = {
columns: [
{
label: <div className="custom-control custom-checkbox"> <Input type="checkbox" className="custom-control-input" id="ordercheck" /><Label className="custom-control-label" htmlFor="ordercheck"> </Label></div>,
field: "checkbox",
sort: "asc",
width: 28
},
{
label: '이름',
field: 'name',
sort: 'asc',
width: 150
},
{
label: '상태',
field: 'status',
sort: 'asc',
width: 270
},
{
label: '역할',
field: 'role',
sort: 'asc',
width: 200
},
{
label: 'cpu',
field: 'cpu',
sort: 'asc',
width: 100
},
{
label: 'memeory',
field: 'memeory',
sort: 'asc',
width: 100
},
{
label: 'version',
field: 'version',
sort: 'asc',
width: 150
},
{
label: "",
field: "action",
sort: "asc",
width: 120
},
],
rows
};
// console.log(this.state.users + "last");
// console.log(api.getAPI());
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
{/* <Table rows={rows} columns={columns} />; */}
<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="/cluster/edge/add" onClick={() => this.setState({ modal_static: true, isAlertOpen: false })} className="btn btn-success mb-2"><i className="mdi mdi-plus mr-2"></i> 추가</Link>
</div>
{/* {api.getAPI()} */}
<MDBDataTable
searching={true}
sortRows={['name']}
// entries={50}
// entriesOptions={[20, 30, 50, 100]}
responsive data={data} className="mt-4" />
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
)
}
Example #23
| Source File: CommonTable.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
console.log(this.props);
// const { users } = this.props;
const rows = {
// = users.map(test => ({
checkbox:
<div className="custom-control custom-checkbox">
<Input type="checkbox" className="custom-control-input" id="ordercheck1" />
<Label className="custom-control-label" htmlFor="ordercheck1"> </Label>
</div>,
id: <Link to="/cluster/core-detail" className="text-dark font-weight-bold">{this.props.id}</Link>,
name: <Link to="maps-google" className="text-dark font-weight-bold" searchvalue={this.props.name}>{this.props.name}</Link>,
userId: <Link to="/cluster/edge-detail" className="text-dark font-weight-bold" searchvalue={this.props.username}>{this.props.username}</Link>,
email: <div className="badge badge-soft-success font-size-12">{this.props.email}</div>,
// status: <div className="badge badge-soft-success font-size-12"></div>,
action: <><Link to="#" className="mr-3 text-primary" id="edit1"><i className="mdi mdi-pencil font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="edit1">
Edit
</UncontrolledTooltip >
<Link to="#" className="text-danger" id="delete1"><i className="mdi mdi-trash-can font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="delete1">
Delete
</UncontrolledTooltip >
</>
// }))
}
const data = {
columns: [
{
label: <div className="custom-control custom-checkbox"> <Input type="checkbox" className="custom-control-input" id="ordercheck" /><Label className="custom-control-label" htmlFor="ordercheck"> </Label></div>,
field: "checkbox",
sort: "asc",
width: 28
},
{
label: '이름',
field: 'name',
sort: 'asc',
width: 150
},
{
label: '타입',
field: 'username',
sort: 'asc',
width: 270
},
{
label: '상태',
field: 'email',
sort: 'asc',
width: 200
},
{
label: '노드 개수',
field: 'phone',
sort: 'asc',
width: 100
},
{
label: '버전',
field: 'city',
sort: 'asc',
width: 150
},
{
label: "",
field: "action",
sort: "asc",
width: 120
},
],
rows
};
console.log(rows);
return (
<MDBDataTable
searching={true}
entries={50}
entriesOptions={[20, 30, 50, 100]}
responsive data={data} className="mt-4" />
)
}
Example #24
| Source File: ClusterTable.js From gedge-platform with Apache License 2.0 | 4 votes |
|
ClusterTable = observer((props) => {
const { clusterType } = props;
const { callApiStore } = store;
let clusterlist = []
let check = true
useEffect(() => {
// console.log(clusterType, "clusterType")
callApiStore.getClusterList("clusters", clusterType);
// dbApiStore.getClusterList("clusters");
}, []);
if (callApiStore.clusterList !== undefined) {
clusterlist = callApiStore.clusterList;
}
console.log(clusterlist, "clusterlist")
check = callApiStore.dataCheck
const rows = clusterlist.map(list => ({
checkbox:
<div className="custom-control custom-checkbox">
<Input type="checkbox" className="custom-control-input" id="ordercheck1" />
<Label className="custom-control-label" htmlFor="ordercheck1"> </Label>
</div>,
name: <Link to={"/cluster/" + clusterType + "/" + list.clusterName} className="text-dark font-weight-bold" searchvalue={list.clusterName} >{list.clusterName}</Link>,
status: <div className="badge badge-soft-success font-size-12">{list.status}</div>,
// gpu: <div className="badge badge-soft-success font-size-12">{list.gpu}</div>,
cpu: <Link to={"/cluster/" + clusterType + "/" + list.clusterName} className="text-dark font-weight-bold" searchvalue={list.resourceUsage.cpu_usage} >{list.resourceUsage.cpu_usage}</Link>,
memory: <Link to={"/cluster/" + clusterType + "/" + list.clusterName} className="text-dark font-weight-bold" searchvalue={list.resourceUsage.cpu_usage} >{list.resourceUsage.memory_usage}</Link>,
pods: <Link to={" /cluster/ " + clusterType + " /" + list.clusterName} className="text-dark font-weight-bold" searchvalue={list.resourceUsage.cpu_usage} >{list.resourceUsage.pod_running}</Link>,
action: <><Link to="#" className="mr-3 text-primary" id="edit1"><i className="mdi mdi-pencil font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="edit1">
Edit
</UncontrolledTooltip >
<Link to="#" className="text-danger" id="delete1"><i className="mdi mdi-trash-can font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="delete1">
Delete
</UncontrolledTooltip >
</>
}))
const columns = [
{
label: <div className="custom-control custom-checkbox"> <Input type="checkbox" className="custom-control-input" id="ordercheck" /><Label className="custom-control-label" htmlFor="ordercheck"> </Label></div>,
field: "checkbox",
sort: "asc",
width: 28,
},
{
label: "이름",
field: "name",
sort: "asc",
width: 150,
},
{
label: "상태",
field: "status",
sort: "asc",
width: 270,
},
{
label: "GPU",
field: "gpu",
sort: "asc",
width: 200,
},
{
label: "CPU 사용량(core)",
field: "cpu",
sort: "asc",
width: 100,
},
{
label: "Memory 사용량(Gi)",
field: "memory",
sort: "asc",
width: 100,
},
{
label: "Pods 수(개)",
field: "pods",
sort: "asc",
width: 150,
},
{
label: "",
field: "action",
sort: "asc",
width: 120,
},
];
const Tabledata = { columns, rows };
return (
<div>
<MDBDataTable responsive data={Tabledata} searching={true} sorting={true} className="mt-4" />
</div>
)
// if (check) {
// return (
// <div>
// <LinearProgress />
// </div>
// )
// } else {
// return (
// <div>
// <MDBDataTable responsive data={Tabledata} className="mt-4" />
// </div>
// )
// }
})
Example #25
| Source File: WorkspaceTable.js From gedge-platform with Apache License 2.0 | 4 votes |
|
WorkspaceTable = observer((props) => {
// const { projectType } = props;
const { callApiStore } = store;
let check = true
let workspaceList = []
useEffect(() => {
console.log("렌더링됨")
callApiStore.getWorkspaceList("workspaces");
const err= callApiStore.postWorkspaceMessage
}, []);
if (callApiStore.workspaceList !== undefined) {
workspaceList = callApiStore.workspaceList;
}
// console.log("렌더링됨")
console.log(workspaceList)
console.log(callApiStore.postWorkspaceMessage, "workspace err")
check = callApiStore.dataCheck
const rows = workspaceList.map(test => ({
// const rows = apilistinfo.map((test, index) => ({
checkbox:
<div className="custom-control custom-checkbox">
<Input type="checkbox" className="custom-control-input" id="ordercheck1" />
<Label className="custom-control-label" htmlFor="ordercheck1"> </Label>
</div>,
name: <Link to="#" className="text-dark font-weight-bold" searchvalue={test.workspaceName}>{test.workspaceName}</Link>,
description: <Link to="#" className="text-dark font-weight-bold" searchvalue={test.workspaceDescription}> {test.workspaceDescription}</Link>,
cluster: <div className="text-dark font-weight-bold">{test.selectCluster}</div>,
owner: <div className="text-dark font-weight-bold">{test.workspaceOwner}</div>,
creator: <div className="text-dark font-weight-bold">{test.workspaceCreator}</div>,
createTime: <div className="text-dark font-weight-bold">{test.created_at}</div>,
action: <><Link to="#" className="mr-3 text-primary" id="edit1"><i className="mdi mdi-pencil font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="edit1">
Edit
</UncontrolledTooltip >
<Link to="#" className="text-danger" id="delete1"><i className="mdi mdi-trash-can font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="delete1">
Delete
</UncontrolledTooltip >
</>
}))
const columns = [
{
label: <div className="custom-control custom-checkbox"> <Input type="checkbox" className="custom-control-input" id="ordercheck" /><Label className="custom-control-label" htmlFor="ordercheck"> </Label></div>,
field: "checkbox",
sort: "asc",
width: 28
},
{
label: "이름",
field: "name",
sort: "asc",
width: 78
},
{
label: "설명",
field: "description",
sort: "asc",
width: 93
},
{
label: "클러스터",
field: "cluster",
sort: "asc",
width: 109
},
{
label: "OWNER",
field: "owner",
sort: "asc",
width: 109
},
{
label: "CREATOR",
field: "creator",
sort: "asc",
width: 48
},
{
label: "생성 시간",
field: "createTime",
sort: "asc",
width: 135
},
{
label: "",
field: "action",
sort: "asc",
width: 120
},
]
const Tabledata = { columns, rows };
return (
<div>
<MDBDataTable responsive data={Tabledata} searching={true} sorting={true} className="mt-4" />
</div>
)
// if (check) {
// return (
// <div>
// <LinearProgress />
// </div>
// )
// } else {
// return (
// <div>
// <MDBDataTable responsive data={Tabledata} className="mt-4" />
// </div>
// )
// }
})
Example #26
| Source File: UserTable.js From gedge-platform with Apache License 2.0 | 4 votes |
|
UserTable = observer((props) => {
const { callApiStore } = store;
useEffect(() => {
// console.log(clusterType, "clusterType")
callApiStore.getMemberList("members");
// dbApiStore.getClusterList("clusters");
}, []);
let memberList = []
if (callApiStore.memberList !== undefined) {
memberList = callApiStore.memberList;
}
const rows = memberList.map(list => ({
checkbox:
<div className="custom-control custom-checkbox">
<Input type="checkbox" className="custom-control-input" id="ordercheck1" />
<Label className="custom-control-label" htmlFor="ordercheck1"> </Label>
</div>,
id: <div className="text-dark font-weight-bold" searchvalue={list.memberId} >{list.memberId}</div>,
name: <div className="text-dark font-weight-bold" searchvalue={list.memberName} >{list.memberName}</div>,
email: <div className="text-dark font-weight-bold" searchvalue={list.memberEmail} >{list.memberEmail}</div>,
contact: <div className="text-dark font-weight-bold" searchvalue={list.memberContact} >{list.memberContact}</div>,
description: <div className="text-dark font-weight-bold" searchvalue={list.memberDescription} >{list.memberDescription}</div>,
role: <div className="text-dark font-weight-bold" searchvalue={list.memberRole} >{list.memberRole}</div>,
createAt: <div className="text-dark font-weight-bold" searchvalue={list.created_at} >{list.created_at}</div>,
loginAt: <div className="text-dark font-weight-bold" searchvalue={list.logined_at} >{list.logined_at}</div>,
action: <><Link to="#" className="mr-3 text-primary" id="edit1"><i className="mdi mdi-pencil font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="edit1">
Edit
</UncontrolledTooltip >
<Link to="#" className="text-danger" id="delete1"><i className="mdi mdi-trash-can font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="delete1">
Delete
</UncontrolledTooltip >
</>
}))
const columns = [
{
label: <div className="custom-control custom-checkbox"> <Input type="checkbox" className="custom-control-input" id="ordercheck" /><Label className="custom-control-label" htmlFor="ordercheck"> </Label></div>,
field: "checkbox",
sort: "asc",
width: 28,
},
{
label: "ID",
field: "id",
sort: "asc",
width: 150,
},
{
label: "이름",
field: "name",
sort: "asc",
width: 150,
},
{
label: "Email",
field: "email",
sort: "asc",
width: 270,
},
{
label: "Contact",
field: "contact",
sort: "asc",
width: 200,
},
{
label: "Description",
field: "description",
sort: "asc",
width: 200,
},
{
label: "역할",
field: "role",
sort: "asc",
width: 100,
},
{
label: "생성일",
field: "createAt",
sort: "asc",
width: 100,
},
{
label: "마지막 로그인",
field: "loginAt",
sort: "asc",
width: 150,
},
{
label: "",
field: "action",
sort: "asc",
width: 120,
},
];
const Tabledata = { columns, rows };
return (
<div>
<MDBDataTable responsive data={Tabledata}searching={true} sorting={true} className="mt-4" />
</div>
)
// if (check) {
// return (
// <div>
// <LinearProgress />
// </div>
// )
// } else {
// return (
// <div>
// <MDBDataTable responsive data={Tabledata} className="mt-4" />
// </div>
// )
// }
})
Example #27
| Source File: email-read.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="사용자 프로젝트" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col lg={12}>
<Card>
<CardBody>
<div>
<Link to="ecommerce-add-product" onClick={() => this.setState({ modal_static: true, isAlertOpen: false })} className="btn btn-success mb-2"><i className="mdi mdi-plus mr-2"></i> 추가</Link>
</div>
<div className="table-responsive mt-3">
<Table className="table-centered datatable dt-responsive nowrap " style={{ borderCollapse: "collapse", borderSpacing: 0, width: "100%" }}>
<thead className="thead-light">
<tr>
<th style={{ width: "20px" }}>
<div className="custom-control custom-checkbox">
<Input type="checkbox" className="custom-control-input" id="customercheck" />
<Label className="custom-control-label" htmlFor="customercheck"> </Label>
</div>
</th>
<th>이름</th>
<th>상태</th>
<th>워크스페이스</th>
<th>CPU</th>
<th>메모리</th>
<th>파드</th>
<th style={{ width: "120px" }}>Action</th>
</tr>
</thead>
<tbody>
{
this.state.data.map((customerData, key) =>
<tr key={key}>
<td>
<div className="custom-control custom-checkbox">
<Input type="checkbox" className="custom-control-input" id={"customercheck" + key} />
<Label className="custom-control-label" htmlFor={"customercheck" + key}> </Label>
</div>
</td>
<td>{customerData.customer}<Link to="/dashboard"></Link></td>
<td>{customerData.email}</td>
<td>{customerData.phone}</td>
<td>
{customerData.balance}
</td>
<td>
{customerData.date}
</td>
<td>
{customerData.date}
</td>
<td>
<Link to="/dashboard" className="mr-3 text-primary" id={"edit" + key}><i className="mdi mdi-pencil font-size-18"></i></Link>
<UncontrolledTooltip target={"edit" + key} placement="top">
Edit
</UncontrolledTooltip>
<Link to="#" className="text-danger" id={"delete" + key}><i className="mdi mdi-trash-can font-size-18"></i></Link>
<UncontrolledTooltip target={"delete" + key} placement="top">
Delete
</UncontrolledTooltip>
</td>
</tr>
)
}
</tbody>
</Table>
</div>
</CardBody>
</Card>
</Col>
</Row>
<Modal
isOpen={this.state.modal_static}
toggle={this.tog_static}
backdrop="static"
centered
size="lg"
>
<ModalHeader toggle={() => this.setState({ modal_static: false })}>
Add Customer Details
</ModalHeader>
<ModalBody>
<AvForm onValidSubmit={this.addCustomer}>
<Row>
<Col lg={12}>
<Alert color="success" isOpen={this.state.isAlertOpen} toggle={() => this.setState({ isAlertOpen: false })}>
Data Added Successfully...!
</Alert>
<FormGroup>
<Label htmlFor="name">Customer Name</Label>
<AvField
name="custname"
type="text"
className="form-control"
id="custname"
placeholder="Enter Customer Name"
required
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg={4}>
<FormGroup>
<Label htmlFor="email">Email</Label>
<AvField
name="custemail"
type="email"
className="form-control"
id="custemail"
placeholder="Enter Email"
required
/>
</FormGroup>
</Col>
<Col lg={4}>
<FormGroup>
<Label htmlFor="email">Phone Number</Label>
<AvField
name="phonenumber"
type="number"
className="form-control"
id="phonenumber"
placeholder="Enter Phone Number"
required
/>
</FormGroup>
</Col>
<Col lg={4}>
<FormGroup>
<Label htmlFor="email">Wallet Balance</Label>
<AvField
name="wBalance"
type="number"
className="form-control"
id="wBalance"
placeholder="Wallet Balance"
required
/>
</FormGroup>
</Col>
</Row>
<ModalFooter>
<Button type="button" color="light" onClick={() => this.setState({ modal_static: false })}>Calcel</Button>
<Button type="submit" color="primary">Add</Button>
</ModalFooter>
</AvForm>
</ModalBody>
</Modal>
</Container>
</div>
</React.Fragment>
);
}
Example #28
| Source File: Orders.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
const data = {
columns: [
{
label: <div className="custom-control custom-checkbox"> <Input type="checkbox" className="custom-control-input" id="ordercheck" /><Label className="custom-control-label" htmlFor="ordercheck"> </Label></div>,
field: "checkbox",
sort: "asc",
width: 28
},
{
label: "Order ID",
field: "id",
sort: "asc",
width: 78
},
{
label: "Date",
field: "date",
sort: "asc",
width: 93
},
{
label: "Billing Name",
field: "billingName",
sort: "asc",
width: 109
},
{
label: "Total",
field: "total",
sort: "asc",
width: 48
},
{
label: "Payment Status",
field: "status",
sort: "asc",
width: 135
},
// {
// label: "//invoice",
// field: "//invoice",
// sort: "asc",
// width: 110
// },
{
label: "Action",
field: "action",
sort: "asc",
width: 120
},
],
rows: [
{
checkbox:
<div className="custom-control custom-checkbox">
<Input type="checkbox" className="custom-control-input" id="ordercheck1" />
<Label className="custom-control-label" htmlFor="ordercheck1"> </Label>
</div>,
id: <Link to="maps-google" className="text-dark font-weight-bold">#NZ1572</Link>,
date: "04 Apr, 2020",
billingName: "Walter Brown",
total: "$172",
status: <div className="badge badge-soft-success font-size-12">running</div>,
//invoice: <Button className="btn-rounded" color="light">//invoice <i className="mdi mdi-download ml-2"></i></Button>,
action: <><Link to="#" className="mr-3 text-primary" id="edit1"><i className="mdi mdi-pencil font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="edit1">
Edit
</UncontrolledTooltip >
<Link to="#" className="text-danger" id="delete1"><i className="mdi mdi-trash-can font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="delete1">
Delete
</UncontrolledTooltip >
</>
},
{
checkbox:
<div className="custom-control custom-checkbox">
<Input type="checkbox" className="custom-control-input" id="ordercheck2" />
<Label className="custom-control-label" htmlFor="ordercheck2"> </Label>
</div>,
id: <Link to="#" className="text-dark font-weight-bold">#NZ1571</Link>,
date: "03 Apr, 2020",
billingName: "Jimmy Barker",
total: "$165",
status: <div className="badge badge-soft-warning font-size-12">unpaid</div>,
//invoice: <Button className="btn-rounded" color="light">//invoice <i className="mdi mdi-download ml-2"></i></Button>,
action: <><Link to="#" className="mr-3 text-primary" id="edit2"><i className="mdi mdi-pencil font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="edit2">
Edit
</UncontrolledTooltip >
<Link to="#" className="text-danger" id="delete2"><i className="mdi mdi-trash-can font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="delete2">
Delete
</UncontrolledTooltip >
</>
},
{
checkbox:
<div className="custom-control custom-checkbox">
<Input type="checkbox" className="custom-control-input" id="ordercheck3" />
<Label className="custom-control-label" htmlFor="ordercheck3"> </Label>
</div>,
id: <Link to="#" className="text-dark font-weight-bold">#NZ1570</Link>,
date: "03 Apr, 2020",
billingName: "Donald Bailey",
total: "$146",
status: <div className="badge badge-soft-success font-size-12">Paid</div>,
//invoice: <Button className="btn-rounded" color="light">//invoice <i className="mdi mdi-download ml-2"></i></Button>,
action: <><Link to="#" className="mr-3 text-primary" id="edit3"><i className="mdi mdi-pencil font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="edit3">
Edit
</UncontrolledTooltip >
<Link to="#" className="text-danger" id="delete3"><i className="mdi mdi-trash-can font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="delete3">
Delete
</UncontrolledTooltip >
</>
},
{
checkbox:
<div className="custom-control custom-checkbox">
<Input type="checkbox" className="custom-control-input" id="ordercheck4" />
<Label className="custom-control-label" htmlFor="ordercheck4"> </Label>
</div>,
id: <Link to="#" className="text-dark font-weight-bold">#NZ1569</Link>,
date: "02 Apr, 2020",
billingName: "Paul Jones",
total: "$183",
status: <div className="badge badge-soft-success font-size-12">Paid</div>,
//invoice: <Button className="btn-rounded" color="light">//invoice <i className="mdi mdi-download ml-2"></i></Button>,
action: <><Link to="#" className="mr-3 text-primary" id="edit4"><i className="mdi mdi-pencil font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="edit4">
Edit
</UncontrolledTooltip >
<Link to="#" className="text-danger" id="delete5"><i className="mdi mdi-trash-can font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="delete5">
Delete
</UncontrolledTooltip >
</>
},
{
checkbox:
<div className="custom-control custom-checkbox">
<Input type="checkbox" className="custom-control-input" id="ordercheck6" />
<Label className="custom-control-label" htmlFor="ordercheck6"> </Label>
</div>,
id: <Link to="#" className="text-dark font-weight-bold">#NZ1568</Link>,
date: "04 Apr, 2020",
billingName: "Walter Brown",
total: "$172",
status: <div className="badge badge-soft-danger font-size-12">running</div>,
//invoice: <Button className="btn-rounded" color="light">//invoice <i className="mdi mdi-download ml-2"></i></Button>,
action: <><Link to="#" className="mr-3 text-primary" id="edit6"><i className="mdi mdi-pencil font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="edit6">
Edit
</UncontrolledTooltip >
<Link to="#" className="text-danger" id="delete6"><i className="mdi mdi-trash-can font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="delete6">
Delete
</UncontrolledTooltip >
</>
},
{
checkbox:
<div className="custom-control custom-checkbox">
<Input type="checkbox" className="custom-control-input" id="ordercheck7" />
<Label className="custom-control-label" htmlFor="ordercheck7"> </Label>
</div>,
id: <Link to="#" className="text-dark font-weight-bold">#NZ1567</Link>,
date: "04 Apr, 2020",
billingName: "Walter Brown",
total: "$172",
status: <div className="badge badge-soft-warning font-size-12">unpaid</div>,
//invoice: <Button className="btn-rounded" color="light">//invoice <i className="mdi mdi-download ml-2"></i></Button>,
action: <><Link to="#" className="mr-3 text-primary" id="edit7"><i className="mdi mdi-pencil font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="edit7">
Edit
</UncontrolledTooltip >
<Link to="#" className="text-danger" id="delete7"><i className="mdi mdi-trash-can font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="delete7">
Delete
</UncontrolledTooltip >
</>
},
{
checkbox:
<div className="custom-control custom-checkbox">
<Input type="checkbox" className="custom-control-input" id="ordercheck8" />
<Label className="custom-control-label" htmlFor="ordercheck8"> </Label>
</div>,
id: <Link to="#" className="text-dark font-weight-bold">#NZ1566</Link>,
date: "04 Apr, 2020",
billingName: "Walter Brown",
total: "$172",
status: <div className="badge badge-soft-success font-size-12">Paid</div>,
//invoice: <Button className="btn-rounded" color="light">//invoice <i className="mdi mdi-download ml-2"></i></Button>,
action: <><Link to="#" className="mr-3 text-primary" id="edit9"><i className="mdi mdi-pencil font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="edit9">
Edit
</UncontrolledTooltip >
<Link to="#" className="text-danger" id="delete9"><i className="mdi mdi-trash-can font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="delete9">
Delete
</UncontrolledTooltip >
</>
},
{
checkbox:
<div className="custom-control custom-checkbox">
<Input type="checkbox" className="custom-control-input" id="ordercheck10" />
<Label className="custom-control-label" htmlFor="ordercheck10"> </Label>
</div>,
id: <Link to="#" className="text-dark font-weight-bold">#NZ1565</Link>,
date: "04 Apr, 2020",
billingName: "Walter Brown",
total: "$172",
status: <div className="badge badge-soft-success font-size-12">Paid</div>,
//invoice: <Button className="btn-rounded" color="light">//invoice <i className="mdi mdi-download ml-2"></i></Button>,
action: <><Link to="#" className="mr-3 text-primary" id="edit10"><i className="mdi mdi-pencil font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="edit10">
Edit
</UncontrolledTooltip >
<Link to="#" className="text-danger" id="delete10"><i className="mdi mdi-trash-can font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="delete10">
Delete
</UncontrolledTooltip >
</>
},
{
checkbox:
<div className="custom-control custom-checkbox">
<Input type="checkbox" className="custom-control-input" id="ordercheck11" />
<Label className="custom-control-label" htmlFor="ordercheck11"> </Label>
</div>,
id: <Link to="#" className="text-dark font-weight-bold">#NZ1564</Link>,
date: "04 Apr, 2020",
billingName: "Walter Brown",
total: "$172",
status: <div className="badge badge-soft-success font-size-12">Paid</div>,
//invoice: <Button className="btn-rounded" color="light">//invoice <i className="mdi mdi-download ml-2"></i></Button>,
action: <><Link to="#" className="mr-3 text-primary" id="edit11"><i className="mdi mdi-pencil font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="edit11">
Edit
</UncontrolledTooltip >
<Link to="#" className="text-danger" id="delete11"><i className="mdi mdi-trash-can font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="delete11">
Delete
</UncontrolledTooltip >
</>
},
{
checkbox:
<div className="custom-control custom-checkbox">
<Input type="checkbox" className="custom-control-input" id="ordercheck12" />
<Label className="custom-control-label" htmlFor="ordercheck12"> </Label>
</div>,
id: <Link to="#" className="text-dark font-weight-bold">#NZ1563</Link>,
date: "04 Apr, 2020",
billingName: "Walter Brown",
total: "$172",
status: <div className="badge badge-soft-warning font-size-12">unpaid</div>,
//invoice: <Button className="btn-rounded" color="light">//invoice <i className="mdi mdi-download ml-2"></i></Button>,
action: <><Link to="#" className="mr-3 text-primary" id="edit12"><i className="mdi mdi-pencil font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="edit12">
Edit
</UncontrolledTooltip >
<Link to="#" className="text-danger" id="delete12"><i className="mdi mdi-trash-can font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="delete12">
Delete
</UncontrolledTooltip >
</>
},
{
checkbox:
<div className="custom-control custom-checkbox">
<Input type="checkbox" className="custom-control-input" id="ordercheck13" />
<Label className="custom-control-label" htmlFor="ordercheck13"> </Label>
</div>,
id: <Link to="#" className="text-dark font-weight-bold">#NZ15632</Link>,
date: "04 Apr, 2020",
billingName: "Walter Brown",
total: "$172",
status: <div className="badge badge-soft-success font-size-12">Paid</div>,
//invoice: <Button className="btn-rounded" color="light">//invoice <i className="mdi mdi-download ml-2"></i></Button>,
action: <><Link to="#" className="mr-3 text-primary" id="edit13"><i className="mdi mdi-pencil font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="edit13">
Edit
</UncontrolledTooltip >
<Link to="#" className="text-danger" id="delete13"><i className="mdi mdi-trash-can font-size-18"></i></Link>
<UncontrolledTooltip placement="top" target="delete13">
Delete
</UncontrolledTooltip >
</>
},
]
}
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="Orders" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col lg={12}>
<Card>
<CardBody className="pt-0">
<Nav tabs className="nav-tabs-custom mb-4">
<NavItem>
<NavLink onClick={() => { this.toggleTab('1'); }} className={classnames({ active: this.state.activeTab === '1' }, "font-weight-bold p-3")}>All Orders</NavLink>
</NavItem>
<NavItem>
<NavLink onClick={() => { this.toggleTab('2'); }} className={classnames({ active: this.state.activeTab === '2' }, "p-3 font-weight-bold")}>Active</NavLink>
</NavItem>
<NavItem>
<NavLink onClick={() => { this.toggleTab('3'); }} className={classnames({ active: this.state.activeTab === '3' }, " p-3 font-weight-bold")}>Unpaid</NavLink>
</NavItem>
</Nav>
<div>
<Link to="ecommerce-add-product" onClick={() => this.setState({ modal_static: true, isAlertOpen: false })} className="btn btn-success mb-2"><i className="mdi mdi-plus mr-2"></i> 추가</Link>
</div>
<MDBDataTable responsive data={data} className="mt-4" />
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #29
| Source File: Customers.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="Customers" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col lg={12}>
<Card>
<CardBody>
<div>
<Link to="ecommerce-add-product" onClick={() => this.setState({ modal_static: true, isAlertOpen: false })} className="btn btn-success mb-2"><i className="mdi mdi-plus mr-2"></i> Add Customer</Link>
</div>
<div className="table-responsive mt-3">
<Table className="table-centered datatable dt-responsive nowrap " style={{ borderCollapse: "collapse", borderSpacing: 0, width: "100%" }}>
<thead className="thead-light">
<tr>
<th style={{ width: "20px" }}>
<div className="custom-control custom-checkbox">
<Input type="checkbox" className="custom-control-input" id="customercheck" />
<Label className="custom-control-label" htmlFor="customercheck"> </Label>
</div>
</th>
<th>서비스 이름</th>
<th>프로젝트 명</th>
<th>서비스 타입</th>
<th>엑세스 타입</th>
<th>생성일</th>
<th style={{ width: "120px" }}>Action</th>
</tr>
</thead>
<tbody>
{
this.state.data.map((customerData, key) =>
<tr key={key}>
<td>
<div className="custom-control custom-checkbox">
<Input type="checkbox" className="custom-control-input" id={"customercheck" + key} />
<Label className="custom-control-label" htmlFor={"customercheck" + key}> </Label>
</div>
</td>
<td>{customerData.customer}<Link to="/dashboard"></Link></td>
<td>{customerData.email}</td>
<td>{customerData.phone}</td>
<td>
{customerData.balance}
</td>
<td>
{customerData.date}
</td>
<td>
<Link to="/dashboard" className="mr-3 text-primary" id={"edit" + key}><i className="mdi mdi-pencil font-size-18"></i></Link>
<UncontrolledTooltip target={"edit" + key} placement="top">
Edit
</UncontrolledTooltip>
<Link to="#" className="text-danger" id={"delete" + key}><i className="mdi mdi-trash-can font-size-18"></i></Link>
<UncontrolledTooltip target={"delete" + key} placement="top">
Delete
</UncontrolledTooltip>
</td>
</tr>
)
}
</tbody>
</Table>
</div>
</CardBody>
</Card>
</Col>
</Row>
<Modal
isOpen={this.state.modal_static}
toggle={this.tog_static}
backdrop="static"
centered
size="lg"
>
<ModalHeader toggle={() => this.setState({ modal_static: false })}>
Add Customer Details
</ModalHeader>
<ModalBody>
<AvForm onValidSubmit={this.addCustomer}>
<Row>
<Col lg={12}>
<Alert color="success" isOpen={this.state.isAlertOpen} toggle={() => this.setState({ isAlertOpen: false })}>
Data Added Successfully...!
</Alert>
<FormGroup>
<Label htmlFor="name">Customer Name</Label>
<AvField
name="custname"
type="text"
className="form-control"
id="custname"
placeholder="Enter Customer Name"
required
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg={4}>
<FormGroup>
<Label htmlFor="email">Email</Label>
<AvField
name="custemail"
type="email"
className="form-control"
id="custemail"
placeholder="Enter Email"
required
/>
</FormGroup>
</Col>
<Col lg={4}>
<FormGroup>
<Label htmlFor="email">Phone Number</Label>
<AvField
name="phonenumber"
type="number"
className="form-control"
id="phonenumber"
placeholder="Enter Phone Number"
required
/>
</FormGroup>
</Col>
<Col lg={4}>
<FormGroup>
<Label htmlFor="email">Wallet Balance</Label>
<AvField
name="wBalance"
type="number"
className="form-control"
id="wBalance"
placeholder="Wallet Balance"
required
/>
</FormGroup>
</Col>
</Row>
<ModalFooter>
<Button type="button" color="light" onClick={() => this.setState({ modal_static: false })}>Calcel</Button>
<Button type="submit" color="primary">Add</Button>
</ModalFooter>
</AvForm>
</ModalBody>
</Modal>
</Container>
</div>
</React.Fragment>
);
}
