Migrate audit log

frontend/.eslintignore

@@ -6,3 +6,4 @@ public
 tests_output
 web
 e2e
+webpack

frontend/.eslintrc.js

@@ -3,7 +3,7 @@ module.exports = {
     'env': {
         'browser': true,
         'node': true,
-        'mocha': true
+        'mocha': true,
     },
     'extends': [
         'prettier',
@@ -16,18 +16,25 @@ module.exports = {
         'prettier',
         'react',
     ],
+    'settings': {
+        'import/resolver': {
+            'typescript': {
+                'alwaysTryTypes': true, // always try to resolve types under `<root>@types` directory even it doesn't contain any source code, like `@types/unist`
+            },
+        },
+    },
     'rules': {
         'indent': [
-            "error", 4,
+            'error', 4,
             {
                 SwitchCase: 1,
                 ignoredNodes: ['JSXElement', 'JSXElement > *', 'JSXAttribute', 'JSXIdentifier', 'JSXNamespacedName', 'JSXMemberExpression', 'JSXSpreadAttribute', 'JSXExpressionContainer', 'JSXOpeningElement', 'JSXClosingElement', 'JSXText', 'JSXEmptyExpression', 'JSXSpreadChild'],
             },
         ],
         'react/jsx-max-props-per-line': [1,
             {
-                'maximum': 3
-            }
+                'maximum': 3,
+            },
         ],
         'array-callback-return': 0,
         'camelcase': 0,
@@ -45,7 +52,7 @@ module.exports = {
         'no-nested-ternary': 0,
         'no-empty': 0,
         'no-new': 0,
-        'no-param-reassign': 0, //Disabled to it not looking for global components
+        'no-param-reassign': 0, // Disabled to it not looking for global components
         'no-plusplus': 0,
         'no-restricted-globals': 'off',
         'no-return-assign': 0,
@@ -61,11 +68,11 @@ module.exports = {
         'react/destructuring-assignment': 0,
         'react/forbid-prop-types': 0,
         'react/jsx-filename-extension': 0,
-        'react/jsx-indent': ["error", 4],
-        'react/jsx-indent-props': ["error", 2],
+        'react/jsx-indent': ['error', 4],
+        'react/jsx-indent-props': ['error', 2],
         'react/jsx-no-undef': 0,
         'react/jsx-one-expression-per-line': 0,
-        'react/jsx-tag-spacing': 0, //Disabled to it not looking for global components
+        'react/jsx-tag-spacing': 0, // Disabled to it not looking for global components
         'react/no-access-state-in-setstate': 0,
         'react/no-array-index-key': 0, // there are valid cases for this where a key can not be determined
         'react/no-direct-mutation-state': 0,
@@ -126,7 +133,8 @@ module.exports = {
         'routes': true,
         'testHelpers': true,
         'toast': true,
+        'OptionalString': true,
         'window': true,
-        'zE': true
-    }
+        'zE': true,
+    },
 };

frontend/api/index.js

@@ -1,5 +1,5 @@
 require('dotenv').config();
-
+const fs = require('fs');
 const exphbs = require('express-handlebars');
 const express = require('express');
 const bodyParser = require('body-parser');
@@ -15,7 +15,6 @@ const postToSlack = process.env.VERCEL_ENV === 'production';
 
 const isDev = process.env.NODE_ENV !== 'production';
 const port = process.env.PORT || 8080;
-const fs = require('fs');
 
 app.use(xFrameOptions());
 

frontend/common/providers/ConfigProvider.js

@@ -1,13 +1,14 @@
 import React, { Component } from 'react';
 import flagsmith from 'flagsmith';
+import propTypes from 'prop-types';
 import ConfigStore from '../stores/config-store';
-import propTypes from "prop-types";
 
 module.exports = (WrappedComponent) => {
     class HOC extends Component {
         static contextTypes = {
             router: propTypes.object.isRequired,
         };
+
         constructor(props) {
             super(props);
             this.state = {

frontend/common/services/useAuditLog.ts

@@ -0,0 +1,36 @@
+import { Res } from 'common/types/responses';
+import { Req } from 'common/types/requests';
+import { service } from 'common/service';
+import Utils from 'common/utils/utils';
+
+export const auditLogService = service
+    .enhanceEndpoints({ addTagTypes: ['AuditLog'] })
+    .injectEndpoints({
+        endpoints: builder => ({
+
+            getAuditLogs: builder.query<Res['auditLogs'], Req['getAuditLogs']>({
+                query: params => ({
+                    url: `audit/?${Utils.toParam(params)}`,
+                }),
+                providesTags: [{ type: 'AuditLog', id: 'LIST' }],
+            }),
+            // END OF ENDPOINTS
+        }),
+    });
+
+export async function getAuditLogs(store: any, data: Req['getAuditLogs'], options?: Parameters<typeof auditLogService.endpoints.getAuditLogs.initiate>[1]) {
+    store.dispatch(auditLogService.endpoints.getAuditLogs.initiate(data, options));
+    return Promise.all(store.dispatch(auditLogService.util.getRunningQueriesThunk()));
+}
+// END OF FUNCTION_EXPORTS
+
+export const {
+    useGetAuditLogsQuery,
+    // END OF EXPORTS
+} = auditLogService;
+
+/* Usage examples:
+const { data, isLoading } = useGetAuditLogsQuery({ id: 2 }, {}) //get hook
+const [createAuditLogs, { isLoading, data, isSuccess }] = useCreateAuditLogsMutation() //create hook
+auditLogService.endpoints.getAuditLogs.select({id: 2})(store.getState()) //access data from any function
+*/

frontend/common/types/requests.ts

@@ -2,16 +2,21 @@ import {Segment} from "./responses";
 
 export type PagedRequest<T> =  T & {
   page?:number
-  q?:string
   page_size?: number
 }
 
 export type Req = {
   getSegments: PagedRequest<{
+    q?:string
     projectId: string
   }>
   deleteSegment: {projectId:string, id:number}
   updateSegment: {projectId:string, id:number, segment: Segment}
   createSegment: {projectId:string, id:number, segment: Omit<Segment,"id">}
+  getAuditLogs: PagedRequest<{
+    search?:string
+    project: string
+    environments?: string
+  }>
   // END OF TYPES
 }

frontend/common/types/responses.ts

@@ -1,9 +1,9 @@
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export type PagedResponse<T> = {
-  count?: number
-  next?: string
-  previous?: string
-  results: T[]
+  count?: number;
+  next?: string;
+  previous?: string;
+  results: T[];
 }
 export type FlagsmithValue = string | number | boolean | null
 export type SegmentRule = {
@@ -22,10 +22,51 @@ export type Segment = {
   name: string;
   description: string;
   project: number;
-  feature?: any;
+  feature?: number;
 }
+export type Environment = {
+  id: number;
+  name: string;
+  api_key: string;
+  description?: string;
+  project: number;
+  minimum_change_request_approvals?: number;
+  allow_client_traits: boolean;
+}
+export type Project =  {
+  id: number;
+  uuid: string;
+  name: string;
+  organisation: number;
+  hide_disabled_flags: boolean;
+  enable_dynamo_db: boolean;
+  migration_status: string;
+  use_edge_identities: boolean;
+  prevent_flag_defaults: boolean;
+  enable_realtime_updates: boolean;
+  environments: Environment[];
+}
+export type AuditLogItem = {
+  id: number;
+  created_date: string;
+  log: string;
+  author?: {
+    id: number;
+    email: string;
+    first_name: string;
+    last_name: string;
+  };
+  environment?: Environment;
+  project: Omit<Project, 'environments'>;
+  related_object_id: number;
+  related_object_type: string;
+  is_system_event: boolean;
+}
+
+
 export type Res = {
-  segments: PagedResponse<Segment>
-  segment: {id:string}
+  segments: PagedResponse<Segment>;
+  segment: {id:string};
+  auditLogs: PagedResponse<AuditLogItem>;
   // END OF TYPES
 }

frontend/common/utils/utils.js

@@ -3,7 +3,7 @@ const semver = require('semver');
 const ProjectStore = require('../../common/stores/project-store');
 
 let flagsmithBetaFeatures = null;
-module.exports = Object.assign({}, require('./base/_utils'), {
+export default Object.assign({}, require('./base/_utils'), {
     numberWithCommas(x) {
         return x.toString()
             .replace(/\B(?=(\d{3})+(?!\d))/g, ',');