Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
C
ce-deploy-ui
Manage
Activity
Members
Labels
Plan
Jira
Code
Merge requests
1
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Locked files
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Package Registry
Container Registry
Operate
Environments
Terraform modules
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Code review analytics
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
ccce
dev
ce-deploy-ui
Merge requests
!16
Deployment details: layout update
Code
Review changes
Check out branch
Download
Patches
Plain diff
Merged
Deployment details: layout update
deployment-details
into
develop
Overview
0
Commits
1
Pipelines
1
Changes
2
Merged
Zoltan Runyo
requested to merge
deployment-details
into
develop
3 years ago
Overview
0
Commits
1
Pipelines
1
Changes
2
Expand
New Layout for deployment details
👍
0
👎
0
Merge request reports
Compare
develop
develop (base)
and
latest version
latest version
640700be
1 commit,
3 years ago
2 files
+
60
−
101
Inline
Compare changes
Side-by-side
Inline
Show whitespace changes
Show one file at a time
Files
2
Search (e.g. *.vue) (Ctrl+P)
src/components/deployments/DeploymentDetails.js
+
53
−
85
Options
import
React
from
'
react
'
;
import
{
TextField
,
Grid
,
Typography
,
Box
,
Button
}
from
'
@material-ui/core
'
;
import
{
TextField
,
Grid
,
Typography
,
Box
,
Button
,
Card
,
CardContent
,
CardActions
}
from
'
@material-ui/core
'
;
import
{
makeStyles
,
createMuiTheme
}
from
'
@material-ui/core/styles
'
;
import
{
deploymentStatusColors
}
from
"
./DeploymentsTable
"
import
{
DeploymentStepper
}
from
"
./DeploymentStepper
"
import
{
KeyValueTable
}
from
"
../common/KeyValueTable/KeyValueTable
"
;
import
{
SimpleAccordion
}
from
"
../common/Accordion/StandardAccordion
"
;
const
useStyles
=
makeStyles
({
root
:
{
width
:
'
100%
'
},
paper
:
{
padding
:
"
1%
"
},
stepperContainer
:
{
width
:
"
100%
"
,
maxWidth
:
950
,
overflow
:
"
auto
"
,
actions
:
{
justifyContent
:
'
flex-end
'
,
},
});
export
function
DeploymentDetails
({
deployment
,
onDeploymentStart
,
startButtonDisabled
})
{
deployment
=
{...
deployment
};
const
deploymentDetails
=
{
version
:
deployment
.
iocVersion
,
host
:
deployment
.
host
,
repository
:
deployment
.
git
,
startTime
:
deployment
.
startDate
.
toLocaleString
(),
duration
:
deployment
.
duration
+
'
s
'
,
};
const
theme
=
createMuiTheme
();
const
classes
=
useStyles
(
theme
);
return
(
<
Grid
container
spacing
=
{
1
}
>
<
Grid
item
xs
=
{
12
}
md
=
{
10
}
>
<
Typography
variant
=
"
h4
"
component
=
"
h3
"
color
=
"
textPrimary
"
gutterBottom
>
{
deployment
.
iocName
}
<
/Typography
>
<
/Grid
>
{
deployment
.
status
!==
"
initialized
"
&&
<
Grid
item
xs
=
{
6
}
md
=
{
2
}
>
<
Box
bgcolor
=
{
deploymentStatusColors
[
deployment
.
status
]}
color
=
"
primary.contrastText
"
p
=
{
2
}
borderRadius
=
{
10
}
>
<
Grid
container
justify
=
"
center
"
>
<
Typography
variant
=
"
body2
"
component
=
"
p
"
>
{
deployment
.
status
.
toUpperCase
()}
<
/Typography
>
<
Grid
item
xs
=
{
12
}
md
=
{
12
}
>
<
SimpleAccordion
summary
=
{
<
Grid
container
spacing
=
{
1
}
>
<
Grid
item
xs
=
{
12
}
md
=
{
10
}
>
<
Typography
variant
=
"
h4
"
component
=
"
h3
"
color
=
"
textPrimary
"
gutterBottom
>
{
deployment
.
iocName
}
<
/Typography
>
<
/Grid
>
{
deployment
.
status
!==
"
initialized
"
&&
<
Grid
item
xs
=
{
6
}
md
=
{
2
}
>
<
Box
bgcolor
=
{
deploymentStatusColors
[
deployment
.
status
]}
color
=
"
primary.contrastText
"
p
=
{
2
}
borderRadius
=
{
10
}
>
<
Grid
container
justify
=
"
center
"
>
<
Typography
variant
=
"
body2
"
component
=
"
p
"
>
{
deployment
.
status
.
toUpperCase
()}
<
/Typography
>
<
/Grid
>
<
/Box
>
<
/Grid
>
}
<
/Grid
>
<
/Box
>
<
/Grid
>
}
<
Grid
item
xs
=
{
12
}
md
=
{
12
}
>
<
Typography
className
=
{
classes
.
title
}
variant
=
"
h5
"
component
=
"
h2
"
color
=
"
textPrimary
"
gutterBottom
>
Version
:
{
deployment
.
iocVersion
}
<
/Typography
>
<
/Grid
>
<
Grid
item
xs
=
{
3
}
md
=
{
1
}
>
<
Typography
variant
=
"
body2
"
component
=
"
p
"
color
=
"
textPrimary
"
>
Host
:
<
/Typography
>
<
/Grid
>
<
Grid
item
xs
=
{
9
}
md
=
{
11
}
>
<
Typography
variant
=
"
body2
"
component
=
"
p
"
color
=
"
textSecondary
"
>
{
deployment
.
host
}
<
/Typography
>
<
/Grid
>
<
Grid
item
xs
=
{
3
}
md
=
{
1
}
>
<
Typography
variant
=
"
body2
"
component
=
"
p
"
color
=
"
textPrimary
"
>
Git
repository
:
<
/Typography
>
<
/Grid
>
<
Grid
item
xs
=
{
9
}
md
=
{
11
}
>
<
Typography
variant
=
"
body2
"
component
=
"
p
"
color
=
"
textSecondary
"
>
{
deployment
.
git
}
<
/Typography
>
<
/Grid
>
<
Grid
item
xs
=
{
3
}
md
=
{
1
}
>
<
Typography
variant
=
"
body2
"
component
=
"
p
"
color
=
"
textPrimary
"
>
Start
time
:
<
/Typography
>
<
/Grid
>
<
Grid
item
xs
=
{
9
}
md
=
{
11
}
>
<
Typography
variant
=
"
body2
"
component
=
"
p
"
color
=
"
textSecondary
"
>
{
deployment
.
startDate
.
toLocaleString
()}
<
/Typography
>
<
/Grid
>
<
Grid
item
xs
=
{
3
}
md
=
{
1
}
>
<
Typography
variant
=
"
body2
"
component
=
"
p
"
color
=
"
textPrimary
"
>
Duration
:
<
/Typography
>
<
/Grid
>
<
Grid
item
xs
=
{
9
}
md
=
{
11
}
>
<
Typography
variant
=
"
body2
"
component
=
"
p
"
color
=
"
textSecondary
"
>
{
deployment
.
duration
}
s
<
/Typography
>
<
/Grid
>
}
>
<
KeyValueTable
obj
=
{
deploymentDetails
}
variant
=
"
overline
"
/>
<
/SimpleAccordion
>
<
/Grid
>
<
Grid
item
xs
=
{
12
}
md
=
{
12
}
>
<
Card
className
=
{
classes
.
root
}
>
<
CardContent
>
<
div
className
=
{
classes
.
stepperContainer
}
>
<
DeploymentStepper
activeStep
=
{
deployment
.
activeStep
}
deploymentStatus
=
{
deployment
.
status
}
/
>
<
/div
>
<
/CardContent
>
{
deployment
.
manual
&&
<
Grid
item
xs
=
{
9
}
md
=
{
11
}
>
<
CardActions
className
=
{
classes
.
actions
}
>
<
Button
variant
=
"
contained
"
color
=
"
primary
"
onClick
=
{
onDeploymentStart
}
disabled
=
{
startButtonDisabled
}
>
Start
deployment
<
/Button
>
<
/
Grid
>
<
/
CardActions
>
}
<
Grid
item
xs
=
{
12
}
md
=
{
12
}
>
<
div
className
=
{
classes
.
stepperContainer
}
>
<
DeploymentStepper
activeStep
=
{
deployment
.
activeStep
}
deploymentStatus
=
{
deployment
.
status
}
/
>
<
/div
>
<
/Grid
>
<
Grid
item
xs
=
{
12
}
md
=
{
12
}
>
<
Typography
variant
=
"
h6
"
component
=
"
p
"
color
=
"
textPrimary
"
>
Deployment
steps
:
<
/Typography
>
<
/Grid
>
<
Grid
item
xs
=
{
12
}
md
=
{
12
}
>
<
TextField
style
=
{{
marginTop
:
"
20px
"
,
width
:
"
100%
"
}}
<
/Card
>
<
/Grid
>
<
Grid
item
xs
=
{
12
}
md
=
{
12
}
>
<
SimpleAccordion
summary
=
"
Deployment steps
"
defaultExpanded
>
<
TextField
style
=
{{
marginTop
:
"
20px
"
,
width
:
"
100%
"
}}
id
=
"
outlined-multiline-static
"
multiline
disabled
@@ -114,7 +81,8 @@ export function DeploymentDetails({ deployment, onDeploymentStart, startButtonDi
value
=
{
deployment
.
output
.
replaceAll
(
"
;
"
,
"
\n
"
)}
variant
=
"
outlined
"
/>
<
/Grid
>
<
/Grid
>
<
/SimpleAccordion
>
<
/Grid
>
<
/Grid
>
);
}
Loading