playground-client/src/components/doclive/AdhocView.vue

<template>
  <div>
    <b-row no-gutters w-100 h-100 v-if="showlloedit">
      <b-col cols="12" sm="12" md="12">
        <b-row>
          <b-col cols="4">
            <div class="input-group input-group-sm sm-3">
              <!--
                    <select
                     class="custom-select custom-select-sm "
                      @change="setKeymap"
                      v-model="selected">
                      <option 
                        v-for="option in options" 
                        v-bind:value="option.value">
                          {{ option.text }}
                      </option>
                    </select>
                    <div class="input-group-append">
                        <button type="button"
                          round
                          class="btn btn-outline-info btn-sm"
                          v-if="cmOptions.keyMap == 'sublime'"
                          @click="infoFilter">
                          i</button>
                     </div>
-->
            </div>
          </b-col>

          <b-col cols="3">
            <div class="input-group input-group-sm sm-3">
              <button
                type="button"
                round
                disable
                class="btn btn-outline-info btn-sm"
                v-if="socketonline"
                @click="socketconnect"
              >
                online
              </button>
              <div v-if="socketonline">
                <button
                  type="button"
                  round
                  disable
                  class="btn btn-outline-info btn-sm"
                  v-if="socketonline"
                  @click="showHistory"
                >
                  {{ this.alllogs }}
                </button>
              </div>
              <button
                type="button"
                round
                class="btn btn-outline-info btn-sm"
                v-else
                @click="socketconnect"
              >
                socket disconnected
              </button>
            </div>
          </b-col>

          <b-col cols="5">
            <div
              class="input-group input-group-sm d-flex justify-content-end"
            ></div>
            <div class="input-group input-group-sm d-flex justify-content-end">
              <div class="input-group-append">
                <button
                  type="button"
                  round
                  class="btn btn-outline-warning btn-sm"
                  v-if="tryConsole"
                  @click="clear()"
                >
                  Clear
                </button>
              </div>
            </div>
          </b-col>
        </b-row>

        <div class="codemirror">
          <div v-if="history" class="table">
            <vuetable
              ref="vuetable"
              api-url="http://localhost:3000/test"
              :api-mode="true"
              :fields="[
                'message',
                'timestamp',
                'type',
                'process_id',
                'app_name',
              ]"
              data-path=""
              pagination-path=""
            >
            </vuetable>
          </div>
        </div>
      </b-col>
    </b-row>
  </div>
</template>
<script>
import { mapState, mapGetters, mapActions, dispatch } from "vuex";
import Vue from "vue";
import store from "@/store/index";
import Vuetable from "vuetable-2";

import { codemirror } from "vue-codemirror";
import JSZip from "jszip";
import FileSaver from "file-saver";
import "codemirror/lib/codemirror.css";
import "codemirror/theme/neat.css";
import "codemirror/theme/paraiso-light.css";
import "codemirror/addon/selection/active-line.js";

import "codemirror/addon/hint/show-hint.js";
import "codemirror/addon/hint/show-hint.css";
import "codemirror/addon/hint/javascript-hint.js";
import "codemirror/addon/selection/active-line.js";
import "codemirror/addon/scroll/annotatescrollbar.js";
import "codemirror/addon/search/matchesonscrollbar.js";
import "codemirror/addon/search/searchcursor.js";
import "codemirror/addon/search/match-highlighter.js";

import "codemirror/mode/shell/shell.js";
import "codemirror/addon/edit/matchbrackets.js";
import "codemirror/addon/comment/comment.js";
import "codemirror/addon/dialog/dialog.js";
import "codemirror/addon/dialog/dialog.css";
import "codemirror/addon/search/searchcursor.js";
import "codemirror/addon/search/search.js";
import "codemirror/keymap/sublime.js";
import "codemirror/keymap/vim.js";

import "codemirror/addon/fold/foldgutter.css";
import "codemirror/addon/fold/brace-fold.js";
import "codemirror/addon/fold/comment-fold.js";
import "codemirror/addon/fold/foldcode.js";
import "codemirror/addon/fold/foldgutter.js";
import "codemirror/addon/fold/indent-fold.js";
import "codemirror/addon/fold/markdown-fold.js";
import "codemirror/addon/fold/xml-fold.js";
import "codemirror/lib/codemirror";
import "codemirror/addon/display/placeholder";

