Reporting initial work

src/api/projectReports.js

@@ -42,3 +42,13 @@ export function getProjectSummary(projectId) {
     }
   })
 }
+
+/**
+ * Gets signed URL for embeding the requested report.
+ * @param {*} projectId id of the project for which report is to be fecthed
+ * @param {*} reportName unique name of the report
+ */
+export function getProjectReportUrl(projectId, reportName) {
+  return axios.get(`${PROJECTS_API_URL}/v5/projects/${projectId}/reports/embed?reportName=${reportName}`)
+    .then(resp => resp.data)
+}

src/config/constants.js

@@ -423,6 +423,7 @@ export const LOAD_PROJECT_SUMMARY         = 'LOAD_PROJECT_SUMMARY'
 export const LOAD_PROJECT_SUMMARY_PENDING = 'LOAD_PROJECT_SUMMARY_PENDING'
 export const LOAD_PROJECT_SUMMARY_SUCCESS = 'LOAD_PROJECT_SUMMARY_SUCCESS'
 export const LOAD_PROJECT_SUMMARY_FAILURE = 'LOAD_PROJECT_SUMMARY_FAILURE'
+export const REFRESH_LOOKER_SESSION = 'REFRESH_LOOKER_SESSION'
 
 // Product attachments
 export const ADD_PRODUCT_ATTACHMENT         = 'ADD_PRODUCT_ATTACHMENT'
@@ -956,3 +957,15 @@ export const EVENT_TYPE = {
 export const PROJECT_ASSETS_SHARED_WITH_ALL_MEMBERS = 'All Project Members'
 export const PROJECT_ASSETS_SHARED_WITH_TOPCODER_MEMBERS = 'Only Topcoder Members'
 export const PROJECT_ASSETS_SHARED_WITH_ADMIN = 'Only Admins'
+
+
+
+/**
+ * REPORTS
+ */
+export const PROJECT_REPORTS = {
+  PROJECT_SUMMARY : 'summary',
+  TAAS_MEMBERS : 'taas_members',
+}
+
+export const REPORT_SESSION_LENGTH = 600

src/projects/actions/projectReports.js

@@ -1,8 +1,10 @@
 import {
-  LOAD_PROJECT_SUMMARY
+  LOAD_PROJECT_SUMMARY,
+  REFRESH_LOOKER_SESSION,
 } from '../../config/constants'
 import {
-  getProjectSummary
+  getProjectSummary,
+  getProjectReportUrl,
 } from '../../api/projectReports'
 
 export function loadProjectSummary(projectId) {
@@ -14,3 +16,31 @@ export function loadProjectSummary(projectId) {
     })
   }
 }
+
+/**
+ * Redux action to start fetching the signed URL for embeding the given report
+ * @param {*} projectId id of the project
+ * @param {*} reportName unique name of the report
+ */
+export function loadProjectReportsUrls(projectId, reportName) {
+  return (dispatch) => {
+    return dispatch({
+      type: LOAD_PROJECT_SUMMARY,
+      payload: getProjectReportUrl(projectId, reportName),
+      meta: { projectId }
+    })
+  }
+}
+
+/**
+ * Redux action to refresh the looker session. It is aimed to just indicate that there is need
+ * of refreshing the token. It does not do any thing itself. It is upto the state listner to react.
+ */
+export function refreshLookerSession() {
+  return (dispatch) => {
+    return dispatch({
+      type: REFRESH_LOOKER_SESSION,
+      payload: { lookerSessionExpired: true }
+    })
+  }
+}

src/projects/detail/containers/ProjectSummaryReportContainer.jsx

