Merge pull request #100 from deepfence/96-google-chronicle

Added Google chronicle integration to the integrations page #96

Author: saiprasanth1303

deepfence_ui/app/images/google-chronicle.png

@@ -0,0 +1,75 @@
+/* eslint-disable react/destructuring-assignment */
+import React, {useState} from 'react';
+import withIntegrationForm from '../../../hoc/notification-integration';
+
+const GoogleChronicleForm = (props) => {
+  const [apiURL, setApiURL] = useState('');
+  const [authorizationKey, setAuthorizationKey] = useState('');
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    switch (name) {
+      case 'apiURL':
+        setApiURL(value);
+        break;
+      case 'authorizationKey':
+        setAuthorizationKey(value);
+        break;
+      default:
+        break;
+    }
+
+    props.saveChildFormData({
+      api_url: apiURL,
+      authorization_key: authorizationKey,
+      integration_type: "google_chronicle",
+      apiURL,
+      authorizationKey,
+    });
+  }
+
+  const { submitted } = props;
+  return (
+    <div>
+      <div className="row">
+        <div className="col-md-4">
+          <div className={`form-group ${(submitted && !apiURL ? 'has-error' : '')}`}>
+            <label htmlFor="apiURL">
+              <i className="fa fa-link" aria-hidden="true" />
+              <input
+                type="text"
+                className="form-control"
+                name="apiURL"
+                placeholder="API URL"
+                value={apiURL}
+                onChange={handleChange}
+                autoComplete="off"
+              />
+            </label>
+            { submitted && !apiURL && <div className="field-error">API URL is required</div> }
+          </div>
+        </div>
+        <div className="col-md-4">
+          <div className="form-group">
+            <label htmlFor="authorizationKey">
+              <i className="fa fa-key" aria-hidden="true" />
+              <input
+                type="text"
+                className="form-control"
+                name="authorizationKey"
+                placeholder="Authorization Key (Optional)"
+                value={authorizationKey}
+                onChange={handleChange}
+                autoComplete="off"
+              />
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const googleChronicleAdd = withIntegrationForm(GoogleChronicleForm);
+
+export default googleChronicleAdd;

deepfence_ui/app/scripts/components/integration-view/google-chronicle-view/add-form.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import GoogleChronicleListContainer from './list-container';
+import GoogleChronicleForm from './add-form';
+
+const GoogleChronicleView = () => (
+    <div className="email-integration-view-wrapper">
+      <GoogleChronicleForm />
+      <GoogleChronicleListContainer />
+    </div>
+  )
+
+export default GoogleChronicleView;

deepfence_ui/app/scripts/components/integration-view/google-chronicle-view/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import GoogleChronicleList from './list';
+
+const GoogleChronicleListContainer = (props) => {
+  const googleChronicleList = useSelector(state => state.availableGoogleChronicleIntegrations)
+  return (
+    <GoogleChronicleList
+      {...props}
+      googleChronicleList={googleChronicleList}
+    />
+  );
+}
+
+export default GoogleChronicleListContainer;

deepfence_ui/app/scripts/components/integration-view/google-chronicle-view/list-container.js

@@ -0,0 +1,92 @@
+/* eslint-disable react/destructuring-assignment */
+import React from 'react';
+import IntegrationTableView from '../../common/integration-table-view/integration-table-view';
+import AppLoader from '../../common/app-loader/app-loader';
+import {
+  requestIntegrationDelete,
+  showModal,
+  resetIntegrationStates,
+} from '../../../actions/app-actions';
+import {
+  NO_INTEGRATION_FOUND_ALERT_MESSAGE
+} from '../../../constants/visualization-config';
+
+function getEmptyStateView() {
+  return (
+    <div className="empty-state-wrapper">
+      { NO_INTEGRATION_FOUND_ALERT_MESSAGE.message }
+    </div>
+  );
+}
+
+function getTableEmptyState(data) {
+  const emptyStateWrapper = {
+    height: '400px',
+    width: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  };
+  return (
+    <div style={emptyStateWrapper}>
+      { (data === undefined) ? <AppLoader /> : getEmptyStateView() }
+    </div>
+  );
+}
+
+function isDataAvailable(data) {
+  let result;
+  if (data && data.length > 0) {
+    result = true;
+  } else {
+    result = false;
+  }
+  return result;
+}
+
+const GoogleChronicleList = (props) => {
+  const resetStates = () => {
+    props.dispatch(resetIntegrationStates());
+  }
+
+  const getIntegrationTableView = () => {
+    const { googleChronicleList } = props;
+    return (
+      <IntegrationTableView
+        recordCollection={googleChronicleList}
+        onDeleteRequestCallback={record => handleDeleteDialog(record)}
+      />
+    );
+  }
+
+  const deleteIntegration = (record) => {
+    const params = {
+      id: record.id,
+      notification_type: record.notification_type,
+    };
+    return props.dispatch(requestIntegrationDelete(params));
+  }
+
+  const handleDeleteDialog = (record) => {
+    const params = {
+      dialogTitle: 'Delete Integration?',
+      dialogBody: 'Are you sure you want to delete this Google Chronicle integration?',
+      confirmButtonText: 'Yes, Delete',
+      cancelButtonText: 'No, Keep',
+      onConfirmButtonClick: () => deleteIntegration(record),
+    };
+    props.dispatch(showModal('DIALOG_MODAL', params));
+    resetStates();
+  }
+
+  const { googleChronicleList } = props;
+  return (
+    <div className="integration-list-section">
+      { isDataAvailable(googleChronicleList)
+        ? getIntegrationTableView()
+        : getTableEmptyState(googleChronicleList) }
+    </div>
+  )
+}
+
+export default GoogleChronicleList;

deepfence_ui/app/scripts/components/integration-view/google-chronicle-view/list.js

@@ -17,6 +17,7 @@ import SplunkIntegrationView from './splunk-integration-view/index';
 import ElasticSearchIntegrationView from './elasticsearch-integration-view/index';
 import AWSS3IntegrationView from './aws-s3-integration-view/index';
 import HTTPEndpointView from './http-endpoint-view/index';
+import GoogleChronicleEndpointView from './google-chronicle-view/index';
 import JiraIntegrationView from './jira-integration-view';
 import SumoLogicView from './sumo-logic-view';
 import ReportDownload from './report-download/index';
@@ -129,6 +130,7 @@ class IntegrationView extends React.Component {
       'pagerduty':'notification',
       'email':'notification',
       'http_endpoint':'notification',
+      'google_chronicle':'notification',
       'splunk':'siem',
       'elasticsearch':'siem',
       'sumo_logic':'siem',
@@ -207,6 +209,9 @@ class IntegrationView extends React.Component {
       case 'http_endpoint': {
         return <HTTPEndpointView />
       }
+      case 'google_chronicle': {
+        return <GoogleChronicleEndpointView />
+      }
       case 'jira': {
         return <JiraIntegrationView />
       }

deepfence_ui/app/scripts/components/integration-view/integration-view.js

@@ -8,6 +8,7 @@ import JIRA_LOGO from '../../images/jira.png';
 import SUMO_LOGIC_LOGO from '../../images/sumo-logic.png';
 import XLSX_LOGO from '../../images/xls.png';
 import HTTP_LOGO from '../../images/http.png';
+import GOOGLE_CHRONICLE_LOGO from '../../images/google-chronicle.png';
 import PDF_LOGO from '../../images/pdf-logo.png';
 import MICROSOFT_LOGO from '../../images/microsoft-teams.png';
 
@@ -33,6 +34,9 @@ export const INTEGRATION_MENU_COLLECTION = [
   {
     name: 'http_endpoint', isActive: true, icon: HTTP_LOGO, displayName: 'HTTP endpoint', category: 'notification', bgcolor: 'white', parent: 'Notification'
   },
+  {
+    name: 'google_chronicle', isActive: true, icon: GOOGLE_CHRONICLE_LOGO, displayName: 'Google Chronicle', category: 'notification', bgcolor: 'white', parent: 'Notification'
+  },
   {
     name: 'jira', isActive: false, icon: JIRA_LOGO, displayName: 'Jira', category: 'ticketing', bgcolor: '#A6CDFF', parent: 'Ticketing'
   },

deepfence_ui/app/scripts/constants/menu-collection.js

@@ -151,7 +151,7 @@ const withIntegrationForm = WrappedComponent => {
             childValues.length - 2 === filledValues.length;
         }
       }
-      if (childPayload.integration_type === 'http_endpoint') {
+      if (childPayload.integration_type === 'http_endpoint' || childPayload.integration_type === 'google_chronicle') {
         if (!childPayload.authorizationKey) {
           childFormComplete =
             childValues.length !== 0 &&

deepfence_ui/app/scripts/hoc/notification-integration.js

@@ -569,6 +569,7 @@ export function rootReducer(state = initialState, action) {
         'availableHTTPEndpoints',
         action.response.http_endpoint
       );
+      state = state.set('availableGoogleChronicleIntegrations', action.response.google_chronicle);
       state = state.set('availableJiraIntegrations', action.response.jira);
       state = state.set(
         'availableSumoLogicIntegrations',