Merge pull request #346 from alonkeyval/TASK-107-overview-sources-card

Task 107 overview sources card

frontend/webapp/assets/images/index.tsx

@@ -0,0 +1 @@
+export { SOURCES_LOGOS } from "./sources.card/sources.card";

frontend/webapp/assets/images/sources.card/sources.card.tsx

@@ -0,0 +1,7 @@
+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",
+};

frontend/webapp/components/overview/index.tsx

@@ -1,3 +1,4 @@
 export { OverviewHeader } from "./overview.header/overview.header";
 export { ManageDestination } from "./destination/manage.destination/manage.destination";
 export { DestinationsManagedList } from "./destination/destination.list/destinations.managed.list";
+export { SourcesManagedList } from "./sources/sources.manage.list/sources.manage.list";

frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.card.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+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 { ManagedSource } from "@/types/sources";
+
+const TEXT_STYLE: React.CSSProperties = {
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  width: 224,
+  textAlign: "center",
+};
+const LOGO_STYLE: React.CSSProperties = {
+  padding: 4,
+  backgroundColor: theme.colors.white,
+};
+
+interface SourceManagedCardProps {
+  item: ManagedSource;
+}
+const DEPLOYMENT = "deployment";
+export default function SourceManagedCard({
+  item = {} as ManagedSource,
+}: SourceManagedCardProps) {
+  return (
+    <CardWrapper>
+      <KeyvalImage
+        src={SOURCES_LOGOS[item?.languages[0].language || ""]}
+        width={56}
+        height={56}
+        style={LOGO_STYLE}
+        alt="source-logo"
+      />
+      <KeyvalText size={18} weight={700} style={TEXT_STYLE}>
+        {item?.name}
+      </KeyvalText>
+      <KeyvalTag
+        title={item?.kind || ""}
+        color={KIND_COLORS[item?.kind.toLowerCase() || DEPLOYMENT]}
+      />
+      <KeyvalText size={14} color={theme.text.light_grey} style={TEXT_STYLE}>
+        {item?.namespace}
+      </KeyvalText>
+    </CardWrapper>
+  );
+}

frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.list.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { ManagedListWrapper, EmptyListWrapper } from "./sources.manage.styled";
+import Empty from "@/assets/images/empty-list.svg";
+import SourceManagedCard from "./sources.manage.card";
+
+export function SourcesManagedList({ data = [1, 1, 1, 1] }) {
+  function renderDestinations() {
+    return data.map((source: any) => <SourceManagedCard />);
+  }
+
+  return (
+    <>
+      <ManagedListWrapper>
+        {data?.length === 0 ? (
+          <EmptyListWrapper>
+            <Empty />
+          </EmptyListWrapper>
+        ) : (
+          renderDestinations()
+        )}
+      </ManagedListWrapper>
+    </>
+  );
+}

frontend/webapp/components/overview/sources/sources.manage.list/sources.manage.styled.tsx

@@ -0,0 +1,38 @@
+import { styled } from "styled-components";
+
+export const CardWrapper = styled.div`
+  display: flex;
+  width: 272px;
+  height: 152px;
+  padding-top: 32px;
+  padding-bottom: 24px;
+  border-radius: 24px;
+  border: 1px solid var(--dark-mode-dark-3, #203548);
+  background: var(--dark-mode-dark-1, #07111a);
+  align-items: center;
+  flex-direction: column;
+  gap: 10px;
+  cursor: pointer;
+  &:hover {
+    background: var(--dark-mode-dark-1, #07111a81);
+  }
+`;
+
+export const EmptyListWrapper = styled.div`
+  width: 100%;
+  margin-top: 130px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const ManagedListWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
+  overflow-y: scroll;
+  padding: 0px 36px;
+  padding-bottom: 50px;
+  margin-top: 88px;
+`;

frontend/webapp/components/setup/sources/source.card/source.card.tsx

@@ -12,11 +12,7 @@ import {
 } from "./source.card.styled";
 import Logo from "assets/logos/code-sandbox-logo.svg";
 import { SETUP } from "@/utils/constants";
-
-const KIND_COLORS = {
-  deployment: "#203548",
-  DaemonSet: "#033869",
-};
+import { KIND_COLORS } from "@/styles/global";
 
 const TEXT_STYLE = {
   textOverflow: "ellipsis",
@@ -37,7 +33,10 @@ export function SourceCard({ item, onClick, focus }: any) {
             {item.name}
           </KeyvalText>
         </ApplicationNameWrapper>
-        <KeyvalTag title={item.kind} color={KIND_COLORS[item.kind]} />
+        <KeyvalTag
+          title={item.kind}
+          color={KIND_COLORS[item.kind].toLowerCase()}
+        />
         <KeyvalText size={14} weight={400}>
           {`${item?.instances} ${SETUP.RUNNING_INSTANCES}`}
         </KeyvalText>

frontend/webapp/containers/overview/sources/sources.tsx

@@ -4,7 +4,7 @@ import { KeyvalLoader } from "@/design.system";
 import { OVERVIEW, QUERIES } from "@/utils/constants";
 import { useQuery } from "react-query";
 import { getSources } from "@/services";
-import { OverviewHeader } from "@/components/overview";
+import { OverviewHeader, SourcesManagedList } from "@/components/overview";
 import { SourcesContainerWrapper } from "./sources.styled";
 
 export function SourcesContainer() {
@@ -21,6 +21,7 @@ export function SourcesContainer() {
   return (
     <SourcesContainerWrapper>
       <OverviewHeader title={OVERVIEW.MENU.SOURCES} />
+      <SourcesManagedList />
     </SourcesContainerWrapper>
   );
 }

frontend/webapp/styles/global.tsx

@@ -0,0 +1,5 @@
+export const KIND_COLORS = {
+  deployment: "#203548",
+  daemonSet: "#033869",
+  statefulset: "#0F2C3F",
+};

frontend/webapp/types/sources.tsx

@@ -0,0 +1,11 @@
+export interface ManagedSource {
+  kind: string;
+  name: string;
+  namespace: string;
+  languages: [
+    {
+      container_name: string;
+      language: string;
+    }
+  ];
+}