export default {
  components: {
    codemirror,
    Vuetable,
  },
  data() {
    return {
      alllogs: "Show all logs",
      socketonline: false,
      tryConsole: false,
      history: false,
      ssl: {},
      getinfo: "",
      token: "",
      swarmlabname: "",

      code: "",
      editchoice: "",
      optionsedit: [
        { text: "code", value: "code" },
        { text: "text", value: "text" },
      ],
      llodesc: [
        {
          llo_url: "",
          llo_name: "",
          llo_author: "",
          llo_intro: "",
        },
      ],
      llo: [
        {
          id: 0,
          rm: false,
          data_info: "Asciidoc \n",
          data_code: "#Your source code",
          data_service: "",
          code_datafile: "url",
          code_name: "",
          code_exec: "",
          code_options: "",
          code_mime: "",
          code_info: "",
          code_code: "",
          code_codeout: "",
          code_codeoutput: "console",
          points: "",
          challenge_question: "",
          code_challenge_question: "",
          challenge_answer: "",
          challenge_answer_hint: "",
          code_challenge_answer_hint: "",
          challenge_answer_source: "",
          challenge_answer_code_out: "",
          challenge_answer_code: "",
          code_challenge_answer_code: "",
        },
      ],
      searchLLO: [],
      searchLLOactive: false,
      ADOC_html_code: "",
      challenge: [],
      action: "",
      tryLLO: [],
      service: "os2",
      active: 0,
      activecount: 0,
      remove: "",
      activeField: "",
      bootstrap: false,
      firstbootstrap: 0,
      htmlasciitmp: "",
      datafile:
        "https://git.swarmlab.io:3000/labs/examples-mpi2/raw/branch/master/0_netstat/data",
      datadir: "0_netstat/data",
      LearningObject: "",
      showllo: true,
      showlloedit: true,
      selected: "sublime",
      options: [
        { text: "vim", value: "vim" },
        { text: "sublime", value: "sublime" },
      ],
      optionsmime: [
        { text: "sh", value: "bash" },
        { text: "javascript", value: "javascript" },
        { text: "python", value: "python" },
        { text: "php", value: "php" },
        { text: "sql", value: "sq;" },
        { text: "xml", value: "xml" },
        { text: "c", value: "c" },
      ],
      pValidate: false,
      cmOptions: {
        tabSize: 2,
        styleActiveLine: true,
        lineNumbers: true,
        lineSeparator: "\n",
        line: true,
        foldGutter: true,
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
        highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true },
        styleSelectedText: true,
        mode: "shell",
        hintOptions: {
          completeSingle: false,
        },
        keyMap: "sublime",
        //keyMap: "vim",
        matchBrackets: true,
        showCursorWhenSelecting: true,
        indentUnit: this.ADOC_html_code,
        lineWrapping: true,
        //theme: 'neat',
        theme: "paraiso-light",
        refresh: true,
        readOnly: true,
        autofocus: false,
        extraKeys: { Ctrl: "autocomplete" },
      },
      ADOC_html: [],
    };
  },
  methods: {
    socketconnect() {
      // send to runLLO
      this.$root.$emit("SERVER_socket_connect");
    },
    showHistory() {
      if (this.history == false) {
        this.history = true;
        this.alllogs = "Hide all logs";
      } else {
        this.alllogs = "Show all logs";
        this.history = false;
      }
    },
    clear() {
      this.tryConsole = false;
      this.code = "";
    },
    async getdata() {
      var field = this.getinfo;
      var log = await store.dispatch("pipelineLLO/get_data", {
        code: field,
      });
    },

    async showactive(index) {
      this.topwindow(index);
    },
    onCmReady(cm) {
      cm.on("change", (cm, chg) => {}),
        cm.on("keypress", () => {
          cm.showHint({ completeSingle: false });
        });
    },
    onCmCursorActivity(a, b, c) {},
    onCmFocus(cm) {},
    onCmCodeChange(newCode) {
      this.code = newCode;
      //this.$root.$emit('socket_add',this.code)
    },
    handleChange() {},
    setKeymap() {
      this.cmOptions.keyMap = this.selected;
    },
    infoFilter() {
      var title1 = "<h3>Playbook Images</h3>";
      var winfop =
        '<table  class="table table-striped table-sm ">' +
        '<tr><td class="text-left">Shift-Tab</td> <td class="text-left">indentLess</td></tr>' +
        '<tr><td class="text-left">Alt-Q</td> <td class="text-left">wrapLines</td></tr>' +
        '<tr><td class="text-left">Ctrl-Up</td> <td class="text-left">scrollLineUp</td></tr>' +
        '<tr><td class="text-left">Ctrl-Down</td> <td class="text-left">scrollLineDown</td></tr>' +
        '<tr><td class="text-left">Ctrl-L</td> <td class="text-left">selectLine</td></tr>' +
        '<tr><td class="text-left">Esc</td> <td class="text-left">singleSelectionTop</td></tr>' +
        '<tr><td class="text-left">Ctrl-Enter</td> <td class="text-left">insertLineAfter</td></tr>' +
        '<tr><td class="text-left">Ctrl-D</td> <td class="text-left">selectNextOccurrence</td></tr>' +
        '<tr><td class="text-left">Shift-Ctrl-Space</td> <td class="text-left">selectScope</td></tr>' +
        '<tr><td class="text-left">Shift-Ctrl-M</td> <td class="text-left">selectBetweenBrackets</td></tr>' +
        '<tr><td class="text-left">Ctrl-M</td> <td class="text-left">goToBracket</td></tr>' +
        '<tr><td class="text-left">Ctrl-K Ctrl-Y</td> <td class="text-left">sublimeYank</td></tr>' +
        '<tr><td class="text-left">Ctrl-K Ctrl-C</td> <td class="text-left">showInCenter</td></tr>' +
        '<tr><td class="text-left">Ctrl-K Ctrl-G</td> <td class="text-left">clearBookmarks</td></tr>' +
        '<tr><td class="text-left">Ctrl-K Ctrl-Backspace</td> <td class="text-left">delLineLeft</td></tr>' +
        '<tr><td class="text-left">Ctrl-K Ctrl-0</td> <td class="text-left">unfoldAll</td></tr>' +
        '<tr><td class="text-left">Ctrl-K Ctrl-J</td> <td class="text-left">unfoldAll</td></tr>' +
        '<tr><td class="text-left">Ctrl-Alt-Up</td> <td class="text-left">addCursorToPrevLine</td></tr>' +
        '<tr><td class="text-left">Ctrl-Alt-Down</td> <td class="text-left">addCursorToNextLine</td></tr>' +
        '<tr><td class="text-left">Ctrl-F3</td> <td class="text-left">findUnder</td></tr>' +
        '<tr><td class="text-left">Shift-Ctrl-F3</td> <td class="text-left">findUnderPrevious</td></tr>' +
        '<tr><td class="text-left">Shift-Ctrl-[</td> <td class="text-left">fold</td></tr>' +
        '<tr><td class="text-left">Shift-Ctrl-]</td> <td class="text-left">unfold</td></tr>' +
        '<tr><td class="text-left">Ctrl-F</td> <td class="text-left">find</td></tr>' +
        "</table>";

      var title1 = "";
      var winfo = "";
      this.$swal({
        title: "<strong>Key bindings</strong>",
        type: "info",
        html: winfop + title1 + winfo,
        showCloseButton: true,
        showLoaderOnConfirm: false,
        allowOutsideClick: false,
      });
    },
    async hotreload() {
      var field = this.getinfo;
      var log = await store.dispatch("pipelineLLO/hotreload", {
        token: this.token,
        swarmlabname: this.swarmlabname,
      });
    },
    infoHotreload() {
      var html1 = ` <div style="overflow-x: auto;"> <table  class="table table-striped table-sm ">
        <thead>
            <tr>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="text-left" >Download</td>
                <td class="text-left">https://git.swarmlab.io:3000/labs/swarmlab-playground-client/raw/branch/master/hot_reload.sh</td>
            </tr>
            <tr>
                <td class="text-center" colspan="2"><b>and add the proper values</b></td>
            </tr>
            <tr>
              <td class="text-left">token</td>
              <td class="text-left">${this.token}</td>
            </tr>
            <tr>
              <td class="text-left">swarmlabname</td>
              <td class="text-left">${this.swarmlabname}</td>
            </tr>
            <tr>
              <td class="text-center" colspan="2"><b>OR set the variables before exec</b></td>
            </tr>
            <tr>
              <td class="text-left" colspan="2">export SWARMLAB_token=${this.token}</td>
            </tr>
            <tr>
              <td class="text-left" colspan="2">export SWARMLAB_name=${this.swarmlabname}</td>
            </tr>
            <tr>
              <td class="text-center" colspan="2"><b>Ready!</b<</td>
            </tr>
            <tr>
              <td class="text-left" colspan="2"><i>Execute script every time you run git push</i></td>
            </tr>
</tbody>
</table></div>`;

      this.$swal({
        title: "<strong>HowTo</strong>",
        type: "info",
        html: html1,
        showCloseButton: true,
        showLoaderOnConfirm: false,
        allowOutsideClick: false,
      });
    },
  },
  computed: {
    codemirror() {
      return this.$refs.myCm.codemirror;
    },
  },
  mounted() {
    // from runLLO
    this.$root.$on("SERVER_socket_status", (v) => {
      this.$nextTick(function() {
        if (v == "off") {
          this.socketonline = false;
        } else if (v == "on") {
          this.socketonline = true;
        }
      });
    });
    // from runLLO
    this.$root.$on("playground_log_in", (path) => {
      //this.$nextTick(function () {
      var restapi = store.getters["pipelineLLO/getrestapi"];
      if (restapi == "off") {
        // rest off ara socket
        var logtmp = store.getters["pipelineLLO/getlog"];
      } else if (restapi == "on") {
        // rest on ara read from rest not from socket
        var logtmp = store.getters["pipelineLLO/getmongolog"];
      }
      console.log("logtmp-roi " + JSON.stringify(logtmp));
      var itemlog = "";
      this.code = "";
      itemlog = logtmp.filter((item1) => item1.tailed_path === path);
      //Vue.set(this.log_path_lenght, item, loglenght);
      console.log("logtmp22 " + JSON.stringify(itemlog));
      for (let iteml of itemlog) {
        this.code += iteml.message + " " + iteml.tailed_path + " " + iteml.date;

        this.code += "\n";
      }
      /*
        for (let itemlog of logtmp) {
          //console.log('logtmp '+ JSON.stringify(itemlog))
          this.code += itemlog.message
           + ' '
           + itemlog.tailed_path
           + ' '
           + itemlog.date

         //  + itemlog.date.year
         //  + ' '
         //  + itemlog.date.month
         //  + ' '
         //  + itemlog.date.day
         //  + ' '
         //  + itemlog.date.hours
         //  + ' '
         //  + itemlog.date.seconds
         //  + ' '
         //  + itemlog.date.milliseconds

          this.code += "\n"
        }
        */

      //this.code += v
      //this.code += "\n"
      this.$refs.myCm.codemirror.setCursor(
        this.$refs.myCm.codemirror.lineCount(),
        0
      );
      this.tryConsole = true;
      //})
    });
  },
  beforeDestroy() {
    this.$root.$off("SERVER_socket_status");
    this.$root.$off("playground_log_in");
  },

  created() {
    //LEFOS TOKEN ====
    //this.token = new URL(location.href).searchParams.get("token");
    this.token = new URL(
      "https://api-client.swarmlab.io:8088/?token=59e732744987bc63a98a4f909d50984371b44543"
    ).searchParams.get("token");

    this.swarmlabname = new URL(location.href).searchParams.get("pipelinename");
  },
};
</script>

<style>
.table {
  overflow: auto;
}
.CodeMirror {
  font-family: monospace;
  height: 550px;
}
</style>