@@ -9,34 +9,66 @@ import {
   SCREEN_BREAKPOINT_MD,
   PROJECT_FEED_TYPE_PRIMARY,
   PROJECT_FEED_TYPE_MESSAGES,
+  PROJECT_REPORTS,
+  REPORT_SESSION_LENGTH,
 } from '../../../config/constants'
 import TwoColsLayout from '../../../components/TwoColsLayout'
 import Sticky from '../../../components/Sticky'
 import ProjectInfoContainer from './ProjectInfoContainer'
 import PERMISSIONS from '../../../config/permissions'
 import { checkPermission } from '../../../helpers/permissions'
-import { loadProjectSummary } from '../../actions/projectReports'
+import { loadProjectSummary, loadProjectReportsUrls, refreshLookerSession } from '../../actions/projectReports'
 import spinnerWhileLoading from '../../../components/LoadingSpinner'
-import ProjectSummaryReport from '../components/ProjectSummaryReport'
 
-const EnhancedProjectSummaryReport = spinnerWhileLoading(props => {
-  return props.project && !props.isLoading && props.reportsProjectId === props.project.id
-})(ProjectSummaryReport)
+import './ProjectSummaryReportContainer.scss'
+
+const LookerEmbedReport = (props) => {
+  return (<iframe width="100%" src={props.projectSummaryEmbedUrl} onLoad={props.onLoad} />)
+}
+
+const EnhancedLookerEmbedReport = spinnerWhileLoading(props => {
+  return !props.isLoading
+})(LookerEmbedReport)
+
+let timer
 
 class ProjectSummaryReportContainer extends React.Component {
 
+  constructor(props) {
+    super(props)
+    this.setLookerSessionTimer = this.setLookerSessionTimer.bind(this)
+  }
+
   componentWillUpdate(nextProps) {
-    const nextReportProjectId = _.get(nextProps, 'projectReports.projectId')
+    const nextReportProjectId = _.get(nextProps, 'reportsProjectId')
     const nextProjectId = _.get(nextProps, 'project.id')
-    if(nextProps.project && nextReportProjectId !== nextProjectId) {
-      nextProps.loadProjectSummary(nextProps.project.id)
+    const lookerSessionExpired = !this.props.lookerSessionExpired && nextProps.lookerSessionExpired
+    if(lookerSessionExpired || (nextProjectId && nextReportProjectId !== nextProjectId)) {
+      nextProps.loadProjectReportsUrls(nextProjectId, PROJECT_REPORTS.PROJECT_SUMMARY)
+      this.setLookerSessionTimer()
     }
   }
 
+  setLookerSessionTimer() {
+    console.log('Setting Looker Session Timer')
+    if (timer) {
+      clearTimeout(timer)
+    }
+    const thisRef = this
+    let timeoutDuration = 60*1000
+    if (REPORT_SESSION_LENGTH > 2*60) {
+      timeoutDuration = REPORT_SESSION_LENGTH*1000 - 2*60*1000
+    }
+    // set timeout for raising alert to refresh the token 2 minutes before the session expire
+    timer = setTimeout(() => {
+      console.log('Calling refresh looker session action')
+      thisRef.props.refreshLookerSession()
+    }, (timeoutDuration))
+  }
+
   render() {
     const {
       project,
-      projectReports,
       isSuperUser,
       isManageUser,
       currentMemberRole,
@@ -45,11 +77,10 @@ class ProjectSummaryReportContainer extends React.Component {
       phases,
       productsTimelines,
       phasesTopics,
-      isProcessing,
+      isLoading,
       location,
-      reportsProjectId,
+      projectSummaryEmbedUrl,
     } = this.props
-    const projectSummary = _.get(projectReports, 'projectSummary')
 
     const leftArea = (
       <ProjectInfoContainer
@@ -64,7 +95,7 @@ class ProjectSummaryReportContainer extends React.Component {
         productsTimelines={productsTimelines}
         phasesTopics={phasesTopics}
         onChannelClick={this.onChannelClick}
-        isProjectProcessing={isProcessing}
+        isProjectProcessing={isLoading}
       />
     )
 
@@ -82,29 +113,28 @@ class ProjectSummaryReportContainer extends React.Component {
           </MediaQuery>
         </TwoColsLayout.Sidebar>
         <TwoColsLayout.Content>
-          <EnhancedProjectSummaryReport
-            projectSummary={projectSummary}
-            isLoading={isProcessing}
-            reportsProjectId={reportsProjectId}
-            project={project}
-          />
+          {
+            <EnhancedLookerEmbedReport
+              isLoading={isLoading}
+              projectSummaryEmbedUrl={projectSummaryEmbedUrl}
+              onLoad={this.setLookerSessionTimer}
+            />
+          }
         </TwoColsLayout.Content>
-
       </TwoColsLayout>
     )
   }
 }
 
 ProjectSummaryReportContainer.propTypes = {
   currentMemberRole: PT.string.isRequired,
-  isProcessing: PT.bool.isRequired,
+  isLoading: PT.bool.isRequired,
   isSuperUser: PT.bool.isRequired,
   isManageUser: PT.bool.isRequired,
   project: PT.object.isRequired,
-  projectReports: PT.object.isRequired,
   phases: PT.array.isRequired,
   productsTimelines: PT.object.isRequired,
-  reportsProjectId: PT.number.isRequired,
+  reportsProjectId: PT.number,
 }
 
 const mapStateToProps = ({ projectState, projectTopics, phasesTopics, projectReports }) => {
@@ -118,14 +148,17 @@ const mapStateToProps = ({ projectState, projectTopics, phasesTopics, projectRep
     phases: projectState.phases,
     feeds: allFeed,
     phasesTopics,
-    projectReports,
-    isProcessing: projectReports.isLoading,
+    isLoading: projectReports.isLoading,
     reportsProjectId: projectReports.projectId,
+    lookerSessionExpired: projectReports.lookerSessionExpired,
+    projectSummaryEmbedUrl: projectReports.projectSummaryEmbedUrl,
   }
 }
 
 const mapDispatchToProps = {
   loadProjectSummary,
+  loadProjectReportsUrls,
+  refreshLookerSession,
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(withRouter(ProjectSummaryReportContainer))

src/projects/detail/containers/ProjectSummaryReportContainer.scss

@@ -0,0 +1,3 @@
+iframe {
+    height: calc(100vh - 60px);
+}

src/projects/reducers/projectReports.js

@@ -2,13 +2,16 @@ import {
   LOAD_PROJECT_SUMMARY_PENDING,
   LOAD_PROJECT_SUMMARY_SUCCESS,
   LOAD_PROJECT_SUMMARY_FAILURE,
+  REFRESH_LOOKER_SESSION,
 } from '../../config/constants'
 
 const initialState = {
   isLoading: false,
   error: false,
   projectId: null,
-  projectSummary: null
+  projectSummary: null,
+  projectSummaryEmbedUrl: null,
+  lookerSessionExpired: false,
 }
 
 export const projectReports = function (state=initialState, action) {
@@ -23,11 +26,13 @@ export const projectReports = function (state=initialState, action) {
     })
 
   case LOAD_PROJECT_SUMMARY_SUCCESS:
-    if(payload.projectId === state.projectId) {
+    if(action.meta.projectId === state.projectId) {
       return Object.assign({}, state, {
         isLoading: false,
         error: false,
-        projectSummary: payload
+        projectSummaryEmbedUrl: payload,
+        lookerSessionExpired: false,
+        // projectSummary: payload
       })
     } else {
       return state
@@ -36,10 +41,16 @@ export const projectReports = function (state=initialState, action) {
   case LOAD_PROJECT_SUMMARY_FAILURE: {
     return Object.assign({}, state, {
       isLoading: false,
+      lookerSessionExpired: false,
       error: payload
     })
   }
 
+  case REFRESH_LOOKER_SESSION: {
+    return Object.assign({}, state, {
+      lookerSessionExpired: true
+    })
+  }
 
   default:
     return state