feat: Add icon and other minor changes (#94)

* feat: Add icon and other minor change Signed-off-by: Krithika Vijayakumar <[email protected]>
numaproj · Jul 8, 2022 · 0b75495 · 0b75495
1 parent 7eb08f5
commit 0b75495
Show file tree

Hide file tree

Showing 12 changed files with 38 additions and 15 deletions.
diff --git a/ui/.eslintrc b/ui/.eslintrc
@@ -10,6 +10,7 @@
     "plugin:@typescript-eslint/recommended"
   ],
   "rules": {
-    "no-debugger": 0
+    "no-debugger": 0,
+    "@typescript-eslint/no-explicit-any": ["off"]
   }
 }
diff --git a/ui/src/App.css b/ui/src/App.css
@@ -1,3 +1,10 @@
+html,
+body,
+#root,
+.MuiScopedCssBaseline-root {
+  height: 100%;
+}
+
 .App-side-nav-link {
   text-decoration: none;
   color: inherit;
@@ -6,3 +13,8 @@
 .react-flow__attribution {
   display: none !important;
 }
+
+.logo {
+  margin-left: -15px;
+  margin-top: 5px;
+}
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
@@ -13,7 +13,7 @@ import ListItemText from "@mui/material/ListItemText";
 import { Breadcrumbs } from "./components/breadcrumbs/Breadcrumbs";
 import { Namespaces } from "./components/namespaces/Namespaces";
 import { Pipeline } from "./components/pipeline/Pipeline";
-
+import logo from "./images/icon-on-blue-bg.png";
 import "./App.css";
 
 const drawerWidth = 240;
@@ -40,10 +40,12 @@ function App() {
             }}
           >
             <Toolbar>
+                <img src={logo} alt="logo" className={'logo'}/>
               <Typography
                 sx={{
                   fontSize: "1.25rem",
                   fontWeight: 500,
+                    marginLeft: "20px"
                 }}
                 variant="h6"
                 noWrap

diff --git a/ui/src/components/namespaces/Namespaces.tsx b/ui/src/components/namespaces/Namespaces.tsx
@@ -6,14 +6,14 @@ import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
 import Paper from "@mui/material/Paper";
 import { useFetch } from "../../utils/fetchWrappers/fetch";
-
-import "./Namespaces.css";
-import {useState} from "react";
+import { useState } from "react";
+import { NamespaceRowContent } from "./NamespaceRowContent";
 import IconButton from "@mui/material/IconButton";
 import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import Collapse from "@mui/material/Collapse";
-import {NamespaceRowContent} from "./NamespaceRowContent";
+import "./Namespaces.css";
+
 
 export function Namespaces() {
   const { data } = useFetch("/api/v1/namespaces");

diff --git a/ui/src/components/pipeline/Pipeline.css b/ui/src/components/pipeline/Pipeline.css
@@ -1,2 +1,7 @@
-.Pipeline {
+.react-flow__edge-textwrapper {
+    cursor: pointer;
 }
+
+.react-flow__edge-textbg {
+    fill: #fafafa;
+}
diff --git a/ui/src/components/pipeline/Pipeline.tsx b/ui/src/components/pipeline/Pipeline.tsx
@@ -93,17 +93,17 @@ export function Pipeline() {
             color: "#333",
             border: "1px solid #b8cee2",
           };
-          newNode.data.source = vertex.source;
+          newNode.data.source = vertex;
         } else if (vertex.sink) {
           newNode.type = "output";
           newNode.style = {
             background: "#c3bbb7",
             color: "#333",
             border: "1px solid #a9a3a0",
           };
-          newNode.data.sink = vertex.sink;
+          newNode.data.sink = vertex;
         } else {
-          newNode.data.udf = vertex.udf;
+          newNode.data.udf = vertex;
           newNode.style = {
             background: "#efdbce",
             color: "#333",

diff --git a/ui/src/components/pipeline/graph/Graph.css b/ui/src/components/pipeline/graph/Graph.css
@@ -2,6 +2,7 @@
     flex-grow: 1;
     position: relative;
     height: 100%;
+    cursor: move;
 }
 
 .Graph .controls {

diff --git a/ui/src/components/pipeline/nodeinfo/NodeInfo.tsx b/ui/src/components/pipeline/nodeinfo/NodeInfo.tsx
@@ -69,7 +69,7 @@ export default function NodeInfo(props: NodeInfoProps) {
           <TabPanel value={value} index={1}>
             {node?.data?.source && (
               <ReactJson
-                name="source"
+                name="spec"
                 enableClipboard={handleCopy}
                 theme="apathy:inverted"
                 src={node.data.source}
@@ -82,7 +82,7 @@ export default function NodeInfo(props: NodeInfoProps) {
             )}
             {node?.data?.udf && (
               <ReactJson
-                name="udf"
+                name="spec"
                 enableClipboard={handleCopy}
                 theme="apathy:inverted"
                 src={node.data.udf}
@@ -95,7 +95,7 @@ export default function NodeInfo(props: NodeInfoProps) {
             )}
             {node?.data?.sink && (
               <ReactJson
-                name="sink"
+                name="spec"
                 enableClipboard={handleCopy}
                 theme="apathy:inverted"
                 src={node.data.sink}

diff --git a/ui/src/images/icon-on-blue-bg.png b/ui/src/images/icon-on-blue-bg.png
diff --git a/ui/src/images/icon.png b/ui/src/images/icon.png
diff --git a/ui/src/index.tsx b/ui/src/index.tsx
@@ -17,11 +17,13 @@ const theme = createTheme({
   },
   palette: {
     primary: {
-      main: "#1976d2",
+      main: "#0077C5",
     },
   },
+
 });
 
+
 root.render(
   <React.StrictMode>
     <BrowserRouter>

diff --git a/ui/src/utils/fetchWrappers/fetch.ts b/ui/src/utils/fetchWrappers/fetch.ts
@@ -10,7 +10,7 @@ export const useFetch = (
   fetchOptions?: RequestInit,
   options?: Options
 ) => {
-  const [data, setData] = useState<any>();
+  const [data, setData] = useState<any>(undefined);
   const [error, setError] = useState<any>(undefined);
   const [loading, setLoading] = useState<boolean>(
     (options && !options.skip) || true