chore: Added CI for UI (#77)

* Added ui and changed image names Signed-off-by: Krithika Vijayakumar <krithika_vijayakumar@intuit.com> * Removed junit Signed-off-by: Krithika Vijayakumar <krithika_vijayakumar@intuit.com> * Added timeout Signed-off-by: Krithika Vijayakumar <krithika_vijayakumar@intuit.com> * Added some additional changes Signed-off-by: Krithika Vijayakumar <krithika_vijayakumar@intuit.com> * Added check to determine if folders changed Signed-off-by: Krithika Vijayakumar <krithika_vijayakumar@intuit.com> * chore: Added check to determine if UI dir is built or not Signed-off-by: Krithika Vijayakumar <krithika_vijayakumar@intuit.com> * chore: removed log line in ci.yaml Signed-off-by: Krithika Vijayakumar <krithika_vijayakumar@intuit.com> * chore: Fixed vulnerability Signed-off-by: Krithika Vijayakumar <krithika_vijayakumar@intuit.com> * chore: Fixed yarn.lock Signed-off-by: Krithika Vijayakumar <krithika_vijayakumar@intuit.com> * chore: Fixed some other minor issues Signed-off-by: Krithika Vijayakumar <krithika_vijayakumar@intuit.com> * chore: Added favicon and fixed warnings Signed-off-by: Krithika Vijayakumar <krithika_vijayakumar@intuit.com> * chore: Fixed any warning Signed-off-by: Krithika Vijayakumar <krithika_vijayakumar@intuit.com> * chore: Fixed some warnings Signed-off-by: Krithika Vijayakumar <krithika_vijayakumar@intuit.com> Co-authored-by: Krithika Vijayakumar <krithika_vijayakumar@intuit.com> Signed-off-by: Derek Wang <whynowy@gmail.com>
numaproj · Jul 8, 2022 · ac1814d · ac1814d
1 parent 06a3df2
commit ac1814d
Show file tree

Hide file tree

Showing 18 changed files with 2,778 additions and 2,719 deletions.
diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
@@ -7,6 +7,31 @@ on:
   pull_request:
     branches: [ main ]
 jobs:
+  ui:
+    name: UI
+    runs-on: ubuntu-latest
+    timeout-minutes: 6
+    env:
+      NODE_OPTIONS: --max-old-space-size=4096
+      CI: ""
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "16"
+      - uses: actions/cache@v3
+        with:
+          path: ui/node_modules
+          key: ${{ runner.os }}-node-dep-v1-${{ hashFiles('**/yarn.lock') }}
+      - run: yarn --cwd ui install
+      - run: yarn --cwd ui build
+      - run: yarn --cwd ui test
+      - run: yarn --cwd ui lint
+      - run: git diff --exit-code
+      # check to see if it'll start (but not if it'll render)
+      - run: yarn --cwd ui start &
+      - run: until curl http://localhost:3000 > /dev/null ; do sleep 10s ; done
+        timeout-minutes: 1
   codegen:
     name: Codegen
     runs-on: ubuntu-latest

diff --git a/ui/junit.xml b/ui/junit.xml
diff --git a/ui/package.json b/ui/package.json
@@ -29,7 +29,6 @@
     "react-flow-renderer": "^10.0.7",
     "react-json-view": "^1.21.3",
     "react-router-dom": "6",
-    "react-scripts": "5.0.1",
     "typescript": "^4.4.2",
     "web-vitals": "^2.1.0",
     "@visx/responsive": "^2.8.0",
@@ -60,6 +59,7 @@
     ]
   },
   "devDependencies": {
+    "react-scripts": "5.0.1",
     "@typescript-eslint/eslint-plugin": "^5.20.0",
     "@typescript-eslint/parser": "^5.20.0",
     "eslint-config-prettier": "7.2.0",
@@ -68,6 +68,9 @@
     "prettier": "2.5.1",
     "jest-junit": "^12.0.0"
   },
