feat: 74 custom deployments

public/config/config.json

@@ -1,6 +1,6 @@
 {
  "api": {
- "BFF_API_BASE_URL": "http://4.207.38.112:8081",
- "AUTHN_API_BASE_URL": "http://4.207.38.111:8082"
+ "BFF_API_BASE_URL": "http://4.209.26.194:8081",
+ "AUTHN_API_BASE_URL": "http://4.209.26.185:8082"
  }
 }

src/App.tsx

@@ -44,26 +44,23 @@ function App() {
  menu: true,
  },
  {
- label: "Projects",
- path: "/projects",
+ label: "Deployments",
+ path: "/deployments",
  icon: getIcon('projects'),
- endpoint: "/call?uri=/apis/widgets.krateo.io/v1alpha1/namespaces/demo-system/projects",
+ endpoint: "/call?uri=/apis/composition.krateo.io",
  menu: true,
  },
  {
- path: "/projects/:projectID",
- menu: false,
- },
- {
- path: "/projects/:projectID/:deploymentID",
+ path: "/deployments/:deploymentID",
  menu: false,
  },
  // {
- // label: "Form",
- // path: "/form",
- // icon: getIcon('dashboard'),
- // endpoint: "/",
- // menu: true,
+ // path: "/projects/:projectID",
+ // menu: false,
+ // },
+ // {
+ // path: "/projects/:projectID/:deploymentID",
+ // menu: false,
  // },
  ],
  notifications: [

src/components/CustomProjectCardList/CustomProjectCardList.tsx

@@ -0,0 +1,77 @@
+import { useEffect, useState } from "react";
+import { getBaseUrl, getHeaders } from "../../utils/api";
+import { Avatar, Card, Col, Row, Space, Typography } from "antd";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import styles from "./styles.module.scss";
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { formatISODate } from "../../utils/dateTime";
+import { getColorCode } from "../../utils/colors";
+import { useNavigate } from "react-router-dom";
+import useCatchError from "../../utils/useCatchError";
+
+const CustomProjectCardList = ({data}) => {
+ const endpoint = "/call?uri=/apis/composition.krateo.io";
+ const [cards, setCards] = useState<any[]>([]);
+ const navigate = useNavigate();
+ const { catchError } = useCatchError();
+
+ useEffect(() => {
+ const getCards = async () => {
+ const arrCards: any[] = [];
+ try {
+ await Promise.all(data.versions?.map(async (v) => {
+ const endpointVersion = `${endpoint}/${v.version}`;
+ const dataNames = await fetch(`${getBaseUrl()}${endpointVersion}`, {headers: getHeaders()});
+ const names = await dataNames.json();
+
+ await Promise.all(names?.resources?.map(async (n) => {
+ const endpointNames = `${endpointVersion}/${n.name}`;
+ const dataCardList = await fetch(`${getBaseUrl()}${endpointNames}`, {headers: getHeaders()});
+ const cardList = await dataCardList.json();
+
+ cardList.items?.forEach(card => {
+ arrCards.push(card);
+ })
+ }));
+ }));
+ setCards(arrCards);
+ } catch (error) {
+ catchError(null, "result");
+ }
+ }
+
+ if (data !== undefined) getCards();
+ }, [data]);
+
+ return (
+ <Row>
+ {cards.map(c => (
+ <Col xs={24} sm={12} key={`Col_${c.metadata.uid}`}>
+ <Card
+ key={c.metadata.uid}
+ onClick={() => navigate(`/deployments/${c.metadata.uid}`)}
+ className={styles.card}
+ title={
+ <Space size="large" className={styles.header}>
+ <Avatar size={64} style={{ backgroundColor: getColorCode("blue") }} icon={<FontAwesomeIcon icon={"server" as IconProp} />} />
+ <div className={styles.details}>
+ <Typography.Title className={styles.title} ellipsis level={2} title={c.metadata.name}>{c.metadata.name}</Typography.Title>
+ <Space className={styles.subTitle}>
+ <div className={styles.date}>{formatISODate(c.metadata.creationTimestamp, true)}</div>
+ </Space>
+ </div>
+ </Space>
+ }
+ // actions={[
+ // <Space wrap key='1'>{tags?.split(",")?.map((tag, i) => <Tag key={`Tag_${i}`}>{tag}</Tag>)}</Space>,
+ // <Button key='2' onClick={(e) => {e.stopPropagation(); onDeleteAction()}} icon={<DeleteOutlined />} type="text" disabled={!isAllowed("delete")} />
+ // ]}
+ >
+ </Card>
+ </Col>
+ ))}
+ </Row>
+ )
+}
+
+export default CustomProjectCardList;

src/components/CustomProjectCardList/styles.module.scss

@@ -0,0 +1,64 @@
+@import '../../theme/global.scss';
+
+.card {
+ cursor: pointer;
+
+ :global .ant-card-head {
+ border: none;
+ }
+
+ &.noLink {
+ cursor: default;
+
+ :global .ant-card-actions span {
+ cursor: default;
+ }
+ }
+
+ .header {
+ width: 100%;
+
+ > div:nth-child(2) {
+ min-width: calc(100% - 88px);
+ }
+
+ .details {
+
+ .title {
+ font-weight: 300;
+ }
+
+ .subTitle {
+ width: 100%;
+ justify-content: space-between;
+
+ .status {
+ font-weight: 400;
+ }
+
+ .date {
+ font-weight: 400;
+ }
+ }
+ }
+ }
+
+ p {
+ font-size: $mTextSize;
+ }
+
+ :global .ant-card-actions {
+ border: none;
+
+ li:not(:last-child) {
+ border-inline-end: none;
+ min-width: calc(100% - 80px);
+ text-align: left;
+ padding-left: 20px;
+ }
+
+ li:last-child {
+ min-width: 80px;
+ }
+ }
+}