/** * ============LICENSE_START======================================================================== * ONAP : ccsdk feature sdnr wt odlux * ================================================================================================= * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved. * ================================================================================================= * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except * in compliance with the License. You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software distributed under the License * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express * or implied. See the License for the specific language governing permissions and limitations under * the License. * ============LICENSE_END========================================================================== */ import * as React from 'react'; import * as marked from 'marked'; import * as hljs from 'highlight.js'; import { requestRestExt } from '../services/restService'; import { Button, Typography } from '@material-ui/core'; const defaultRenderer = new marked.Renderer(); defaultRenderer.link = (href, title, text) => ( `${text}` ); interface AboutState { content: string | null; isCopiedSuccessfully: boolean; isContentLoadedSucessfully: boolean; } class AboutComponent extends React.Component { textarea: React.RefObject; constructor(props: any) { super(props); this.state = { content: null, isCopiedSuccessfully:false, isContentLoadedSucessfully: false } this.textarea = React.createRef(); this.loadAboutContent(); } private getMarkOdluxVersionMarkdownTable(data:{version:string,build:string}|null|undefined):string{ if(!data) { return ""; } return `| | |\n| --- | --- |\n| Version | ${data.version} |\n| Build timestamp | ${data.build}|` } private loadAboutContent(): void { const baseUri = window.location.pathname.substring(0,window.location.pathname.lastIndexOf("/")+1); const p1 = requestRestExt('/about'); const p2 = requestRestExt<{version:string,build:string}>(`${baseUri}version.json`); Promise.all([p1,p2]).then((responses) => { const response = responses[0]; const response2 = responses[1]; const content = response.status == 200 ? response.data : `${response.status} ${response.message}` || "Server error"; const content2 = `\n## ODLUX Version Info\n`+(response2.status == 200 ? this.getMarkOdluxVersionMarkdownTable(response2.data) : `${response2.status} ${response2.message}` || "ODLUX Server error"); const loadedSucessfully = response.status == 200 ? true : false; this.setState({ content: (content + content2) || null, isContentLoadedSucessfully: loadedSucessfully }); }).catch((error) => { this.setState({ content: error }) }) } copyToClipboard = (e: React.MouseEvent) =>{ e.preventDefault(); if(this.textarea.current!==null){ this.textarea.current.select(); document.execCommand('copy'); if(e.currentTarget != null){ // refocus on button, otherwhise the textarea would be focused e.currentTarget.focus(); } this.setState({isCopiedSuccessfully: true}); window.setTimeout(()=>{this.setState({isCopiedSuccessfully: false});},2000); } } render() { const markedOptions: marked.MarkedOptions = { gfm: true, breaks: false, pedantic: false, sanitize: true, smartLists: true, smartypants: false, langPrefix: 'hljs ', ...({}), highlight: (code, lang) => { if (!!(lang && hljs.getLanguage(lang))) { return hljs.highlight(lang, code).value; } return code; } }; const className = "about-table" const style: React.CSSProperties = {}; const containerStyle = { overflow: "auto", paddingRight: "20px" } const html = (marked(this.state.content || 'loading', { renderer: markedOptions && markedOptions.renderer || defaultRenderer })); return (
{ this.state.isContentLoadedSucessfully &&
{ this.state.isCopiedSuccessfully && copied successfully }
}