+  "resolutions": {
+    "nth-check": "^2.0.1"
+  },
   "jest": {
     "transformIgnorePatterns": [
       "/node_modules/(?!d3|d3-array|internmap|delaunator|robust-predicates)"

diff --git a/ui/public/favicon.ico b/ui/public/favicon.ico
diff --git a/ui/src/App.test.tsx b/ui/src/App.test.tsx
@@ -1,5 +1,5 @@
 import  App  from "./App"
-import {render, screen} from "@testing-library/react";
+import {render} from "@testing-library/react";
 import { BrowserRouter } from "react-router-dom";
 
 jest.mock("react-router-dom", () => ({
@@ -13,7 +13,5 @@ describe("Breadcrumbs", () => {
     it("loads pipeline screen", () => {
         render(<BrowserRouter>
             <App/></BrowserRouter>)
-        // expect(screen.getByTestId("pipeline-breadcrumb")).toBeInTheDocument();
-        // expect(screen.getByTestId("mui-breadcrumbs")).toBeInTheDocument();
     })
 })
diff --git a/ui/src/components/namespaces/NamespaceRowContent.tsx b/ui/src/components/namespaces/NamespaceRowContent.tsx
@@ -10,7 +10,7 @@ interface NamespaceRowContentProps {
 
 export function NamespaceRowContent(props: NamespaceRowContentProps) {
   const { namespaceId } = props;
-  const { pipelines, loading, error } = useNamespaceFetch(namespaceId);
+  const { pipelines } = useNamespaceFetch(namespaceId);
   return (
     <div className={"NamespaceRowContent"} data-testid="namespace-row-content">
       <Box

diff --git a/ui/src/components/namespaces/Namespaces.tsx b/ui/src/components/namespaces/Namespaces.tsx
@@ -11,7 +11,7 @@ import { NamespaceRow } from "./NamespaceRow";
 import "./Namespaces.css";
 
 export function Namespaces() {
-  const { data, error, loading } = useFetch("/api/v1/namespaces");
+  const { data } = useFetch("/api/v1/namespaces");
 
   return (
     <div className="Namespaces">

diff --git a/ui/src/components/pipeline/Pipeline.test.tsx b/ui/src/components/pipeline/Pipeline.test.tsx
@@ -117,7 +117,8 @@ describe("Pipeline", () => {
                 "totalMessages": 8233,
                 "bufferUsageLimit": 0.8,
                 "bufferUsage": 0.8233,
-                "isFull": true
+                "isFull": true,
+                "bufferLength": 10000
             }, {
                 "fromVertex": "preproc",
                 "toVertex": "infer",
@@ -126,7 +127,8 @@ describe("Pipeline", () => {
                 "totalMessages": 8146,
                 "bufferUsageLimit": 0.8,
                 "bufferUsage": 0.8146,
-                "isFull": true
+                "isFull": true,
+                "bufferLength": 10000
             }, {
                 "fromVertex": "infer",
                 "toVertex": "train",
@@ -135,7 +137,8 @@ describe("Pipeline", () => {
                 "totalMessages": 0,
                 "bufferUsageLimit": 0.8,
                 "bufferUsage": 0,
-                "isFull": false
+                "isFull": false,
+                "bufferLength": 10000
             }, {
                 "fromVertex": "infer",
                 "toVertex": "postproc",
@@ -144,7 +147,8 @@ describe("Pipeline", () => {
                 "totalMessages": 8198,
                 "bufferUsageLimit": 0.8,
                 "bufferUsage": 0.8101,
-                "isFull": true
+                "isFull": true,
+                "bufferLength": 10000
             }, {
                 "fromVertex": "postproc",
                 "toVertex": "log-output",
@@ -153,7 +157,8 @@ describe("Pipeline", () => {
                 "totalMessages": 13641,
                 "bufferUsageLimit": 0.8,
                 "bufferUsage": 1.3641,
-                "isFull": true
+                "isFull": true,
+                "bufferLength": 10000
             }, {
                 "fromVertex": "postproc",
                 "toVertex": "publisher",
@@ -162,7 +167,8 @@ describe("Pipeline", () => {
                 "totalMessages": 0,
                 "bufferUsageLimit": 0.8,
                 "bufferUsage": 0,
-                "isFull": false
+                "isFull": false,
+                "bufferLength": 10000
             }], error: false, loading: false
         })
         render(<Pipeline/>)
@@ -267,7 +273,8 @@ describe("Pipeline", () => {
                 "totalMessages": 8233,
                 "bufferUsageLimit": 0.8,
                 "bufferUsage": 0.8233,
-                "isFull": true
+                "isFull": true,
+                "bufferLength": 10000
             }, {
                 "fromVertex": "preproc",
                 "toVertex": "infer",
@@ -276,7 +283,8 @@ describe("Pipeline", () => {
                 "totalMessages": 8146,
                 "bufferUsageLimit": 0.8,
                 "bufferUsage": 0.8146,
-                "isFull": true
+                "isFull": true,
+                "bufferLength": 10000
             }, {
                 "fromVertex": "infer",
                 "toVertex": "train",
@@ -285,7 +293,8 @@ describe("Pipeline", () => {
                 "totalMessages": 0,
                 "bufferUsageLimit": 0.8,
                 "bufferUsage": 0,
-                "isFull": false
+                "isFull": false,
+                "bufferLength": 10000
             }, {
                 "fromVertex": "infer",
                 "toVertex": "postproc",
@@ -294,7 +303,8 @@ describe("Pipeline", () => {
                 "totalMessages": 8198,
                 "bufferUsageLimit": 0.8,
                 "bufferUsage": 0.8101,
-                "isFull": true
+                "isFull": true,
+                "bufferLength": 10000
             }, {
                 "fromVertex": "postproc",
                 "toVertex": "log-output",
@@ -303,7 +313,8 @@ describe("Pipeline", () => {
                 "totalMessages": 13641,
                 "bufferUsageLimit": 0.8,
                 "bufferUsage": 1.3641,
-                "isFull": true
+                "isFull": true,
+                "bufferLength": 10000
             }, {
                 "fromVertex": "postproc",
                 "toVertex": "publisher",
@@ -312,7 +323,8 @@ describe("Pipeline", () => {
                 "totalMessages": 0,
                 "bufferUsageLimit": 0.8,
                 "bufferUsage": 0,
-                "isFull": false
+                "isFull": false,
+                "bufferLength": 10000
             }], error: false, loading: false
         })
         render(<Pipeline/>)

diff --git a/ui/src/components/pipeline/Pipeline.tsx b/ui/src/components/pipeline/Pipeline.tsx
@@ -17,7 +17,6 @@ export function Pipeline() {
   const {
     pipeline,
     error: pipelineError,
-    loading: pipelineLoading,
   } = usePipelineFetch(namespaceId, pipelineId, pipelineRequestKey);
 
   const [edgesInfoRequestKey, setEdgesInfoRequestKey] = useState(
@@ -27,7 +26,6 @@ export function Pipeline() {
   const {
     edgesInfo,
     error: edgesInfoError,
-    loading: edgesInfoLoading,
   } = useEdgesInfoFetch(namespaceId, pipelineId, edgesInfoRequestKey);
 
   useEffect(() => {

diff --git a/ui/src/components/pipeline/graph/Graph.test.tsx b/ui/src/components/pipeline/graph/Graph.test.tsx
@@ -4,7 +4,7 @@ import {Position} from "react-flow-renderer";
 
 global.ResizeObserver = require('resize-observer-polyfill')
 
-describe("Graph screen", () => {
+describe("Graph screen test", () => {
 
     const data = {
         "vertices": [{

diff --git a/ui/src/components/pipeline/graph/Graph.tsx b/ui/src/components/pipeline/graph/Graph.tsx
@@ -164,7 +164,6 @@ export default function Graph(props: GraphProps) {
           onEdgeClick={handleEdgeClick}
           onNodeClick={handleNodeClick}
           onPaneClick={handlePaneClick}
-          onNodeMouse
           fitView
           zoomOnScroll={false}
           panOnDrag={false}