Upgrading to Parcel2. Dependabot found a security issue with Parcel 1.12.5, but that is the latest version of Parcel1 and no new versions will be released.

ui/.babelrc

@@ -1,3 +1,4 @@
 {
-  "plugins": ["@babel/plugin-transform-runtime"]
+  "plugins": ["@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties"],
+  "presets": ["@babel/preset-react"]
 }

ui/README.md

@@ -3,6 +3,11 @@ The preferred install path for Kubecost is via Helm chart, and is explained [her
 
 To manually run an open source demo UI, follow the steps below.
 
+## Requirements
+
+* `nodejs >= 12.0.0`
+* `npm >= 7.0.0`
+
 ## Installation & Running
 To run the UI, open a terminal to the `cost-model/ui/` directory (where this README is located) and run
 

ui/package.json

@@ -1,13 +1,15 @@
 {
   "name": "kubecost-ui-open",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "description": "Open source UI for Kubecost",
-  "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "license": "Apache-2.0",
+  "browserslist": [
+    "defaults"
+  ],
   "dependencies": {
     "@babel/runtime": "^7.13.10",
     "@date-io/core": "^1.3.13",
@@ -27,7 +29,9 @@
   },
   "devDependencies": {
     "@babel/core": "^7.13.10",
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
     "@babel/plugin-transform-runtime": "^7.13.10",
-    "parcel-bundler": "^1.12.5"
+    "@babel/preset-react": "^7.12.13",
+    "parcel": "*"
   }
 }

ui/src/components/AllocationReport.js

@@ -65,12 +65,12 @@ const AllocationReport = ({ allocationData, cumulativeData, totalData, currency
   const [orderBy, setOrderBy] = React.useState('totalCost')
   const [page, setPage] = useState(0)
   const [rowsPerPage, setRowsPerPage] = useState(25)
+  const numData = cumulativeData.length
 
   useEffect(() => {
     setPage(0)
   }, [numData])
 
-  const numData = cumulativeData.length
   const lastPage = Math.floor(numData / rowsPerPage)
 
   const handleChangePage = (event, newPage) => setPage(newPage)