Add eslint rule padding-line-between-statements (#1593)

Signed-off-by: Panu Horsmalahti <phorsmalahti@mirantis.com>

src/renderer/components/chart/bar-chart.tsx

@@ -30,6 +30,7 @@ export class BarChart extends React.Component<Props> {
 
     const getBarColor: Scriptable<string> = ({ dataset }) => {
       const color = dataset.borderColor;
+
       return Color(color).alpha(0.2).string();
     };
 
@@ -52,8 +53,10 @@ export class BarChart extends React.Component<Props> {
     const formatTimeLabels = (timestamp: string, index: number) => {
       const label = moment(parseInt(timestamp)).format("HH:mm");
       const offset = "     ";
+
       if (index == 0) return offset + label;
       if (index == 60) return label + offset;
+
       return index % timeLabelStep == 0 ? label : "";
     };
 
@@ -110,7 +113,9 @@ export class BarChart extends React.Component<Props> {
         callbacks: {
           title: tooltipItems => {
             const now = new Date().getTime();
+
             if (new Date(tooltipItems[0].xLabel).getTime() > now) return "";
+
             return `${tooltipItems[0].xLabel}`;
           },
           labelColor: ({ datasetIndex }) => {
@@ -136,9 +141,11 @@ export class BarChart extends React.Component<Props> {
       }
     };
     const options = merge(barOptions, customOptions);
+
     if (chartData.datasets.length == 0) {
       return <NoMetrics/>;
     }
+
     return (
       <Chart
         className={cssNames("BarChart flex box grow column", className)}
@@ -160,11 +167,14 @@ export const memoryOptions: ChartOptions = {
         callback: (value: number | string): string => {
           if (typeof value == "string") {
             const float = parseFloat(value);
+
             if (float < 1) {
               return float.toFixed(3);
             }
+
             return bytesToUnits(parseInt(value));
           }
+
           return bytesToUnits(value);
         },
         stepSize: 1
@@ -176,6 +186,7 @@ export const memoryOptions: ChartOptions = {
       label: ({ datasetIndex, index }, { datasets }) => {
         const { label, data } = datasets[datasetIndex];
         const value = data[index] as ChartPoint;
+
         return `${label}: ${bytesToUnits(parseInt(value.y.toString()), 3)}`;
       }
     }
@@ -189,9 +200,11 @@ export const cpuOptions: ChartOptions = {
       ticks: {
         callback: (value: number | string): string => {
           const float = parseFloat(`${value}`);
+
           if (float == 0) return "0";
           if (float < 10) return float.toFixed(3);
           if (float < 100) return float.toFixed(2);
+
           return float.toFixed(1);
         }
       }
@@ -202,6 +215,7 @@ export const cpuOptions: ChartOptions = {
       label: ({ datasetIndex, index }, { datasets }) => {
         const { label, data } = datasets[datasetIndex];
         const value = data[index] as ChartPoint;
+
         return `${label}: ${parseFloat(value.y as string).toPrecision(2)}`;
       }
     }

src/renderer/components/chart/chart.tsx

@@ -59,17 +59,21 @@ export class Chart extends React.Component<ChartProps> {
 
   componentDidMount() {
     const { showChart } = this.props;
+
     if (!showChart) return;
     this.renderChart();
   }
 
   componentDidUpdate() {
     const { showChart, redraw } = this.props;
+
     if (redraw) {
       this.chart.destroy();
       this.renderChart();
+
       return;
     }
+
     if (showChart) {
       if (!this.chart) this.renderChart();
       else this.updateChart();
@@ -78,6 +82,7 @@ export class Chart extends React.Component<ChartProps> {
 
   memoizeDataProps() {
     const { data } = this.props;
+
     this.currentChartData = {
       ...data,
       datasets: data.datasets && data.datasets.map(set => {
@@ -103,6 +108,7 @@ export class Chart extends React.Component<ChartProps> {
     // Remove stale datasets if they're not available in nextDatasets
     if (datasets.length > nextDatasets.length) {
       const sets = [...datasets];
+
       sets.forEach(set => {
         if (!nextDatasets.find(next => next.id === set.id)) {
           remove(datasets, (item => item.id === set.id));
@@ -113,6 +119,7 @@ export class Chart extends React.Component<ChartProps> {
     // Mutating inner chart datasets to enable seamless transitions
     nextDatasets.forEach((next, datasetIndex) => {
       const index = datasets.findIndex(set => set.id === next.id);
+
       if (index !== -1) {
         datasets[index].data = datasets[index].data.slice();  // "Clean" mobx observables data to use in ChartJS
         datasets[index].data.splice(next.data.length);
@@ -122,6 +129,7 @@ export class Chart extends React.Component<ChartProps> {
 
         // Merge other fields
         const { data, ...props } = next;
+
         datasets[index] = {
           ...datasets[index],
           ...props
@@ -150,11 +158,13 @@ export class Chart extends React.Component<ChartProps> {
         tooltip={tooltip}
       />
     );
+
     return (
       <div className="legend flex wrap gaps">
         {labels && labels.map((label: string, index) => {
           const { backgroundColor } = datasets[0] as any;
           const color = legendColors ? legendColors[index] : backgroundColor[index];
+
           return labelElem(label, color);
         })}
         {!labels && datasets.map(({ borderColor, label, tooltip }) =>
@@ -166,6 +176,7 @@ export class Chart extends React.Component<ChartProps> {
 
   renderChart() {
     const { type, options, plugins } = this.props;
+
     this.memoizeDataProps();
     this.chart = new ChartJS(this.canvas.current, {
       type,
@@ -182,6 +193,7 @@ export class Chart extends React.Component<ChartProps> {
 
   render() {
     const { width, height, showChart, title, className } = this.props;
+
     return (
       <>
         <div className={cssNames("Chart", className)}>

src/renderer/components/chart/pie-chart.tsx

@@ -25,13 +25,17 @@ export class PieChart extends React.Component<Props> {
             const dataset: any = data["datasets"][tooltipItem.datasetIndex];
             const metaData = Object.values<{ total: number }>(dataset["_meta"])[0];
             const percent = Math.round((dataset["data"][tooltipItem["index"]] / metaData.total) * 100);
+
             if (isNaN(percent)) return "N/A";
+
             return `${percent}%`;
           },
         },
         filter: ({ datasetIndex, index }, { datasets }) => {
           const { data } = datasets[datasetIndex];
+
           if (datasets.length === 1) return true;
+
           return index !== data.length - 1;
         },
         position: "cursor",
@@ -46,6 +50,7 @@ export class PieChart extends React.Component<Props> {
       responsive: true,
       ...options
     };
+
     return (
       <Chart
         className={cssNames("PieChart flex column align-center", className)}

src/renderer/components/chart/useRealTimeMetrics.ts

@@ -30,6 +30,7 @@ export function useRealTimeMetrics(metrics: IMetricValues, chartData: IChartData
   if (data.length && metrics.length) {
     const lastTime = data[data.length - 1].x;
     const values = [];
+
     for (let i = 0; i < 3; i++) {
       values[i] = moment.unix(lastTime).add(i + 1, "m").unix();
     }
@@ -39,5 +40,6 @@ export function useRealTimeMetrics(metrics: IMetricValues, chartData: IChartData
       { x: values[2], y: "0" }
     );
   }
+
   return data;
 }

src/renderer/components/chart/zebra-stripes.plugin.ts

@@ -21,6 +21,7 @@ export const ZebraStripes = {
 
   getLastUpdate(chart: ChartJS) {
     const data = chart.data.datasets[0].data[0] as ChartPoint;
+
     return moment.unix(parseInt(data.x as string));
   },
 
@@ -30,6 +31,7 @@ export const ZebraStripes = {
 
   removeStripesElem(chart: ChartJS) {
     const elem = this.getStripesElem(chart);
+
     if (!elem) return;
     chart.canvas.parentElement.removeChild(elem);
   },
@@ -89,6 +91,7 @@ export const ZebraStripes = {
     if (minutes > 0) {
       // Move position regarding to difference in time
       const cover = this.getStripesElem(chart);
+
       cover.style.backgroundPositionX = `${-step * minutes}px`;
     }
   }