chore: modernize compass-serverstats COMPASS-5161 (#4929)

* update lint&prettier config of compass-serverstats

* lint & typescript

* package-lock

* reformat

* lint

* depalign

Author: lerouxb

package-lock.json

@@ -61,7 +61,7 @@
     "@babel/core": "7.16.0",
     "@babel/parser": "7.16.0",
     "@mongodb-js/monorepo-tools": "^1.1.1",
-    "@mongodb-js/sbom-tools": "^0.5.2",
+    "@mongodb-js/sbom-tools": "^0.5.3",
     "@testing-library/dom": "^8.11.1",
     "babel-loader": "^7.1.5",
     "husky": "^8.0.3",

package.json

@@ -74,7 +74,7 @@
     "@mongodb-js/webpack-config-compass": "^1.2.0",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
-    "@types/d3": "3.5.x",
+    "@types/d3": "^3.5.x",
     "@types/d3-flextree": "^2.1.0",
     "@types/d3-hierarchy": "^3.1.2",
     "chai": "^4.2.0",

packages/compass-explain-plan/package.json

@@ -1,6 +1,7 @@
-ignores: [
-  "mongodb-compass",
-  # webpack always externalizes 'clipboard' for legacy reasons
-  "clipboard",
-  "react-dom"
-]
+ignores:
+ - "@mongodb-js/prettier-config-compass"
+ - "@mongodb-js/tsconfig-compass"
+ - "mongodb-compass"
+ # webpack always externalizes 'clipboard' for legacy reasons
+ - "clipboard"
+ - "react-dom"

packages/compass-serverstats/.depcheckrc

@@ -0,0 +1,2 @@
+.nyc-output
+dist

packages/compass-serverstats/.eslintignore

@@ -0,0 +1,8 @@
+module.exports = {
+  root: true,
+  extends: ['@mongodb-js/eslint-config-compass'],
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: ['./tsconfig-lint.json'],
+  },
+};

packages/compass-serverstats/.eslintrc

@@ -0,0 +1,3 @@
+.nyc_output
+coverage
+dist

packages/compass-serverstats/.eslintrc.js

@@ -0,0 +1 @@
+"@mongodb-js/prettier-config-compass"

packages/compass-serverstats/.prettierignore

