Skip to content

Commit 92c670e

Browse files
aabidsofi19aabidsofi19
committed
fix ui and descriptions
Signed-off-by: aabidsofi19 <[email protected]>
1 parent dc8eeb7 commit 92c670e

File tree

2 files changed

+65
-193
lines changed

2 files changed

+65
-193
lines changed

‎Dockerfile‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ LABEL org.opencontainers.image.title="Kanvas" \
5050
<li><b>Save time with design patterns - </b>Turbo-charge your infrastructure with best practice cloud native design patterns from the <a href='https://meshery.io/catalog'>Meshery Catalog</a>.</li> \
5151
<li><b>Single-click deployment of all cloud native infrastructure -</b> Support for hundreds of different cloud native infrastructure tools right at your fingertips.</li> \
5252
</ul>" \
53-
com.docker.desktop.extension.icon="https://raw.githubusercontent.com/layer5io/kanvas-docker-extension/master/assets/kanvas-designer.png" \
53+
com.docker.desktop.extension.icon="https://raw.githubusercontent.com/layer5io/kanvas-docker-extension/master/assets/kanvas-mark-logo-light.svg" \
5454
com.docker.extension.publisher-url="https://layer5.io" \
5555
com.docker.extension.additional-urls="[{\"title\":\"Documentation\",\"url\":\"https://docs.layer5.io\"},{\"title\":\"Project\",\"url\":\"https://layer5.io\"},{\"title\":\"Slack\",\"url\":\"https://slack.meshery.io\"},{\"title\":\"Discussion Forum\",\"url\":\"https://layer5.io/community#community-forums\"}]"
5656
COPY --from=builder /backend/bin/service /

‎ui/src/components/ExtensionComponent/ExtensionComponent.js‎

Lines changed: 64 additions & 192 deletions
Original file line numberDiff line numberDiff line change
@@ -51,48 +51,23 @@ const proxyUrl = "http://127.0.0.1:7877";
5151
const httpDelete = "DELETE";
5252
const httpPost = "POST";
5353

54-
// const adapters = {
55-
// APP_MESH: {
56-
// displayName: 'App Mesh',
57-
// icon: <AppmeshIcon width={40} height={40} />,
58-
// name: 'APP_MESH',
59-
// },
60-
// CILIUM_SERVICE_MESH: {
61-
// displayName: 'Cilium',
62-
// icon: <CiliumIcon width={40} height={40} />,
63-
// name: 'CILIUM_SERVICE_MESH',
64-
// },
65-
// CONSUL: {
66-
// displayName: 'Consul',
67-
// icon: <ConsulIcon width={40} height={40} />,
68-
// name: 'CONSUL',
69-
// },
70-
// ISTIO: {
71-
// displayName: 'Istio',
72-
// icon: <IstioIcon width={40} height={40} />,
73-
// name: 'ISTIO',
74-
// },
75-
// KUMA: {
76-
// displayName: 'Kuma',
77-
// icon: <KumaIcon width={40} height={40} />,
78-
// name: 'KUMA',
79-
// },
80-
// LINKERD: {
81-
// displayName: 'Linkerd',
82-
// icon: <LinkerdIcon width={40} height={40} />,
83-
// name: 'LINKERD',
84-
// },
85-
// NGINX_SERVICE_MESH: {
86-
// displayName: 'NGINX',
87-
// icon: <NginxIcon width={38} height={40} />,
88-
// name: 'NGINX_SERVICE_MESH',
89-
// },
90-
// TRAEFIK_MESH: {
91-
// displayName: 'Traefix Mesh',
92-
// icon: <TraefikIcon width={40} height={40} />,
93-
// name: 'TRAEFIK_MESH',
94-
// },
95-
// }
54+
/**
55+
* Gets the raw b64 file and convert it to uint8Array
56+
*
57+
* @param {string} dataUrl
58+
* @returns {number[]} - return array of uint8Array
59+
*/
60+
const getUnit8ArrayDecodedFile = (dataUrl) => {
61+
// Extract base64 content
62+
const [, base64Content] = dataUrl.split(";base64,");
63+
// Decode base64 content
64+
const decodedContent = atob(base64Content);
65+
// Convert decoded content to Uint8Array directly
66+
const uint8Array = Uint8Array.from(decodedContent, (char) =>
67+
char.charCodeAt(0),
68+
);
69+
return Array.from(uint8Array);
70+
};
9671

