@@ -85,22 +84,25 @@ function PerformancePanelMsgs() {
// Trigger the component refresh when stores are updated.
ServerStatsStore.listen(() => {
forceUpdate({});
- });
+ }, ServerStatsStore);
TopStore.listen(() => {
forceUpdate({});
- });
+ }, TopStore);
}, []);
return (
- {ServerStatsStore.isMongos && (
+ {(ServerStatsStore as any).isMongos && (
- Top command is not available for mongos, some charts may not show any data.
+ Top command is not available for mongos, some charts may not show any
+ data.
)}
- {TopStore.topUnableToRetrieveSomeCollections && (
+ {(TopStore as any).topUnableToRetrieveSomeCollections && (
- Top command is unable to retrieve information about certain collections, resulting in incomplete data being displayed on the charts.
+ Top command is unable to retrieve information about certain
+ collections, resulting in incomplete data being displayed on the
+ charts.
)}
@@ -121,22 +123,15 @@ function PerformanceComponent() {
};
}, []);
- const {
- className: scrollbarStyles
- } = useScrollbars();
+ const { className: scrollbarStyles } = useScrollbars();
return (
diff --git a/packages/compass-serverstats/src/components/rtss-charts.less b/packages/compass-serverstats/src/components/rtss-charts.less
index 8ad432e5caa..c6a5b46db5a 100644
--- a/packages/compass-serverstats/src/components/rtss-charts.less
+++ b/packages/compass-serverstats/src/components/rtss-charts.less
@@ -1,4 +1,4 @@
-@import (reference) "mongodb-compass/src/app/styles/index.less";
+@import (reference) 'mongodb-compass/src/app/styles/index.less';
.rt-perf {
display: flex;
@@ -43,13 +43,15 @@
margin: 15px 0 0 55px;
}
- &-y-axis-label, &-y2-axis-label {
+ &-y-axis-label,
+ &-y2-axis-label {
font-size: 9px;
color: @palette__gray--light-2;
margin: 5px 0;
}
- &-legend-item, &-legend-2-item {
+ &-legend-item,
+ &-legend-2-item {
margin-top: 5px;
display: flex;
flex-grow: 1;
@@ -63,14 +65,16 @@
margin-left: 18px;
}
- &-legend-linename, &-legend-2-linename {
+ &-legend-linename,
+ &-legend-2-linename {
text-transform: uppercase;
font-size: 10px;
color: @palette__gray--light-2;
margin: 0 0 0 5px;
}
- &-legend-count, &-legend-2-count {
+ &-legend-count,
+ &-legend-2-count {
font-size: 12px;
color: @palette__white;
margin: 5px 0 0 5px;
@@ -83,4 +87,4 @@
stroke: none;
}
}
-}
\ No newline at end of file
+}
diff --git a/packages/compass-serverstats/src/components/rtss-db.less b/packages/compass-serverstats/src/components/rtss-db.less
index e3dc5bdf906..342f10735a7 100644
--- a/packages/compass-serverstats/src/components/rtss-db.less
+++ b/packages/compass-serverstats/src/components/rtss-db.less
@@ -8,7 +8,6 @@
justify-content: center;
}
-
/* table */
.rtDbs__table {
width: 1020px;
@@ -37,7 +36,7 @@
}
.rtDbs__row:hover {
background-color: @palette__gray--dark-1;
- transition: all .7s ease-out;
+ transition: all 0.7s ease-out;
}
.rtDbs__row-item {
height: 45px;
diff --git a/packages/compass-serverstats/src/components/rtss-lists.less b/packages/compass-serverstats/src/components/rtss-lists.less
index f8060f95726..c053ea690e1 100644
--- a/packages/compass-serverstats/src/components/rtss-lists.less
+++ b/packages/compass-serverstats/src/components/rtss-lists.less
@@ -1,4 +1,4 @@
-@import (reference) "mongodb-compass/src/app/styles/index.less";
+@import (reference) 'mongodb-compass/src/app/styles/index.less';
.rt {
height: 100%;
@@ -44,7 +44,8 @@
margin: 0;
padding: 0;
}
-.rt-lists__item, .rt-lists__empty-error {
+.rt-lists__item,
+.rt-lists__empty-error {
position: relative;
width: 100%;
height: 46px;
@@ -78,13 +79,12 @@
}
/* LAYOUT */
-.rt-lists__header{
+.rt-lists__header {
margin-top: -4px;
display: flex;
flex-direction: row;
width: 100%;
margin-bottom: 0;
-
}
.rt-details__header {
@@ -96,7 +96,8 @@
margin-top: -12px;
}
-.rt-lists__headerlabel, .rt-details__headerlabel {
+.rt-lists__headerlabel,
+.rt-details__headerlabel {
color: @palette__white;
text-transform: uppercase;
font-size: 11px;
@@ -145,7 +146,8 @@
font-size: 9px; /* R/W */
color: @palette__white;
}
-.rt-lists__r { /* R/W bar */
+.rt-lists__r {
+ /* R/W bar */
height: 14px;
width: 30%;
background-color: @palette__gray--dark-1;
diff --git a/packages/compass-serverstats/src/components/server-stats-graphs-component.jsx b/packages/compass-serverstats/src/components/server-stats-graphs-component.jsx
index 8a6825b6048..212d569f154 100644
--- a/packages/compass-serverstats/src/components/server-stats-graphs-component.jsx
+++ b/packages/compass-serverstats/src/components/server-stats-graphs-component.jsx
@@ -61,10 +61,30 @@ class ServerStatsComponent extends React.Component {
const { eventDispatcher } = this.props;
return (
-
-
-
-
+
+
+
+
);
}
@@ -72,10 +92,9 @@ class ServerStatsComponent extends React.Component {
ServerStatsComponent.propTypes = {
interval: PropTypes.number.isRequired,
- eventDispatcher: PropTypes.object.isRequired
+ eventDispatcher: PropTypes.object.isRequired,
};
-
ServerStatsComponent.displayName = 'ServerStatsComponent';
module.exports = ServerStatsComponent;
diff --git a/packages/compass-serverstats/src/components/server-stats-lists-component.jsx b/packages/compass-serverstats/src/components/server-stats-lists-component.jsx
index ad93c7c783f..efdc59a8904 100644
--- a/packages/compass-serverstats/src/components/server-stats-lists-component.jsx
+++ b/packages/compass-serverstats/src/components/server-stats-lists-component.jsx
@@ -14,14 +14,17 @@ class ServerStatsListsComponent extends React.Component {
-
+
);
}
}
ServerStatsListsComponent.propTypes = {
- interval: PropTypes.number.isRequired
+ interval: PropTypes.number.isRequired,
};
module.exports = ServerStatsListsComponent;
diff --git a/packages/compass-serverstats/src/components/server-stats-toolbar.tsx b/packages/compass-serverstats/src/components/server-stats-toolbar.tsx
index 7b07f92c7d7..7a38ab5d9f9 100644
--- a/packages/compass-serverstats/src/components/server-stats-toolbar.tsx
+++ b/packages/compass-serverstats/src/components/server-stats-toolbar.tsx
@@ -1,6 +1,14 @@
import React, { useCallback, useEffect, useState } from 'react';
import d3 from 'd3';
-import { Button, Icon, css, cx, spacing, palette, useDarkMode } from '@mongodb-js/compass-components';
+import {
+ Button,
+ Icon,
+ css,
+ cx,
+ spacing,
+ palette,
+ useDarkMode,
+} from '@mongodb-js/compass-components';
import { createLoggerAndTelemetry } from '@mongodb-js/compass-logging';
import Actions from '../actions';
@@ -12,7 +20,7 @@ const serverStatsToolbarStyles = css({
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
- padding: spacing[3]
+ padding: spacing[3],
});
const serverStatsToolbarDarkThemeStyles = css({
@@ -28,7 +36,7 @@ const serverStatsToolbarLightThemeStyles = css({
const timeStyles = css({
padding: `${spacing[2]}px ${spacing[5]}px`,
borderRadius: '3px',
- marginLeft: spacing[2]
+ marginLeft: spacing[2],
});
const timeLightThemeStyles = css({
@@ -46,41 +54,40 @@ export type TimeScrubEventDispatcher = {
};
type ServerStatsToolbarProps = {
- eventDispatcher: TimeScrubEventDispatcher
-}
+ eventDispatcher: TimeScrubEventDispatcher;
+};
-function ServerStatsToolbar({
- eventDispatcher
-}: ServerStatsToolbarProps) {
+function ServerStatsToolbar({ eventDispatcher }: ServerStatsToolbarProps) {
const darkMode = useDarkMode();
- const [ time, setTime ] = useState('00:00:00');
- const [ isPaused, setPaused ] = useState(ServerStatsStore.isPaused);
+ const [time, setTime] = useState('00:00:00');
+ const [isPaused, setPaused] = useState((ServerStatsStore as any).isPaused);
useEffect(() => {
- eventDispatcher.on('newXValue', xDate => {
+ eventDispatcher.on('newXValue', (xDate) => {
// When the cursor position results in a new time on the graphs, by user
// scrubbing or live viewing, we receive a new time to display.
- setTime(d3.time.format.utc('%X')(xDate));
+ setTime((d3 as any).time.format.utc('%X')(xDate) as string);
});
- }, []);
+ }, [eventDispatcher]);
const onPlayPauseClicked = useCallback(() => {
if (isPaused) {
track('Performance Resumed');
- }
- else {
+ } else {
track('Performance Paused');
}
- setPaused(!isPaused)
+ setPaused(!isPaused);
Actions.pause();
- }, [ isPaused ]);
+ }, [isPaused]);
return (