Updated UI files, configmap MLFlow api URL. (#468)

dashboard/.env.development

@@ -0,0 +1,2 @@
+REACT_APP_API_BASE_URL=api/
+REACT_APP_MLFLOW_BASE_URL=mlflow/

dashboard/package.json

@@ -4,6 +4,7 @@
   "proxy": "http://localhost:3000",
   "private": true,
   "dependencies": {
+    "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/react": "^2.7.1",
     "@dagrejs/dagre": "^1.0.4",
     "@emotion/react": "^11.11.1",
@@ -28,13 +29,17 @@
     "date-fns": "^2.30.0",
     "file-saver": "^2.0.5",
     "filepond": "^4.30.4",
+    "framer-motion": "^10.16.12",
     "http-proxy-middleware": "^2.0.6",
     "jszip": "^3.10.1",
     "react": "^18.2.0",
+    "react-arborist": "^3.3.0-rc.1",
+    "react-calendar-timeline": "^0.28.0",
     "react-dom": "^18.2.0",
     "react-drag-drop-files": "^2.3.10",
     "react-filepond": "^7.1.2",
     "react-hook-form": "^7.45.2",
+    "react-icons": "^4.12.0",
     "react-router-dom": "^6.14.1",
     "react-scripts": "5.0.1",
     "reactflow": "^11.7.4",

dashboard/src/@types/alltypes.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright 2023 Cisco Systems, Inc. and its affiliates
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+declare module 'react-calendar-timeline';
+declare module 'react-calendar-timeline/lib';

dashboard/src/components/confirmation-dialog/ConfirmationDialog.tsx

@@ -28,7 +28,7 @@ interface Props {
   onAction: () => void;
 }
 
-const ConfirmationDialog = ({ isOpen, actionButtonLabel, message, buttonColorScheme = 'teal', onClose, onAction }: Props) => {
+const ConfirmationDialog = ({ isOpen, actionButtonLabel, message, buttonColorScheme = 'primary', onClose, onAction }: Props) => {
   return (
     <Modal
       isOpen={isOpen}

dashboard/src/components/custom-node-no-interaction/CustomNodeNoInteraction.tsx

@@ -45,7 +45,7 @@ const CustomNodeNoInteraction = ({ data: { id, status, label, isInteractive } }:
   }, [status])
 
   return (
-    <div className={`customNode ${isInteractive ? 'interactive' : 'no-interaction'}`}>
+    <div className={`customNode ${isInteractive ? 'interactive interactive-pulse' : 'no-interaction'}`}>
       <div className="customNodeBody">
         {!isConnecting && (
           <Handle

dashboard/src/components/custom-node-no-interaction/customNodeNoInteraction.css

@@ -1,21 +1,42 @@
 .customNodeBody {
-    width: 150px;
-    height: 60px;
-    border: 2px solid black;
-    position: relative;
-    overflow: hidden;
-    border-radius: 10px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 12px;
-    font-weight: bold;
-    background-color: rgb(228, 227, 227) !important;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
+  width: 150px;
+  height: 60px;
+  border: 1px solid lightgray;
+  position: relative;
+  overflow: hidden;
+  border-radius: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 12px;
+  font-weight: bold;
+  background-color: rgb(228, 227, 227) !important;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* background-image: url('../../assets/node-bg.avif'); */
+  background-size: cover;
+  background-position: center;
+  background-blend-mode: lighten;
+  box-shadow: rgba(58, 53, 65, 0.42) 0px 4px 8px -4px;
+}
+
+.interactive-pulse {
+  animation: interactive-pulse-animation 1s infinite;
+  border-radius: 10px;
+}
+
+@keyframes interactive-pulse-animation {
+  0% {
+    box-shadow: 0 0 0 0px rgb(189, 188, 188);
   }
+  50% {
+    box-shadow: 0 0 0 2px rgb(152, 203, 121);
+  }
+  100% {
+    box-shadow: 0 0 0 0px rgb(21, 237, 21);
+  }
+}
 
 .status-indicator {
   position: absolute;
@@ -27,6 +48,10 @@
   cursor: default;
 }
 
+.customHandle {
+  opacity: 0;
+}
+
 div.custom-node-no-interaction-handle {
   display: flex;
   width: unset;
@@ -37,6 +62,7 @@ div.custom-node-no-interaction-handle {
   background: transparent;
   transform: none;
   cursor: pointer !important;
+  opacity: 0;
 }
 
 .no-interaction > * {

dashboard/src/components/custom-node/customNode.css

@@ -1,7 +1,7 @@
 .custom-node-body {
   width: 150px;
   height: 60px;
-  border: 2px solid black;
+  border: 1px solid lightgray;
   position: relative;
   overflow: hidden;
   border-radius: 10px;
@@ -14,6 +14,11 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  /* background-image: url('../../assets/node-bg.avif'); */
+  background-size: cover;
+  background-position: center;
+  background-blend-mode: lighten;
+  box-shadow: rgba(58, 53, 65, 0.42) 0px 4px 8px -4px;
 }
 
 .status-indicator {