diff --git a/frontend/src/pages/sys-admin/logs-page/file-update-logs.js b/frontend/src/pages/sys-admin/logs-page/file-update-logs.js
index 3f7cbb2103..285c8d8c37 100644
--- a/frontend/src/pages/sys-admin/logs-page/file-update-logs.js
+++ b/frontend/src/pages/sys-admin/logs-page/file-update-logs.js
@@ -16,6 +16,7 @@ import ModalPortal from '../../../components/modal-portal';
 import CommitDetails from '../../../components/dialog/commit-details';
 import LogsExportExcelDialog from '../../../components/dialog/sysadmin-dialog/sysadmin-logs-export-excel-dialog';
 import LogUserSelector from '../../dashboard/log-user-selector';
+import LogRepoSelector from '../../dashboard/log-repo-selector';
 
 dayjs.extend(relativeTime);
 
@@ -176,6 +177,9 @@ class FileUpdateLogs extends Component {
       isExportExcelDialogOpen: false,
       availableUsers: [],
       selectedUsers: [],
+      availableRepos: [],
+      selectedRepos: [],
+      openSelector: null,
     };
     this.initPage = 1;
   }
@@ -196,10 +200,9 @@ class FileUpdateLogs extends Component {
   }
 
   getLogsByPage = (page) => {
-    let { perPage, selectedUsers } = this.state;
+    let { perPage, selectedUsers, selectedRepos } = this.state;
     let emails = selectedUsers.map(user => user.email);
-
-    systemAdminAPI.sysAdminListFileUpdateLogs(page, perPage, emails).then((res) => {
+    systemAdminAPI.sysAdminListFileUpdateLogs(page, perPage, emails, selectedRepos).then((res) => {
       this.setState({
         logList: res.data.file_update_log_list,
         loading: false,
@@ -246,8 +249,70 @@ class FileUpdateLogs extends Component {
     });
   };
 
+  getAvailableUsers = () => {
+    systemAdminAPI.sysAdminListUsers().then((res) => {
+      this.setState({
+        availableUsers: res.data.data
+      });
+    }).catch((error) => {
+      this.setState({
+        errorMsg: Utils.getErrorMsg(error, true)
+      });
+    });
+  };
+
+  getAvailableRepos = () => {
+    systemAdminAPI.sysAdminListRepos().then((res) => {
+      this.setState({
+        availableRepos: res.data.repos
+      });
+    }).catch((error) => {
+      this.setState({
+        errorMsg: Utils.getErrorMsg(error, true)
+      });
+    });
+  };
+
+  handleSelectorToggle = (selectorType) => {
+    const { openSelector } = this.state;
+    const wasOpen = openSelector === selectorType;
+
+    this.setState({
+      openSelector: wasOpen ? null : selectorType
+    }, () => {
+      if (wasOpen) {
+        this.getLogsByPage(1);
+      }
+    });
+  };
+
+  handleRepoFilter = (repo, shouldFetchData = true) => {
+    const { selectedRepos } = this.state;
+    let newSelectedRepos;
+
+    if (repo === null) {
+      newSelectedRepos = selectedRepos;
+    } else {
+      const isSelected = selectedRepos.find(item => item.id === repo.id);
+      if (isSelected) {
+        newSelectedRepos = selectedRepos.filter(item => item.id !== repo.id);
+      } else {
+        newSelectedRepos = [...selectedRepos, repo];
+      }
+    }
+
+    this.setState({
+      selectedRepos: newSelectedRepos,
+      currentPage: 1
+    }, () => {
+      if (shouldFetchData) {
+        this.getLogsByPage(1);
+      }
+    });
+  };
+
   render() {
-    let { logList, currentPage, perPage, hasNextPage, isExportExcelDialogOpen, availableUsers, selectedUsers } = this.state;
+    let { logList, currentPage, perPage, hasNextPage, isExportExcelDialogOpen, availableUsers, selectedUsers, availableRepos, selectedRepos } = this.state;
     return (
       <Fragment>
         <MainPanelTopbar {...this.props}>
@@ -258,12 +323,23 @@ class FileUpdateLogs extends Component {
             <LogsNav currentItem="fileUpdateLogs" />
             <div className="cur-view-content">
               <Fragment>
-                <LogUserSelector
-                  label={gettext('User')}
-                  items={availableUsers}
-                  selectedItems={selectedUsers}
-                  onSelect={this.handleUserFilter}
-                />
+                <div className="d-flex align-items-center mb-2">
+                  <LogUserSelector
+                    items={availableUsers}
+                    selectedItems={selectedUsers}
+                    onSelect={this.handleUserFilter}
+                    isOpen={this.state.openSelector === 'user'}
+                    onToggle={() => this.handleSelectorToggle('user')}
+                  />
+                  <div className="mx-3"></div>
+                  <LogRepoSelector
+                    items={availableRepos}
+                    selectedItems={selectedRepos}
+                    onSelect={this.handleRepoFilter}
+                    isOpen={this.state.openSelector === 'repo'}
+                    onToggle={() => this.handleSelectorToggle('repo')}
+                  />
+                </div>
                 <Content
                   loading={this.state.loading}
                   errorMsg={this.state.errorMsg}
diff --git a/frontend/src/pages/sys-admin/logs-page/share-permission-logs.js b/frontend/src/pages/sys-admin/logs-page/share-permission-logs.js
index 0527e6748f..859983c52b 100644
--- a/frontend/src/pages/sys-admin/logs-page/share-permission-logs.js
+++ b/frontend/src/pages/sys-admin/logs-page/share-permission-logs.js
@@ -16,6 +16,7 @@ import MainPanelTopbar from '../main-panel-topbar';
 import UserLink from '../user-link';
 import LogsNav from './logs-nav';
 import LogUserSelector from '../../dashboard/log-user-selector';
+import LogRepoSelector from '../../dashboard/log-repo-selector';
 
 dayjs.extend(relativeTime);
 
@@ -154,6 +155,9 @@ class SharePermissionLogs extends Component {
       isExportExcelDialogOpen: false,
       availableUsers: [],
       selectedUsers: [],
+      availableRepos: [],
+      selectedRepos: [],
+      openSelector: null,
     };
     this.initPage = 1;
   }
@@ -174,9 +178,9 @@ class SharePermissionLogs extends Component {
   }
 
   getLogsByPage = (page) => {
-    let { perPage, selectedUsers } = this.state;
+    let { perPage, selectedUsers, selectedRepos } = this.state;
     let emails = selectedUsers.map(user => user.email);
-    systemAdminAPI.sysAdminListSharePermissionLogs(page, perPage, emails).then((res) => {
+    systemAdminAPI.sysAdminListSharePermissionLogs(page, perPage, emails, selectedRepos).then((res) => {
       this.setState({
         logList: res.data.share_permission_log_list,
         loading: false,
@@ -222,8 +226,70 @@ class SharePermissionLogs extends Component {
     });
   };
 
+  getAvailableUsers = () => {
+    systemAdminAPI.sysAdminListUsers().then((res) => {
+      this.setState({
+        availableUsers: res.data.data
+      });
+    }).catch((error) => {
+      this.setState({
+        errorMsg: Utils.getErrorMsg(error, true)
+      });
+    });
+  };
+
+  getAvailableRepos = () => {
+    systemAdminAPI.sysAdminListRepos().then((res) => {
+      this.setState({
+        availableRepos: res.data.repos
+      });
+    }).catch((error) => {
+      this.setState({
+        errorMsg: Utils.getErrorMsg(error, true)
+      });
+    });
+  };
+
+  handleSelectorToggle = (selectorType) => {
+    const { openSelector } = this.state;
+    const wasOpen = openSelector === selectorType;
+
+    this.setState({
+      openSelector: wasOpen ? null : selectorType
+    }, () => {
+      if (wasOpen) {
+        this.getLogsByPage(1);
+      }
+    });
+  };
+
+  handleRepoFilter = (repo, shouldFetchData = true) => {
+    const { selectedRepos } = this.state;
+    let newSelectedRepos;
+
+    if (repo === null) {
+      newSelectedRepos = selectedRepos;
+    } else {
+      const isSelected = selectedRepos.find(item => item.id === repo.id);
+      if (isSelected) {
+        newSelectedRepos = selectedRepos.filter(item => item.id !== repo.id);
+      } else {
+        newSelectedRepos = [...selectedRepos, repo];
+      }
+    }
+
+    this.setState({
+      selectedRepos: newSelectedRepos,
+      currentPage: 1
+    }, () => {
+      if (shouldFetchData) {
+        this.getLogsByPage(1);
+      }
+    });
+  };
+
   render() {
-    let { logList, currentPage, perPage, hasNextPage, isExportExcelDialogOpen, availableUsers, selectedUsers } = this.state;
+    let { logList, currentPage, perPage, hasNextPage, isExportExcelDialogOpen, availableUsers, selectedUsers, availableRepos, selectedRepos } = this.state;
     return (
       <Fragment>
         <MainPanelTopbar {...this.props}>
@@ -234,12 +300,23 @@ class SharePermissionLogs extends Component {
             <LogsNav currentItem="sharePermissionLogs" />
             <div className="cur-view-content">
               <Fragment>
-                <LogUserSelector
-                  label={gettext('User')}
-                  items={availableUsers}
-                  selectedItems={selectedUsers}
-                  onSelect={this.handleUserFilter}
-                />
+                <div className="d-flex align-items-center mb-2">
+                  <LogUserSelector
+                    items={availableUsers}
+                    selectedItems={selectedUsers} 
+                    onSelect={this.handleUserFilter}
+                    isOpen={this.state.openSelector === 'user'}
+                    onToggle={() => this.handleSelectorToggle('user')}
+                  />
+                  <div className="mx-3"></div>
+                  <LogRepoSelector
+                    items={availableRepos}
+                    selectedItems={selectedRepos}
+                    onSelect={this.handleRepoFilter}
+                    isOpen={this.state.openSelector === 'repo'}
+                    onToggle={() => this.handleSelectorToggle('repo')}
+                  />
+                </div>
                 <Content
                   loading={this.state.loading}
                   errorMsg={this.state.errorMsg}
diff --git a/frontend/src/utils/system-admin-api.js b/frontend/src/utils/system-admin-api.js
index ea36c9cda8..fc3eb08cec 100644
--- a/frontend/src/utils/system-admin-api.js
+++ b/frontend/src/utils/system-admin-api.js
@@ -707,7 +707,7 @@ class SystemAdminAPI {
     return this.req.get(url, { params: params });
   }
 
-  sysAdminListFileUpdateLogs(page, perPage, emails, repoID) {
+  sysAdminListFileUpdateLogs(page, perPage, emails, repos) {
     const url = this.server + '/api/v2.1/admin/logs/file-update-logs/';
     let params = {
       page: page,
@@ -716,13 +716,13 @@ class SystemAdminAPI {
     if (emails && emails.length) {
       params.emails = emails.join(',');
     }
-    if (repoID != undefined) {
-      params.repo_id = repoID;
+    if (repos && repos.length) {
+      params.repos = repos.map(repo => repo.id).join(',');
     }
     return this.req.get(url, { params: params });
   }
 
-  sysAdminListSharePermissionLogs(page, perPage, emails, repoID) {
+  sysAdminListSharePermissionLogs(page, perPage, emails, repos) {
     const url = this.server + '/api/v2.1/admin/logs/share-permission-logs/';
     let params = {
       page: page,
@@ -731,8 +731,8 @@ class SystemAdminAPI {
     if (emails && emails.length) {
       params.emails = emails.join(',');
     }
-    if (repoID != undefined) {
-      params.repo_id = repoID;
+    if (repos && repos.length) {
+      params.repos = repos.map(repo => repo.id).join(',');
     }
     return this.req.get(url, { params: params });
   }