Skip to content

Commit

Permalink
Merge pull request #347 from alonkeyval/TASK-142-display-source-manag…
Browse files Browse the repository at this point in the history
…e-list

Task 142 display source manage list
  • Loading branch information
alonkeyval authored Jul 30, 2023

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
2 parents 8267a10 + 79f2c53 commit 3ac58d1
Showing 10 changed files with 55 additions and 37 deletions.
4 changes: 2 additions & 2 deletions frontend/endpoints/sources.go
Original file line number Diff line number Diff line change
@@ -41,8 +41,8 @@ func k8sInstrumentedAppToSource(app *v1alpha1.InstrumentedApplication) Source {
source.Namespace = app.Namespace
for _, language := range app.Spec.Languages {
source.Languages = append(source.Languages, SourceLanguage{
ContainerName: string(language.Language),
Language: language.ContainerName,
ContainerName: language.ContainerName,
Language: string(language.Language),
})
}
return source
2 changes: 1 addition & 1 deletion frontend/webapp/assets/images/index.tsx
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export { SOURCES_LOGOS } from "./sources.card/sources.card";
export { LANGUAGES_LOGOS } from "./sources.card/sources.card";
14 changes: 8 additions & 6 deletions frontend/webapp/assets/images/sources.card/sources.card.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
export const SOURCES_LOGOS = {
java: "https://odigos-sources.s3.amazonaws.com/java.svg",
go: "https://odigos-sources.s3.amazonaws.com/go.svg",
javascript: "https://odigos-sources.s3.amazonaws.com/nodejs.svg",
python: "https://odigos-sources.s3.amazonaws.com/python.svg",
dotnet: "https://odigos-sources.s3.amazonaws.com/dotnet.svg",
const BASE_URL = "https://d1n7d4xz7fr8b4.cloudfront.net/";

export const LANGUAGES_LOGOS = {
java: `${BASE_URL}java.svg`,
go: `${BASE_URL}go.svg`,
javascript: `${BASE_URL}nodejs.svg`,
python: `${BASE_URL}python.svg`,
dotnet: `${BASE_URL}dotnet.svg`,
};
Original file line number Diff line number Diff line change
@@ -3,7 +3,7 @@ import { KeyvalImage, KeyvalTag, KeyvalText } from "@/design.system";
import { CardWrapper } from "./sources.manage.styled";
import theme from "@/styles/palette";
import { KIND_COLORS } from "@/styles/global";
import { SOURCES_LOGOS } from "@/assets/images";
import { LANGUAGES_LOGOS } from "@/assets/images";
import { ManagedSource } from "@/types/sources";

const TEXT_STYLE: React.CSSProperties = {
@@ -28,7 +28,7 @@ export default function SourceManagedCard({
return (
<CardWrapper>
<KeyvalImage
src={SOURCES_LOGOS[item?.languages[0].language || ""]}
src={LANGUAGES_LOGOS[item?.languages?.[0].language || ""]}
width={56}
height={56}
style={LOGO_STYLE}
@@ -39,7 +39,7 @@ export default function SourceManagedCard({
</KeyvalText>
<KeyvalTag
title={item?.kind || ""}
color={KIND_COLORS[item?.kind.toLowerCase() || DEPLOYMENT]}
color={KIND_COLORS[item?.kind?.toLowerCase() || DEPLOYMENT]}
/>
<KeyvalText size={14} color={theme.text.light_grey} style={TEXT_STYLE}>
{item?.namespace}
Original file line number Diff line number Diff line change
@@ -1,24 +1,35 @@
import React from "react";
import { ManagedListWrapper, EmptyListWrapper } from "./sources.manage.styled";
import {
ManagedListWrapper,
EmptyListWrapper,
ManagedContainer,
} from "./sources.manage.styled";
import Empty from "@/assets/images/empty-list.svg";
import SourceManagedCard from "./sources.manage.card";
import { ManagedSource } from "@/types/sources";
import { KeyvalText } from "@/design.system";
import { OVERVIEW } from "@/utils/constants";

export function SourcesManagedList({ data = [1, 1, 1, 1] }) {
function renderDestinations() {
return data.map((source: any) => <SourceManagedCard />);
interface SourcesManagedListProps {
data: ManagedSource[];
}

export function SourcesManagedList({ data = [] }: SourcesManagedListProps) {
function renderSources() {
return data.map((source: ManagedSource) => (
<SourceManagedCard item={source} />
));
}

return (
<>
<ManagedListWrapper>
{data?.length === 0 ? (
<EmptyListWrapper>
<Empty />
</EmptyListWrapper>
) : (
renderDestinations()
)}
</ManagedListWrapper>
</>
return data.length === 0 ? (
<EmptyListWrapper>
<Empty />
</EmptyListWrapper>
) : (
<ManagedContainer>
<KeyvalText>{`${data.length} ${OVERVIEW.MENU.SOURCES}`}</KeyvalText>
<br />
<ManagedListWrapper>{renderSources()}</ManagedListWrapper>
</ManagedContainer>
);
}
Original file line number Diff line number Diff line change
@@ -12,10 +12,10 @@ export const CardWrapper = styled.div`
align-items: center;
flex-direction: column;
gap: 10px;
cursor: pointer;
/* cursor: pointer;
&:hover {
background: var(--dark-mode-dark-1, #07111a81);
}
} */
`;

export const EmptyListWrapper = styled.div`
@@ -27,12 +27,17 @@ export const EmptyListWrapper = styled.div`
`;

export const ManagedListWrapper = styled.div`
width: 100%;
height: 80%;
display: flex;
flex-wrap: wrap;
gap: 24px;
padding: 0 36px 0 0;
overflow-y: scroll;
`;

export const ManagedContainer = styled.div`
width: 100%;
height: 100%;
margin-top: 120px;
padding: 0px 36px;
padding-bottom: 50px;
margin-top: 88px;
`;
Original file line number Diff line number Diff line change
@@ -35,7 +35,7 @@ export function SourceCard({ item, onClick, focus }: any) {
</ApplicationNameWrapper>
<KeyvalTag
title={item.kind}
color={KIND_COLORS[item.kind].toLowerCase()}
color={KIND_COLORS[item.kind.toLowerCase()]}
/>
<KeyvalText size={14} weight={400}>
{`${item?.instances} ${SETUP.RUNNING_INSTANCES}`}
Original file line number Diff line number Diff line change
@@ -3,5 +3,5 @@ import styled from "styled-components";
export const SourcesContainerWrapper = styled.div`
height: 100vh;
width: 100%;
overflow-y: scroll;
overflow: hidden;
`;
2 changes: 1 addition & 1 deletion frontend/webapp/containers/overview/sources/sources.tsx
Original file line number Diff line number Diff line change
@@ -21,7 +21,7 @@ export function SourcesContainer() {
return (
<SourcesContainerWrapper>
<OverviewHeader title={OVERVIEW.MENU.SOURCES} />
<SourcesManagedList />
<SourcesManagedList data={sources} />
</SourcesContainerWrapper>
);
}
2 changes: 1 addition & 1 deletion frontend/webapp/styles/global.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
export const KIND_COLORS = {
deployment: "#203548",
daemonSet: "#033869",
daemonset: "#033869",
statefulset: "#0F2C3F",
};

0 comments on commit 3ac58d1

Please sign in to comment.