Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x | import React from "react";
import type { ICharm } from "../../../../shared/types";
import { Col, Row } from "@canonical/react-components";
interface InterfaceRowProps {
charm: ICharm;
}
const getDisplayName = (charm: ICharm) => {
Eif (charm.package.display_name) {
return charm.package.display_name;
}
return charm.package.name.replace(/-/g, " ");
};
const getChannel = (charm: ICharm) => {
const { track, risk, name } = charm.package.channel;
Eif (track && risk) {
return `${track}/${risk}`;
}
if (name && name !== "/") {
return name;
}
return "";
};
export const InterfaceRow = ({ charm }: InterfaceRowProps) => {
const charmName = getDisplayName(charm);
const packageLink = `/${charm.package.name}`;
const channel = getChannel(charm);
const supportsVm = charm.package.platforms.includes("vm");
const supportsKubernetes =
charm.package.platforms.includes("kubernetes") ||
charm.package.platforms.includes("k8s");
return (
<Row>
<Col size={3}>
<div className="u-flex">
<a href={packageLink}>
<img
src={
charm.package.icon_url ||
"https://assets.ubuntu.com/v1/be6eb412-snapcraft-missing-icon.svg"
}
alt={charmName}
width={48}
height={48}
/>
</a>
<div className="p-integration-row__meta">
<a className="p-integration-row__name" href={packageLink}>
{charmName}
</a>
<p className="u-text--muted u-no-margin--bottom">
{charm.publisher.display_name}
</p>
</div>
</div>
</Col>
<Col size={2}>
<p className="u-text--muted u-no-margin--bottom">{channel}</p>
</Col>
<Col size={3}>
<p className="p-integration-row__description u-no-margin--bottom">
{charm.package.description}
</p>
</Col>
<Col size={1}>
<div className="u-align--right">
{supportsVm && (
<img
src="https://assets.ubuntu.com/v1/bf61e269-machine-badge.svg"
width={24}
height={24}
alt="Machine"
/>
)}
{supportsKubernetes && (
<img
src="https://assets.ubuntu.com/v1/f1852c07-Kubernetes.svg"
width={24}
height={24}
alt="Kubernetes"
/>
)}
</div>
</Col>
</Row>
);
};
export default InterfaceRow;
|