Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Addition of reference architecture to landscape site #672

Closed
wants to merge 4 commits into from
Closed

Addition of reference architecture to landscape site #672

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9207a4a
feat: support for reference architecture w/singoff
Jougan-0 Jul 23, 2024
feaaaa7
url center w/signoff
Jougan-0 Jul 23, 2024
dc8c51a
update url w/singoff
Jougan-0 Jul 23, 2024
ba8d70a
change name to forks w/signoff
Jougan-0 Jul 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 97 additions & 3 deletions ui/common/src/components/ItemModalContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import isEmpty from 'lodash/isEmpty';
import isNull from 'lodash/isNull';
import isUndefined from 'lodash/isUndefined';
import sortBy from 'lodash/sortBy';
import { createEffect, createSignal, For, Match, on, Show, Switch } from 'solid-js';
import { createEffect,createResource, createSignal, For, Match, on, Show, Switch } from 'solid-js';
import { css } from 'solid-styled-components';

import { AdditionalCategory, Item, Repository, SecurityAudit, SVGIconKind } from '../types/types';
Expand Down Expand Up @@ -210,11 +210,94 @@ const getPackageManagerIcon = (url: string): SVGIconKind => {
return icon;
};



export const ItemModalContent = (props: Props) => {
const itemInfo = () => props.item;
const [description, setDescription] = createSignal<string>();
const [primaryRepo, setPrimaryRepo] = createSignal<Repository>();

const [totalCount,setTotalCount] = createSignal<number>(0);

const fetchBlueprints = async (primaryRepoUrl: string) => {

const repoName = primaryRepoUrl.split('/').pop();
const response = await fetch(
`https://meshery.layer5.io/api/catalog/content/pattern?technology=${repoName}&page=0&pagesize=3&search=&order=&metrics=true`
);
if (!response.ok) {
throw new Error('Failed to fetch blueprints');
}
const data = await response.json();
setTotalCount(data.total_count);
return data.patterns;
};

const [blueprints, { refetch }] = createResource(
() => primaryRepo()?.url,
fetchBlueprints

);
const BlueprintSection = () => {
return (
<Show when={!isUndefined(blueprints()) && totalCount() > 0}>
<div class={`position-relative border ${Fieldset}`}>
<div class={`position-absolute px-2 bg-white fw-semibold ${FieldsetTitle}`}>Reference Architecture</div>
<div class="w-100">
<table class={`table table-sm table-striped table-bordered mt-3 ${TableLayout}`}>
<thead class={`text-uppercase text-muted ${Thead}`}>
<tr>
<th class={`text-center ${AuditsColMd}`} scope="col">Name</th>
<th class={`text-center ${AuditsCol}`} scope="col">
Forks</th>
<th class={`text-center ${AuditsCol}`} scope="col">Updated At</th>
<th class={`text-center`} scope="col">Url</th>
</tr>
</thead>
<tbody>
<For each={blueprints()}>
{(pattern) => {
const href = `https://meshery.layer5.io/catalog/content/catalog/${pattern.name.toLowerCase().replace(/\s+/g, '-')}-${pattern.id}`;
return (
<tr class={TableContent}>
<td class="px-3 text-center text-nowrap">
<div class="w-100 text-truncate">
{pattern.name}
</div></td>
<td class="px-3 text-center text-nowrap">{`${pattern.view_count}`}</td>
<td class="px-3 text-center text-nowrap">{new Date(pattern.updated_at).toLocaleDateString()}</td>
<td class="px-3">
<div class="w-100">
<ExternalLink
title="View Pattern"
href={href}
class={`text-muted text-truncate d-block text-decoration-underline ${TableLink}`}
>
{href}
</ExternalLink>
</div>
</td>
</tr>
);
}}
</For>
</tbody>
</table>
<div class="text-center mt-3">
<ExternalLink
title="Show More"
href={`https://meshery.layer5.io/catalog?technology=${primaryRepo()?.url.split('/').pop()}`}
class="btn btn-primary"
>
Show More
</ExternalLink>
</div>
</div>
</div>
</Show>
);
};


createEffect(
on(itemInfo, () => {
if (!isUndefined(itemInfo()) && !isNull(itemInfo())) {
Expand All @@ -240,7 +323,13 @@ export const ItemModalContent = (props: Props) => {
}
})
);

createEffect(
on(primaryRepo, () => {
if (primaryRepo()) {
refetch();
}
})
);
const getLinkedInUrl = (): string | null => {
if (itemInfo()) {
if (itemInfo()!.linkedin_url) {
Expand All @@ -256,6 +345,7 @@ export const ItemModalContent = (props: Props) => {

return (
<>

<Show when={!isUndefined(props.basePath)}>
<ItemDropdown itemId={itemInfo()!.id} foundation={props.foundation} basePath={props.basePath!} />
</Show>
Expand Down Expand Up @@ -449,6 +539,7 @@ export const ItemModalContent = (props: Props) => {
</div>
</div>
</div>

{/* Description */}
<div class={`mt-4 text-muted ${Description}`}>{description()}</div>

Expand Down Expand Up @@ -508,6 +599,9 @@ export const ItemModalContent = (props: Props) => {
class={`border ${Fieldset}`}
titleClass={`position-absolute px-2 bg-white fw-semibold ${FieldsetTitle}`}
/>
<Show when={!isUndefined(blueprints()) && totalCount()>0}>
<BlueprintSection />
</Show>
{/* Security audits */}
<Show when={!isUndefined(itemInfo()!.audits) && !isEmpty(itemInfo()!.audits)}>
<div class={`position-relative border ${Fieldset}`}>
Expand Down