diff --git a/client/package.json b/client/package.json
index e5c71d6a0..faf0a06e0 100644
--- a/client/package.json
+++ b/client/package.json
@@ -25,6 +25,7 @@
"react-barcode": "^1.4.0",
"react-big-calendar": "^0.24.0",
"react-dom": "^16.13.0",
+ "react-grid-layout": "^0.18.2",
"react-html-email": "^3.0.0",
"react-i18next": "^11.3.3",
"react-icons": "^3.9.0",
diff --git a/client/src/components/dashboard-grid/dashboard-grid.component.jsx b/client/src/components/dashboard-grid/dashboard-grid.component.jsx
new file mode 100644
index 000000000..f934d8ba4
--- /dev/null
+++ b/client/src/components/dashboard-grid/dashboard-grid.component.jsx
@@ -0,0 +1,35 @@
+import React from "react";
+import GridLayout from "react-grid-layout";
+import { Card } from "antd";
+
+//Combination of the following:
+// /node_modules/react-grid-layout/css/styles.css
+// /node_modules/react-resizable/css/styles.css
+import "./dashboard-grid.styles.css";
+
+export default function DashboardGridComponent() {
+ const layout = [
+ { i: "a", x: 0, y: 0, w: 1, h: 2, static: true },
+ { i: "b", x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4 },
+ { i: "c", x: 4, y: 0, w: 1, h: 2 }
+ ];
+ return (
+
+ The Grid.
+ {
+ console.log(layout);
+ }}
+ >
+ a
+ b
+ c
+
+
+ );
+}
diff --git a/client/src/components/dashboard-grid/dashboard-grid.styles.css b/client/src/components/dashboard-grid/dashboard-grid.styles.css
new file mode 100644
index 000000000..10969c599
--- /dev/null
+++ b/client/src/components/dashboard-grid/dashboard-grid.styles.css
@@ -0,0 +1,126 @@
+.react-resizable {
+ position: relative;
+}
+.react-resizable-handle {
+ position: absolute;
+ width: 20px;
+ height: 20px;
+ background-repeat: no-repeat;
+ background-origin: content-box;
+ box-sizing: border-box;
+ background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+");
+ background-position: bottom right;
+ padding: 0 3px 3px 0;
+}
+.react-resizable-handle-sw {
+ bottom: 0;
+ left: 0;
+ cursor: sw-resize;
+ transform: rotate(90deg);
+}
+.react-resizable-handle-se {
+ bottom: 0;
+ right: 0;
+ cursor: se-resize;
+}
+.react-resizable-handle-nw {
+ top: 0;
+ left: 0;
+ cursor: nw-resize;
+ transform: rotate(180deg);
+}
+.react-resizable-handle-ne {
+ top: 0;
+ right: 0;
+ cursor: ne-resize;
+ transform: rotate(270deg);
+}
+.react-resizable-handle-w,
+.react-resizable-handle-e {
+ top: 50%;
+ margin-top: -10px;
+ cursor: ew-resize;
+}
+.react-resizable-handle-w {
+ left: 0;
+ transform: rotate(135deg);
+}
+.react-resizable-handle-e {
+ right: 0;
+ transform: rotate(315deg);
+}
+.react-resizable-handle-n,
+.react-resizable-handle-s {
+ left: 50%;
+ margin-left: -10px;
+ cursor: ns-resize;
+}
+.react-resizable-handle-n {
+ top: 0;
+ transform: rotate(225deg);
+}
+.react-resizable-handle-s {
+ bottom: 0;
+ transform: rotate(45deg);
+}
+.react-grid-layout {
+ position: relative;
+ transition: height 200ms ease;
+}
+.react-grid-item {
+ transition: all 200ms ease;
+ transition-property: left, top;
+}
+.react-grid-item.cssTransforms {
+ transition-property: transform;
+}
+.react-grid-item.resizing {
+ z-index: 1;
+ will-change: width, height;
+}
+
+.react-grid-item.react-draggable-dragging {
+ transition: none;
+ z-index: 3;
+ will-change: transform;
+}
+
+.react-grid-item.dropping {
+ visibility: hidden;
+}
+
+.react-grid-item.react-grid-placeholder {
+ background: red;
+ opacity: 0.2;
+ transition-duration: 100ms;
+ z-index: 2;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ -o-user-select: none;
+ user-select: none;
+}
+
+.react-grid-item > .react-resizable-handle {
+ position: absolute;
+ width: 20px;
+ height: 20px;
+ bottom: 0;
+ right: 0;
+ cursor: se-resize;
+}
+
+.react-grid-item > .react-resizable-handle::after {
+ content: "";
+ position: absolute;
+ right: 3px;
+ bottom: 3px;
+ width: 5px;
+ height: 5px;
+ border-right: 2px solid rgba(0, 0, 0, 0.4);
+ border-bottom: 2px solid rgba(0, 0, 0, 0.4);
+}
+
+.react-resizable-hide > .react-resizable-handle {
+ display: none;
+}
diff --git a/client/src/components/job-detail-cards/job-detail-cards.parts.component.jsx b/client/src/components/job-detail-cards/job-detail-cards.parts.component.jsx
index 40317fdc4..de1aa7882 100644
--- a/client/src/components/job-detail-cards/job-detail-cards.parts.component.jsx
+++ b/client/src/components/job-detail-cards/job-detail-cards.parts.component.jsx
@@ -55,12 +55,6 @@ export default function JobDetailCardsPartsComponent({ loading, data }) {
padAngle={2}
cornerRadius={5}
enableRadialLabels={false}
- legends={[
- {
- anchor: "bottom",
- direction: "row"
- }
- ]}
/>
diff --git a/client/src/pages/manage-root/manage-root.page.component.jsx b/client/src/pages/manage-root/manage-root.page.component.jsx
index 164ca51dd..2dec148d4 100644
--- a/client/src/pages/manage-root/manage-root.page.component.jsx
+++ b/client/src/pages/manage-root/manage-root.page.component.jsx
@@ -1,9 +1,11 @@
import React from "react";
+import DashboardGridComponent from "../../components/dashboard-grid/dashboard-grid.component";
export default function ManageRootPageComponent() {
//const client = useApolloClient();
return (
+
{
//