feat: deployment overview (#57)

* feat: deployment page structure and overview components

* feat: projects and deployment json API

* feat: removed useless mock

* feat: toolbar by API

* feat: project and deployment toolbar

* feat: overview page and extend components features

src/App.tsx

@@ -29,26 +29,26 @@ function App() {
  {
  routes: [
  {
- label: "Catalog",
+ label: "Dashboard",
  path: "/",
  icon: getIcon("dashboard"),
  endpoint: "/",
  menu: true,
  },
+ {
+ label: "Projects",
+ path: "/projects",
+ icon: getIcon('projects'),
+ endpoint: "/",
+ menu: true,
+ },
  {
  label: "Templates",
  path: "/templates",
  icon: getIcon('templates'),
  endpoint: "/apis/layout.ui.krateo.io/rows/two",
  menu: true,
  },
- {
- label: "Project",
- path: "/projects",
- icon: getIcon('projects'),
- endpoint: "/",
- menu: true,
- },
  {
  path: "/projects/:projectID",
  menu: false,

src/components/Widgets/DataList/DataList.tsx

@@ -5,7 +5,7 @@ import { useEffect } from "react";
 import { DataListType, selectDataList, setDataList } from "../../../features/dataList/dataListSlice";
 import { useSelector } from "react-redux";
 
-const DataList = ({prefix, data}: {prefix: string, data: DataListType[]}) => {
+const DataList = ({prefix, data, asGrid = true}: {prefix: string, data: DataListType[], asGrid?: boolean}) => {
  const dispatch = useAppDispatch();
  const datalist = useSelector(selectDataList);
  console.log(prefix);
@@ -17,21 +17,21 @@ const DataList = ({prefix, data}: {prefix: string, data: DataListType[]}) => {
 
  return (
  <List
- grid={{
+ grid={asGrid ? {
  gutter: 16,
  xs: 1,
  sm: 1,
  md: 2,
  lg: 3,
  xl: 3,
  xxl: 4,
- }}
+ } : {gutter: 16}}
  dataSource={datalist}
  renderItem={(item) => {
- const Component = widgets[item.element];
+ const Component = widgets[item.kind];
  return (
  <List.Item>
- <Component {...item.props} />
+ <Component {...item.spec.app.props} />
  </List.Item>
  )
  }}

src/components/Widgets/Panel/Panel.tsx

@@ -0,0 +1,34 @@
+import { Card, Space, Typography } from "antd";
+import styles from "./styles.module.scss";
+import widgets from "..";
+
+const Panel = ({title, content}) => {
+ let panelContent;
+
+ if (Array.isArray(content)) {
+ panelContent = content.map(el => {
+ const Component = widgets[el.kind];
+ return <Component {...el.spec.app.props} />
+ })
+ } else {
+ const Component = widgets[content.kind];
+ panelContent = <Component {...content.spec.app.props} />
+ }
+
+ return (
+ <Card
+ className={styles.card}
+ title={
+ <Space size="large" className={styles.header}>
+ <div className={styles.details}>
+ <Typography.Title className={styles.title} ellipsis level={2} title={title}>{title}</Typography.Title>
+ </div>
+ </Space>
+ }
+ >
+ {panelContent}
+ </Card>
+ )
+}
+
+export default Panel;

src/components/Widgets/Panel/styles.module.scss

@@ -0,0 +1,28 @@
+@import '../../../theme/global.scss';
+
+.card {
+
+ :global .ant-card-head {
+ border: none;
+ }
+
+ .header {
+ width: 100%;
+
+ > div:nth-child(2) {
+ min-width: calc(100% - 88px);
+ }
+
+ .details {
+
+ .title {
+ font-weight: 300;
+ }
+ }
+ }
+
+ p {
+ font-size: $mTextSize;
+ }
+
+}

src/components/Widgets/Paragraph/Paragraph.tsx

@@ -0,0 +1,9 @@
+import { Typography } from "antd";
+import styles from "./styles.module.scss";
+const Paragraph = ({text}) => {
+ return (
+ <Typography.Paragraph className={styles.paragraph}>{text}</Typography.Paragraph>
+ )
+}
+
+export default Paragraph;

src/components/Widgets/Paragraph/styles.module.scss

@@ -0,0 +1,5 @@
+@import '../../../theme/global.scss';
+
+.paragraph {
+ font-size: $mTextSize;
+}

src/components/Widgets/RichElement/RichElement.tsx

@@ -0,0 +1,21 @@
+import { Avatar, Space, Typography } from "antd";
+import styles from "./styles.module.scss";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { getColorCode } from "../../../utils/colors";
+
+
+const RichElement = ({icon, color, title, description}) => {
+
+
+ return (
+ <Space size="large" className={styles.richElement}>
+ <Avatar style={{ backgroundColor: getColorCode(color) }} size={64} icon={<FontAwesomeIcon icon={icon} />} />
+ <div className={styles.details}>
+ <Typography.Title className={styles.title} ellipsis level={2} title={title}>{title}</Typography.Title>
+ <Typography.Paragraph>{description}</Typography.Paragraph>
+ </div>
+ </Space>
+ )
+}
+
+export default RichElement;

src/components/Widgets/RichElement/styles.module.scss

@@ -0,0 +1,12 @@
+@import '../../../theme/global.scss';
+
+ .richElement {
+ width: 100%;
+
+ .details {
+
+ .title {
+ font-weight: 300;
+ }
+ }
+ }

src/components/Widgets/index.ts

@@ -8,6 +8,9 @@ import Widget2 from "./Widget2/Widget2";
 import FormGenerator from "./FormGenerator/FormGenerator";
 import Button from "./Button/Button";
 import DataList from "./DataList/DataList";
+import Panel from "./Panel/Panel";
+import RichElement from "./RichElement/RichElement";
+import Paragraph from "./Paragraph/Paragraph";
 
 const widgets = {
  "ChartPie": ChartPie,
@@ -18,6 +21,9 @@ const widgets = {
  "FormGenerator": FormGenerator,
  "Button": Button,
  "DataList": DataList,
+ "Panel": Panel,
+ "RichElement": RichElement,
+ "Paragraph": Paragraph,
  "Widget1": Widget1,
  "Widget2": Widget2,
 }

src/features/dataList/dataListSlice.ts

@@ -2,21 +2,25 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { RootState } from "../../redux/store";
 
 export type DataListType = {
- element: string,
- props:{
- icon: string,
- color: string,
- title: string,
- status: string,
- date: string,
- content: string,
- tags: string,
- actions: {
- name: string,
- enabled: boolean,
- path: string,
- verb: string
- }[]
+ kind: string,
+ spec: {
+ app: {
+ props:{
+ icon: string,
+ color: string,
+ title: string,
+ status: string,
+ date: string,
+ content: string,
+ tags: string,
+ actions: {
+ name: string,
+ enabled: boolean,
+ path: string,
+ verb: string
+ }[]
+ }
+ }
  }
 }
 
@@ -62,8 +66,8 @@ export const dataListSlice = createSlice({
  state.filteredData = state.data.filter(el => {
  let valid = true;
  action.payload.forEach(filter => {
- const index = Object.keys(el.props).indexOf(filter.fieldName);
- const valueToCompare: string = Object.values(el.props)[index] as string;
+ const index = Object.keys(el.spec.app.props).indexOf(filter.fieldName);
+ const valueToCompare: string = Object.values(el.spec.app.props)[index] as string;
  if (index > -1) {
  switch (filter.fieldType) {
  case "text":