peddlers-of-ketran/src/solutions.js

/* App starts here */
import React, { useState, useEffect } from "react";
import ReactMarkdown from "react-markdown/with-html";
import CodeBlock from "./CodeBlock";
import MarkdownLoader from "./markdown-loader";
import Tab from "react-bootstrap/Tab";
import Tabs from "react-bootstrap/Tabs";
import Col from "react-bootstrap/Col";
import Row from "react-bootstrap/Row";

import "./solutions.css";

const solutions = [ {
    category: "HPC",
    title: "intel-hpc-bench",
    asset: "hpc.png",
    summary: "HPC Benchmark workloads",
    git: "https://gitlab.devtools.intel.com/vtt/sws/osgc/solutions/intel-hcp-bench"
  }, {
    category: "AI/ML",
    title: "intel-pytorch",
    asset: "intel-pytorch.png",
    summary: "basic pytorch container",
    git: "https://gitlab.devtools.intel.com/vtt/sws/osgc/solutions/intel-pytorch"
  },/*
  {
    category: "compute",
    title: "intel-efficientnet",
    summary: "No summary provided",
    git: "https://gitlab.devtools.intel.com/vtt/sws/osgc/solutions/intel-efficientnet"
  },
  {
    category: "compute",
    title: "intel-deepspeech",
    summary: "Container featuring the Mozilla DeepSpeech speech-to-text implementation in tensorflow.",
    git: "https://gitlab.devtools.intel.com/vtt/sws/osgc/solutions/intel-deepspeech"
  },*/
  /*{
    category: "compute",
    title: "intel-deepvoice3",
    summary: "Deepvoice3 text to speech container using Intel GPU and deepspeech3 pytorch.",
    git: "https://gitlab.devtools.intel.com/vtt/sws/osgc/solutions/intel-deepvoice3"
  },*/   
  /*{
    category: "compute",
    title: "intel-rl",
    summary: "Intel reinforcement learning container",
    git: "https://gitlab.devtools.intel.com/vtt/sws/osgc/solutions/intel-rl"
  },*/
  {
    category: "AI/ML,HPC",
    title: "intel-compute-clinfo",
    asset: "intel-compute-clinfo.png",
    summary: "Basic container installing OpenCL runtime; testing packages",
    git: "https://gitlab.devtools.intel.com/vtt/sws/osgc/solutions/intel-compute-clinfo"
  },
  {
    category: "Media",
    title: "intel-media-ffmpeg",
    asset: "intel-media-ffmpeg.svg",
    summary: "Perform various media tests using ffmpeg",
    git: "https://gitlab.devtools.intel.com/vtt/sws/osgc/solutions/intel-media-ffmpeg"
  }
];

class CategoryPicker extends React.Component {
  constructor(props) {
    super(props);
    console.log("CategoryPicker");
    this.clearFilter = this.clearFilter.bind(this);
  }

  clearFilter() {
    if (window.clearFilter) {
      window.clearFilter();
    }
  }

  render() {
    const categories = [];
    solutions.forEach(solution => {
      solution.category.split(",").forEach(category => {
        if (categories.indexOf(category) != -1) {
          return;
        }
        categories.push(category);
      })
    });
    const tabs = categories.sort().map(category => (
      <Tab eventKey={category} key={category} title={category.replace(/^(.)/, "$1".toUpperCase())}>
        <SolutionsPicker onSolutionChanged={this.props.onSolutionChanged} filter={category}/>
      </Tab>
    ));
    return (
      <Tabs id="solution-category-table" className="solution-category-tab" >
        { tabs }
        <Tab eventKey="all" title="All" key="all">
          <SolutionsPicker onSolutionChanged={this.props.onSolutionChanged} filter="*"/>
        </Tab>
        <Tab eventKey="about" title="About" key="about">
          <MarkdownLoader className="Markdown" src="solutions/about.md"/>
        </Tab>
      </Tabs>
    );
  }
}

