Skip to content

Commit

Permalink
Merge pull request #401 from GluuFederation/admin-ui-issue-399
Browse files Browse the repository at this point in the history 
feat(admin-ui): improved the look of License Details page #399
  • Loading branch information
@duttarnab
duttarnab authored Aug 30, 2022
2 parents f548be9 + 45bc00e commit b4eef0f
Show file tree
Hide file tree
Showing 2 changed files with 133 additions and 143 deletions.
10 changes: 7 additions & 3 deletions admin-ui/app/routes/Apps/Gluu/styles/applicationstyle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ export default {
paddingLeft: '20px',
paddingRight: '30px',
color: 'white',
fontSize:'1.5em',
fontWeight: 'bold'
fontSize: '1.5em',
fontWeight: 'bold',
},
healthDown: {
background: 'rgb(241 35 32)',
Expand All @@ -33,5 +33,9 @@ export default {
minHeight: '70vh',
borderRadius: 24,
padding: 12,
}
},
licensePanel: {
backgroundColor: '#F5F5F5',
float: 'left',
},
}
266 changes: 126 additions & 140 deletions admin-ui/app/routes/License/LicenseDetailsPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,8 @@ import applicationStyle from 'Routes/Apps/Gluu/styles/applicationstyle'
import GluuFormDetailRow from 'Routes/Apps/Gluu/GluuFormDetailRow'
import { LICENSE } from 'Utils/ApiResources'
import { getLicenseDetails } from 'Redux/actions/LicenseDetailsActions'
import {
Card,
CardBody,
Container,
Row,
Col,
} from 'Components'
import {
buildPayload,
} from 'Utils/PermChecker'
import { Card, CardBody, Container, Row, Col } from 'Components'
import { buildPayload } from 'Utils/PermChecker'
import GluuLoader from 'Routes/Apps/Gluu/GluuLoader'
import Alert from '@material-ui/lab/Alert'
import SetTitle from 'Utils/SetTitle'
Expand All @@ -32,146 +24,140 @@ function LicenseDetailsPage({ item, loading, dispatch }) {
}, [])

