<template>
  <div>
    <div>    <!-- Title frame-->
      <h1 class="title">Nástroj pro mapování aktiv počítačové infrastruktury a návrhu korelačních pravidel při realizaci bezpečnostního monitoringu</h1>
      Tato aplikace byla vytvořena v rámci bakalářské práce studenta Matěje Hrabálka v akademickém ročníku 2022/23 na Vysokém učením technickém v Brně. Pro pochopení její funkčnosti je nutné pochopit i obsah bakalářské práce. Její funkcionality jsou stručně popsány v návodu.<br><br>
      <div class="container">   <!-- First frame - title, framework, logo etc. -->
        <!-- Input for framework and title in the left container -->
        <div class="left-container">
          <div class="form-group">
            <label for="infrastructure-name" class="label">Název mapované infrastruktury:</label>
            <input type="text" id="infrastructure-name" v-model="infrastructureName" class="input-field">
            <label for="framework" class="label">Framework pro pojmenování korelačních pravidel*:</label>
            <select id="framework" v-model="framework" class="framework-field">
              <option value="MITRE">MITRE</option>
              <option value="ENISA">ENISA</option>
            </select>
          </div>
        </div>
        <div class="right-container">
          <div class="form-group">
            <!-- Logo in the right container -->
            <img src="../assets/BUT_logo.png" alt="BUT logo" class="but-logo">
          </div>
        </div>
      </div>
    </div>
    <!-- Log source input -->
    <h2><center><label>Zdroje logů</label></center></h2>
    <!-- Button for adding one log source to the infrastrcture -->
    <center><button class="add-log-source" @click="addLogSource">Přidat zdroj logů</button></center>
    <div class="log-sources">
      <div class="form-group" v-for="(item, index) in logSources" :key="index"></div>
      <div class="form-group">
        <div class="log-sources-item" v-for="(item, index) in logSources" :key="index">
          <div>
            <center><label class="les-label">Kategorie*:</label></center>
            <!-- Options for all the log source categories -->
            <div class="log-sources-group">
              <select v-model="item.type">
                <option value="Security Application">Bezpečnostní aplikace</option>
                <option value="Operating System">Operační systém</option>
                <option value="Network Device">Síťové zařízení</option>
                <option value="Other Application">Ostatní aplikace</option>
              </select>
            </div>
            <center><label class="les-label" v-if="item.type === 'Security Application' || item.type === 'Operating System' || item.type === 'Network Device' || item.type === 'Other Application'">Zdroj logů*:</label></center>
            <div class="log-sources-group" v-if="item.type === 'Security Application'">
              <!-- Options for the all log sources based on its category -->
              <select v-model="item.name">
                <option value="Antivirus">Antivirus</option>
                <option value="IAM">Identity Access Manager (IAM)</option>
                <option value="SSO">Single Sign-On</option>
                <option value="Zeek">Zeek</option>
                <option value="IDS">IDS/IPS</option>
                <option value="Firewall">Firewall</option>
                <option value="RPC Firewall">RPC Firewall</option>
                <option value="EDR">Endpoint Detection and Response</option>
                <option value="WAF">Web Application Firewall</option>
              </select>
            </div>
            <div class="log-sources-group" v-if="item.type === 'Operating System'">
              <select v-model="item.name">
                <option value="MacOS">MacOS</option>
                <option value="Linux">Linux</option>
                <option value="Windows">Windows</option>
                <option value="ESXi">ESXi</option>
              </select>
            </div>
            <div class="log-sources-group" v-if="item.type === 'Network Device'">
              <select v-model="item.name">
                <option value="Apache">Apache</option>
                <option value="Networking hardware">Síťový prvek</option>
                <option value="Database server">Databázový server</option>
                <option value="DNS server">DNS server</option>
                <option value="Proxy server">Proxy server</option>
                <option value="DHCP server">DHCP server</option>
                <option value="TACACS">TACACS</option>
              </select>
            </div>
            <div class="log-sources-group" v-if="item.type === 'Other Application'">
              <select v-model="item.name">
                <option value="Amazon Web Service">Amazon Web Service</option>
                <option value="Microsoft Azure">Microsoft Azure</option>
                <option value="Python Application">Python aplikace</option>
                <option value="Google Cloud">Google Cloud</option>
                <option value="GitHub">GitHub</option>
                <option value="Google Workspace">Google Workspace</option>
                <option value="Java Virtual Machine">Java Virtual Machine</option>
                <option value="Microsoft 365">Microsoft 365</option>
                <option value="Spring Application">Spring aplikace</option>
                <option value="Web server">Webový server</option>
              </select>
            </div>
          </div>
          <!-- Button to add additional info in the specified log source -->
          <center><button class="add-additional-info" @click="showForm(index)">Přidat doplňující informace</button></center>
          <modal v-if="item.showModal" v-model="showModal">
            <center><h4>Doplňující informace ke zdroji logů</h4></center>
            <form>
              <label class="additional-info-label" for="ip-address">IP adresa:</label>
              <input class="additional-info-input" type="text" v-model="item.ipAddress">
              <br>
              <label class="additional-info-label" for="hostname">Hostname:</label>
              <input class="additional-info-input" type="text" v-model="item.hostname">
              <br>
              <label class="additional-info-label" for="os">Další informace:</label>
              <input class="additional-info-input" type="text" v-model="item.add">
              <br>
              <!-- Button to remove additional info in the specified log source -->
              <center><button class="remove-additional-info" @click="hideForm(index)">Skrýt doplňující informace</button></center>
            </form>
          </modal>
          <!-- Button to remove the specified log source -->
          <center><button class="remove-log-source" @click="removeLogSource(index)">Odstranit zdroj logů</button></center>
        </div>
      </div>
    </div>
    <!-- Most important button, that sends the framework and the Log Sources to the WAG and displays the response in the table -->
    <center><button class="mapping-button" @click="mapTable">Návrh korelačních pravidel</button></center>
    <h2><center><label>Výsledky mapování</label></center></h2>
    <!-- Table from the mapping, appears after use cases are mapped -->
    <div>
      <table>
        <thead>
        <tr>
          <!-- Head of the table -->
          <th>Název</th>
          <th>Kategorie</th>
          <th>Korelační pravidla</th>
        </tr>
        </thead>
        <tbody>
        <!-- Displaying the mapped log source-->
        <tr v-for="result in results" :key="result.count">
          <td class="tdles">{{ result.LogSource.Name }}</td>
          <td class="tdles">{{ result.LogSource.Type }}</td>
          <td class="tduc">
            <!-- Displaying all the use cases for this log source -->
            <template v-for="(useCase, index) in result.UseCases" :key="index">
              <div>
                <p><b>Název: </b>{{ useCase.Title }}</p>
                <p><b>Popis pravidla: </b>{{ useCase.Description }}</p>
                <p><b>Pojmenování podle zvoleného frameworku: </b>{{ useCase.GeneratedName }}</p>
                <!-- Separating the use cases with a line-->
                <hr class="tducline" v-if="index < result.UseCases.length - 1">
              </div>
            </template>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import config from "../stores/endpoints";

