Addressed Sam's initial review comments

openshift · Jan 16, 2020 · 13e974d · 13e974d
1 parent efd460d
commit 13e974d
Show file tree

Hide file tree

Showing 9 changed files with 121 additions and 103 deletions.
diff --git a/frontend/public/actions/features.ts b/frontend/public/actions/features.ts
@@ -196,7 +196,7 @@ const detectMonitoringURLs = (dispatch) =>
     (res) => {
       const { alertmanagerURL, grafanaURL, prometheusURL } = res.data;
       if (!_.isEmpty(alertmanagerURL)) {
-        dispatch(setMonitoringURL(MonitoringRoutes.AlertManager, alertmanagerURL));
+        dispatch(setMonitoringURL(MonitoringRoutes.Alertmanager, alertmanagerURL));
       }
       if (!_.isEmpty(grafanaURL)) {
         dispatch(setMonitoringURL(MonitoringRoutes.Grafana, grafanaURL));

diff --git a/frontend/public/components/app-contents.tsx b/frontend/public/components/app-contents.tsx
@@ -465,7 +465,7 @@ const AppContents_: React.FC<AppContentsProps> = ({ activePerspective, flags })
             exact
             loader={() =>
               import(
-                './monitoring/receiver-forms/alert-manager-receiver-forms' /* webpackChunkName: "monitoring" */
+                './monitoring/receiver-forms/alert-manager-receiver-forms' /* webpackChunkName: "receiver-forms" */
               ).then((m) => m.CreateReceiver)
             }
           />
@@ -474,7 +474,7 @@ const AppContents_: React.FC<AppContentsProps> = ({ activePerspective, flags })
             exact
             loader={() =>
               import(
-                './monitoring/receiver-forms/alert-manager-receiver-forms' /* webpackChunkName: "monitoring" */
+                './monitoring/receiver-forms/alert-manager-receiver-forms' /* webpackChunkName: "receiver-forms" */
               ).then((m) => m.EditReceiver)
             }
           />

diff --git a/frontend/public/components/modals/alert-routing-modal.tsx b/frontend/public/components/modals/alert-routing-modal.tsx
@@ -3,8 +3,8 @@ import * as _ from 'lodash-es';
 
 import { createModalLauncher, ModalTitle, ModalBody, ModalSubmitFooter } from '../factory/modal';
 import { K8sResourceKind } from '../../module/k8s';
-import { AlertManagerConfig } from '../monitoring/alert-manager-config';
-import { patchAlertManagerConfig } from '../monitoring/alert-manager-utils';
+import { AlertmanagerConfig } from '../monitoring/alert-manager-config';
+import { patchAlertmanagerConfig } from '../monitoring/alert-manager-utils';
 
 const updateAlertRoutingProperty = (
   config: any,
@@ -50,7 +50,7 @@ export const AlertRoutingModal: React.FC<AlertRoutingModalProps> = ({
     updateAlertRoutingProperty(config, 'repeat_interval', repeatIntervalNew, repeatIntervalOld);
 
     setInProgress(true);
-    patchAlertManagerConfig(secret, config).then(close, (err) => {
+    patchAlertmanagerConfig(secret, config).then(close, (err) => {
       setErrorMessage(err.message);
       setInProgress(false);
     });
@@ -166,6 +166,6 @@ export const createAlertRoutingModal = createModalLauncher<AlertRoutingModalProp
 export type AlertRoutingModalProps = {
   cancel: () => void;
   close: () => void;
-  config: AlertManagerConfig;
+  config: AlertmanagerConfig;
   secret: K8sResourceKind;
 };
diff --git a/frontend/public/components/monitoring.tsx b/frontend/public/components/monitoring.tsx
@@ -37,8 +37,8 @@ import { Labels, QueryBrowser, QueryObj } from './monitoring/query-browser';
 import { CheckBoxes } from './row-filter';
 import { formatPrometheusDuration } from './utils/datetime';
 import { withFallback } from './utils/error-boundary';
-import { AlertManagerYAMLEditorWrapper } from './monitoring/alert-manager-yaml-editor';
-import { AlertManagerConfigWrapper } from './monitoring/alert-manager-config';
+import { AlertmanagerYAMLEditorWrapper } from './monitoring/alert-manager-yaml-editor';
+import { AlertmanagerConfigWrapper } from './monitoring/alert-manager-config';
 import {
   ActionsMenu,
   ButtonBar,
@@ -776,15 +776,15 @@ const AlertsPageDescription = () => (
 );
 
 const HeaderAlertmanagerLink_ = ({ path, urls }) =>
-  _.isEmpty(urls[MonitoringRoutes.AlertManager]) ? null : (
+  _.isEmpty(urls[MonitoringRoutes.Alertmanager]) ? null : (
     <span className="monitoring-header-link">
       <ExternalLink
-        href={`${urls[MonitoringRoutes.AlertManager]}${path || ''}`}
+        href={`${urls[MonitoringRoutes.Alertmanager]}${path || ''}`}
         text="Alertmanager UI"
       />
     </span>
   );
-const HeaderAlertmanagerLink = connectToURLs(MonitoringRoutes.AlertManager)(
+const HeaderAlertmanagerLink = connectToURLs(MonitoringRoutes.Alertmanager)(
   HeaderAlertmanagerLink_,
 );
 
@@ -1368,7 +1368,7 @@ const CreateSilence = () => {
   );
 };
 
-const AlertManagerYAML = () => {
+const AlertmanagerYAML = () => {
   return (
     <Firehose
       resources={[
@@ -1381,12 +1381,12 @@ const AlertManagerYAML = () => {
         },
       ]}
     >
-      <AlertManagerYAMLEditorWrapper />
+      <AlertmanagerYAMLEditorWrapper />
     </Firehose>
   );
 };
 
-const AlertManagerConfig = () => {
+const AlertmanagerConfig = () => {
   return (
     <Firehose
       resources={[
@@ -1399,7 +1399,7 @@ const AlertManagerConfig = () => {
         },
       ]}
     >
-      <AlertManagerConfigWrapper />
+      <AlertmanagerConfigWrapper />
     </Firehose>
   );
 };
@@ -1462,8 +1462,8 @@ const AlertingPage: React.SFC<AlertingPageProps> = ({ match }) => {
       <Switch>
         <Route path="/monitoring/alerts" exact component={AlertsPage} />
         <Route path="/monitoring/silences" exact component={SilencesPage} />
-        <Route path={ConfigPath} exact component={AlertManagerConfig} />
-        <Route path="/monitoring/alertmanageryaml" exact component={AlertManagerYAML} />
+        <Route path={ConfigPath} exact component={AlertmanagerConfig} />
+        <Route path="/monitoring/alertmanageryaml" exact component={AlertmanagerYAML} />
       </Switch>
     </>
   );

diff --git a/frontend/public/components/monitoring/alert-manager-config.tsx b/frontend/public/components/monitoring/alert-manager-config.tsx
@@ -18,14 +18,14 @@ import { history, Kebab, MsgBox, SectionHeading, StatusBox } from '../utils';
 import { confirmModal, createAlertRoutingModal } from '../modals';
 import { Table, TableData, TableRow, TextFilter } from '../factory';
 import {
-  getAlertManagerConfig,
-  patchAlertManagerConfig,
+  getAlertmanagerConfig,
+  patchAlertmanagerConfig,
   receiverTypes,
 } from './alert-manager-utils';
 import { Helmet } from 'react-helmet';
 
 let secret: K8sResourceKind = null; // alertmanager-main Secret which holds alertmanager configuration yaml
-let config: AlertManagerConfig = null; // alertmanager configuration yaml as object
+let config: AlertmanagerConfig = null; // alertmanager configuration yaml as object
 
 const AlertRouting = () => {
   const groupBy = _.get(config, ['route', 'group_by'], []);
@@ -95,7 +95,7 @@ const ReceiverTableHeader = () => {
 };
 ReceiverTableHeader.displayName = 'ReceiverTableHeader';
 
-const getIntegrationTypes = (receiver: AlertManagerReceiver): string[] => {
+const getIntegrationTypes = (receiver: AlertmanagerReceiver): string[] => {
   /* Given receiver = {
        "name": "team-X-pager",
        "email_configs": [...],
@@ -144,7 +144,7 @@ const getRoutingLabelsByReceivers = (routes, parentLabels): RoutingLabelsByRecei
  * is receiver not in any route (no routing labels)?
  */
 const hasSimpleRoute = (
-  receiver: AlertManagerReceiver,
+  receiver: AlertmanagerReceiver,
   receiverRoutingLabels: RoutingLabelsByReceivers[],
 ): boolean => {
   const routes = _.get(config, ['route', 'routes']);
@@ -160,7 +160,7 @@ const hasSimpleRoute = (
  * No receiver type specified is valid, as well as a single receiver type with no config
  */
 const hasSimpleReceiver = (
-  receiver: AlertManagerReceiver,
+  receiver: AlertmanagerReceiver,
   receiverIntegrationTypes: string[],
 ): boolean => {
   if (receiverIntegrationTypes.length === 0) {
@@ -201,15 +201,15 @@ const RoutingLabel: React.FC<RoutingLabelProps> = ({ labels }) => {
 const deleteReceiver = (receiverName: string) => {
   // remove any routes which use receiverToDelete
   _.update(config, 'route.routes', (routes) => {
-    _.remove(routes, (route: AlertManagerRoute) => route.receiver === receiverName);
+    _.remove(routes, (route: AlertmanagerRoute) => route.receiver === receiverName);
     return routes;
   });
   // delete receiver
   _.update(config, 'receivers', (receivers) => {
-    _.remove(receivers, (receiver: AlertManagerReceiver) => receiver.name === receiverName);
+    _.remove(receivers, (receiver: AlertmanagerReceiver) => receiver.name === receiverName);
     return receivers;
   });
-  return patchAlertManagerConfig(secret, config).then(() => {
+  return patchAlertmanagerConfig(secret, config).then(() => {
     history.push('/monitoring/alertmanagerconfig');
   });
 };
@@ -354,11 +354,11 @@ const Receivers = () => {
   );
 };
 
-const AlertManagerConfiguration: React.FC<AlertManagerConfigurationProps> = ({ obj }) => {
+const AlertmanagerConfiguration: React.FC<AlertmanagerConfigurationProps> = ({ obj }) => {
   const [errorMsg, setErrorMsg] = React.useState('');
   secret = obj; // alertmanager-main Secret which holds encoded alertmanager configuration yaml
   if (!errorMsg) {
-    config = getAlertManagerConfig(secret, setErrorMsg);
+    config = getAlertmanagerConfig(secret, setErrorMsg);
   }
 
   if (errorMsg) {
@@ -382,45 +382,45 @@ const AlertManagerConfiguration: React.FC<AlertManagerConfigurationProps> = ({ o
   );
 };
 
-export const AlertManagerConfigWrapper: React.FC<AlertManagerConfigWrapperProps> = React.memo(
+export const AlertmanagerConfigWrapper: React.FC<AlertmanagerConfigWrapperProps> = React.memo(
   ({ obj, ...props }) => {
     return (
       <>
         <Helmet>
           <title>Alerting</title>
         </Helmet>
         <StatusBox {...obj}>
-          <AlertManagerConfiguration {...props} obj={obj.data} />
+          <AlertmanagerConfiguration {...props} obj={obj.data} />
         </StatusBox>
       </>
     );
   },
 );
 
-type AlertManagerConfigWrapperProps = {
+type AlertmanagerConfigWrapperProps = {
   obj?: {
     data?: K8sResourceKind;
     [key: string]: any;
   };
 };
 
-type AlertManagerConfigurationProps = {
+type AlertmanagerConfigurationProps = {
   obj?: K8sResourceKind;
   onCancel?: () => void;
 };
 type labels = {
   [key: string]: string;
 };
 
-export type AlertManagerRoute = {
+export type AlertmanagerRoute = {
   receiver?: string;
   groupBy?: { [key: string]: string };
   groupWait?: string;
   groupInterval?: string;
   repeatInterval?: string;
   match?: labels[];
   matchRe?: labels[];
-  routes?: AlertManagerRoute[];
+  routes?: AlertmanagerRoute[];
 };
 
 type RoutingLabelsByReceivers = {
@@ -437,24 +437,24 @@ type PagerDutyConfig = {
   serviceKey?: string;
 };
 
-export type AlertManagerReceiver = {
+export type AlertmanagerReceiver = {
   name: string;
   webhookConfigs?: WebhookConfig[];
   pagerdutyConfigs?: PagerDutyConfig[];
 };
 
-export type AlertManagerConfig = {
-  route: AlertManagerRoute;
-  receivers: AlertManagerReceiver[];
+export type AlertmanagerConfig = {
+  route: AlertmanagerRoute;
+  receivers: AlertmanagerReceiver[];
 };
 
 type ReceiverTableProps = {
-  data: AlertManagerReceiver[];
+  data: AlertmanagerReceiver[];
   filterValue?: string;
 };
 
 type ReceiverTableRowProps = {
-  obj: AlertManagerReceiver;
+  obj: AlertmanagerReceiver;
   index: number;
   key?: string;
   style: object;

diff --git a/frontend/public/components/monitoring/alert-manager-utils.tsx b/frontend/public/components/monitoring/alert-manager-utils.tsx
@@ -4,17 +4,17 @@ import { Base64 } from 'js-base64';
 import { safeLoad, safeDump } from 'js-yaml';
 
 import { k8sPatch, K8sResourceKind } from '../../module/k8s';
-import { AlertManagerConfig } from './alert-manager-config';
+import { AlertmanagerConfig } from './alert-manager-config';
 import { SecretModel } from '../../models';
 
-export const receiverTypes = {
+export const receiverTypes = Object.freeze({
   pagerduty_configs: 'PagerDuty',
   webhook_configs: 'Webhook Receiver',
-};
+});
 
-export const getAlertManagerYAML = (secret: K8sResourceKind, setErrorMsg) => {
+export const getAlertmanagerYAML = (secret: K8sResourceKind, setErrorMsg): string => {
   const alertManagerYaml = _.get(secret, ['data', 'alertmanager.yaml']);
-  let yaml: string = '';
+  let yaml = '';
 
   if (_.isEmpty(alertManagerYaml)) {
     setErrorMsg(
@@ -32,18 +32,17 @@ export const getAlertManagerYAML = (secret: K8sResourceKind, setErrorMsg) => {
   return yaml;
 };
 
-export const getAlertManagerConfig = (secret: K8sResourceKind, setErrorMsg): AlertManagerConfig => {
-  let config: AlertManagerConfig;
-  const alertManagerYaml: string = getAlertManagerYAML(secret, setErrorMsg);
+export const getAlertmanagerConfig = (secret: K8sResourceKind, setErrorMsg): AlertmanagerConfig => {
+  const alertManagerYAML: string = getAlertmanagerYAML(secret, setErrorMsg);
   try {
-    config = safeLoad(alertManagerYaml);
+    return safeLoad(alertManagerYAML);
   } catch (e) {
     setErrorMsg(`Error loading alertmanager.yaml: ${e}`);
+    return null;
   }
-  return config;
 };
 
-export const patchAlertManagerConfig = (
+export const patchAlertmanagerConfig = (
   secret: K8sResourceKind,
   yaml: object | string,
 ): Promise<any> => {