Merge pull request treasure-data#1506 from seiyab/paginate-sessions

implemented sessions paginatin for workflow page / projects page
darcy168 · Jun 1, 2021 · 258db26 · 258db26
2 parents 3617430 + 6c083bd
commit 258db26
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 4 deletions.
diff --git a/digdag-ui/console.jsx b/digdag-ui/console.jsx
@@ -716,18 +716,67 @@ class StatusFilter extends React.Component {
   }
 }
 
+class SessionsPagination extends React.Component {
+  props: {
+    isOldest: boolean,
+    onClickLatest: () => void,
+    onClickOlder: () => void,
+  };
+
+  render () {
+    return (
+      <div className='d-flex justify-content-center'>
+        <button type='button' className='btn btn-outline-secondary' onClick={this.props.onClickLatest}>
+          Latest
+        </button>
+        <button type='button' className='btn btn-outline-secondary ml-2' onClick={this.props.onClickOlder} disabled={this.props.isOldest}>
+          Older
+        </button>
+      </div>
+    )
+  }
+}
+
 class SessionsView extends React.Component {
+  static pageSize = 100;
+
   state = {
-    sessions: []
+    sessions: [],
+    lastId: null,
+    isOldest: false
   };
 
   componentDidMount () {
     this.fetch()
   }
 
+  componentDidUpdate (_, prevState) {
+    if (this.state.lastId !== prevState.lastId) {
+      this.fetch()
+    }
+  }
+
   fetch () {
-    model().fetchSessions().then(({ sessions }) => {
+    model().fetchSessions(SessionsView.pageSize, this.state.lastId).then(({ sessions }) => {
       this.setState({ sessions })
+      const last = _.last(sessions)
+      if (!last) return []
+      return model().fetchSessions(1, last.id).then(olderOne => olderOne.sessions)
+    }).then((olderOne) => {
+      this.setState({ isOldest: olderOne.length === 0 })
+    })
+  }
+
+  showLatest () {
+    this.setState({ lastId: null })
+  }
+
+  showOlder () {
+    this.setState((prevState) => {
+      if (prevState.isOldest || prevState.sessions.length < 1) return
+      return {
+        lastId: _.last(prevState.sessions).id
+      }
     })
   }
 
@@ -738,6 +787,7 @@ class SessionsView extends React.Component {
         <StatusFilter sessions={this.state.sessions} >
           <SessionListView />
         </StatusFilter>
+        <SessionsPagination isOldest={this.state.isOldest} onClickLatest={(page) => this.showLatest()} onClickOlder={() => this.showOlder()} />
         <ReactInterval timeout={refreshIntervalMillis} enabled={Boolean(true)} callback={() => this.fetch()} />
       </div>
     )

diff --git a/digdag-ui/model.js b/digdag-ui/model.js
@@ -270,8 +270,11 @@ export class Model {
     return this.get(`attempts`)
   }
 
-  fetchSessions (): Promise<SessionCollection> {
-    return this.get(`sessions`)
+  fetchSessions (pageSize: number, lastId: ?number): Promise<SessionCollection> {
+    if (lastId) {
+      return this.get(`sessions?page_size=${pageSize}&last_id=${lastId}`)
+    }
+    return this.get(`sessions?page_size=${pageSize}`)
   }
 
   fetchAttempt (attemptId: string): Promise<Attempt> {