export default {
  name: 'Mapping',
  mounted() {
    document.title = 'Nástroj pro mapování aktiv'; //title, that appears in the tab in the browser
  },
  data() {
    return {
      framework: '', //input framework
      logSources: [{name: '', type: '', additionalInfo: '', //main part of the logSources, sent to the WAG
        showModal: false, //depends, if the additional info should be added
        ipAddress: '', //additional info value
        hostname: '', //additional info value
        add: '', //additional info value
      }
      ],
      json: '', //json, that is sent to the WAG
      results: [], //results of the log sources and use cases, that come from the WAG
      item: { //item of the use case
        name: '',
        type: ''
      },
    }
  },
  methods: {
    addLogSource(index) { //adds another log source
      this.logSources.splice(index + 1, 0, {name: '', type: '', additionalInfo: ''})
    },
    removeLogSource(index) { //removes specified log source
      this.logSources.splice(index, 1)
    },
    showForm(index) { //shows the form to insert additional info to the log source
      this.logSources[index].showModal = true;
    },
    hideForm(index) { //hides the form to insert additional info to the log source
      this.logSources[index].showModal = false;
    },
    mapTable() { //maps the inserted log sources to the correlation rules
      //obtaining the right form of the LogSource object in the GUI, so it can be parsed back
      const logSources = this.logSources.map((logSource) => {
        return {
          name: logSource.name,
          type: logSource.type,
          additionalInfo: logSource.additionalInfo,
        };
      });
      //specifying the data sent to the WAG, containing of the List<LogSource> and string framework
      const data = {framework: this.framework, logSources};
      this.json = JSON.stringify(data);
      fetch(config.webApiGateway, { //getting the WAG URL from the config file
        method: 'POST', //HTTP method
        headers: { //adding to the headers
          'Content-Type': 'application/json',
          'Accept': 'application/json'
        },
        body: JSON.stringify(data) //data, that are sent
      })
          .then(response => response.json()) //converting the response to the JSON
          .then(response => {
            this.results = response.Results; //saving the List<Result> object to the results[]
          })
          .catch(error => {
            console.error('Error:', error); //handling error
          });
    },
  }
};
</script>
