revng-revng/python/revng/daemon/templates/index.html

<!--
  This file is distributed under the MIT License. See LICENSE.md for details.
-->
{% extends "base.html" %} {% block title %}Index{% endblock %} {% block body %}
<h1>revng API Debug</h1>
<div class="container text-start">
    <div>
        <a href="./graphql/" target="_blank">GraphQL Sandbox</a>
    </div>
    <div>
        Welcome to revng!<br />
        Working directory is {{ manager.workdir }}
    </div>

    <div>
        <label for="input-file">Input</label>
        <input id="input-file" type="file" />
        <button class="btn btn-primary" onclick="setInputFile()">Set input file</button>
    </div>

    <div id="targets">
        <table id="targets-table">
            <thead>
                <tr>
                    <td>Name</td>
                    <td>Produce</td>
                    <td>Ready</td>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>
<script>
    "use strict";
    function wrap_gql(query) {
        return JSON.stringify({
            operationName: null,
            variables: {},
            query: query,
        });
    }

    async function gql(query) {
        return fetch(`${window.location}graphql/`, {
            body: wrap_gql(query),
            method: "POST",
            mode: "cors",
            headers: new Headers({ "Content-Type": "application/json" }),
        }).then((res) => res.json());
    }

    async function produce(step_name, container_name, kind_name, exact, pathComponents) {
        let target_path = `${pathComponents.join("/")}:${kind_name}`;
        let query = `
    {
      produce(step: "${step_name}", container: "${container_name}", targetList: "${target_path}")
    }
    `;

        let response = await gql(query);
        console.log("Response: ", response);
    }

    async function loadTargets() {
        let targets_query = `
      {
        info {
          steps {
            name
            containers {
              name
              targets {
                kind
                ready
                serialized
                exact
                pathComponents
              }
            }
          }
        }
      }
    `;
        let targets = await gql(targets_query);

        for (let step of targets.data.info.steps) {
            for (let container of step.containers) {
                for (let target of container.targets) {
                    let target_name = target.pathComponents.join("/");
                    let target_fullname = `${step.name}/${container.name}/${target_name}:${target.kind}`;

                    let target_properties = {
                        step: step.name,
                        container: container.name,
                        kind: target.kind,
                        exact: true,
                        pathComponents: target.pathComponents,
                    };

                    let ready = target.ready ? "Yes" : "No";

                    // TODO: passing the properties twice is ugly
                    $("#targets-table")
                        .DataTable()
                        .row.add([target_fullname, target_properties, ready]);
                }
            }
        }
        $("#targets-table").DataTable().draw();
    }

    async function setInputFile() {
        const file_reader = new FileReader();
        let input_file = $("#input-file")[0];
        file_reader.readAsBinaryString(input_file.files[0]);
        await new Promise(function (resolve, reject) {
            file_reader.addEventListener("loadend", function () {
                resolve();
            });
        });
        let input_query = `
      mutation {
        uploadB64(input: "${btoa(file_reader.result)}", container: "input")
      }
    `;

        let response = await gql(input_query);

        try {
            let analysis_response = await gql(`
        mutation {
          runAllAnalyses
        }
      `);
        } catch (err) {
            window.alert("Failed to run autoanalyses");
        }

        // TODO: do not reload the page, reload the targets instead
        window.location.reload();
    }

    $(function () {
        $("#targets-table").DataTable({
            autoWidth: true,
            columns: [
                null,
                {
                    render: function (data, type, row) {
                        let produce_button = $("<button>");
                        produce_button.text("Produce");
                        produce_button.addClass(["produce-btn", "btn", "btn-primary", "btn-sm"]);
                        return produce_button.outerHTML();
                    },
                },
                null,
            ],
        });
        $("#targets-table tbody").on("click", "button.produce-btn", async function () {
            let data = $("#targets-table").DataTable().row($(this).parents("tr")).data()[1];
            await produce(data.step, data.container, data.kind, data.exact, data.pathComponents);
        });
        loadTargets();
    });
</script>
{% endblock %}