@fortawesome/free-solid-svg-icons#faChevronLeft TypeScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faChevronLeft.
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: IconLibrary.ts From react-memory-game with MIT License | 6 votes |
|
library.add(
faChevronLeft,
faPlay,
faPause,
faUndo,
faClock,
faQuestionCircle,
faTimes,
faPalette,
// Icons for the game
faPoo,
faAnchor,
faMoon,
faAppleAlt,
faBell,
faBible,
faBomb,
faBone,
faCar,
faCat,
faChess,
faSkull,
faFeatherAlt,
faFire,
faHeart,
faMusic,
)
Example #2
| Source File: PaginatorIndicatorIcon.tsx From solo with MIT License | 6 votes |
|
PaginatorIndicatorIcon: React.FC<IndicatorProps> = ({
left = false,
pad = false
}) => (
<FontAwesomeIcon
size="sm"
icon={left ? faChevronLeft : faChevronRight}
className={pad ? (left ? "margin-right-1" : "margin-left-1") : ""}
/>
)
Example #3
| Source File: queueSettings.tsx From remote-office-hours-queue with Apache License 2.0 | 5 votes |
|
// The 'tab-custom' role is used to override a default 'tab' role that resulted in tab links not being keyboard accessible.
function QueueSettingsEditor(props: QueueSettingsProps) {
return (
<Tab.Container id='add-queue-editor' defaultActiveKey='general'>
<Row>
<Col md={3} sm={3}>
<div className='mt-4'>
<Link to={`/manage/${props.queue.id}/`}>
<FontAwesomeIcon icon={faChevronLeft} /> Back to Queue
</Link>
</div>
<Nav variant='pills' className='flex-column mt-4'>
<Nav.Item>
<Nav.Link eventKey='general' role='tab-custom' tabIndex={0} aria-label='General Tab'>
General
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey='hosts' role='tab-custom' tabIndex={0} aria-label='Manage Hosts Tab'>
Manage Hosts
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey='delete' role='tab-custom' tabIndex={0} aria-label='Delete Queue Tab'>
Delete Queue
</Nav.Link>
</Nav.Item>
</Nav>
</Col>
<Col md={6} sm={9}>
<h1>Settings</h1>
<Tab.Content aria-live='polite'>
<Tab.Pane eventKey='general'>
<GeneralEditor {...props} />
<div className='mt-4'>
<Button
variant='primary'
className={buttonSpacing}
disabled={props.disabled}
aria-label='Save Changes'
onClick={props.onSaveGeneralClick}
>
Save Changes
</Button>
<Button
variant='link'
className={'text-danger ' + buttonSpacing}
disabled={props.disabled}
aria-label='Discard Changes'
onClick={props.onDiscardGeneralClick}
>
Discard Changes
</Button>
</div>
</Tab.Pane>
<Tab.Pane eventKey='hosts'>
<ManageHostsEditor {...props} />
</Tab.Pane>
<Tab.Pane eventKey='delete'>
<h2>Delete Queue</h2>
<p>Delete the entire queue, including all hosts and current meetings in queue. <strong>This cannot be undone.</strong></p>
<div className='mt-4'>
<Button variant='danger' disabled={props.disabled} aria-label='Delete Queue' onClick={props.onDeleteClick}>
Delete Queue
</Button>
</div>
</Tab.Pane>
</Tab.Content>
</Col>
</Row>
</Tab.Container>
);
}
Example #4
| Source File: FileSwitcher.tsx From frontend.ro with MIT License | 4 votes |
|
render() {
const {
readOnly,
maxHeight,
folderStructure,
selectedFileKey,
feedbacks: feedbacksProp,
} = this.props;
const {
ctxMenuKey,
isCollapsed,
ctxMenuType,
dropdownStyle,
isGeneratingArchive,
} = this.state;
let { renamedAsset } = this.state;
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
renamedAsset = renamedAsset || { key: null };
const files = folderStructure.files.map((f) => ({ ...f, icon: FileIcons.getIcon(f.name) }));
const feedbacks = new Feedbacks(null, feedbacksProp || []).getTypesByFileKey();
return (
<div
className={`
${styles['file-switcher']}
${readOnly ? styles['is--read-only'] : ''}
${isCollapsed ? styles['is--collapsed'] : ''}`}
ref={this.fileSwitcherRef}
style={{ width: `${INITIAL_WIDTH_PX}px`, minWidth: `${MIN_WIDTH_PX}px`, maxHeight: `${maxHeight}px` }}
>
{isCollapsed && (
<Button onClick={this.toggleCollapse} title="Browse files" className={`${styles['toggle-button']}`}>
<img src={FileIcons.getIconUrl('svg')} alt="File SVG icon" />
</Button>
)}
<div className={styles.controls}>
<div>
{!readOnly && (
<Button onClick={() => this.newFile()} title="New file">
<FontAwesomeIcon icon={faPlus} width="18" height="18" />
</Button>
)}
{!readOnly && (
<Button onClick={() => this.newFolder()} title="New folder">
<FontAwesomeIcon icon={faFolderPlus} width="18" height="18" />
</Button>
)}
<Button
onClick={this.onDownload}
loading={isGeneratingArchive}
title="Download to device"
>
<FontAwesomeIcon icon={faCloudDownloadAlt} width="18" height="18" />
</Button>
</div>
<Button onClick={this.toggleCollapse} title="Collapse panel">
<FontAwesomeIcon icon={faChevronLeft} width="18" height="18" />
</Button>
</div>
{/* <Scroll className="is--fliped-x"> */}
<div>
{folderStructure.folders.map((folder, index) => (
<FolderBrowse
key={folder.key}
folderKey={folder.key}
folderStructure={folderStructure}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
feedbacks={feedbacks}
readOnly={readOnly}
selectFile={this.selectFile}
selectedFileKey={selectedFileKey}
renamedAsset={renamedAsset}
ctxMenuKey={ctxMenuKey}
openMenu={this.openMenu}
enterEditMode={this.enterEditMode}
onRename={this.onRename}
saveAsset={this.saveAsset}
/>
))}
<FilesList
readOnly={readOnly}
files={files}
feedbacks={feedbacks}
selectedFileKey={selectedFileKey}
ctxMenuKey={ctxMenuKey}
selectFile={this.selectFile}
enterEditMode={this.enterEditMode}
openMenu={this.openMenu}
renamedAsset={renamedAsset}
onRename={this.onRename}
saveAsset={this.saveAsset}
/>
</div>
{/* </Scroll> */}
<List className={styles['dropdown-menu']} style={dropdownStyle}>
{ctxMenuType === 'FOLDER' && (
<>
<li>
<Button onClick={() => this.newFile(ctxMenuKey)}>
<FontAwesomeIcon icon={faFileAlt} width="18" height="18" />
New file
</Button>
</li>
<li>
<Button onClick={() => this.newFolder(ctxMenuKey)}>
<FontAwesomeIcon icon={faFolder} width="18" height="18" />
New folder
</Button>
</li>
</>
)}
<li>
<Button onClick={() => this.enterEditMode(ctxMenuKey)}>
<FontAwesomeIcon icon={faEdit} width="18" height="18" />
Rename
</Button>
</li>
<li>
<Button onClick={() => this.deleteFileOrFolder(ctxMenuKey)}>
<FontAwesomeIcon icon={faTrashAlt} width="18" height="18" />
Delete
</Button>
</li>
</List>
<HResizable onResize={this.onResize} />
</div>
);
}
Example #5
| Source File: Deployment.tsx From argo-react with MIT License | 4 votes |
|
Deployment = () => {
const timeAgo = new TimeAgo("en-US");
const history = useHistory();
const params = useParams<any>();
const defaultOptions = {
loop: true,
autoplay: true,
animationData,
rendererSettings: {
preserveAspectRatio: "xMidYMid",
},
};
const { currentSiteDeployConfig, currentSiteDeployLogs, selectedProject } =
useContext<IStateModel>(StateContext);
const { setLatestDeploymentLogs, setLatestDeploymentConfig, fetchProject } =
useContext<IActionModel>(ActionContext);
const [deploymentStatus, setDeploymentStatus] = useState<string>("pending");
const [buildTime, setBuildTime] = useState<{ min: number; sec: number }>({
min: 0,
sec: 0,
});
const [paymentStatus, setPaymentStatus] = useState<string>("waiting");
const [livePaymentStatus, setlivePaymentStatus] = useState<string>("waiting");
const [paymentMessage, setPaymentMessage] = useState<string>("");
const [paymentDetails, setPaymentDetails] = useState<{
providerFee: number;
argoFee: number;
discount: number;
finalArgoFee: number;
token: string;
}>({ providerFee: 0, argoFee: 0, discount: 0, finalArgoFee: 0, token: "ARGO" });
const [deployedLink, setDeployedLink] = useState<string>("");
const [deploymentLoading, setDeploymentLoading] = useState<boolean>(true);
const [confettiStart, setConfettiStart] = useState<boolean>(false);
const [pinDetailLoading, setPinDetailLoading] = useState<boolean>(true);
const [pinDetail, setPinDetail] = useState<any>({ cid: "N.A", isPinned: false });
const componentIsMounted = useRef(true);
let socket: any = null;
let deploymentSvc: any = null;
useEffect(() => {
fetchProject(params.siteid);
deploymentStartup();
return () => {
if (socket) {
socket.disconnect();
}
if (deploymentSvc) {
deploymentSvc.unsubscribe();
}
componentIsMounted.current = false;
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const deploymentStartup = async () => {
setDeploymentLoading(true);
setLatestDeploymentLogs([]);
setDeploymentStatus("pending");
setPaymentStatus("waiting");
setPaymentDetails({
providerFee: 0,
argoFee: 0,
discount: 0,
finalArgoFee: 0,
token: "ARGO",
});
setBuildTime({
min: 0,
sec: 0,
});
socket = socketIOClient(config.urls.API_URL);
deploymentSvc = ApiService.getDeployment(params.deploymentid).subscribe(
(result) => {
if (componentIsMounted.current) {
const deployment = {
githubUrl: result.deployment.project.githubUrl,
branch: result.deployment.configuration.branch,
createdAt: result.deployment.createdAt,
updatedAt: result.deployment.updatedAt,
protocol: result.deployment.configuration.protocol,
commitHash: result.deployment.commitId,
commitMessage: result.deployment.commitMessage,
};
setLatestDeploymentConfig(deployment);
currentSiteDeployLogs.splice(0, currentSiteDeployLogs.length);
result.deployment.logs.forEach((logItem: any) => {
logItem.log.split("\n").forEach((line: string) => {
if (line.trim()) {
currentSiteDeployLogs.push({
log: line,
time: moment(logItem.time).format("hh:mm:ss A MM-DD-YYYY"),
});
}
});
setLatestDeploymentLogs(currentSiteDeployLogs);
scrollToWithContainer(currentSiteDeployLogs.length - 1);
});
if (result.deployment.status.toLowerCase() === "pending") {
socket.on(`deployment.${result.deployment.topic}`, (stream: any) => {
if (stream.type === 1) {
stream.data.split("\n").forEach((line: string) => {
if (line.trim()) {
if (
currentSiteDeployLogs
.map((l) => l.log)
.indexOf(line.trim()) === -1
) {
currentSiteDeployLogs.push({
log: line,
time: moment().format("hh:mm:ss A MM-DD-YYYY"),
});
}
}
});
setDeploymentStatus("pending");
setLatestDeploymentLogs(currentSiteDeployLogs);
scrollToWithContainer(currentSiteDeployLogs.length - 1);
} else if (stream.type === 2) {
const protocolLink = stream.data.logsToCapture.sitePreview;
setDeployedLink(protocolLink);
setDeploymentStatus(protocolLink ? "deployed" : "failed");
const buildMins = Number.parseInt(`${stream.data.buildTime / 60}`);
const buildSecs = Number.parseInt(`${stream.data.buildTime % 60}`);
setBuildTime({ min: buildMins, sec: buildSecs });
} else if (stream.type === 3) {
setDeployedLink("");
setDeploymentStatus("failed");
setBuildTime({ min: 0, sec: 0 });
}
});
} else {
setDeployedLink(result.deployment.sitePreview);
setDeploymentStatus(result.deployment.status.toLowerCase());
const buildMins = Number.parseInt(`${result.deployment.buildTime / 60}`);
const buildSecs = Number.parseInt(`${result.deployment.buildTime % 60}`);
setBuildTime({ min: buildMins, sec: buildSecs });
}
const paymentSocketOpeningCondition = result.deployment.payment
? result.deployment.payment.status !== "success" &&
result.deployment.payment.status !== "failed"
: true;
if (paymentSocketOpeningCondition) {
if (result.deployment.payment) {
setPaymentStatus(result.deployment.payment.status);
}
socket.on(`payment.${result.deployment.topic}`, (stream: any) => {
if (stream.type === 1) {
setPaymentStatus("started");
} else if (stream.type === 2) {
const paymentDetails = stream.payload;
if (paymentDetails.status === "success") {
setPaymentDetails(paymentDetails);
setlivePaymentStatus("success");
} else {
setPaymentMessage(paymentDetails.failedMessage);
}
setPaymentStatus(paymentDetails.status);
}
});
} else {
if (result.deployment.payment.status === "success") {
const paymentDetails = {
providerFee: result.deployment.payment.providerFee,
argoFee: result.deployment.payment.argoFee,
discount: result.deployment.payment.discount,
finalArgoFee: result.deployment.payment.finalArgoFee,
token: result.deployment.payment.token,
};
setPaymentDetails(paymentDetails);
setPaymentStatus("success");
} else {
setPaymentStatus("failed");
setPaymentMessage(result.deployment.payment.failedMessage);
}
}
setDeploymentLoading(false);
}
},
);
};
useEffect(() => {
if (deploymentStatus === "deployed" && livePaymentStatus === "success") {
setConfettiStart(true);
}
}, [deploymentStatus, livePaymentStatus]);
let displayGithubRepo = "";
let githubBranchLink = "";
let githubCommitLink = "";
if (currentSiteDeployConfig) {
displayGithubRepo = currentSiteDeployConfig.githubUrl.substring(
19,
currentSiteDeployConfig.githubUrl.length - 4,
);
githubBranchLink = `${currentSiteDeployConfig.githubUrl.substring(
0,
currentSiteDeployConfig.githubUrl.length - 4,
)}/tree/${currentSiteDeployConfig.branch}`;
githubCommitLink = `${currentSiteDeployConfig.githubUrl.substring(
0,
currentSiteDeployConfig.githubUrl.length - 4,
)}/commit/${currentSiteDeployConfig.commitHash}`;
}
const domains =
selectedProject && deployedLink
? selectedProject.domains.filter((d) => deployedLink.indexOf(d.link) !== -1)
: [];
const subdomains =
selectedProject && deployedLink
? selectedProject.subdomains.filter((d) => deployedLink.indexOf(d.link) !== -1)
: [];
const hnsDomains =
selectedProject && deployedLink
? selectedProject.handshakeDomains.filter(
(d) => deployedLink.indexOf(d.link) !== -1,
)
: [];
const hnsSubdomains =
selectedProject && deployedLink
? selectedProject.handshakeSubdomains.filter(
(d) => deployedLink.indexOf(d.link) !== -1,
)
: [];
const ensDomains =
selectedProject && deployedLink
? selectedProject.ensDomains.filter((d) => deployedLink.indexOf(d.link) !== -1)
: [];
const isDomainOrSubPresent =
[...domains, ...subdomains, ...hnsDomains, ...hnsSubdomains, ...ensDomains]
.length > 0;
const scrollToWithContainer = (index: number) => {
window.scrollTo({
top: document.getElementById("deploy-logs-container")?.scrollHeight,
left: 0,
behavior: "smooth",
});
var myElement = document.getElementById(`deploy-logs-items-${index}`);
var topPos = myElement?.offsetTop;
if (document && document.getElementById("deploy-logs-list")) {
(document as any).getElementById("deploy-logs-list").scrollTop = topPos
? topPos
: 0;
}
};
const showProtocolImage = (protocol: string) => {
switch (protocol) {
case "arweave":
return (
<img
src={require("../../../../assets/png/ar_light.png")}
alt="arweave"
className="site-deployment-logo"
height={24}
width={24}
loading="lazy"
/>
);
case "skynet":
return (
<img
src={require("../../../../assets/png/skynet.png")}
alt="skynet"
className="site-deployment-logo"
height={24}
width={24}
loading="lazy"
/>
);
case "ipfs-filecoin":
return (
<img
src={require("../../../../assets/png/filecoin.png")}
alt="skynet"
className="site-deployment-logo"
height={24}
width={24}
loading="lazy"
/>
);
case "ipfs-pinata":
return (
<img
src={require("../../../../assets/svg/pinata.svg")}
alt="skynet"
className="site-deployment-logo"
height={24}
width={24}
loading="lazy"
/>
);
case "neofs":
return (
<img
src={require("../../../../assets/png/neo-light.png")}
alt="neofs"
className="site-deployment-logo"
height={24}
width={24}
loading="lazy"
/>
);
default:
return (
<img
src={require("../../../../assets/png/question_mark.png")}
alt="?"
className="site-deployment-logo"
height={24}
width={24}
loading="lazy"
/>
);
}
};
const showProtocolText = (protocol: string) => {
switch (protocol) {
case "arweave":
return (
<span className="site-deployment-link">
Deploying on Arweave, Preview in a minute
</span>
);
case "skynet":
return (
<span className="site-deployment-link">
Deploying on Skynet, Preview in a minute
</span>
);
case "ipfs-filecoin":
return (
<span className="site-deployment-link">
Deploying on IPFS with Filecoin, Preview in a minute
</span>
);
case "ipfs-pinata":
return (
<span className="site-deployment-link">
Deploying on IPFS with Pinata, Preview in a minute
</span>
);
case "neofs":
return (
<span className="site-deployment-link">
Deploying on NeoFS, Preview in a minute
</span>
);
default:
return (
<span className="site-deployment-link">
Cannot find Protocol to Deploy
</span>
);
}
};
const showProtocolPrice = (protocol: string) => {
switch (protocol) {
case "arweave":
return <span>{paymentDetails?.providerFee || 0} AR</span>;
case "skynet":
return <span>N.A</span>;
case "neofs":
return <span>{paymentDetails?.providerFee || 0} NEO</span>;
case "ipfs-filecoin":
return <span>{paymentDetails?.providerFee || 0} FIL</span>;
case "ipfs-pinata":
return <span>N.A</span>;
default:
return <span>{paymentDetails?.providerFee || 0} ?</span>;
}
};
useEffect(() => {
if (deploymentStatus === "deployed") {
if (currentSiteDeployConfig?.protocol === "ipfs-filecoin") {
getFilecoinPinDetais();
} else if (currentSiteDeployConfig?.protocol === "ipfs-pinata") {
getPinataPinDetais();
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [deploymentStatus, currentSiteDeployConfig?.protocol]);
const getFilecoinPinDetais = async () => {
setPinDetailLoading(true);
if (deployedLink) {
const cid = deployedLink.split("https://ipfs.infura.io/ipfs/")[1];
ApiService.getFilecoinPinDetails(cid).subscribe((data) => {
if (componentIsMounted.current) {
setPinDetail(data);
setPinDetailLoading(false);
}
});
} else {
setPinDetailLoading(false);
}
};
const getPinataPinDetais = async () => {
setPinDetailLoading(true);
if (deployedLink) {
const cid = deployedLink.split("https://ipfs.infura.io/ipfs/")[1];
ApiService.getPinataPinDetails(cid).subscribe((data) => {
if (componentIsMounted.current) {
setPinDetail(data);
setPinDetailLoading(false);
}
});
} else {
setPinDetailLoading(false);
}
};
const [width, height] = useWindowSize();
const confettiStyles = {
zIndex: 2,
position: "fixed" as "fixed",
pointerEvents: "none" as "none",
top: 0,
left: 0,
bottom: 0,
right: 0,
};
return (
<div className="SiteDeployment">
{confettiStart && (
<div className="confetti-container">
<Confetti
width={width}
height={height}
style={confettiStyles}
numberOfPieces={700}
recycle={false}
/>
</div>
)}
<div
className="site-deployment-back"
onClick={(e) => {
fetchProject(params.siteid);
history.push(`/org/${params.orgid}/sites/${params.siteid}/deployments/`);
}}
>
<span>
<FontAwesomeIcon icon={faChevronLeft} />
</span>
<span>All Deploys</span>
</div>
<div className="site-deployment-card-container max-width-set">
<div className="site-deployment-card-header">
<h2 className="site-deployment-card-header-title">
{!deploymentLoading ? (
<>
<span>
{deploymentStatus === "pending" ? (
"Deploy in Progress"
) : deploymentStatus === "deployed" ? (
<div>Deployment successful</div>
) : (
"Deployment failed"
)}
</span>
{deploymentStatus === "pending" ? (
<Lottie options={defaultOptions} height={54} width={76} />
) : deploymentStatus === "deployed" ? (
<LazyLoadedImage height={24} once>
<img
src={require("../../../../assets/svg/rocket_background.svg")}
alt="rocket"
className="rocket-icon"
height={24}
width={24}
loading="lazy"
/>
</LazyLoadedImage>
) : deploymentStatus === "failed" ? (
<LazyLoadedImage height={24} once>
<img
src={require("../../../../assets/svg/error.svg")}
alt="rocket"
className="rocket-icon"
height={24}
width={24}
loading="lazy"
/>
</LazyLoadedImage>
) : null}
</>
) : (
<Skeleton width={200} duration={2} />
)}
</h2>
<p className="site-deployment-card-header-description">
{!deploymentLoading ? (
<>
<u>Production</u>: {currentSiteDeployConfig?.branch}
{currentSiteDeployConfig.commitHash ? (
<>
@
<a
href={githubCommitLink}
target="_blank"
rel="noopener noreferrer"
className="commit-link"
>
{currentSiteDeployConfig.commitHash.substr(0, 7)}{" "}
{currentSiteDeployConfig.commitMessage
? `- ${currentSiteDeployConfig.commitMessage.substr(
0,
84,
)}...`
: ""}
</a>
</>
) : null}
</>
) : (
<Skeleton width={400} duration={2} />
)}
</p>
<p className="site-deployment-card-header-description">
{!deploymentLoading ? (
<>
{deploymentStatus === "pending"
? currentSiteDeployLogs[0]?.time
? `Deployment started ${timeAgo.format(
moment(`${currentSiteDeployConfig.createdAt}`).toDate(),
)}`
: null
: `Deployment done at ${moment(
currentSiteDeployConfig.updatedAt,
).format("MMM DD, YYYY hh:mm a")}`}
</>
) : (
<Skeleton width={400} duration={2} />
)}
</p>
</div>
<div className="site-deployment-card-content">
{isDomainOrSubPresent && (
<div className="site-deployment-card-fields">
<span className="site-deployment-github-icon">
<FontAwesomeIcon icon={faGlobe} />
</span>
{!deploymentLoading ? (
<>
{domains.map((d: IDomain, i: number, a: IDomain[]) => (
<>
<a
href={`https://${d.name}`}
className="site-deployment-link"
target="_blank"
rel="noopener noreferrer"
>
{d.name}
</a>
{(i !== a.length - 1 ||
subdomains.length > 0 ||
hnsDomains.length > 0 ||
hnsSubdomains.length > 0 ||
ensDomains.length > 0) && (
<span className="comma-sep">,</span>
)}
</>
))}
{subdomains.map((s: IDomain, i: number, a: IDomain[]) => (
<>
<a
href={`https://${s.name}`}
className="site-deployment-link"
target="_blank"
rel="noopener noreferrer"
>
{s.name}
</a>
{(i !== a.length - 1 ||
hnsDomains.length > 0 ||
hnsSubdomains.length > 0 ||
ensDomains.length > 0) && (
<span className="comma-sep">,</span>
)}
</>
))}
{hnsDomains.map((s: IDomain, i: number, a: IDomain[]) => (
<>
<a
href={`http://${s.name}`}
className="site-deployment-link"
target="_blank"
rel="noopener noreferrer"
>
{s.name}
</a>
{(i !== a.length - 1 ||
hnsSubdomains.length > 0 ||
ensDomains.length > 0) && (
<span className="comma-sep">,</span>
)}
</>
))}
{hnsSubdomains.map((s: IDomain, i: number, a: IDomain[]) => (
<>
<a
href={`http://${s.name}`}
className="site-deployment-link"
target="_blank"
rel="noopener noreferrer"
>
{s.name}
</a>
{(i !== a.length - 1 || ensDomains.length > 0) && (
<span className="comma-sep">,</span>
)}
</>
))}
{ensDomains.map((s: IDomain, i: number, a: IDomain[]) => (
<>
<a
href={`http://${s.name}`}
className="site-deployment-link"
target="_blank"
rel="noopener noreferrer"
>
{s.name}
</a>
{i !== a.length - 1 && <span className="comma-sep">,</span>}
</>
))}
</>
) : (
<Skeleton width={300} duration={2} />
)}
</div>
)}
<div className="site-deployment-card-fields">
<span className="site-deployment-github-icon">
<FontAwesomeIcon icon={faGithub} />
</span>
{!deploymentLoading ? (
<a
href={githubBranchLink}
className="site-deployment-link"
target="_blank"
rel="noopener noreferrer"
>
{displayGithubRepo} (branch: {currentSiteDeployConfig?.branch})
</a>
) : (
<Skeleton width={300} duration={2} />
)}
</div>
<div className="site-deployment-card-fields">
<LazyLoadedImage height={24} once>
{showProtocolImage(currentSiteDeployConfig?.protocol)}
</LazyLoadedImage>
{!deploymentLoading ? (
deploymentStatus === "deployed" ? (
<a
href={deployedLink}
className="site-deployment-link"
target="_blank"
rel="noopener noreferrer"
>
Preview deploy
</a>
) : deploymentStatus === "pending" ? (
showProtocolText(currentSiteDeployConfig?.protocol)
) : (
<span className="site-deployment-link">
Deploying failed, no link available
</span>
)
) : (
<Skeleton width={200} duration={2} />
)}
</div>
{paymentStatus === "success" && deploymentStatus === "deployed" && (
<div className="site-deployment-card-fields">
<div className="button-container">
<SharePopup
isOpen={confettiStart}
link={deployedLink}
protocol={currentSiteDeployConfig.protocol}
paymentStatus={paymentStatus}
/>
</div>
</div>
)}
</div>
</div>
{deploymentStatus !== "pending" && (
<div className="site-deployment-card-container deploy-container">
<div className="site-deployment-header-title">Deploy Summary</div>
<div className="deploy-summary-item">
<div className="deploy-summary-item-info-icon">
<FontAwesomeIcon icon={faInfoCircle} />
</div>
<div className="deploy-summary-item-info-container">
<div className="deploy-summary-item-info-title">
Total time to Build & Deploy: {buildTime?.min}m {buildTime?.sec}s
</div>
{(buildTime?.min !== 0 || buildTime?.sec !== 0) && (
<div className="deploy-summary-item-info-description">
Build started at {currentSiteDeployLogs[0]?.time} and ended at{" "}
{currentSiteDeployLogs[currentSiteDeployLogs.length - 1]?.time}.
</div>
)}
</div>
</div>
</div>
)}
{deploymentStatus !== "pending" && (
<div className="site-deployment-card-container deploy-container">
<div className="site-deployment-header-title">Payment Summary</div>
<div className="site-deployment-body">
{paymentStatus === "waiting" && (
<div className="payment-loading">
<span>
<PulseLoader size={20} color={"#3664ae"} />
</span>
<span>Waiting for the payment to be processed...</span>
</div>
)}
{paymentStatus === "started" && (
<div className="payment-loading">
<span>
<PulseLoader size={20} color={"#3664ae"} />
</span>
<span>Processing Payment...</span>
</div>
)}
{paymentStatus === "failed" && (
<div className="payment-failed">
<span>
<LazyLoadedImage height={24} once>
<img
src={require("../../../../assets/svg/error.svg")}
alt="rocket"
className="rocket-icon"
height={36}
width={36}
loading="lazy"
/>
</LazyLoadedImage>
</span>
<span>{paymentMessage}</span>
{paymentMessage ===
"Payment failed due to insufficient allowance." && (
<button
className="set-allowance"
onClick={() => history.push("/wallet/recharge")}
>
Set Allowance
</button>
)}
</div>
)}
{paymentStatus === "success" && (
<>
<div className="site-deployment-body-item">
<label>Build Time:</label>
<span>
{buildTime?.min}m {buildTime?.sec}s
</span>
</div>
<div className="site-deployment-body-item">
<label>Provider Fee:</label>
{showProtocolPrice(currentSiteDeployConfig?.protocol)}
</div>
<div className="site-deployment-body-item">
<label>Total Fee:</label>
<span>
{paymentDetails?.argoFee || 0} ${paymentDetails?.token || "ARGO"}
</span>
</div>
<div className="site-deployment-body-item">
<label>Discount:</label>
<span>
{paymentDetails?.discount || 0} $
{paymentDetails?.token || "ARGO"}
</span>
</div>
<div className="site-deployment-body-item">
<label>Final Payment:</label>
<span>
{paymentDetails?.finalArgoFee || 0} $
{paymentDetails?.token || "ARGO"}
</span>
</div>
</>
)}
</div>
</div>
)}
{deploymentStatus === "deployed" &&
currentSiteDeployConfig?.protocol === "ipfs-filecoin" && (
<div className="site-deployment-card-container deploy-container">
<div className="site-deployment-header-title">
Filecoin Pinning Details
</div>
<div className="site-deployment-body">
<div className="site-deployment-body-item">
<label>Filecoin CID:</label>
<span>
{!pinDetailLoading ? (
pinDetail.cid
) : (
<Skeleton width={200} duration={2} />
)}
</span>
</div>
<div className="site-deployment-body-item">
<label>Filecoin Pinning Status:</label>
<span>
{!pinDetailLoading ? (
pinDetail.isPinned ? (
"Pinned"
) : (
"Not Pinned"
)
) : (
<Skeleton width={200} duration={2} />
)}
</span>
</div>
{!pinDetailLoading && pinDetail.isPinned && (
<div className="site-deployment-body-item">
<label>Filecoin Pinned Date:</label>
<span>
{!pinDetailLoading ? (
moment(pinDetail.pinnedDate).format("MMM DD, YYYY hh:mm A")
) : (
<Skeleton width={200} duration={2} />
)}
</span>
</div>
)}
</div>
</div>
)}
{deploymentStatus === "deployed" &&
currentSiteDeployConfig?.protocol === "ipfs-pinata" && (
<div className="site-deployment-card-container deploy-container">
<div className="site-deployment-header-title">
Pinata Pinning Details
</div>
<div className="site-deployment-body">
<div className="site-deployment-body-item">
<label>IPFS CID:</label>
<span>
{!pinDetailLoading ? (
pinDetail.cid
) : (
<Skeleton width={200} duration={2} />
)}
</span>
</div>
<div className="site-deployment-body-item">
<label>IPFS Pinning Status:</label>
<span>
{!pinDetailLoading ? (
pinDetail.isPinned ? (
"Pinned"
) : (
"Not Pinned"
)
) : (
<Skeleton width={200} duration={2} />
)}
</span>
</div>
{!pinDetailLoading && pinDetail.isPinned && (
<div className="site-deployment-body-item">
<label>IPFS Pinned Date:</label>
<span>
{!pinDetailLoading ? (
moment(pinDetail.pinnedDate).format("MMM DD, YYYY hh:mm A")
) : (
<Skeleton width={200} duration={2} />
)}
</span>
</div>
)}
</div>
</div>
)}
<div
className="site-deployment-card-container deploy-container"
id="deploy-logs-container"
>
<div className="card-header-title deploy-logs-card-title">
<div className="card-header-deploy-title-container">
<div className="card-header-deploy-title">Deploy Logs</div>
<div className="card-header-deploy-subtitle">
Please note that the realtime log streaming may not show all the logs
based on your connection bandwidth. Please refresh if you don't see
some logs
</div>
</div>
{/* <button className="copy-to-clipboard-button">Copy to clipboard</button> */}
<div className="refresh-control" onClick={deploymentStartup}>
<FontAwesomeIcon icon={faSyncAlt}></FontAwesomeIcon>
</div>
</div>
<div className="deploy-logs-container" id="deploy-logs-list">
{
<div className="deploy-logs-items" id={`deploy-logs-items-${1}`} key={1}>
{currentSiteDeployLogs?.map((currLog, i) => (
<div
className="deploy-logs-items"
id={`deploy-logs-items-${i}`}
key={i}
>
{currLog.time}:{" "}
{currLog.log.indexOf("https://arweave.net/") !== -1 ||
currLog.log.indexOf("https://siasky.net/") !== -1 ||
currLog.log.indexOf("https://http.fs.neo.org/") !== -1 ||
currLog.log.indexOf("https://ipfs.infura.io/ipfs/") !== -1 ? (
<a
href={currLog.log.trim()}
className="log-site-link"
target="_blank"
rel="noopener noreferrer"
>
{currLog.log}
</a>
) : (
currLog.log
)}
</div>
))}
</div>
}
</div>
</div>
</div>
);
}
Example #6
| Source File: TableContent.tsx From datajoint-labbook with MIT License | 4 votes |
|
render() {
return(
<div className="table-content-viewer">
<div className={this.props.selectedTableType === TableType.COMPUTED ? 'content-view-header computed ' : this.props.selectedTableType === TableType.IMPORTED ? 'content-view-header imported' : this.props.selectedTableType === TableType.LOOKUP ? 'content-view-header lookup' : this.props.selectedTableType === TableType.MANUAL ? 'content-view-header manual' : 'content-view-header part'}>
<div className={this.props.selectedTableType === TableType.COMPUTED ? 'computed table-type-tag' : this.props.selectedTableType === TableType.IMPORTED ? 'imported table-type-tag' : this.props.selectedTableType === TableType.LOOKUP ? 'lookup table-type-tag' : this.props.selectedTableType === TableType.MANUAL ? 'manual table-type-tag' : 'part table-type-tag'}>{TableType[this.props.selectedTableType]}</div>
<h4 className="table-name">{this.props.selectedTableName}</h4>
{this.getTableActionButtons()}
</div>
{this.state.hideTableActionMenu ? '' : <this.getCurrentTableActionMenuComponent/>}
{this.state.showWarning ? <this.getShowWarningComponent />: ''}
<div className="content-view-area">
<table className="table">
<thead>
<tr className="headerRow" onMouseMove={(event) => {this.cellResizeMouseMove(event)}} onMouseUp={(event) => {this.cellResizeMouseUp(event)}} ref={this.state.headerRowReference}>
<th className="buffer"></th>
{this.getPrimaryKeys().map((attributeName, index) => {
return(
<th key={attributeName} className="headings">
<div className="headerContent primary">{attributeName}</div>
</th>
)
})}
{this.getSecondaryKeys().map((attributeName, index) => {
return(
<th key={attributeName} className="headings">
<div className="headerContent secondary" style={{color: 'inherit'}}>{attributeName}</div>
</th>
)
})}
</tr>
</thead>
<tbody>
{this.props.contentData.map((entry: any, tupleIndex: number) => {
// creating reference for each body column to track the width
return (
<tr key={entry} className="tableRow" onMouseMove={(event) => {this.cellResizeMouseMove(event)}} onMouseUp={(event) => {this.cellResizeMouseUp(event)}} ref={this.state.tuplesReference[tupleIndex]}>
<td className="check-box-cell">
<input type="checkbox"
// disable multiple check for insert mode as well until multiple insert is supported.
disabled={this.state.selectedTupleIndex > -1 && this.state.selectedTupleIndex !== tupleIndex}
onChange={(event) => this.handleCheckedEntry(event, tupleIndex)}
checked={this.state.selectedTupleIndex === tupleIndex}/>
</td>
{entry.map((column: any, index: number) => {
return (
<td key={`${column}-${index}`} className="tableCell">{column}
</td>)
})
}</tr>)
})}
</tbody>
</table>
<div className="paginator">
<p>Total Table Entries: {this.props.totalNumOfTuples}</p>
<div className="number-of-rows-per-page-input">
<p>Number of row per page</p>
<input type='number' value={this.props.tuplePerPage} onChange={this.handleNumberOfTuplesPerPageChange}></input>
</div>
{Object.entries(this.props.contentData).length ?
<div className="controls">
<FontAwesomeIcon className={true ? "backAll icon" : "backAll icon disabled"} icon={faStepBackward} onClick={() => this.goToFirstPage()} />
<FontAwesomeIcon className={true ? "backOne icon" : "backOne icon disabled"} icon={faChevronLeft} onClick={() => this.goBackwardAPage()} />
Page: ({this.props.currentPageNumber + ' / ' + this.props.maxPageNumber})
<FontAwesomeIcon className={true ? "forwardOne icon" : "forwardOne icon disabled"} icon={faChevronRight} onClick={() => this.goForwardAPage()} />
<FontAwesomeIcon className={true ? "forwardAll icon" : "forwardAll icon disabled"} icon={faStepForward} onClick={() => this.goToLastPage()} />
</div>
: ''
}
</div>
</div>
{this.state.isWaiting ? (
<div className="loadingBackdrop">
<div className="loadingPopup">
<BasicLoadingIcon size={80} />
<p>{this.tableActionEnumToString(this.state.currentSelectedTableActionMenu)} in action, please hold.</p>
</div>
</div>
) : ''}
</div>
)
}
