All files / modules/45-projects-orgs/pages/LandingDashboardPage LandingDashboardPage.tsx

97.44% Statements 38/39
63.24% Branches 43/68
100% Functions 4/4
97.44% Lines 38/39

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127              1x 1x                   1x 1x 1x 1x         1x 1x 1x 1x   1x 1x 1x 1x 1x 1x   1x 1x   1x 6x 5x 5x 5x 5x   5x 5x 5x               5x 1x               5x 1x 4x     4x 4x                 1x                                     2x 2x                                             1x  
/*
 * Copyright 2021 Harness Inc. All rights reserved.
 * Use of this source code is governed by the PolyForm Shield 1.0.0 license
 * that can be found in the licenses directory at the root of this repository, also available at
 * https://polyformproject.org/wp-content/uploads/2020/06/PolyForm-Shield-1.0.0.txt.
 */
 
import React, { useState } from 'react'
import {
  Button,
  ButtonVariation,
  Layout,
  PageHeader,
  PageBody,
  PageSpinner,
  Text,
  PageError
} from '@wings-software/uicore'
import { useParams } from 'react-router-dom'
import { Color } from '@harness/design-system'
import LandingDashboardFactory from '@common/factories/LandingDashboardFactory'
import {
  LandingDashboardContextProvider,
  TimeRangeToDays,
  useLandingDashboardContext
} from '@common/factories/LandingDashboardContext'
import { ModuleName } from 'framework/types/ModuleName'
import { useAppStore } from 'framework/AppStore/AppStoreContext'
import { useStrings } from 'framework/strings'
import LandingDashboardWidgetWrapper from '@projects-orgs/components/LandingDashboardWidgetWrapper/LandingDashboardWidgetWrapper'
import type { AccountPathProps } from '@common/interfaces/RouteInterfaces'
import { useGetCounts } from 'services/dashboard-service'
import LandingDashboardSummaryWidget from '@projects-orgs/components/LandingDashboardSummaryWidget/LandingDashboardSummaryWidget'
import TimeRangeSelect from '@projects-orgs/components/TimeRangeSelect/TimeRangeSelect'
import { isCommunityPlan, isOnPrem } from '@common/utils/utils'
import LandingDashboardWelcomeView, { View } from './LandingDashboardWelcomeView'
import css from './LandingDashboardPage.module.scss'
 
const modules: Array<ModuleName> = [ModuleName.CD]
const defaultView = isCommunityPlan() || isOnPrem() ? View.Welcome : View.Dashboard
 
const LandingDashboardPage: React.FC = () => {
  const { accountId } = useParams<AccountPathProps>()
  const { currentUserInfo } = useAppStore()
  const { getString } = useStrings()
  const [view, setView] = useState<View>(defaultView)
  const name = currentUserInfo.name || currentUserInfo.email
 
  const { selectedTimeRange } = useLandingDashboardContext()
  const [range] = useState([Date.now() - TimeRangeToDays[selectedTimeRange] * 24 * 60 * 60000, Date.now()])
  const { data, loading, error, refetch } = useGetCounts({
    queryParams: {
      accountIdentifier: accountId,
      startTime: range[0],
      endTime: range[1]
    }
  })
 
  const retry = () =>
    refetch({
      queryParams: {
        accountIdentifier: accountId,
        startTime: Date.now() - TimeRangeToDays[selectedTimeRange] * 24 * 60 * 60000,
        endTime: Date.now()
      }
    })
 
  if (View.Welcome === view) {
    return <LandingDashboardWelcomeView setView={setView} />
  } else Iif (loading) {
    return <PageSpinner />
  } else {
    const projetCount = data?.data?.response?.projectsCountDetail?.count
    return data && projetCount ? (
      <LandingDashboardContextProvider>
        <PageHeader
          title={getString('projectsOrgs.landingDashboard.dashboardTitle', {
            name
          })}
          toolbar={
            <Button
              onClick={() => {
                setView(View.Welcome)
              }}
              text={getString('common.welcome')}
              variation={ButtonVariation.LINK}
            />
          }
        />
        <PageBody>
          <Layout.Vertical spacing="large" padding="xlarge">
            <Layout.Horizontal flex={{ justifyContent: 'space-between' }}>
              <Text font={{ size: 'medium', weight: 'bold' }} color={Color.BLACK}>
                {getString('projectsOrgs.landingDashboard.atAGlance')}
              </Text>
              <TimeRangeSelect className={css.timeRangeSelect} />
            </Layout.Horizontal>
            <LandingDashboardSummaryWidget glanceCardData={data} />
 
            <Layout.Vertical spacing="large">
              {modules.map(moduleName => {
                const moduleHandler = LandingDashboardFactory.getModuleDashboardHandler(moduleName)
                return moduleHandler ? (
                  <LandingDashboardWidgetWrapper
                    icon={moduleHandler?.icon}
                    title={moduleHandler?.label}
                    iconProps={moduleHandler?.iconProps}
                    key={moduleName}
                  >
                    {moduleHandler.moduleDashboardRenderer?.()}
                  </LandingDashboardWidgetWrapper>
                ) : null
              })}
            </Layout.Vertical>
          </Layout.Vertical>
        </PageBody>
      </LandingDashboardContextProvider>
    ) : (error || data?.data?.executionStatus) !== 'SUCCESS' ? (
      <PageError message={data?.data?.executionMessage} onClick={retry} />
    ) : (
      <LandingDashboardWelcomeView setView={setView} />
    )
  }
}
 
export default LandingDashboardPage