add base code for console read only mode (#3466)

2024-12-15 09:22:43 +03:00 · 2019-12-30 17:22:20 +05:30 · 2019-12-30 17:22:20 +05:30 · 69179adb6d
commit 69179adb6d
parent c86a8242f2
27 changed files with 294 additions and 108 deletions
--- a/console/src/components/Main/Actions.js
+++ b/console/src/components/Main/Actions.js
@ -33,6 +33,12 @@ const setFeaturesCompatibility = data => ({
  data,
 });

+const SET_READ_ONLY_MODE = 'Main/SET_READ_ONLY_MODE';
+const setReadOnlyMode = data => ({
+  type: SET_READ_ONLY_MODE,
+  data,
+});
+
 const featureCompatibilityInit = () => {
  return (dispatch, getState) => {
    const { serverVersion } = getState().main;
@ -245,6 +251,12 @@ const mainReducer = (state = defaultState, action) => {
      };
    case UPDATE_MIGRATION_STATUS_ERROR:
      return { ...state, migrationError: action.data };
+    case SET_READ_ONLY_MODE:
+      return {
+        ...state,
+        readOnlyMode: action.data,
+        migrationMode: !action.data, // HACK
+      };
    case HASURACTL_URL_ENV:
      return { ...state, hasuractlEnv: action.data };
    case UPDATE_MIGRATION_MODE:
@ -301,6 +313,7 @@ export {
  UPDATE_MIGRATION_STATUS_ERROR,
  UPDATE_ADMIN_SECRET_INPUT,
  loadMigrationStatus,
+  setReadOnlyMode,
  updateMigrationModeStatus,
  LOGIN_IN_PROGRESS,
  LOGIN_ERROR,
--- a/console/src/components/Main/State.js
+++ b/console/src/components/Main/State.js
@ -2,6 +2,7 @@ const defaultState = {
  migrationError: null,
  hasuractlEnv: null,
  migrationMode: true,
+  readOnlyMode: false,
  migrationModeProgress: false,
  metadataExport: { error: false, info: null },
  adminSecretInput: null,
--- a/console/src/components/Services/Data/RawSQL/Actions.js
+++ b/console/src/components/Services/Data/RawSQL/Actions.js
@ -37,6 +37,7 @@ const executeSQL = (isMigration, migrationName) => (dispatch, getState) => {

  const sql = getState().rawSQL.sql;
  const currMigrationMode = getState().main.migrationMode;
+  const readOnlyMode = getState().main.readOnlyMode;

  const migrateUrl = returnMigrateUrl(currMigrationMode);
  const isCascadeChecked = getState().rawSQL.isCascadeChecked;
@ -45,7 +46,11 @@ const executeSQL = (isMigration, migrationName) => (dispatch, getState) => {
  const schemaChangesUp = [
    {
      type: 'run_sql',
-      args: { sql: sql, cascade: isCascadeChecked },
+      args: {
+        sql: sql,
+        cascade: isCascadeChecked,
+        read_only: readOnlyMode,
+      },
    },
  ];
  // check if track view enabled
--- a/console/src/components/Services/Data/Schema/Schema.js
+++ b/console/src/components/Services/Data/Schema/Schema.js
@ -69,6 +69,7 @@ class Schema extends Component {
      schema,
      schemaList,
      migrationMode,
+      readOnlyMode,
      untrackedRelations,
      currentSchema,
      dispatch,
@ -326,6 +327,10 @@ class Schema extends Component {

    const getUntrackedTablesSection = () => {
      const getTrackAllBtn = () => {
+        if (readOnlyMode) {
+          return null;
+        }
+
        let trackAllBtn = null;

        const trackAllTables = e => {
@ -362,22 +367,19 @@ class Schema extends Component {
        const untrackedTablesList = [];

        allUntrackedTables.forEach((table, i) => {
-          const handleTrackTable = e => {
-            e.preventDefault();
+          const getTrackBtn = () => {
+            if (readOnlyMode) {
+              return null;
+            }

-            dispatch(setTableName(table.table_name));
-            dispatch(addExistingTableSql());
-          };
+            const handleTrackTable = e => {
+              e.preventDefault();

-          const isGQLCompatible = gqlPattern.test(table.table_name);
-          const gqlCompatibilityWarning = !isGQLCompatible ? (
-            <span className={styles.add_mar_left_mid}>
-              <GqlCompatibilityWarning />
-            </span>
-          ) : null;
+              dispatch(setTableName(table.table_name));
+              dispatch(addExistingTableSql());
+            };

-          untrackedTablesList.push(
-            <div className={styles.padd_bottom} key={`untracked-${i}`}>
+            return (
              <div
                className={`${styles.display_inline} ${styles.add_mar_right}`}
              >
@ -391,6 +393,19 @@ class Schema extends Component {
                  Track
                </Button>
              </div>
+            );
+          };
+
+          const isGQLCompatible = gqlPattern.test(table.table_name);
+          const gqlCompatibilityWarning = !isGQLCompatible ? (
+            <span className={styles.add_mar_left_mid}>
+              <GqlCompatibilityWarning />
+            </span>
+          ) : null;
+
+          untrackedTablesList.push(
+            <div className={styles.padd_bottom} key={`untracked-${i}`}>
+              {getTrackBtn()}
              <div className={styles.display_inline}>
                {displayTableName(table)}
              </div>
@ -428,6 +443,10 @@ class Schema extends Component {

    const getUntrackedRelationsSection = () => {
      const getTrackAllBtn = () => {
+        if (readOnlyMode) {
+          return null;
+        }
+
        let trackAllBtn = null;

        const trackAllRelations = e => {
@ -467,10 +486,31 @@ class Schema extends Component {
        untrackedRelations.forEach((rel, i) => {
          const relData = rel.data;

-          const handleAddRel = e => {
-            e.preventDefault();
+          const getTrackBtn = () => {
+            if (readOnlyMode) {
+              return null;
+            }

-            dispatch(autoAddRelName(rel));
+            const handleTrackRel = e => {
+              e.preventDefault();
+
+              dispatch(autoAddRelName(rel));
+            };
+
+            return (
+              <div
+                className={`${styles.display_inline} ${styles.add_mar_right}`}
+              >
+                <Button
+                  className={styles.display_inline}
+                  color="white"
+                  size="xs"
+                  onClick={handleTrackRel}
+                >
+                  Track
+                </Button>
+              </div>
+            );
          };

          const relFrom = <b>{relData.lTable}</b>;
@ -483,18 +523,7 @@ class Schema extends Component {

          untrackedRelList.push(
            <div className={styles.padd_bottom} key={`untracked-rel-${i}`}>
-              <div
-                className={`${styles.display_inline} ${styles.add_mar_right}`}
-              >
-                <Button
-                  className={styles.display_inline}
-                  color="white"
-                  size="xs"
-                  onClick={handleAddRel}
-                >
-                  Track
-                </Button>
-              </div>
+              {getTrackBtn()}
              <div className={styles.display_inline}>
                <span>
                  {relFrom} &rarr; {relTo}
@ -540,23 +569,35 @@ class Schema extends Component {
        const trackableFunctionList = [];

        trackableFuncs.forEach((p, i) => {
-          trackableFunctionList.push(
-            <div className={styles.padd_bottom} key={`untracked-function-${i}`}>
+          const getTrackBtn = () => {
+            if (readOnlyMode) {
+              return null;
+            }
+
+            const handleTrackFn = e => {
+              e.preventDefault();
+
+              dispatch(addExistingFunction(p.function_name));
+            };
+
+            return (
              <div
                className={`${styles.display_inline} ${styles.add_mar_right}`}
              >
                <Button
                  data-test={`add-track-function-${p.function_name}`}
                  className={`${styles.display_inline} btn btn-xs btn-default`}
-                  onClick={e => {
-                    e.preventDefault();
-
-                    dispatch(addExistingFunction(p.function_name));
-                  }}
+                  onClick={handleTrackFn}
                >
                  Track
                </Button>
              </div>
+            );
+          };
+
+          trackableFunctionList.push(
+            <div className={styles.padd_bottom} key={`untracked-function-${i}`}>
+              {getTrackBtn()}
              <div className={styles.display_inline}>
                <span>{p.function_name}</span>
              </div>
@ -711,6 +752,7 @@ const mapStateToProps = state => ({
  schema: state.tables.allSchemas,
  schemaList: state.tables.schemaList,
  migrationMode: state.main.migrationMode,
+  readOnlyMode: state.main.readOnlyMode,
  untrackedRelations: state.tables.untrackedRelations,
  currentSchema: state.tables.currentSchema,
  functionsList: [...state.tables.postgresFunctions],
--- a/console/src/components/Services/Data/TableBrowseRows/EditItem.js
+++ b/console/src/components/Services/Data/TableBrowseRows/EditItem.js
@ -28,6 +28,7 @@ class EditItem extends Component {
      schemas,
      oldItem,
      migrationMode,
+      readOnlyMode,
      ongoingRequest,
      lastError,
      lastSuccess,
@ -253,6 +254,7 @@ class EditItem extends Component {
          table={currentTable}
          tabName="edit"
          migrationMode={migrationMode}
+          readOnlyMode={readOnlyMode}
        />
        <br />
        <div className={styles.insertContainer + ' container-fluid'}>
@ -292,6 +294,7 @@ EditItem.propTypes = {
  lastSuccess: PropTypes.object,
  lastError: PropTypes.object,
  migrationMode: PropTypes.bool.isRequired,
+  readOnlyMode: PropTypes.bool.isRequired,
  count: PropTypes.number,
  dispatch: PropTypes.func.isRequired,
 };
@ -302,6 +305,7 @@ const mapStateToProps = (state, ownProps) => {
    ...state.tables.update,
    schemas: state.tables.allSchemas,
    migrationMode: state.main.migrationMode,
+    readOnlyMode: state.main.readOnlyMode,
    currentSchema: state.tables.currentSchema,
  };
 };
--- a/console/src/components/Services/Data/TableBrowseRows/ViewRows.js
+++ b/console/src/components/Services/Data/TableBrowseRows/ViewRows.js
@ -63,6 +63,7 @@ const ViewRows = ({
  updateInvocationFunction,
  triggeredRow,
  triggeredFunction,
+  readOnlyMode,
 }) => {
  const styles = require('../../../Common/TableCommon/Table.scss');

@ -429,7 +430,7 @@ const ViewRows = ({
          );
        };

-        const showActionBtns = !_isSingleRow && !isView;
+        const showActionBtns = !readOnlyMode && !_isSingleRow && !isView;

        if (showActionBtns) {
          const pkClause = getPKClause();
@ -686,6 +687,7 @@ const ViewRows = ({
              curDepth={curDepth + 1}
              dispatch={dispatch}
              expandedRow={expandedRow}
+              readOnlyMode={readOnlyMode}
            />
          );
        }
--- a/console/src/components/Services/Data/TableBrowseRows/ViewTable.js
+++ b/console/src/components/Services/Data/TableBrowseRows/ViewTable.js
@ -148,6 +148,7 @@ class ViewTable extends Component {
      count,
      activePath,
      migrationMode,
+      readOnlyMode,
      ongoingRequest,
      isProgressing,
      lastError,
@ -201,6 +202,7 @@ class ViewTable extends Component {
        updateInvocationFunction={this.updateInvocationFunction.bind(this)}
        triggeredRow={triggeredRow}
        triggeredFunction={triggeredFunction}
+        readOnlyMode={readOnlyMode}
      />
    );

@ -212,6 +214,7 @@ class ViewTable extends Component {
        table={tableSchema}
        tabName="browse"
        migrationMode={migrationMode}
+        readOnlyMode={readOnlyMode}
      />
    );

@ -245,6 +248,7 @@ ViewTable.propTypes = {
  query: PropTypes.object.isRequired,
  curFilter: PropTypes.object.isRequired,
  migrationMode: PropTypes.bool.isRequired,
+  readOnlyMode: PropTypes.bool.isRequired,
  ongoingRequest: PropTypes.bool.isRequired,
  isProgressing: PropTypes.bool.isRequired,
  rows: PropTypes.array.isRequired,
@ -262,6 +266,7 @@ const mapStateToProps = (state, ownProps) => {
    schemas: state.tables.allSchemas,
    tableComment: state.tables.tableComment,
    migrationMode: state.main.migrationMode,
+    readOnlyMode: state.main.readOnlyMode,
    serverVersion: state.main.serverVersion,
    ...state.tables.view,
  };
--- a/console/src/components/Services/Data/TableCommon/TableHeader.js
+++ b/console/src/components/Services/Data/TableCommon/TableHeader.js
@ -20,7 +20,14 @@ import {
  getTableRelationshipsRoute,
 } from '../../../Common/utils/routesUtils';

-const TableHeader = ({ tabName, count, table, migrationMode, dispatch }) => {
+const TableHeader = ({
+  tabName,
+  count,
+  table,
+  migrationMode,
+  readOnlyMode,
+  dispatch,
+}) => {
  const styles = require('../../../Common/TableCommon/Table.scss');

  const capitalisedTabName = tabName[0].toUpperCase() + tabName.slice(1);
@ -97,7 +104,8 @@ const TableHeader = ({ tabName, count, table, migrationMode, dispatch }) => {
              `Browse Rows ${countDisplay}`,
              'table-browse-rows'
            )}
-            {isTable &&
+            {!readOnlyMode &&
+              isTable &&
              getTab(
                'insert',
                getTableInsertRowRoute(tableSchema, tableName, isTable),
--- a/console/src/components/Services/Data/TableInsertItem/InsertItem.js
+++ b/console/src/components/Services/Data/TableInsertItem/InsertItem.js
@ -47,6 +47,7 @@ class InsertItem extends Component {
      clone,
      schemas,
      migrationMode,
+      readOnlyMode,
      ongoingRequest,
      lastError,
      lastSuccess,
@ -260,6 +261,7 @@ class InsertItem extends Component {
          table={currentTable}
          tabName="insert"
          migrationMode={migrationMode}
+          readOnlyMode={readOnlyMode}
        />
        <br />
        <div className={styles.insertContainer + ' container-fluid'}>
@ -345,6 +347,7 @@ InsertItem.propTypes = {
  lastSuccess: PropTypes.object,
  lastError: PropTypes.object,
  migrationMode: PropTypes.bool.isRequired,
+  readOnlyMode: PropTypes.bool.isRequired,
  count: PropTypes.number,
  dispatch: PropTypes.func.isRequired,
 };
@ -356,6 +359,7 @@ const mapStateToProps = (state, ownProps) => {
    schemas: state.tables.allSchemas,
    ...state.tables.view,
    migrationMode: state.main.migrationMode,
+    readOnlyMode: state.main.readOnlyMode,
    currentSchema: state.tables.currentSchema,
  };
 };
--- a/console/src/components/Services/Data/TableModify/ModifyTable.js
+++ b/console/src/components/Services/Data/TableModify/ModifyTable.js
@ -62,6 +62,7 @@ class ModifyTable extends React.Component {
      allTables,
      dispatch,
      migrationMode,
+      readOnlyMode,
      currentSchema,
      tableCommentEdit,
      columnEdit,
@ -176,6 +177,7 @@ class ModifyTable extends React.Component {
          table={table}
          tabName="modify"
          migrationMode={migrationMode}
+          readOnlyMode={readOnlyMode}
        />
        <br />
        <div className={`container-fluid ${styles.padd_left_remove}`}>
@ -270,6 +272,7 @@ ModifyTable.propTypes = {
  currentSchema: PropTypes.string.isRequired,
  allTables: PropTypes.array.isRequired,
  migrationMode: PropTypes.bool.isRequired,
+  readOnlyMode: PropTypes.bool.isRequired,
  activeEdit: PropTypes.object.isRequired,
  fkAdd: PropTypes.object.isRequired,
  relAdd: PropTypes.object.isRequired,
@ -288,6 +291,7 @@ const mapStateToProps = (state, ownProps) => ({
  tableName: ownProps.params.table,
  allTables: state.tables.allSchemas,
  migrationMode: state.main.migrationMode,
+  readOnlyMode: state.main.readOnlyMode,
  serverVersion: state.main.serverVersion,
  currentSchema: state.tables.currentSchema,
  columnEdit: state.tables.modify.columnEdit,
--- a/console/src/components/Services/Data/TableModify/ModifyView.js
+++ b/console/src/components/Services/Data/TableModify/ModifyView.js
@ -49,8 +49,9 @@ class ModifyView extends Component {
      dispatch,
      currentSchema,
      tableCommentEdit,
-      migrationMode,
      rootFieldsEdit,
+      migrationMode,
+      readOnlyMode,
    } = this.props;

    const styles = require('./ModifyTable.scss');
@ -192,6 +193,7 @@ class ModifyView extends Component {
          table={tableSchema}
          tabName="modify"
          migrationMode={migrationMode}
+          readOnlyMode={readOnlyMode}
        />
        <br />
        <div className={'container-fluid ' + styles.padd_left_remove}>
@ -241,6 +243,8 @@ ModifyView.propTypes = {
  currentSchema: PropTypes.string.isRequired,
  activeEdit: PropTypes.object.isRequired,
  ongoingRequest: PropTypes.bool.isRequired,
+  migrationMode: PropTypes.bool.isRequired,
+  readOnlyMode: PropTypes.bool.isRequired,
  lastError: PropTypes.object,
  lastSuccess: PropTypes.bool,
  dispatch: PropTypes.func.isRequired,
@ -254,6 +258,7 @@ const mapStateToProps = (state, ownProps) => {
    sql: state.rawSQL.sql,
    currentSchema: state.tables.currentSchema,
    migrationMode: state.main.migrationMode,
+    readOnlyMode: state.main.readOnlyMode,
    serverVersion: state.main.serverVersion,
    ...state.tables.modify,
  };
--- a/console/src/components/Services/Data/TablePermissions/Permissions.js
+++ b/console/src/components/Services/Data/TablePermissions/Permissions.js
@ -118,6 +118,7 @@ class Permissions extends Component {
      lastSuccess,
      permissionsState,
      migrationMode,
+      readOnlyMode,
      currentSchema,
    } = this.props;

@ -183,6 +184,7 @@ class Permissions extends Component {
          table={tableSchema}
          tabName="permissions"
          migrationMode={migrationMode}
+          readOnlyMode={readOnlyMode}
        />
      );
    };
@ -1461,6 +1463,10 @@ class Permissions extends Component {
      };

      const getClonePermsSection = () => {
+        if (readOnlyMode) {
+          return null;
+        }
+
        // const applySameSelected = e => {
        //   const isChecked = e.target.checked;
        //   const selectedRole = e.target.getAttribute('data-role');
@ -1620,6 +1626,10 @@ class Permissions extends Component {
      };

      const getButtonsSection = () => {
+        if (readOnlyMode) {
+          return null;
+        }
+
        const dispatchSavePermissions = () => {
          dispatch(permChangePermissions(permChangeTypes.save));
        };
@ -1800,6 +1810,7 @@ Permissions.propTypes = {
  tableType: PropTypes.string.isRequired,
  allSchemas: PropTypes.array.isRequired,
  migrationMode: PropTypes.bool.isRequired,
+  readOnlyMode: PropTypes.bool.isRequired,
  currentSchema: PropTypes.string.isRequired,
  activeEdit: PropTypes.object.isRequired,
  permissionsState: PropTypes.object.isRequired,
@ -1815,6 +1826,7 @@ const mapStateToProps = (state, ownProps) => ({
  allSchemas: state.tables.allSchemas,
  schemaList: state.tables.schemaList,
  migrationMode: state.main.migrationMode,
+  readOnlyMode: state.main.readOnlyMode,
  currentSchema: state.tables.currentSchema,
  serverVersion: state.main.serverVersion ? state.main.serverVersion : '',
  ...state.tables.modify,
--- a/console/src/components/Services/Data/TableRelationships/RelationshipEditor.js
+++ b/console/src/components/Services/Data/TableRelationships/RelationshipEditor.js
@ -72,7 +72,7 @@ class RelationshipEditor extends React.Component {
  };

  render() {
-    const { dispatch, relConfig } = this.props;
+    const { dispatch, relConfig, readOnlyMode } = this.props;
    const { text, isEditting } = this.state;

    const { relName } = relConfig;
@ -92,23 +92,37 @@ class RelationshipEditor extends React.Component {
        dispatch(deleteRelMigrate(relConfig));
      }
    };
-    const collapsed = () => (
-      <div>
-        <Button
-          color={'white'}
-          size={'xs'}
-          onClick={this.toggleEditor}
-          data-test={`relationship-toggle-editor-${relName}`}
-        >
-          Edit
-        </Button>
-        &nbsp;
-        <b>{relName}</b> {gqlCompatibilityWarning}
-        <div className={tableStyles.relationshipTopPadding}>
-          {getRelDef(relConfig)}
+    const collapsed = () => {
+      const getEditBtn = () => {
+        if (readOnlyMode) {
+          return null;
+        }
+
+        return (
+          <React.Fragment>
+            <Button
+              color={'white'}
+              size={'xs'}
+              onClick={this.toggleEditor}
+              data-test={`relationship-toggle-editor-${relName}`}
+            >
+              Edit
+            </Button>
+            &nbsp;
+          </React.Fragment>
+        );
+      };
+
+      return (
+        <div>
+          {getEditBtn()}
+          <b>{relName}</b> {gqlCompatibilityWarning}
+          <div className={tableStyles.relationshipTopPadding}>
+            {getRelDef(relConfig)}
+          </div>
        </div>
-      </div>
-    );
+      );
+    };

    const expanded = () => (
      <div className={styles.activeEdit}>
--- a/console/src/components/Services/Data/TableRelationships/Relationships.js
+++ b/console/src/components/Services/Data/TableRelationships/Relationships.js
@ -318,6 +318,7 @@ class Relationships extends Component {
      manualRelAdd,
      currentSchema,
      migrationMode,
+      readOnlyMode,
      schemaList,
    } = this.props;
    const styles = require('../TableModify/ModifyTable.scss');
@ -383,6 +384,7 @@ class Relationships extends Component {
                  <RelationshipEditor
                    dispatch={dispatch}
                    key={rel.objRel.rel_name}
+                    readOnlyMode={readOnlyMode}
                    relConfig={findAllFromRel(
                      allSchemas,
                      tableSchema,
@ -396,6 +398,7 @@ class Relationships extends Component {
                  <RelationshipEditor
                    key={rel.arrRel.rel_name}
                    dispatch={dispatch}
+                    readOnlyMode={readOnlyMode}
                    relConfig={findAllFromRel(
                      allSchemas,
                      tableSchema,
@ -418,6 +421,51 @@ class Relationships extends Component {
      );
    }

+    const getAddRelSection = () => {
+      if (readOnlyMode) {
+        return null;
+      }
+
+      let addRelSection = null;
+
+      if (relAdd.isActive) {
+        addRelSection = (
+          <div className={styles.activeEdit}>
+            <AddRelationship
+              tableName={tableName}
+              currentSchema={currentSchema}
+              allSchemas={allSchemas}
+              cachedRelationshipData={relAdd}
+              dispatch={dispatch}
+            />
+            <hr />
+            <AddManualRelationship
+              tableSchema={tableSchema}
+              allSchemas={allSchemas}
+              schemaList={schemaList}
+              relAdd={manualRelAdd}
+              dispatch={dispatch}
+            />
+          </div>
+        );
+      } else {
+        addRelSection = (
+          <Button
+            type="submit"
+            color="white"
+            size="sm"
+            onClick={() => {
+              dispatch(addNewRelClicked());
+            }}
+          >
+            + Add relationship
+          </Button>
+        );
+      }
+
+      return addRelSection;
+    };
+
    return (
      <div className={`${styles.container} container-fluid`}>
        <TableHeader
@ -425,6 +473,7 @@ class Relationships extends Component {
          table={tableSchema}
          tabName="relationships"
          migrationMode={migrationMode}
+          readOnlyMode={readOnlyMode}
        />
        <br />
        <div className={`${styles.padd_left_remove} container-fluid`}>
@ -432,36 +481,7 @@ class Relationships extends Component {
            <h4 className={styles.subheading_text}>Relationships</h4>
            {addedRelationshipsView}
            <br />
-            {relAdd.isActive ? (
-              <div className={styles.activeEdit}>
-                <AddRelationship
-                  tableName={tableName}
-                  currentSchema={currentSchema}
-                  allSchemas={allSchemas}
-                  cachedRelationshipData={relAdd}
-                  dispatch={dispatch}
-                />
-                <hr />
-                <AddManualRelationship
-                  tableSchema={tableSchema}
-                  allSchemas={allSchemas}
-                  schemaList={schemaList}
-                  relAdd={manualRelAdd}
-                  dispatch={dispatch}
-                />
-              </div>
-            ) : (
-              <Button
-                type="submit"
-                color="white"
-                size="sm"
-                onClick={() => {
-                  dispatch(addNewRelClicked());
-                }}
-              >
-                + Add relationship
-              </Button>
-            )}
+            {getAddRelSection()}
          </div>
        </div>
        <div className={`${styles.fixed} hidden`}>{alert}</div>
@ -479,6 +499,7 @@ Relationships.propTypes = {
  relAdd: PropTypes.object.isRequired,
  manualRelAdd: PropTypes.object.isRequired,
  migrationMode: PropTypes.bool.isRequired,
+  readOnlyMode: PropTypes.bool.isRequired,
  ongoingRequest: PropTypes.bool.isRequired,
  lastError: PropTypes.object,
  lastFormError: PropTypes.object,
@ -492,6 +513,7 @@ const mapStateToProps = (state, ownProps) => ({
  allSchemas: state.tables.allSchemas,
  currentSchema: state.tables.currentSchema,
  migrationMode: state.main.migrationMode,
+  readOnlyMode: state.main.readOnlyMode,
  serverVersion: state.main.serverVersion,
  schemaList: state.tables.schemaList,
  ...state.tables.modify,
--- a/console/src/components/Services/Data/TableRelationships/RelationshipsView.js
+++ b/console/src/components/Services/Data/TableRelationships/RelationshipsView.js
@ -33,6 +33,7 @@ class RelationshipsView extends Component {
      manualRelAdd,
      currentSchema,
      migrationMode,
+      readOnlyMode,
      schemaList,
    } = this.props;
    const styles = require('../TableModify/ModifyTable.scss');
@ -140,6 +141,7 @@ class RelationshipsView extends Component {
          table={tableSchema}
          tabName="relationships"
          migrationMode={migrationMode}
+          readOnlyMode={readOnlyMode}
        />
        <br />
        <div className={`${styles.padd_left_remove} container-fluid`}>
@ -170,6 +172,8 @@ RelationshipsView.propTypes = {
  activeEdit: PropTypes.object.isRequired,
  manualRelAdd: PropTypes.object.isRequired,
  ongoingRequest: PropTypes.bool.isRequired,
+  migrationMode: PropTypes.bool.isRequired,
+  readOnlyMode: PropTypes.bool.isRequired,
  lastError: PropTypes.object,
  lastFormError: PropTypes.object,
  lastSuccess: PropTypes.bool,
@ -182,6 +186,7 @@ const mapStateToProps = (state, ownProps) => ({
  allSchemas: state.tables.allSchemas,
  currentSchema: state.tables.currentSchema,
  migrationMode: state.main.migrationMode,
+  readOnlyMode: state.main.readOnlyMode,
  serverVersion: state.main.serverVersion,
  schemaList: state.tables.schemaList,
  ...state.tables.modify,
--- a/console/src/components/Services/EventTrigger/EventSubSidebar.js
+++ b/console/src/components/Services/EventTrigger/EventSubSidebar.js
@ -16,6 +16,7 @@ const EventSubSidebar = ({
  // children,
  dispatch,
  location,
+  readOnlyMode,
 }) => {
  const styles = require('../../Common/Layout/LeftSubSidebar/LeftSubSidebar.scss');

@ -92,7 +93,7 @@ const EventSubSidebar = ({

  return (
    <LeftSubSidebar
-      showAddBtn
+      showAddBtn={!readOnlyMode}
      searchInput={getSearchInput()}
      heading={`Event Triggers (${triggerList.length})`}
      addLink={'/events/manage/triggers/add'}
@ -110,6 +111,7 @@ const mapStateToProps = state => {
    currentTrigger: state.triggers.currentTrigger,
    triggerList: state.triggers.triggerList,
    listingTrigger: state.triggers.listingTrigger,
+    readOnlyMode: state.main.readOnlyMode,
  };
 };

--- a/console/src/components/Services/EventTrigger/Landing/EventTrigger.js
+++ b/console/src/components/Services/EventTrigger/Landing/EventTrigger.js
@ -23,7 +23,7 @@ class EventTrigger extends Component {
  }

  render() {
-    const { dispatch, listingTrigger } = this.props;
+    const { dispatch, listingTrigger, readOnlyMode } = this.props;

    const styles = require('../../../Common/Layout/LeftSubSidebar/LeftSubSidebar.scss');

@ -52,6 +52,10 @@ class EventTrigger extends Component {
    };

    const getAddBtn = () => {
+      if (readOnlyMode) {
+        return null;
+      }
+
      const handleClick = e => {
        e.preventDefault();

@ -127,6 +131,7 @@ const mapStateToProps = state => ({
  untrackedRelations: state.tables.untrackedRelations,
  currentSchema: state.tables.currentSchema,
  listingTrigger: state.triggers.listingTrigger,
+  readOnlyMode: state.main.readOnlyMode,
 });

 const eventTriggerConnector = connect => connect(mapStateToProps)(EventTrigger);
--- a/console/src/components/Services/EventTrigger/Modify/Connector.js
+++ b/console/src/components/Services/EventTrigger/Modify/Connector.js
@ -9,6 +9,7 @@ const mapStateToProps = (state, ownProps) => {
    allSchemas: state.tables.allSchemas,
    serverVersion: state.main.serverVersion,
    currentSchema: state.tables.currentSchema,
+    readOnlyMode: state.main.readOnlyMode,
  };
 };

--- a/console/src/components/Services/EventTrigger/Modify/Modify.js
+++ b/console/src/components/Services/EventTrigger/Modify/Modify.js
@ -33,6 +33,7 @@ class Modify extends React.Component {
      modifyTriggerName,
      modifyTrigger,
      triggerList,
+      readOnlyMode,
      dispatch,
    } = this.props;

@ -59,6 +60,7 @@ class Modify extends React.Component {
          dispatch={dispatch}
          triggerName={modifyTriggerName}
          tabName="modify"
+          readOnlyMode={readOnlyMode}
        />
        <br />
        <div className={styles.container}>
--- a/console/src/components/Services/EventTrigger/PendingEvents/ViewTable.js
+++ b/console/src/components/Services/EventTrigger/PendingEvents/ViewTable.js
@ -127,6 +127,7 @@ class ViewTable extends Component {
      lastSuccess,
      dispatch,
      expandedRow,
+      readOnlyMode,
    } = this.props; // eslint-disable-line no-unused-vars

    // check if trigger exists
@ -168,6 +169,7 @@ class ViewTable extends Component {
        dispatch={dispatch}
        triggerName={triggerName}
        tabName="pending"
+        readOnlyMode={readOnlyMode}
      />
    );

@ -188,6 +190,7 @@ ViewTable.propTypes = {
  query: PropTypes.object.isRequired,
  curFilter: PropTypes.object.isRequired,
  ongoingRequest: PropTypes.bool.isRequired,
+  readOnlyMode: PropTypes.bool.isRequired,
  rows: PropTypes.array.isRequired,
  expandedRow: PropTypes.string.isRequired,
  count: PropTypes.number,
@ -200,6 +203,7 @@ const mapStateToProps = (state, ownProps) => {
  return {
    triggerName: ownProps.params.trigger,
    triggerList: state.triggers.pendingEvents,
+    readOnlyMode: state.main.readOnlyMode,
    ...state.triggers.view,
  };
 };
--- a/console/src/components/Services/EventTrigger/ProcessedEvents/ViewTable.js
+++ b/console/src/components/Services/EventTrigger/ProcessedEvents/ViewTable.js
@ -138,6 +138,7 @@ class ViewTable extends Component {
      lastSuccess,
      dispatch,
      expandedRow,
+      readOnlyMode,
    } = this.props; // eslint-disable-line no-unused-vars

    // check if table exists
@ -178,6 +179,7 @@ class ViewTable extends Component {
        dispatch={dispatch}
        triggerName={triggerName}
        tabName="processed"
+        readOnlyMode={readOnlyMode}
      />
    );

@ -198,6 +200,7 @@ ViewTable.propTypes = {
  query: PropTypes.object.isRequired,
  curFilter: PropTypes.object.isRequired,
  ongoingRequest: PropTypes.bool.isRequired,
+  readOnlyMode: PropTypes.bool.isRequired,
  rows: PropTypes.array.isRequired,
  expandedRow: PropTypes.string.isRequired,
  count: PropTypes.number,
@ -210,6 +213,7 @@ const mapStateToProps = (state, ownProps) => {
  return {
    triggerName: ownProps.params.trigger,
    triggerList: state.triggers.triggerList,
+    readOnlyMode: state.main.readOnlyMode,
    ...state.triggers.view,
  };
 };
--- a/console/src/components/Services/EventTrigger/RunningEvents/ViewTable.js
+++ b/console/src/components/Services/EventTrigger/RunningEvents/ViewTable.js
@ -128,6 +128,7 @@ class ViewTable extends Component {
      lastSuccess,
      dispatch,
      expandedRow,
+      readOnlyMode,
    } = this.props; // eslint-disable-line no-unused-vars

    // check if table exists
@ -169,6 +170,7 @@ class ViewTable extends Component {
        dispatch={dispatch}
        triggerName={triggerName}
        tabName="running"
+        readOnlyMode={readOnlyMode}
      />
    );

@ -189,6 +191,7 @@ ViewTable.propTypes = {
  query: PropTypes.object.isRequired,
  curFilter: PropTypes.object.isRequired,
  ongoingRequest: PropTypes.bool.isRequired,
+  readOnlyMode: PropTypes.bool.isRequired,
  isProgressing: PropTypes.bool.isRequired,
  rows: PropTypes.array.isRequired,
  expandedRow: PropTypes.string.isRequired,
@ -202,6 +205,7 @@ const mapStateToProps = (state, ownProps) => {
  return {
    triggerName: ownProps.params.trigger,
    triggerList: state.triggers.runningEvents,
+    readOnlyMode: state.main.readOnlyMode,
    ...state.triggers.view,
  };
 };
--- a/console/src/components/Services/EventTrigger/StreamingLogs/Logs.js
+++ b/console/src/components/Services/EventTrigger/StreamingLogs/Logs.js
@ -107,7 +107,14 @@ class StreamingLogs extends Component {
  }

  render() {
-    const { triggerName, log, count, dispatch, triggerList } = this.props;
+    const {
+      triggerName,
+      log,
+      count,
+      dispatch,
+      triggerList,
+      readOnlyMode,
+    } = this.props;

    const styles = require('../TableCommon/EventTable.scss');

@ -345,6 +352,7 @@ class StreamingLogs extends Component {
          dispatch={dispatch}
          triggerName={triggerName}
          tabName="logs"
+          readOnlyMode={readOnlyMode}
        />
        <br />
        <div className={'hide'}>
@ -453,6 +461,7 @@ const mapStateToProps = (state, ownProps) => {
  return {
    ...state.triggers,
    serverVersion: state.main.serverVersion,
+    readOnlyMode: state.main.readOnlyMode,
    triggerName: ownProps.params.trigger,
    currentSchema: state.tables.currentSchema,
    triggerList: state.triggers.triggerList,
--- a/console/src/components/Services/EventTrigger/TableCommon/TableHeader.js
+++ b/console/src/components/Services/EventTrigger/TableCommon/TableHeader.js
@ -3,7 +3,7 @@ import { Link } from 'react-router';
 import Helmet from 'react-helmet';
 import BreadCrumb from '../../../Common/Layout/BreadCrumb/BreadCrumb';

-const TableHeader = ({ triggerName, tabName, count }) => {
+const TableHeader = ({ triggerName, tabName, count, readOnlyMode }) => {
  const styles = require('./EventTable.scss');
  let capitalised = tabName;
  capitalised = capitalised[0].toUpperCase() + capitalised.slice(1);
@ -99,15 +99,17 @@ const TableHeader = ({ triggerName, tabName, count }) => {
                Invocation Logs
              </Link>
            </li>
-            <li
-              role="presentation"
-              className={tabName === 'modify' ? styles.active : ''}
-              data-test="trigger-modify"
-            >
-              <Link to={'/events/manage/triggers/' + triggerName + '/modify'}>
-                Modify
-              </Link>
-            </li>
+            {!readOnlyMode && (
+              <li
+                role="presentation"
+                className={tabName === 'modify' ? styles.active : ''}
+                data-test="trigger-modify"
+              >
+                <Link to={'/events/manage/triggers/' + triggerName + '/modify'}>
+                  Modify
+                </Link>
+              </li>
+            )}
          </ul>
        </div>
        <div className="clearfix" />
--- a/console/src/components/Services/RemoteSchema/Edit/View.js
+++ b/console/src/components/Services/RemoteSchema/Edit/View.js
@ -81,7 +81,7 @@ class ViewStitchedSchema extends React.Component {
    const styles = require('../RemoteSchema.scss');

    const { remoteSchemaName } = this.props.params;
-    const { manualUrl, envName, headers } = this.props;
+    const { manualUrl, envName, headers, readOnlyMode } = this.props;

    const filterHeaders = headers.filter(h => !!h.name);

@ -121,8 +121,12 @@ class ViewStitchedSchema extends React.Component {
      </Tooltip>
    );

+    if (readOnlyMode) {
+      delete tabInfo.modify;
+    }
+
    const showReloadRemoteSchema =
-      remoteSchemaName && remoteSchemaName.length > 0 ? (
+      !readOnlyMode && remoteSchemaName && remoteSchemaName.length > 0 ? (
        <div className={styles.commonBtn + ' ' + styles.detailsRefreshButton}>
          <span>
            <ReloadRemoteSchema
@ -205,6 +209,7 @@ const mapStateToProps = state => {
    ...state.remoteSchemas.headerData,
    allRemoteSchemas: state.remoteSchemas.listData.remoteSchemas,
    dataHeaders: { ...state.tables.dataHeaders },
+    readOnlyMode: state.main.readOnlyMode,
  };
 };

--- a/console/src/components/Services/RemoteSchema/Landing/RemoteSchema.js
+++ b/console/src/components/Services/RemoteSchema/Landing/RemoteSchema.js
@ -12,7 +12,7 @@ class RemoteSchema extends React.Component {
  render() {
    const styles = require('../RemoteSchema.scss');

-    const { dispatch, remoteSchemaList } = this.props;
+    const { dispatch, readOnlyMode, remoteSchemaList } = this.props;
    const showIntroSection = !remoteSchemaList.remoteSchemas.length;
    const getIntroSection = () => {
      if (!showIntroSection) {
@ -33,14 +33,16 @@ class RemoteSchema extends React.Component {
    };

    const getAddBtn = () => {
-      let addBtn = null;
+      if (readOnlyMode) {
+        return null;
+      }

      const handleClick = e => {
        e.preventDefault();
        dispatch(push(`${globals.urlPrefix}${appPrefix}/manage/add`));
      };

-      addBtn = (
+      return (
        <Button
          data-test="data-create-remote-schemas"
          color="yellow"
@ -51,8 +53,6 @@ class RemoteSchema extends React.Component {
          Add
        </Button>
      );
-
-      return addBtn;
    };

    return (
@ -96,6 +96,7 @@ class RemoteSchema extends React.Component {
 const mapStateToProps = state => {
  return {
    remoteSchemaList: state.remoteSchemas.listData,
+    readOnlyMode: state.main.readOnlyMode,
  };
 };

--- a/console/src/components/Services/RemoteSchema/RemoteSchemaSubSidebar.js
+++ b/console/src/components/Services/RemoteSchema/RemoteSchemaSubSidebar.js
@ -11,6 +11,7 @@ const RemoteSchemaSubSidebar = ({
  location,
  filterItem,
  viewRemoteSchema,
+  main,
 }) => {
  const styles = require('../../Common/Layout/LeftSubSidebar/LeftSubSidebar.scss');

@ -80,7 +81,7 @@ const RemoteSchemaSubSidebar = ({

  return (
    <LeftSubSidebar
-      showAddBtn
+      showAddBtn={!main.readOnlyMode}
      searchInput={getSearchInput()}
      heading={`Remote Schemas (${dataList.length})`}
      addLink={`${appPrefix}/manage/add`}