Extend TLS Certificate Assets

CHANGELOG.md

@@ -7,10 +7,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 ## [Unreleased]
 
 ### Added
+- Added DetailsPage and more funtionalities to TLS Certificate assets [#1578](https://github.com/greenbone/gsa/pull/1578)
 - Added Explicit Compliance [#1495](https://github.com/greenbone/gsa/pull/1495)
-- added tasktrendgroup component for tasks filter dialog [#1511](https://github.com/greenbone/gsa/pull/1511)
+- Added tasktrendgroup component for tasks filter dialog [#1511](https://github.com/greenbone/gsa/pull/1511)
 - Added HorizontalSep component for horizontal lists. [#1494](https://github.com/greenbone/gsa/pull/1494)
-- added BooleanFilterGroup and changed notes filter dialog [#1493](https://github.com/greenbone/gsa/pull/1493)
+- Added BooleanFilterGroup and changed notes filter dialog [#1493](https://github.com/greenbone/gsa/pull/1493)
 - Added grow option to multiselect component [#1485](https://github.com/greenbone/gsa/pull/1485)
 - Add LogoutIcon [#1481](https://github.com/greenbone/gsa/pull/1481)
 - Added a component "SeverityValuesGroup" enabling user choose the relation they want [#1477](https://github.com/greenbone/gsa/pull/1477)

gsa/CMakeLists.txt

@@ -1021,6 +1021,7 @@ set (GSA_JS_SRC_FILES
      ${GSA_SRC_DIR}/src/web/pages/tickets/table.js
      ${GSA_SRC_DIR}/src/web/pages/tlscertificates/component.js
      ${GSA_SRC_DIR}/src/web/pages/tlscertificates/details.js
+     ${GSA_SRC_DIR}/src/web/pages/tlscertificates/detailspage.js
      ${GSA_SRC_DIR}/src/web/pages/tlscertificates/filterdialog.js
      ${GSA_SRC_DIR}/src/web/pages/tlscertificates/listpage.js
      ${GSA_SRC_DIR}/src/web/pages/tlscertificates/row.js

gsa/src/gmp/capabilities/capabilities.js

@@ -53,8 +53,8 @@ const types = {
   reportformats: 'report_format',
   scanconfig: 'config',
   scanconfigs: 'config',
-  tlsCertificate: 'tls_certificate',
-  tlsCertificates: 'tls_certificate',
+  tlscertificate: 'tls_certificate',
+  tlscertificates: 'tls_certificate',
 };
 
 const convertType = type => {

gsa/src/gmp/models/report/report.js

@@ -71,7 +71,7 @@ class ReportReport extends Model {
 
     copy.hosts = parse_hosts(elem, filter);
 
-    copy.tls_certificates = parse_tls_certificates(elem, filter);
+    copy.tlsCertificates = parse_tls_certificates(elem, filter);
 
     delete copy.host;
 

gsa/src/web/components/form/__tests__/__snapshots__/datepicker.js.snap

@@ -61,12 +61,12 @@ exports[`DatePicker component tests should render 2`] = `
     class="react-datepicker__input-container"
   >
     <div
-      class="sc-jKVCRD gBWRoO"
+      class="sc-kaNhvL crkLgP"
       width="auto"
     >
       2018/11/11
       <span
-        class="sc-ebFjAB vqWoD sc-jzJRlG lcpYA sc-fjdhpX iICojt"
+        class="sc-jKVCRD GjcaI sc-jzJRlG lcpYA sc-fjdhpX iICojt"
         data-testid="svg-icon"
       >
         <svg>

gsa/src/web/components/layout/__tests__/__snapshots__/globalstyles.js.snap

@@ -783,6 +783,9 @@ exports[`GlobalStyles tests should render global styles 1`] = `
 /* sc-component-id: sc-gRnDUn */
 
 
+/* sc-component-id: sc-cmjSyW */
+
+
 /* sc-component-id: sc-global-2342249302 */
 html{box-sizing:border-box;} *,*:before,*:after{box-sizing:inherit;} body{margin:0;font-family:Verdana,sans-serif;font-size:12px;color:#000;} a:link{color:#0000ff;-webkit-text-decoration:none;text-decoration:none;} a:hover,a:focus{color:blue;-webkit-text-decoration:underline;text-decoration:underline;} pre{white-space:pre-wrap;word-wrap:break-word;} img{border:0;} svg{overflow:hidden;} h1{font-size:20px;} h2{font-size:18px;} h3{font-size:16px;} h4{font-size:14px;margin-bottom:0;} p{margin:0 0 10px;}
     </style>

gsa/src/web/pages/permissions/multipledialog.js

@@ -19,6 +19,8 @@
 
 import React from 'react';
 
+import styled from 'styled-components';
+
 import _ from 'gmp/locale';
 
 import {typeName, getEntityType} from 'gmp/utils/entitytype';
@@ -40,6 +42,11 @@ export const CURRENT_RESOURCE_ONLY = '0';
 export const INCLUDE_RELATED_RESOURCES = '1';
 export const RELATED_RESOURCES_ONLY = '2';
 
+const EntityName = styled.div`
+  font-style: italic;
+  word-break: break-all;
+`;
+
 const MultiplePermissionDialog = withCapabilities(
   ({
     capabilities,
@@ -188,7 +195,7 @@ const MultiplePermissionDialog = withCapabilities(
               <FormGroup title={_('on')} flex="column">
                 <Divider>
                   <span>{typeName(getEntityType(state))}</span>
-                  <i>{entityName}</i>
+                  <EntityName>{entityName}</EntityName>
                   <Select
                     name="includeRelated"
                     value={state.includeRelated}

gsa/src/web/pages/tags/component.js

@@ -67,6 +67,7 @@ const TYPES = [
   'schedule',
   'target',
   'task',
+  'tlscertificate',
   'user',
 ];
 

gsa/src/web/pages/tlscertificates/details.js

@@ -24,6 +24,10 @@ import _ from 'gmp/locale';
 
 import {isDefined} from 'gmp/utils/identity';
 
+import DateTime from 'web/components/date/datetime';
+
+import Layout from 'web/components/layout/layout';
+
 import InfoTable from 'web/components/table/infotable';
 import TableData from 'web/components/table/data';
 import TableBody from 'web/components/table/body';
@@ -43,7 +47,7 @@ import {renderYesNo} from 'web/utils/render';
 
 const TlsCertificateDetails = ({entity, links = true}) => {
   return (
-    <React.Fragment>
+    <Layout grow="1" flex="column">
       <InfoTable>
         <colgroup>
           <Col width="10%" />
@@ -68,15 +72,31 @@ const TlsCertificateDetails = ({entity, links = true}) => {
               <TableData>{renderYesNo(entity.valid)}</TableData>
             </TableRow>
           )}
+          {isDefined(entity.activationTime) && (
+            <TableRow>
+              <TableData>{_('Activates')}</TableData>
+              <TableData>
+                <DateTime date={entity.activationTime} />
+              </TableData>
+            </TableRow>
+          )}
+          {isDefined(entity.expirationTime) && (
+            <TableRow>
+              <TableData>{_('Expires')}</TableData>
+              <TableData>
+                <DateTime date={entity.expirationTime} />
+              </TableData>
+            </TableRow>
+          )}
         </TableBody>
       </InfoTable>
-    </React.Fragment>
+    </Layout>
   );
 };
 
 TlsCertificateDetails.propTypes = {
   entity: PropTypes.model.isRequired,
-  links: PropTypes.bool.isRequired,
+  links: PropTypes.bool,
 };
 
 const mapStateToProps = (rootState, {entity = {}}) => {