9772
function mergeFullHTMLIntoCurrentPage(htmlString, proxyBase = proxyUrl) {
9873
const parser = new DOMParser();
@@ -411,44 +386,60 @@ const ExtensionsComponent = () => {
411386
// })
412387
// }
413388

414-
const handleImport = () => {
415-
const file = document.getElementById("upload-button").files[0];
416-
// Create a reader
417-
const type = String(file.name);
418-
const reader = new FileReader();
419-
reader.addEventListener("load", (event) => {
420-
let body = { save: true };
421-
let name = randomApplicationNameGenerator();
422-
body = JSON.stringify({
423-
...body,
424-
application_data: { name, application_file: event.target.result },
425-
});
426-
if (!(type.includes(".yaml") || type.includes(".yml"))) {
427-
window.ddClient.desktopUI.toast.error(
428-
"Some error occured while uploading the compose file. ",
429-
);
389+
const getBase64EncodedFile = (file) => {
390+
return new Promise((resolve, reject) => {
391+
const reader = new FileReader();
392+
393+
reader.onload = () => {
394+
const base64String = reader.result;
395+
resolve(base64String);
396+
};
397+
398+
reader.onerror = (error) => reject(error);
399+
400+
reader.readAsDataURL(file);
401+
});
402+
};
403+
404+
const handleImport = async (e) => {
405+
try {
406+
const file = e.target?.files?.[0];
407+
408+
if (!file) {
409+
window.ddClient.desktopUI.toast.error("No file selected.");
430410
return;
431411
}
432412

433-
fetch(proxyUrl + "/api/application", {
413+
const name = randomApplicationNameGenerator();
414+
const base64File = await getBase64EncodedFile(file);
415+
console.log("base64", base64File);
416+
417+
const body = JSON.stringify({
418+
name,
419+
file: getUnit8ArrayDecodedFile(base64File),
420+
file_name: file.name,
421+
});
422+
423+
console.log("body", body);
424+
const res = await fetch(proxyUrl + "/api/pattern/import", {
434425
method: "POST",
435426
headers: {
436-
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
427+
"Content-Type": "application/json;charset=UTF-8",
437428
},
438429
body,
439-
})
440-
.then((res) => {
441-
window.ddClient.desktopUI.toast.success(
442-
"Compose file has been uploaded with name: " + name,
443-
);
444-
})
445-
.catch(() =>
446-
window.ddClient.desktopUI.toast.error(
447-
"Some error occured while uploading the compose file.",
448-
),
449-
);
450-
});
451-
reader.readAsText(file);
430+
});
431+
432+
if (!res.ok) throw new Error("Upload failed");
433+
434+
window.ddClient.desktopUI.toast.success(
435+
`Compose file has been uploaded with name: ${name}`,
436+
);
437+
} catch (err) {
438+
console.error("Error uploading file:", err);
439+
window.ddClient.desktopUI.toast.error(
440+
"Some error occurred while uploading the compose file.",
441+
);
442+
}
452443
};
453444

454445
const OpenDocs = () => {
@@ -668,111 +659,6 @@ const ExtensionsComponent = () => {
668659
</div>
669660
)}
670661
</SectionWrapper>
671-
{isLoggedIn && (
672-
<SectionWrapper>
673-
<CatalogChart
674-
filter={filter}
675-
pattern={catalogDesigns}
676-
isTheme={isDarkTheme}
677-
/>
678-
<Grid
679-
sx={{
680-
backgroundColor: isDarkTheme ? "#666A75" : "#D7DADE",
681-
borderRadius: "15px",
682-
height: "28rem",
683-
display: "flex",
684-
justifyContent: "center",
685-
marginTop: "20px",
686-
}}
687-
>
688-
<div
689-
style={{
690-
paddingTop: isLoggedIn ? "1.2rem" : null,
691-
margin: "10px 0",
692-
width: "max-content",
693-
}}
694-
>
695-
<ExtensionWrapper
696-
className="first-step"
697-
sx={{
698-
height: ["22rem", "17rem", "14rem"],
699-
}}
700-
>
701-
{catalogDesigns?.patterns.length > 0 ? (
702-
<div>
703-
<Typography
704-
variant="h5"
705-
sx={{ padding: "8rem 0 1rem 0", fontWeight: "bold" }}
706-
>
707-
Designs
708-
</Typography>
709-
<MeshModels>
710-
{catalogDesigns?.patterns
711-
?.slice(0, 2)
712-
.map((pattern, index) => {
713-
let patternType =
714-
pattern.catalog_data &&
715-
pattern.catalog_data.type &&
716-
pattern.catalog_data.type !== ""
717-
? pattern.catalog_data.type
718-
: "deployment";
719-
return (
720-
<SistentThemeProviderWithoutBaseLine>
721-
<CatalogCard
722-
onCardClick={() => {
723-
window.ddClient.host.openExternal(
724-
`${providerUrl}/catalog/content/catalog/${pattern?.id}`,
725-
);
726-
}}
727-
pattern={pattern}
728-
key={`design-${index}`}
729-
patternType={patternType}
730-
catalog={true}
731-
cardHeight="18rem"
732-
cardWidth="15rem"
733-
/>
734-
</SistentThemeProviderWithoutBaseLine>
735-
);
736-
})}
737-
</MeshModels>
738-
<StyledButton
739-
onClick={() => {
740-
window.ddClient.host.openExternal(
741-
`${providerUrl}/catalog`,
742-
);
743-
}}
744-
>
745-
View all catalog
746-
</StyledButton>
747-
</div>
748-
) : (
749-
<div>
750-
<Typography
751-
variant="h5"
752-
sx={{ padding: "3rem 0 1rem 0", fontWeight: "bold" }}
753-
>
754-
Designs
755-
</Typography>
756-
<a
757-
href={
758-
user?.role_names?.includes(MESHMAP)
759-
? "https://playground.meshery.io/extension/meshmap"
760-
: "https://play.meshery.io"
761-
}
762-
style={{ textDecoration: "none" }}
763-
>
764-
<PublishCard>
765-
<PublishIcon width={"60"} height={"60"} />
766-
<h5>Publish your own design</h5>
767-
</PublishCard>
768-
</a>
769-
</div>
770-
)}
771-
</ExtensionWrapper>
772-
</div>
773-
</Grid>
774-
</SectionWrapper>
775-
)}
776662

777663
<SectionWrapper>
778664
{isLoggedIn && (
@@ -795,20 +681,6 @@ const ExtensionsComponent = () => {
795681
</div>
796682
)}
797683
</SectionWrapper>
798-
799-
{/*
800-
801-
// Feedback component is comment currently because the api required to use this authentication error
802-
803-
<SistentThemeProviderWithoutBaseLine>
804-
<FeedbackButton
805-
containerStyles={{ zIndex: 10 }}
806-
renderPosition="right-middle"
807-
onSubmit={onSubmit}
808-
/>
809-
</SistentThemeProviderWithoutBaseLine>
810-
811-
*/}
812684
</ComponentWrapper>
813685
</DockerMuiThemeProvider>
814686
);

0 commit comments

Comments
 (0)