[WIP] Add nginx section

jennypavlova · Aug 30, 2023 · a319b1d · a319b1d
1 parent 030fa9e
commit a319b1d
Show file tree

Hide file tree

Showing 8 changed files with 173 additions and 2 deletions.
diff --git a/x-pack/plugins/infra/public/common/visualizations/constants.ts b/x-pack/plugins/infra/public/common/visualizations/constants.ts
@@ -31,6 +31,8 @@ import {
   memoryUsed,
   memoryFreeExcludingCache,
   memoryCache,
+  nginxActiveConnections,
+  nginxRequestRate,
   rx,
   tx,
   hostCount,
@@ -63,6 +65,8 @@ export const hostLensFormulas = {
   memoryUsed,
   memoryFreeExcludingCache,
   memoryCache,
+  nginxActiveConnections,
+  nginxRequestRate,
   rx,
   tx,
 };

diff --git a/...ins/infra/public/common/visualizations/lens/dashboards/asset_details/host/nginx_charts.ts b/...ins/infra/public/common/visualizations/lens/dashboards/asset_details/host/nginx_charts.ts
@@ -0,0 +1,12 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import { nginxActiveConnections, nginxRequestRate } from '../metric_charts/nginx';
+import type { XYConfig } from '../metric_charts/types';
+
+export const nginxStubstatusMetrics: XYConfig[] = [nginxActiveConnections, nginxRequestRate];
+
+export const nginxAccessMetrics: XYConfig[] = []; // TODO
diff --git a/...s/infra/public/common/visualizations/lens/dashboards/asset_details/metric_charts/nginx.ts b/...s/infra/public/common/visualizations/lens/dashboards/asset_details/metric_charts/nginx.ts
@@ -0,0 +1,47 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+import { hostLensFormulas } from '../../../../constants';
+import { XY_OVERRIDES } from '../../constants';
+import type { XYConfig } from './types';
+
+export const nginxRequestRate: XYConfig = {
+  id: 'RequestRate',
+  title: i18n.translate('xpack.infra.assetDetails.metricsCharts.nginx.requestRate', {
+    defaultMessage: 'Request Rate',
+  }),
+
+  layers: [
+    {
+      data: [hostLensFormulas.nginxRequestRate],
+      type: 'visualization',
+    },
+  ],
+  dataViewOrigin: 'metrics',
+  overrides: {
+    axisLeft: XY_OVERRIDES.axisLeft,
+  },
+};
+
+export const nginxActiveConnections: XYConfig = {
+  id: 'ActiveConnections',
+  title: i18n.translate('xpack.infra.assetDetails.metricsCharts.nginx.ActiveConnections', {
+    defaultMessage: 'Active Connections',
+  }),
+
+  layers: [
+    {
+      data: [hostLensFormulas.nginxActiveConnections],
+      type: 'visualization',
+    },
+  ],
+  dataViewOrigin: 'metrics',
+  overrides: {
+    axisLeft: XY_OVERRIDES.axisLeft,
+  },
+};
diff --git a/x-pack/plugins/infra/public/common/visualizations/lens/formulas/host/index.ts b/x-pack/plugins/infra/public/common/visualizations/lens/formulas/host/index.ts
@@ -31,5 +31,7 @@ export { memoryFree } from './memory_free';
 export { memoryUsed } from './memory_used';
 export { memoryFreeExcludingCache } from './memory_free_excluding_cache';
 export { memoryCache } from './memory_cache';
+export { nginxRequestRate } from './nginx_request_rate';
+export { nginxActiveConnections } from './nginx_active_connections';
 export { rx } from './rx';
 export { tx } from './tx';
diff --git a/...plugins/infra/public/common/visualizations/lens/formulas/host/nginx_active_connections.ts b/...plugins/infra/public/common/visualizations/lens/formulas/host/nginx_active_connections.ts
@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { FormulaValueConfig } from '@kbn/lens-embeddable-utils';
+
+export const nginxActiveConnections: FormulaValueConfig = {
+  label: 'Active Connections',
+  value: 'average(nginx.stubstatus.active)',
+  format: {
+    id: 'number',
+    params: {
+      decimals: 0,
+    },
+  },
+};
diff --git a/x-pack/plugins/infra/public/common/visualizations/lens/formulas/host/nginx_request_rate.ts b/x-pack/plugins/infra/public/common/visualizations/lens/formulas/host/nginx_request_rate.ts
@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { FormulaValueConfig } from '@kbn/lens-embeddable-utils';
+
+export const nginxRequestRate: FormulaValueConfig = {
+  label: 'Request Rate',
+  value: 'max(nginx.stubstatus.requests)', // TODO
+  format: {
+    id: 'number',
+    params: {
+      decimals: 0,
+    },
+  },
+};
diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/metrics/metrics_grid.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/overview/metrics/metrics_grid.tsx
@@ -11,6 +11,10 @@ import type { DataView } from '@kbn/data-views-plugin/public';
 import type { TimeRange } from '@kbn/es-query';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { LensEmbeddableInput } from '@kbn/lens-plugin/public';
+import {
+  nginxStubstatusMetrics,
+  nginxAccessMetrics,
+} from '../../../../../common/visualizations/lens/dashboards/asset_details/host/nginx_charts';
 import {
   assetDetailsDashboards,
   XY_MISSING_VALUE_DOTTED_LINE_CONFIG,
@@ -30,10 +34,20 @@ interface Props {
   metricsDataView?: DataView;
   logsDataView?: DataView;
   isCompactView: boolean;
+  showNginxStubstatus: boolean;
+  showNginxAccess: boolean;
 }
 
 export const MetricsGrid = React.memo(
-  ({ nodeName, metricsDataView, logsDataView, timeRange, isCompactView }: Props) => {
+  ({
+    nodeName,
+    metricsDataView,
+    logsDataView,
+    timeRange,
+    isCompactView,
+    showNginxStubstatus,
+    showNginxAccess,
+  }: Props) => {
     const { setDateRange } = useDateRangeProviderContext();
     const getDataView = useCallback(
       (dataViewOrigin: DataViewOrigin) => {
@@ -42,6 +56,9 @@ export const MetricsGrid = React.memo(
       [logsDataView, metricsDataView]
     );
 
+    const nginxStubstatusCharts = showNginxStubstatus ? nginxStubstatusMetrics : [];
+    const nginxAccessCharts = showNginxAccess ? nginxAccessMetrics : [];
+
     const getFilters = useCallback(
       (dataViewOrigin: DataViewOrigin) => {
         return [
@@ -81,7 +98,11 @@ export const MetricsGrid = React.memo(
           >
             {(isCompactView
               ? assetDetailsDashboards.host.hostMetricCharts
-              : assetDetailsDashboards.host.hostMetricChartsFullPage
+              : [
+                  ...assetDetailsDashboards.host.hostMetricChartsFullPage,
+                  // ...nginxStubstatusCharts,
+                  // ...nginxAccessCharts,
+                ]
             ).map(({ dataViewOrigin, id, layers, title, overrides }, index) => (
               <EuiFlexItem key={index} grow={false}>
                 <LensChart
@@ -102,6 +123,49 @@ export const MetricsGrid = React.memo(
             ))}
           </EuiFlexGrid>
         </EuiFlexItem>
+        {!isCompactView && (
+          <>
+            <EuiFlexItem grow={false}>
+              <EuiTitle size="xxs">
+                <span>
+                  <FormattedMessage
+                    id="xpack.infra.assetDetails.overview.nginxMetricsSectionTitle"
+                    defaultMessage="Nginx Metrics"
+                  />
+                </span>
+              </EuiTitle>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiSpacer size="s" />
+              <EuiFlexGrid
+                columns={2}
+                gutterSize="s"
+                data-test-subj="infraAssetDetailsMetricsChartGrid"
+              >
+                {[...nginxStubstatusCharts, ...nginxAccessCharts].map(
+                  ({ dataViewOrigin, id, layers, title, overrides }, index) => (
+                    <EuiFlexItem key={index} grow={false}>
+                      <LensChart
+                        id={`infraAssetDetailsMetricsChart${id}`}
+                        borderRadius="m"
+                        dataView={getDataView(dataViewOrigin)}
+                        dateRange={timeRange}
+                        height={METRIC_CHART_HEIGHT}
+                        visualOptions={XY_MISSING_VALUE_DOTTED_LINE_CONFIG}
+                        layers={layers}
+                        filters={getFilters(dataViewOrigin)}
+                        title={title}
+                        overrides={overrides}
+                        visualizationType="lnsXY"
+                        onBrushEnd={handleBrushEnd}
+                      />
+                    </EuiFlexItem>
+                  )
+                )}
+              </EuiFlexGrid>
+            </EuiFlexItem>
+          </>
+        )}
       </EuiFlexGroup>
     );
   }

diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/overview.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/overview/overview.tsx
@@ -81,6 +81,10 @@ export const Overview = () => {
           metricsDataView={metrics.dataView}
           nodeName={asset.name}
           isCompactView={renderMode?.mode === 'flyout'}
+          showNginxStubstatus={
+            !!metadata?.features.find((feature) => feature.name === 'nginx.stubstatus')
+          }
+          showNginxAccess={!!metadata?.features.find((feature) => feature.name === 'nginx.acces')}
         />
       </EuiFlexItem>
     </EuiFlexGroup>