All files / modules/75-cd/components/CDStageDetails CDStageDetails.tsx

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
 
 
 
 
 
 
 
1x
1x
1x
1x
 
1x
 
1x
 
1x
 
1x
1x
 
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 from 'react'
import { get } from 'lodash-es'
import { Position } from '@blueprintjs/core'
import { Popover } from '@wings-software/uicore'
 
import { String as StrTemplate } from 'framework/strings'
import type { StageDetailProps } from '@pipeline/factories/ExecutionFactory/types'
import { ServicePopoverCard } from '@cd/components/ServicePopoverCard/ServicePopoverCard'
 
import css from './CDStageDetails.module.scss'
 
export function CDStageDetails(props: StageDetailProps): React.ReactElement {
  const { stage } = props
 
  return (
    <div className={css.container}>
      <div className={css.main}>
        <div>
          <StrTemplate className={css.title} tagName="div" stringID="serviceOrServices" />
          <ul className={css.values}>
            <li>
              <Popover
                wrapperTagName="div"
                targetTagName="div"
                interactionKind="hover"
                position={Position.BOTTOM_RIGHT}
                className={css.serviceWrapper}
              >
                <div className={css.serviceName}>{get(stage, 'moduleInfo.cd.serviceInfo.displayName', null)}</div>
                <ServicePopoverCard service={get(stage, 'moduleInfo.cd.serviceInfo')} />
              </Popover>
            </li>
          </ul>
        </div>
        <div>
          <StrTemplate className={css.title} tagName="div" stringID="environmentOrEnvironments" />
          <ul className={css.values}>
            <li>{get(stage, 'moduleInfo.cd.infraExecutionSummary.name', null)}</li>
          </ul>
        </div>
      </div>
    </div>
  )
}