feat: auto layouting and drag

* feat: init chart flow

* feat: render chart with auto position

* feat: auto layouting and drag

* feat: eslint fixes

* feat: card action

* feat: 8 chart flow and headers

package.json

@@ -12,22 +12,24 @@
  "dependencies": {
  "@ant-design/charts": "^1.4.2",
  "@ant-design/icons": "^5.2.6",
+ "@dagrejs/dagre": "^1.1.2",
  "@fortawesome/fontawesome-svg-core": "^6.4.2",
  "@fortawesome/free-regular-svg-icons": "^6.4.2",
  "@fortawesome/free-solid-svg-icons": "^6.4.2",
  "@fortawesome/react-fontawesome": "^0.2.0",
  "@hello-pangea/dnd": "^16.6.0",
  "@mdxeditor/editor": "^2.20.0",
  "@reduxjs/toolkit": "^1.9.5",
+ "@types/dagre": "^0.7.52",
  "@vitejs/plugin-basic-ssl": "^1.0.1",
  "antd": "^5.15.3",
  "axios": "^1.6.2",
- "https-proxy-agent": "^7.0.2",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-markdown": "^9.0.1",
  "react-redux": "^8.1.2",
  "react-router-dom": "^6.16.0",
+ "reactflow": "^11.11.2",
  "remark-gfm": "^4.0.0",
  "vite-plugin-svgr": "^4.1.0"
  },

public/config/config.json

@@ -1,6 +1,6 @@
 {
  "api": {
- "BFF_API_BASE_URL": "http://4.209.242.225:8081",
- "AUTHN_API_BASE_URL": "http://4.209.242.209:8082"
+ "BFF_API_BASE_URL": "http://4.209.35.224:8081",
+ "AUTHN_API_BASE_URL": "http://4.209.35.212:8082"
  }
 }

src/App.tsx

@@ -15,7 +15,8 @@ import getClientIdFromPath from "./utils/getClientIdFromPath";
 import AuthGitHub from "./pages/Auth/AuthGitHub";
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { fas } from '@fortawesome/free-solid-svg-icons'
-library.add(fas)
+import { far } from '@fortawesome/free-regular-svg-icons'
+library.add(fas, far)
 
 function App() {
  const clientId = getClientIdFromPath();
@@ -28,31 +29,31 @@ function App() {
  return (
  {
  routes: [
- // {
- //  label: "Dashboard",
- //  path: "/",
- //  icon: getIcon("dashboard"),
- //  endpoint: "/",
- //  menu: true,
- // },
+ {
+ label: "Dashboard",
+ path: "/",
+ icon: getIcon("dashboard"),
+ endpoint: "/",
+ menu: true,
+ },
  {
  label: "Templates",
  path: "/templates",
  icon: getIcon('templates'),
- endpoint: "/apis/layout.ui.krateo.io/rows/two?sub=cyberjoker&orgs=devs&namespace=demo-system",
+ endpoint: "/call?uri=/apis/widgets.krateo.io/v1alpha1/namespaces/demo-system/rows/two",
  menu: true,
  },
- // {
- //  label: "Projects",
- //  path: "/projects",
- //  icon: getIcon('projects'),
- // endpoint: "/",
- //  menu: true,
- // },
- // {
- //  path: "/projects/:projectID",
- //  menu: false,
- // },
+ {
+ label: "Projects",
+ path: "/projects",
+ icon: getIcon('projects'),
+  endpoint: "/call?uri=/apis/widgets.krateo.io/v1alpha1/namespaces/demo-system/projects",
+ menu: true,
+ },
+ {
+ path: "/projects/:projectID",
+ menu: false,
+ },
  {
  path: "/projects/:projectID/:deploymentID",
  menu: false,

src/components/Layout/styles.module.scss

@@ -22,10 +22,15 @@
 
  :global(.ant-row) {
  padding: 0;
+ align-content: flex-start;
  }
 
  :global(.ant-col) {
  padding: 10px;
+
+ &:only-child {
+ height: 100%;
+ }
  }
 
  :global(.ant-col > div) {