@@ -20,61 +20,38 @@ const realTimeLineChart = require('compass-serverstats').d3.realTimeLineChart;
 
 const el = document.getElementById('myChart');
 const data = {
-  "dataSets" : [
+  dataSets: [
     {
-      "line" : "virtual",
-      "count" : [
-        2.48,
-        2.48,
-        2.49
-      ],
-      "active" : true
+      line: 'virtual',
+      count: [2.48, 2.48, 2.49],
+      active: true,
     },
     {
-      "line" : "resident",
-      "count" : [
-        0.02,
-        0.02,
-        0.02
-      ],
-      "active":true
+      line: 'resident',
+      count: [0.02, 0.02, 0.02],
+      active: true,
     },
     {
-      "line" : "mapped",
-      "count" : [
-        0,
-        0,
-        0
-      ],
-      "active":true
-    }
-  ],
-  "localTime" : [
-    "2016-10-30T07:12:05.077Z",
-    "2016-10-30T07:12:06.069Z",
-    "2016-10-30T07:12:07.153Z"
-  ],
-  "skip" : [
-    false,
-    false,
-    false
+      line: 'mapped',
+      count: [0, 0, 0],
+      active: true,
+    },
   ],
-  "yDomain" : [
-    0,
-    2.49
+  localTime: [
+    '2016-10-30T07:12:05.077Z',
+    '2016-10-30T07:12:06.069Z',
+    '2016-10-30T07:12:07.153Z',
   ],
-  "xLength" : 60,
-  "labels" : {
-    "title" : "memory",
-    "keys" : [
-      "vsize",
-      "resident",
-      "mapped"
-    ],
-    "yAxis" : "GB"
+  skip: [false, false, false],
+  yDomain: [0, 2.49],
+  xLength: 60,
+  labels: {
+    title: 'memory',
+    keys: ['vsize', 'resident', 'mapped'],
+    yAxis: 'GB',
   },
-  "keyLength" : 6,
-  "paused" : false
+  keyLength: 6,
+  paused: false,
 };
 
 d3.select(el).datum(data).call(realTimeLineChart());
@@ -106,7 +83,6 @@ For completeness, below is a list of directories present in this module:
 - `src` components, actions and stores source code, as well as style files. This is the place to implement your own components. `npm run compile` will use `./src` as input and create `./lib`.
 - `test` implement your tests here, and name the files `*.test.js`.
 
-
 [npm_img]: https://img.shields.io/npm/v/mongodb-component-template.svg?style=flat-square
 [npm_url]: https://www.npmjs.org/package/mongodb-component-template
 [enzyme]: http://airbnb.io/enzyme/

packages/compass-serverstats/.prettierrc.json

@@ -18,13 +18,18 @@
     "webpack": "webpack-compass",
     "test": "mocha",
     "test-electron": "xvfb-maybe electron-mocha --no-sandbox",
-    "check": "npm run lint && npm run depcheck",
-    "lint": "eslint \"./{src,test}/**/*.{js,jsx}\"",
+    "typecheck": "tsc -p tsconfig-lint.json --noEmit",
+    "check": "npm run typecheck && npm run lint && npm run depcheck",
+    "check-ci": "npm run check",
+    "eslint": "eslint",
+    "prettier": "prettier",
+    "lint": "npm run eslint . && npm run prettier -- --check .",
     "depcheck": "compass-scripts check-peer-deps && depcheck",
     "test-ci": "npm run test",
     "test-ci-electron": "npm run test-electron",
     "prepublishOnly": "npm run compile && compass-scripts check-exports-exist",
-    "bootstrap": "npm run compile"
+    "bootstrap": "npm run compile",
+    "reformat": "npm run prettier -- --write . && npm run eslint . --fix"
   },
   "license": "SSPL",
   "peerDependencies": {
@@ -37,8 +42,13 @@
     "@mongodb-js/compass-logging": "^1.2.0"
   },
   "devDependencies": {
+    "@mongodb-js/eslint-config-compass": "^1.0.9",
     "@mongodb-js/mocha-config-compass": "^1.3.1",
+    "@mongodb-js/prettier-config-compass": "^1.0.1",
+    "@mongodb-js/tsconfig-compass": "^1.0.3",
     "@mongodb-js/webpack-config-compass": "^1.2.0",
+    "@types/d3": "^3.5.x",
+    "@types/enzyme": "^3.10.14",
     "chai": "^4.1.2",
     "d3": "^3.5.17",
     "d3-timer": "^1.0.3",
@@ -47,8 +57,6 @@
     "electron-mocha": "^10.1.0",
     "enzyme": "^3.11.0",
     "eslint": "^7.25.0",
-    "eslint-config-mongodb-js": "^2.1.0",
-    "eslint-plugin-react": "^7.24.0",
     "hadron-app": "^5.11.0",
     "hadron-app-registry": "^9.0.10",
     "lodash": "^4.17.21",

packages/compass-serverstats/README.md

@@ -14,7 +14,7 @@ const Actions = Reflux.createActions([
   'serverStats',
   'top',
   'killOp',
-  { mouseOver: { sync: true }}
+  { mouseOver: { sync: true } },
 ]);
 
 module.exports = Actions;

packages/compass-serverstats/package.json

@@ -14,7 +14,7 @@ const LINE_COLORS = [
   palette.blue.base,
   palette.red.light1,
   palette.purple.base,
-  palette.yellow.light2
+  palette.yellow.light2,
 ];
 
 /**
@@ -78,8 +78,12 @@ class ChartComponent extends React.Component {
     if (!data.localTime || data.localTime.length === 0) {
       return;
     }
-    const maxTime = data.localTime ? data.localTime[data.localTime.length - 1] : new Date();
-    const minTime = data.xLength ? new Date(maxTime.getTime() - (data.xLength * 1000)) : maxTime;
+    const maxTime = data.localTime
+      ? data.localTime[data.localTime.length - 1]
+      : new Date();
+    const minTime = data.xLength
+      ? new Date(maxTime.getTime() - data.xLength * 1000)
+      : maxTime;
 
     this.chart
       .width(this.props.width)
@@ -102,7 +106,9 @@ class ChartComponent extends React.Component {
 
       .y2Domain(data.secondScale ? [0, data.secondScale.currentMax] : null)
       .y2Val((d) => d)
-      .y2Values((selectionData) => selectionData.secondScale ? [selectionData.secondScale] : [])
+      .y2Values((selectionData) =>
+        selectionData.secondScale ? [selectionData.secondScale] : []
+      )
       .y2Units(data.secondScale ? data.secondScale.units : '')
       .y2Data((y2Value) => y2Value.count)
       .y2Label((y2Value) => y2Value.line)
@@ -115,9 +121,7 @@ class ChartComponent extends React.Component {
       .on('mouseout', Actions.mouseOut)
       .eventDispatcher(this.props.dispatcher);
 
-    d3.select(this.containerRef)
-      .datum(this.state.data)
-      .call(this.chart);
+    d3.select(this.containerRef).datum(this.state.data).call(this.chart);
   }
 
   /**
@@ -128,9 +132,11 @@ class ChartComponent extends React.Component {
   render() {
     return (
       <div className="chart">
-        <div ref={(container) => {
-          this.containerRef = container;
-        }} />
+        <div
+          ref={(container) => {
+            this.containerRef = container;
+          }}
+        />
       </div>
     );
   }
@@ -140,7 +146,7 @@ ChartComponent.propTypes = {
   width: PropTypes.number,
   height: PropTypes.number,
   store: PropTypes.any.isRequired,
-  dispatcher: PropTypes.any.isRequired
+  dispatcher: PropTypes.any.isRequired,
 };
 
 ChartComponent.displayName = 'ChartComponent';

packages/compass-serverstats/src/actions/index.js

@@ -31,8 +31,12 @@ class CurrentOpComponent extends React.Component {
    */
   componentDidMount() {
     this.unsubscribeRefresh = this.props.store.listen(this.refresh.bind(this));
-    this.unsubscribeShowOperationDetails = Actions.showOperationDetails.listen(this.hide.bind(this));
-    this.unsubscribeHideOperationDetails = Actions.hideOperationDetails.listen(this.show.bind(this));
+    this.unsubscribeShowOperationDetails = Actions.showOperationDetails.listen(
+      this.hide.bind(this)
+    );
+    this.unsubscribeHideOperationDetails = Actions.hideOperationDetails.listen(
+      this.show.bind(this)
+    );
 
     if (!DBErrorStore.ops.currentOp) {
       this.unsubscribeError = DBErrorStore.listen(this.stop.bind(this));
@@ -125,9 +129,7 @@ class CurrentOpComponent extends React.Component {
         <header className="rt-lists__header">
           <h2 className="rt-lists__headerlabel">Slowest Operations</h2>
         </header>
-        <div
-          data-testid="no-slow-operations"
-          className="rt-lists__empty-error">
+        <div data-testid="no-slow-operations" className="rt-lists__empty-error">
           &#10004; No Slow Operations
         </div>
       </div>
@@ -141,9 +143,14 @@ class CurrentOpComponent extends React.Component {
    */
   renderGraph() {
     const showOperationDetails = this.showOperationDetails;
-    const rows = this.state.data.map(function(row, i) {
+    const rows = this.state.data.map(function (row, i) {
       return (
-        <li className="rt-lists__item rt-lists__item--slow" onClick={showOperationDetails.bind(null, row)} key={`list-item-${i}`}>
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+        <li
+          className="rt-lists__item rt-lists__item--slow"
+          onClick={showOperationDetails.bind(null, row)}
+          key={`list-item-${i}`}
+        >
           <div className="rt-lists__op">{row.op}</div>
           <div className="rt-lists__collection-slow">{row.ns}</div>
           <div className="rt-lists__time">{row.ms_running + ' ms'}</div>
@@ -156,9 +163,7 @@ class CurrentOpComponent extends React.Component {
           <h2 className="rt-lists__headerlabel">Slowest Operations</h2>
         </header>
         <div className="rt-lists__listdiv" id="div-scroll">
-          <ul className="rt-lists__list">
-            {rows}
-          </ul>
+          <ul className="rt-lists__list">{rows}</ul>
         </div>
       </div>
     );
@@ -182,7 +187,7 @@ class CurrentOpComponent extends React.Component {
 
 CurrentOpComponent.propTypes = {
   store: PropTypes.any.isRequired,
-  interval: PropTypes.number.isRequired
+  interval: PropTypes.number.isRequired,
 };
 
 CurrentOpComponent.displayName = 'CurrentOpComponent';

packages/compass-serverstats/src/components/chart-component.jsx

@@ -4,38 +4,37 @@ import { ErrorSummary, css, spacing } from '@mongodb-js/compass-components';
 
 const errorContainerStyles = css({
   padding: spacing[2],
-  position: 'relative'
+  position: 'relative',
 });
 
 /**
  * Represents the component that renders DB Errors.
  */
-function DBErrorComponent({
-  store
-}: {
-  store: Store 
-}) {
+function DBErrorComponent({ store }: { store: Store }) {
   const [data, setData] = useState([]);
 
-  const onRefresh = useCallback((data) => {
-    setData(data);
-  }, [setData]);
+  const onRefresh = useCallback(
+    (data) => {
+      setData(data);
+    },
+    [setData]
+  );
 
   const errors = useMemo(() => {
     return !data || data.length < 1
       ? []
-      : data.map((row) => {
+      : (data as any[]).map((row) => {
           return `Command "${row.ops}" returned error "${row.errorMsg}"`;
         });
   }, [data]);
 
   useEffect(() => {
-    const unsubscribeRefresh = store.listen(onRefresh);
+    const unsubscribeRefresh = store.listen(onRefresh, store);
 
     return () => {
       unsubscribeRefresh();
     };
-  }, [onRefresh]);
+  }, [store, onRefresh]);
 
   if (!data || data.length < 1) {
     return null;