{% extends "airflow/main.html" %}

{% block content %}
<!--
https://pro.fontawesome.com/releases/v5.10.0/css/all.css
-->
<script
  type="text/javascript"
  src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"
></script>

<style type="text/css">
  #dvc_diagram {
    width: 100%;
    height: 400px;
    border: 1px solid lightgray;
  }
</style>
<script type="text/javascript">
(function(){
    var link = document.createElement( "link" );
    link.href = "https://pro.fontawesome.com/releases/v5.10.0/css/all.css";
    link.type = "text/css";
    link.rel = "stylesheet";

    document.getElementsByTagName( "head" )[0].appendChild( link );
})();
</script>
<div class="dags-table-wrap">
      <div class="row dags-table-header">
        <div class="col-md-4">
          <div class="form-group btn-group">
            <a href="/appbuilderdvctargetsview/list?operator_type=all" class="btn btn-primary" title="" data-original-title="Show all DVC operators">All <span class="badge">
                {{ downloads_ref_files_count + uploads_ref_files_count + sensors_ref_files_count }}
            </span></a>
            <a href="/appbuilderdvctargetsview/list?operator_type=downloads" class="btn btn-default" title="" data-original-title="Show only DVC download operators">Download <span class="badge">
                {{ downloads_ref_files_count }}
            </span></a>
            <a href="/appbuilderdvctargetsview/list?operator_type=uploads" class="btn btn-default" title="" data-original-title="Show only DVC update operators">Update <span class="badge">
                {{ uploads_ref_files_count }}
            </span></a>
            <a href="/appbuilderdvctargetsview/list?operator_type=sensors" class="btn btn-default" title="" data-original-title="Show only DVC sensors">Sensors <span class="badge">
                {{ sensors_ref_files_count }}
            </span></a>
          </div>
        </div>
      <div class="tooltip fade bottom" role="tooltip" id="tooltip6256" style="top: 0px; left: 0px; display: block;"><div class="tooltip-arrow"></div><div class="tooltip-inner">Show only paused DAGS</div></div><div class="tooltip fade bottom" role="tooltip" id="tooltip567089" style="top: 0px; left: 0px; display: block;"><div class="tooltip-arrow"></div><div class="tooltip-inner">Another tutorial DAG</div></div><div class="tooltip fade bottom" role="tooltip" id="tooltip561287" style="top: 0px; left: 0px; display: block;"><div class="tooltip-arrow"></div><div class="tooltip-inner">Show active and paused DAGS</div></div><div class="tooltip fade bottom" role="tooltip" id="tooltip70662" style="top: 0px; left: 0px; display: block;"><div class="tooltip-arrow"></div><div class="tooltip-inner">Show only active DAGS</div></div><div class="tooltip fade bottom" role="tooltip" id="tooltip457893" style="top: 0px; left: 0px; display: block;"><div class="tooltip-arrow" style="left: 50%;"></div><div class="tooltip-inner">Show only paused DAGS</div></div></div>
      <div class="dags-table-body">
        {% if operator_type != "sensors" %}
        <div>
            <div id="dvc_diagram"></div>
        </div>
        {% endif %}
        <table class="table table-striped table-bordered table-hover">
          <thead>
            <tr>
              <th>Type</th>
              <th>DAG</th>
              <th>Repo</th>
              <th>Source</th>
              <th>Target</th>
            </tr>
          </thead>
          <tbody>
            {% if ( operator_type == "all" or operator_type == "uploads" ) %}
            {% for target in targets_info %}
            {% for operator in target.uploads %}
            {% if operator.affected_files|length > 0 %}
            {% for file in operator.affected_files %}
            <tr>
                <td class="text-center">
                  Upload
                </td>

                <td class="text-center">
                  <a href="/code?dag_id={{ operator.dag.dag_id }}">
                     {{ operator.dag.dag_id }}
                  </a>
                </td>

                <td>
                  <a href="{{ target.dvc_repo }}" title="" data-original-title="{{ target.dvc_repo_owner }}">
                    <strong>
                        {{ target.dvc_repo_owner }} / {{ target.dvc_repo_name }}
                    </strong>
                  </a>
                  <div>

                  </div>
                </td>

                <td class="text-center">
                    {{ file.describe_source() }}
                </td>

                <td class="text-center">
                    {{ file.dvc_path }}
                </td>
              </tr>
              {% endfor %}
              {% else %}
              <tr>
                <td class="text-center">
                  Upload
                </td>

                <td class="text-center">
                  <a href="/code?dag_id={{ operator.dag.dag_id }}">
                     {{ operator.dag.dag_id }}
                  </a>
                </td>

                <td>
                  <a href="{{ target.dvc_repo }}" title="" data-original-title="{{ target.dvc_repo_owner }}">
                    <strong>
                        {{ target.dvc_repo_owner }} / {{ target.dvc_repo_name }}
                    </strong>
                  </a>
                  <div>

                  </div>
                </td>

                <td class="text-center">
                    {{ file.describe_source() }}
                </td>

                <td class="text-center">
                    Dynamic
                </td>
              </tr>
              {% endif %}
              {% endfor %}
              {% endfor %}
              {% endif %}

            {% if ( operator_type == "all" or operator_type == "downloads" ) %}
            {% for target in targets_info %}
            {% for operator in target.downloads %}
            {% if operator.affected_files|length > 0 %}
            {% for file in operator.affected_files %}
            <tr>
                <td class="text-center">
                  Download
                </td>

                <td class="text-center">
                  <a href="/code?dag_id={{ operator.dag.dag_id }}">
                     {{ operator.dag.dag_id }}
                  </a>
                </td>

                <td>
                  <a href="{{ target.dvc_repo }}" title="" data-original-title="{{ target.dvc_repo_owner }}">
                    <strong>
                        {{ target.dvc_repo_owner }} / {{ target.dvc_repo_name }}
                    </strong>
                  </a>
                  <div>

                  </div>
                </td>

                <td class="text-center">
                    {{ file.describe_source() }}
                </td>

                <td class="text-center">
                    {{ file.dvc_path }}
                </td>
              </tr>
              {% endfor %}
              {% else %}
            <tr>
                <td class="text-center">
                  Download
                </td>

                <td class="text-center">
                  <a href="/code?dag_id={{ operator.dag.dag_id }}">
                     {{ operator.dag.dag_id }}
                  </a>
                </td>

                <td>
                  <a href="{{ target.dvc_repo }}" title="" data-original-title="{{ target.dvc_repo_owner }}">
                    <strong>
                        {{ target.dvc_repo_owner }} / {{ target.dvc_repo_name }}
                    </strong>
                  </a>
                  <div>

                  </div>
                </td>

                <td class="text-center">
                    {{ file.describe_source() }}
                </td>

                <td class="text-center">
                    Dynamic
                </td>
              </tr>
              {% endif %}
              {% endfor %}
              {% endfor %}
              {% endif %}

            {% if ( operator_type == "all" or operator_type == "sensors" ) %}
            {% for target in targets_info %}
            {% for operator in target.sensors %}
            {% for file in operator.files %}
            <tr>
                <td class="text-center">
                  Sensor
                </td>

                <td class="text-center">
                  <a href="/code?dag_id={{ operator.dag.dag_id }}">
                     {{ operator.dag.dag_id }}
                  </a>
                </td>

                <td>
                  <a href="{{ target.dvc_repo }}" title="" data-original-title="{{ target.dvc_repo_owner }}">
                    <strong>
                        {{ target.dvc_repo_owner }} / {{ target.dvc_repo_name }}
                    </strong>
                  </a>
                  <div>

                  </div>
                </td>

                <td class="text-center">
                    N/A
                </td>

                <td class="text-center">
                    {{ file }}
                </td>
              </tr>
              {% endfor %}
              {% endfor %}
              {% endfor %}
              {% endif %}
          </tbody>
        </table>
      </div>
    </div>

    <script type="text/javascript">
      (function () {
          // create an array with nodes
          var nodes = new vis.DataSet([
              {% for key, value in dvc_diagram_nodes.items() %}
                {
                    label: "{{ key }}",
                    id: {{ value.id }},
                    {% if not value.dag %}
                     color: "#FFCFCF",
                     shape: "box",
                     font: { face: "monospace", align: "left" },
                    {% endif %}
                },
              {% endfor %}
          ]);

          // create an array with edges
          var edges = new vis.DataSet([
              {% for key, value in dvc_diagram_edges.items() %}
              {% for tgt in value %}
                {
                    from: {{ key }},
                    to: {{ tgt }},
                    arrows: {
                        to: {
                          enabled: true,
                          type: "arrow",
                        },
                    },
                },
              {% endfor %}
              {% endfor %}
          ]);

          // create a network
          var container = document.getElementById("dvc_diagram");
          var data = {
              nodes: nodes,
              edges: edges,
          };
          var options = {
              edges: {
                  arrows: {
                      to: {
                          scaleFactor: 1.5,
                      }
                  }
              }
          };
          var network = new vis.Network(container, data, options);
          network.on("selectNode", function (params) {
            {% for key, value in dvc_diagram_nodes.items() %}
                {% if value.dag %}
                     if (params.nodes.length == 1 && params.nodes[0] == {{ value.id }}) {
                         window.location = "/code?dag_id=" + "{{ key }}";
                     }
                {% endif %}
              {% endfor %}
          });
      })();
    </script>
{% endblock %}