1 files changed, 64 insertions, 13 deletions
diff --git a/sdnr/wt/odlux/framework/src/views/about.tsx b/sdnr/wt/odlux/framework/src/views/about.tsx
index d47e09c3a..59a71512c 100644
--- a/sdnr/wt/odlux/framework/src/views/about.tsx
+++ b/sdnr/wt/odlux/framework/src/views/about.tsx
@@ -15,17 +15,68 @@
  * the License.
  * ============LICENSE_END==========================================================================
  */
-import * as React from 'react';
-
-const AboutComponent = () => {
-
-  return (
-    <div>
-      <h2>About</h2>
-      <div style={{ margin: "0 auto" }}>##odlux.version##</div>
-    </div>
-  );
-};
-
-export const About = AboutComponent;
+import * as React from 'react';
+import * as marked from 'marked';
+import * as hljs from 'highlight.js';
+import { requestRestExt } from '../services/restService';
+const defaultRenderer = new marked.Renderer();
+defaultRenderer.link = (href, title, text) => (
+  `<a target="_blank" rel="noopener noreferrer" href="${href}" title="${title}">${text}</a>`
+);
+interface AboutState {
+  content: string | null;
+}
+
+class AboutComponent extends React.Component<any, AboutState> {
+
+
+  constructor(props: any) {
+    super(props);
+    this.state = { content: null }
+    this.loadAboutContent();
+  }
+  private loadAboutContent(): void {
+    requestRestExt<string>('/about').then((response) => {
+      this.setState({ content: response.status == 200 ? response.data : `${response.status} ${response.message}` || "Server error" })
+    }).catch((error) => {
+      this.setState({ content: error })
+    })
+  }
+  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 html = (marked(this.state.content || 'loading', { renderer: markedOptions && markedOptions.renderer || defaultRenderer }));
+
+    return (
+      <div
+        dangerouslySetInnerHTML={{ __html: html }}
+        className={className}
+        style={style}
+      />
+
+    );
+  }
+};
+
+export const About = AboutComponent;
 export default About;
 \ No newline at end of file