{% import "macro.html" as macro %}<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        {% block head %}
          <title>SaaS service manager | {% block title %}{% endblock %}</title>
        {% endblock %}
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
        <script type="text/javascript">
        $(function(){
            $(".calcRes").click(function () {
                let form_data = $(this).parent();
                if ($(this).hasClass('calcBySLA')) {
                    let service_type;
                    let search_rps = form_data.find('input#search_rps.form-control')[0].value;
                    let index_size = form_data.find('input#index_size.form-control')[0].value;
                    let delivery_type = form_data.find('select#delivery_type.form-control')[0].value;
                    form_data.find('.service_type').find('input').each(function () {
                       if ($(this)[0].checked) {
                           service_type = $(this)[0].value;
                       }
                    });
                    $.ajax({
                          url: '/calculate_resources',
                          data: JSON.stringify({'service_type': service_type, 'search_rps': search_rps, 'index_size': index_size, 'delivery_type': delivery_type}),
                          type: 'POST',
                          timeout: 6000000,
                          success: function(response) {
                              let answer = JSON.parse(response);
                              console.log(answer);
                              if (!jQuery.isEmptyObject(answer.error)) {
                                  form_data.find('div.resourcesTextError').html('<div class="col-form-label text-danger">' + answer.error + '</div>');
                              } else {
                                  form_data.find('div.resourcesTextError').empty();
                                  form_data.find('input#instances_count.form-control')[0].value = answer['required_resources']['shards_count'];
                                  form_data.find('input#replicas_per_dc.form-control')[0].value = answer['required_resources']['replicas_count'];
                                  form_data.find('input#cpu_requirements.form-control')[0].value = answer['required_resources']['cpu'];
                                  form_data.find('input#memory_requirements.form-control')[0].value = answer['required_resources']['memory'];
                              }
                          },
                          error: function (error) {
                              console.log('error!');
                              console.log(error);
                          }
                    });
                }
            });

          $("select[name='delivery_type']", this).change(function () {
              let selectedVal = $("option:selected", this).val();

              if ($(this).parent().parent().hasClass('prestable')) {
                  formType = 'prestable-form';
              } else if ($(this).parent().parent().hasClass('testing'))  {
                  formType = 'testing-form';
              }
              else {
                  formType = 'production-form';
              }
              if (selectedVal == 'snapshot') {
                  $('.' + formType + ' #delivery_param_label').show();
                  $('.' + formType + ' .yt_cluster').show();
                  $('.' + formType + ' .logbroker_tvm_id').hide();
                  $('.' + formType + ' .logbroker_traffic_volume').hide();
                  $('.' + formType + ' .yt_ferryman_format').hide();
              } else if (selectedVal == 'logbroker') {
                  $('.' + formType + ' #delivery_param_label').show();
                  $('.' + formType + ' .logbroker_tvm_id').show();
                  $('.' + formType + ' .logbroker_traffic_volume').show();
                  $('.' + formType + ' .yt_cluster').hide();
                  $('.' + formType + ' .yt_ferryman_format').hide();
              } else if (selectedVal.includes('ferryman')) {
                  $('.' + formType + ' #delivery_param_label').show();
                  $('.' + formType + ' .yt_cluster').show();
                  $('.' + formType + ' .yt_ferryman_format').show();
                  $('.' + formType + ' .logbroker_tvm_id').hide();
                  $('.' + formType + ' .logbroker_traffic_volume').hide();
              } else {
                  $('.' + formType + ' #delivery_param_label').hide();
                  $('.' + formType + ' .yt_cluster').hide();
                  $('.' + formType + ' .yt_ferryman_format').hide();
                  $('.' + formType + ' .logbroker_tvm_id').hide();
                  $('.' + formType + ' .logbroker_traffic_volume').hide();
              }
          });
          $('[data-toggle="tooltip"]').tooltip();
        });
        </script>
        <style type="text/css">
          html {
              position: relative;
              min-height: 100%;
          }
          .body {
              padding-top: 70px;
              padding-bottom: -50px;
          }
          .container {
              padding-left: 0;
              padding-right: 0;
          }
          .navbar-fixed-bottom {
              bottom: 0;
              height: 50px;
              width: 100%;
          }
        </style>
    </head>
        <body>
            <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
                <a class="navbar-brand" href="/">
                    {% if admin_mode %}
                        <img src="{{ url_for('static', filename='logo') }}" width="50" height="30" class="d-inline-block" alt="">
                    {% endif %}
                    <strong>SaaS</strong>
                </a>
                <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#main-navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="main-navbar-collapse">
                    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                        {{ macro.nav_link('ssm_viewer.new_service', 'Новый сервис') }}
                        {{ macro.nav_link('ssm_viewer.new_namespace', 'Новый неймспейс') }}
                        {{ macro.nav_link('ssm_viewer.shoot_to_service', 'Нагрузочное тестирование') }}
                        {{ macro.nav_link('ssm_viewer.findkey', 'Найти документ') }}
                        <li class="nav-item"><a class="nav-link" href="https://saas-mon.n.yandex-team.ru/?my=1" target="_blank">Мои сервисы</a></li>
                        <li class="nav-item"><a class="nav-link" href="https://saas-mon.n.yandex-team.ru/" target="_blank">Все сервисы</a></li>
                        <li class="nav-item"><a class="nav-link" href="https://wiki.yandex-team.ru/jandekspoisk/saas/" target="_blank">Wiki</a></li>
                    </ul>
                    <ul class="navbar-nav navbar-right">
                    {% if admin_mode %}
                        {{ macro.nav_link('ssm_viewer.admin_requests', 'Заявки') }}
			<li class="nav-item"><a class="nav-link" href="https://error.yandex-team.ru/projects/saas-ssm/projectDashboard" target="_blank">Err</a></li>
                    {% endif %}
                        {{ macro.nav_link('ssm_viewer.show_services_quotas', 'Квоты') }}
                    {% if yandex_login is not none %}
                        <li class="nav-item"><a class="nav-link" href="https://staff.yandex-team.ru/{{ yandex_login }}">{{ yandex_login }}</a></li>
                    {% endif %}
                    </ul>
                </div>
            </nav>
            <div class="container body">
                <div class="page_header">
                  <h2 align="right">{{title}}</h2>
                </div>
              {% block content %}{% endblock %}
            </div>
            <footer class="navbar-fixed-bottom navbar-light">
                <p class="text-left">hostname: {{ front_hostname }}</p>
                <p class="text-left"><a href="https://wiki.yandex-team.ru/jandekspoisk/SaaS/NewService/">политика заведения сервисов</a></p>
            </footer>
        </body>
</html>

