sdnr/wt/odlux/framework/src/views/about.tsx

   1 /**
   2  * ============LICENSE_START========================================================================
   3  * ONAP : ccsdk feature sdnr wt odlux
   4  * =================================================================================================
   5  * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.
   6  * =================================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
   8  * in compliance with the License. You may obtain a copy of the License at
   9  *
  10  * http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  * Unless required by applicable law or agreed to in writing, software distributed under the License
  13  * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  14  * or implied. See the License for the specific language governing permissions and limitations under
  15  * the License.
  16  * ============LICENSE_END==========================================================================
  17  */
  18 import * as React from 'react';
  19 import * as marked from 'marked';
  20 import * as hljs from 'highlight.js';
  21 import { requestRestExt } from '../services/restService';
  22 const defaultRenderer = new marked.Renderer();
  23 defaultRenderer.link = (href, title, text) => (
  24   `<a target="_blank" rel="noopener noreferrer" href="${href}" title="${title}">${text}</a>`
  25 );
  26 interface AboutState {
  27   content: string | null;
  28 }
  29
  30 class AboutComponent extends React.Component<any, AboutState> {
  31
  32
  33   constructor(props: any) {
  34     super(props);
  35     this.state = { content: null }
  36     this.loadAboutContent();
  37   }
  38   private loadAboutContent(): void {
  39     requestRestExt<string>('/about').then((response) => {
  40       this.setState({ content: response.status == 200 ? response.data : `${response.status} ${response.message}` || "Server error" })
  41     }).catch((error) => {
  42       this.setState({ content: error })
  43     })
  44   }
  45   render() {
  46
  47     const markedOptions: marked.MarkedOptions = {
  48       gfm: true,
  49       breaks: false,
  50       pedantic: false,
  51       sanitize: true,
  52       smartLists: true,
  53       smartypants: false,
  54       langPrefix: 'hljs ',
  55       ...({}),
  56       highlight: (code, lang) => {
  57         if (!!(lang && hljs.getLanguage(lang))) {
  58           return hljs.highlight(lang, code).value;
  59         }
  60         return code;
  61       }
  62     };
  63
  64
  65     const className = "about-table"
  66     const style: React.CSSProperties = {};
  67
  68     const html = (marked(this.state.content || 'loading', { renderer: markedOptions && markedOptions.renderer || defaultRenderer }));
  69
  70     return (
  71       <div
  72         dangerouslySetInnerHTML={{ __html: html }}
  73         className={className}
  74         style={style}
  75       />
  76
  77     );
  78   }
  79 };
  80
  81 export const About = AboutComponent;
  82 export default About;