function formatDate(date) {
if(date == undefined) {
return ''
if (!date) {
return '-'
}
if(date.length > 10) {
if (date.length > 10) {
return date.substring(0, 10)
}
return ''

return '-'
}
SetTitle(t('fields.licenseDetails'))

return (
<React.Fragment>
<GluuLoader blocking={loading}>
<Card className="mb-3" style={applicationStyle.mainCard}>
<CardBody>
<GluuLoader blocking={loading}>
{item.licenseEnabled ? (
<Container style={{ backgroundColor: '#F5F5F5', float: 'left' }}>
<Row>
<Col sm={6}>
<GluuFormDetailRow
label="fields.productName"
value={item.productName}
isBadge={true}
lsize={3}
rsize={9}
doc_entry="productName"
doc_category={LICENSE}
/>
</Col>
<Col sm={6}>
<GluuFormDetailRow
label="fields.productCode"
value={item.productCode}
isBadge={true}
lsize={3}
rsize={9}
doc_entry="productCode"
doc_category={LICENSE}
/>
</Col>
</Row>
<Row>
<Col sm={6}>
<GluuFormDetailRow
label="fields.licenseType"
value={item.licenseType}
isBadge={true}
lsize={3}
rsize={9}
doc_entry="licenseType"
doc_category={LICENSE}
/>
</Col>
<Col sm={6}>
<GluuFormDetailRow
label="fields.licenseKey"
value={item.licenseKey}
isBadge={true}
lsize={3}
rsize={9}
doc_entry="licenseKey"
doc_category={LICENSE}
/>
</Col>
</Row>
<Row>
<Col sm={6}>
<GluuFormDetailRow
label="fields.customerEmail"
value={item.customerEmail}
isBadge={true}
lsize={3}
rsize={9}
doc_entry="customerEmail"
doc_category={LICENSE}
/>
</Col>
<Col sm={6}>
<GluuFormDetailRow
label="fields.customerName"
value={
item.customerFirstName + ' ' + item.customerLastName
}
isBadge={true}
lsize={3}
rsize={9}
doc_entry="customerName"
doc_category={LICENSE}
/>
</Col>
</Row>
<Row>
<Col sm={6}>
<GluuFormDetailRow
label="fields.companyName"
value={item.companyName}
isBadge={true}
lsize={3}
rsize={9}
doc_entry="companyName"
doc_category={LICENSE}
/>
</Col>
<Col sm={6}>
<GluuFormDetailRow
label="fields.validityPeriod"
value={formatDate(item.validityPeriod)}
isBadge={true}
lsize={3}
rsize={9}
doc_entry="validityPeriod"
doc_category={LICENSE}
/>
</Col>
</Row>
<Row>
<Col sm={6}>
<GluuFormDetailRow
label="fields.isLicenseActive"
value={item.licenseActive ? 'Yes' : 'No'}
isBadge={true}
lsize={3}
rsize={9}
doc_entry="isLicenseActive"
doc_category={LICENSE}
/>
</Col>
</Row>
</Container>
) : (
<Alert severity="warning">
{!loading &&
'The License API is not enabled for this application.'}
</Alert>
)}
</GluuLoader>
{item.licenseEnabled ? (
<Container style={applicationStyle.licensePanel}>
<Row>
<Col sm={6}>
<GluuFormDetailRow
label="fields.productName"
value={item.productName}
isBadge={true}
lsize={3}
rsize={9}
doc_entry="productName"
doc_category={LICENSE}
/>
</Col>
<Col sm={6}>
<GluuFormDetailRow
label="fields.productCode"
value={item.productCode}
isBadge={true}
lsize={3}
rsize={9}
doc_entry="productCode"
doc_category={LICENSE}
/>
</Col>
</Row>
<Row>
<Col sm={6}>
<GluuFormDetailRow
label="fields.licenseType"
value={item.licenseType}
isBadge={true}
lsize={3}
rsize={9}
doc_entry="licenseType"
doc_category={LICENSE}
/>
</Col>
<Col sm={6}>
<GluuFormDetailRow
label="fields.licenseKey"
value={item.licenseKey}
isBadge={true}
lsize={3}
rsize={9}
doc_entry="licenseKey"
doc_category={LICENSE}
/>
</Col>
</Row>
<Row>
<Col sm={6}>
<GluuFormDetailRow
label="fields.customerEmail"
value={item.customerEmail}
isBadge={true}
lsize={3}
rsize={9}
doc_entry="customerEmail"
doc_category={LICENSE}
/>
</Col>
<Col sm={6}>
<GluuFormDetailRow
label="fields.customerName"
value={`${item.customerFirstName} ${item.customerLastName}`}
isBadge={true}
lsize={3}
rsize={9}
doc_entry="customerName"
doc_category={LICENSE}
/>
</Col>
</Row>
<Row>
<Col sm={6}>
<GluuFormDetailRow
label="fields.companyName"
value={item.companyName}
isBadge={true}
lsize={3}
rsize={9}
doc_entry="companyName"
doc_category={LICENSE}
/>
</Col>
<Col sm={6}>
<GluuFormDetailRow
label="fields.validityPeriod"
value={formatDate(item.validityPeriod)}
isBadge={true}
lsize={3}
rsize={9}
doc_entry="validityPeriod"
doc_category={LICENSE}
/>
</Col>
</Row>
<Row>
<Col sm={6}>
<GluuFormDetailRow
label="fields.isLicenseActive"
value={item.licenseActive ? 'Yes' : 'No'}
isBadge={true}
lsize={3}
rsize={9}
doc_entry="isLicenseActive"
doc_category={LICENSE}
/>
</Col>
</Row>
</Container>
) : (
<Alert severity="warning">
{!loading &&
'The License API is not enabled for this application.'}
</Alert>
)}
</CardBody>
</Card>
</React.Fragment>
</GluuLoader>
)
}

Expand Down

0 comments on commit b4eef0f

Please sign in to comment.