class SolutionsPicker extends React.Component {
  constructor(props) {
    super(props);
    console.log("SolutionsPicker");
  }

  render () {
    const solutionsContent = solutions
        .filter(solution => this.props.filter == "*" || solution.category == this.props.filter)
        .sort((A, B) => { return A.title.localeCompare(B.title) })
        .map((solution, i) => {
      return (
      <div key={"solution-" + i} className="solution-card"
           onClick={this.props.onSolutionChanged.bind(this, solution)}>
        <div className="solution-image"
          style={{backgroundImage:"url(./docs/solutions/" + solution.asset + ")"}}>
        </div>
        <div className="solution-info">
          <div className="solution-title">{solution.title}</div>
          <div className="solution-summary">{solution.summary}</div>
        </div>
      </div>
    )});

    return (
      <div className="solutions-picker">
        { solutionsContent }
      </div>
    );
  }
}

class Solution extends React.Component {
  constructor(props) {
    super(props);
    console.log("Solution: ", this.props.solution);
  }

  formatString(string) {
    if (/^https?:\/\//.exec(string)) {
      return (<a href={string}>{string}</a>);
    } else {
      return string;
    }
  }

  solutionContent(solution) {
    let markdownPath = "", basename = "";
    if (solution.git) {
      basename = solution.git.replace(/^.*\/([^/]+)$/, "$1");
      if (basename) {
        markdownPath = "solutions/" + basename + ".md";
      }
    }
    if (!basename) {
      return (<ReactMarkdown
        className="Markdown"
        escapeHtml={false}
        source="# git path must be provided"
        renderers={{ code: CodeBlock }} />);
    }
  return (<MarkdownLoader src={markdownPath} fallback={
    "# " + solution.title + " \n" +
    "Solution instructions not found. You can [file an issue](https://gitlab.devtools.intel.com/vtt/sws/osgc/agama-website/issues/new?" +
    "issue[title]=Content%20needed%20for%20docs%2F" + markdownPath +") to request it be created."
  }/>);
  }

  render() {
    const solution = this.props.solution;

    return (
      <div className="solution">
        <div className="solution-back" onClick={this.props.onBack}>Back</div>
        <div className="solution-details">
          <div className="solution-marque">
            <div className="solution-image"
              style={{backgroundImage:"url(./docs/solutions/" + solution.asset + ")"}}></div>
            <div className="solution-overview">
              <div className="solution-categories">{solution.category}</div>
              <div className="solution-title">{solution.title}</div>
              <div className="solution-summary">{solution.summary}</div>
            </div>
          </div>
          <div className="solution-clone">
            <ReactMarkdown
              className="Markdown"
              renderers={{ code: CodeBlock }}
              source={[
                "## Clone",
                "```bash",
                "git clone " + solution.git,
                "```",
                "## Pull",
                "```bash",
                "docker pull amr-registry.caas.intel.com/vtt-osgc/solutions/" + solution.title,
                "```"
              ].join("\n")}/>
          </div>
        </div>
        { this.solutionContent(this.props.solution) }
      </div>
    )
  }
}

class Solutions extends React.Component {
  constructor(props) {
    super(props);
    console.log("Solutions");
    this.state = {
      activeSolution: null
    };
    this.onSolutionChanged = this.onSolutionChanged.bind(this);
  }

  onSolutionChanged(solution) {
    console.log("onSolutionChanged: " + solution);
    this.setState({
      activeSolution: solution
    });
  }

  render () {
    return (
      <div className="Content OnScreen" id="Content">
        <div id="MinBox">
          <div>This site is a work in progress and under active development.</div>
        {
          this.state.activeSolution ? 
            <Solution solution={this.state.activeSolution} onBack={this.onSolutionChanged.bind(this, null)}/> :
            <CategoryPicker onSolutionChanged={this.onSolutionChanged}/>
        }
        </div>
      </div>
    );
  }
}

export default Solutions;