GitHub repo list

src/api/handlers/account/github.py

@@ -1,5 +1,6 @@
 import uuid
 import os
+import re
 import requests
 
 from flask import g, request, abort, redirect
@@ -42,7 +43,14 @@ def get_next_page(r):
     n3 = link.find('>;', n2)
     return link[n2:n3]
 
-def get_github_api(url, token):
+def parse_link_header(link):
+    reg = r"<.+?page=(?P<page>\d+)>; rel=\"(?P<direction>prev|next|first|last)\""
+    res = {}
+    for match in re.finditer(reg, link):
+        res[match.group("direction")] = match.group("page")
+    return res
+
+def get_github_api(url, token, raw_result=False):
     headers = {
         "Authorization": "token " + token,
         "User-Agent": "InfraBox"
@@ -51,6 +59,8 @@ def get_github_api(url, token):
 
     # TODO(ib-steffen): allow custom ca bundles
     r = requests.get(url, headers=headers, verify=False)
+    if raw_result:
+        return r
     result = []
     result.extend(r.json())
 
@@ -126,6 +136,49 @@ def get(self):
 
         return github_repos
 
+@api.route('/api/v1/github/paginated_repos', doc=False)
+class V2Repos(Resource):
+
+    def get(self):
+        user_id = g.token['user']['id']
+
+        user = g.db.execute_one_dict('''
+            SELECT github_api_token
+            FROM "user"
+            WHERE id = %s
+        ''', [user_id])
+
+        if not user:
+            abort(404)
+
+        token = user['github_api_token']
+
+        page = request.args.get('page', 1)
+        per_page = request.args.get('per_page', 50)
+        github_repos_response = get_github_api('/user/repos?visibility=all&page={page}&per_page={per_page}'
+                                               .format(page=page, per_page=per_page),
+                                               token, raw_result=True)
+        github_repos = github_repos_response.json()
+        filtered_repos = []
+        for github_repo in github_repos:
+            filtered_repos.append({
+                "name": github_repo["name"],
+                "owner_login": github_repo["owner"]["login"],
+                "private": github_repo["private"],
+                "open_issues_count": github_repo["open_issues_count"],
+                "forks_count": github_repo["forks_count"],
+            })
+
+        nav = {}
+        for direction, page in parse_link_header(github_repos_response.headers.get('Link', "")).items():
+            nav[direction] = page
+        result = {
+            "nav": nav,
+            "items": filtered_repos
+        }
+        return result
+
+
 @api.route('/github/auth', doc=False)
 class Auth(Resource):
 

src/dashboard-client/src/components/AddProject.vue

@@ -9,7 +9,7 @@
                         </h3>
                     </md-card-header-text>
             </md-card-header>
-        <md-stepper @completed="addProject">
+        <md-stepper @completed="addProject" @change="stepperChange">
             <md-theme md-name="running">
                 <md-step :md-editable="true">
                     <h3>Select project type</h3>
@@ -56,9 +56,9 @@
                                     </md-table-row>
                                 </md-table-header>
                                 <md-table-body>
-                                    <md-table-row v-for="(r, index) of $store.state.user.githubRepos" :key="r.id">
+                                    <md-table-row v-for="(r, index) of $store.state.user.githubRepos.items" :key="r.id">
                                         <md-table-cell class="md-body-2">{{ r.name }}</md-table-cell>
-                                        <md-table-cell>{{ r.owner.login }}</md-table-cell>
+                                        <md-table-cell>{{ r.owner_login }}</md-table-cell>
                                         <md-table-cell>
                                             <i v-if="r.private" class="fa fa-fw fa-home fa-2x"></i>
                                             <i v-if="!r.private" class="fa fa-fw fa-globe fa-2x"></i>
@@ -72,6 +72,13 @@
                                     </md-table-row>
                                 </md-table-body>
                             </md-table>
+                            <ib-api-table-pagination
+                                :md-page-size.sync="size"
+                                :page="page"
+                                md-label="Projects"
+                                :nav-data="$store.state.user.githubRepos.nav"
+                                @pagination="onPagination"
+                            />
                         </md-table-card>
                     </div>
                 </md-step>
@@ -99,22 +106,25 @@
 import ProjectService from '../services/ProjectService'
 import UserService from '../services/UserService'
 import store from '../store'
+import ApiTablePagination from './utils/ApiTablePagination'
 
 export default {
     name: 'AddProject',
     store,
+    components: {
+        'ib-api-table-pagination': ApiTablePagination
+    },
     data: () => ({
         projName: '',
         nameValid: false,
         type: 'upload',
         priv: true,
         githubRepo: null,
         invalidMessage: 'Name required',
-        selectRepo: false
+        selectRepo: false,
+        page: 1,
+        size: 50
     }),
-    created () {
-        UserService.loadRepos()
-    },
     watch: {
         projName () {
             if (this.projName.length < 3) {
@@ -141,11 +151,20 @@ export default {
 
             ProjectService.addProject(this.projName, this.priv, this.type, repoName)
         },
+        stepperChange (value) {
+            if (value === 1 && this.type === 'github') {
+                UserService.loadRepos(1, this.size)
+            }
+        },
         selectGithubRepo (r) {
             this.githubRepo = r
         },
         connectGithubAccount () {
             window.location.href = '/github/auth/connect'
+        },
+        onPagination (page) {
+            UserService.loadRepos(page, this.size)
+            this.page = parseInt(page)
         }
     }
 }

src/dashboard-client/src/components/utils/ApiTablePagination.vue

@@ -0,0 +1,89 @@
+<template>
+    <div class="md-table-pagination">
+        <template v-if="mdPageOptions !== false">
+            <span class="md-table-pagination-label">{{ mdLabel }}</span>
+            <md-select v-model="currentPageSize" md-dense md-class="md-pagination-select" @change="$emit('update:mdPageSize', currentPageSize)">
+                <md-option v-for="amount in mdPageOptions" :key="amount" :value="amount">{{ amount }}</md-option>
+            </md-select>
+        </template>
+
+        <span>Page {{ currentPage }} {{ mdSeparator }} {{ totalPages }}</span>
+
+        <md-button class="md-icon-button md-table-pagination-previous" @click="goToPrevious()" :disabled="!('prev' in navData)">
+            <md-icon>keyboard_arrow_left</md-icon>
+        </md-button>
+
+        <md-button class="md-icon-button md-table-pagination-next" @click="goToNext()" :disabled="!('next' in navData)">
+            <md-icon>keyboard_arrow_right</md-icon>
+        </md-button>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'ApiTablePagination',
+    props: {
+        mdPageSize: {
+            type: [String, Number],
+            default: 10
+        },
+        mdPageOptions: {
+            type: Array,
+            default: () => [10, 25, 50, 100]
+        },
+        mdPage: {
+            type: Number,
+            default: 1
+        },
+        mdLabel: {
+            type: String,
+            default: 'Rows per page'
+        },
+        mdSeparator: {
+            type: String,
+            default: 'of'
+        },
+        navData: {
+            type: Object,
+            default: () => { return {} }
+        },
+        page: {
+            type: Number,
+            default: 0
+        }
+    },
+    data: () => ({
+        currentPageSize: 0,
+        currentPage: 0,
+        totalPages: 0
+    }),
+    watch: {
+        mdPageSize: {
+            immediate: true,
+            handler (pageSize) {
+                this.currentPageSize = pageSize
+            }
+        },
+        page: {
+            immediate: true,
+            handler (pageNumber) {
+                this.currentPage = pageNumber
+                if ('last' in this.navData) {
+                    this.totalPages = this.navData.last
+                }
+            }
+        }
+    },
+    methods: {
+        goToPrevious () {
+            this.$emit('pagination', this.navData.prev)
+        },
+        goToNext () {
+            this.$emit('pagination', this.navData.next)
+        }
+    },
+    created () {
+        this.currentPageSize = this.mdPageSize
+    }
+}
+</script>

src/dashboard-client/src/services/UserService.js

@@ -70,9 +70,9 @@ class UserService {
             })
     }
 
-    loadRepos () {
+    loadRepos (page, perPage) {
         if (store.state.user.hasGithubAccount() && store.state.settings.INFRABOX_GITHUB_ENABLED) {
-            return NewAPIService.get('github/repos/')
+            return NewAPIService.get('github/paginated_repos?page=' + page + '&per_page=' + perPage)
                 .then((d) => {
                     if (d) {
                         store.commit('setGithubRepos', d)

src/openpolicyagent/policies/github.rego

@@ -19,6 +19,12 @@ allow {
     api.token.type = "user"
 }
 
+allow {
+    api.method = "GET"
+    api.path = ["api", "v1", "github", "paginated_repos"]
+    api.token.type = "user"
+}
+
 allow {
     api.method = "GET"
     api.path = ["github", "auth"]