nocodb/packages/nc-gui/components/project/tableTabs/logicGrpc.vue

<template>
  <div>

    <v-toolbar flat height="42" class="toolbar-border-bottom">
      <v-toolbar-title>
        <v-breadcrumbs :items="[{
          text: nodes.env,
          disabled: true,
          href: '#'
        },{
          text: nodes.dbAlias,
          disabled: true,
          href: '#'
        },
        {
          text: nodes.tn || nodes.view_name + ' (APIs)',
          disabled: true,
          href: '#'
        }]" divider=">" small>
          <template v-slot:divider>
            <v-icon small color="grey lighten-2">forward</v-icon>
          </template>
        </v-breadcrumbs>

      </v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn small outlined @click="showSwagger = !showSwagger" class="caption text-capitalize" color="primary">
        <v-icon small  color="primary"> {{showSwagger ?'mdi-eye-off-outline' : 'mdi-eye-outline'}}</v-icon> &nbsp;

        {{ showSwagger ? 'Hide Protobuf' : 'Show Protobuf' }}</v-btn>
      <x-btn outlined tooltip="Reload Rows"
             color="primary"
             small
             v-ge="['rows','reload']"
             @click="loadSchema(); loadRpcs();">
        <v-icon small left>refresh</v-icon>
        Reload
      </x-btn>


    </v-toolbar>

    <v-container fluid>
      <v-row>
        <v-col v-if="showSwagger">

          <v-card class="flex-shrink-1">

            <div class="text-center" style="padding: 3px">

              <span class="title schema-card-title">Protobuf</span>
            </div>
            <div class="d-flex pa-3">
              <v-spacer></v-spacer>
              <x-btn outlined :tooltip="`Compare GQL schema history of ${nodes.tn}`"
                     color="primary"
                     x-small
                     :disabled="loading || !schemaHistory.length"
                     @click.prevent="schemaDiffDialog = true">
                <v-icon small left>mdi-source-branch</v-icon>
                History <span class="history-count" v-if="schemaHistory.length">({{ schemaHistory.length }})</span>
              </x-btn>
              <x-btn outlined tooltip="Save Changes"
                     color="primary"
                     x-small
                     :disabled="loading"
                     v-ge="['rows','save']"
                     @click.prevent="saveMessageAndRpc">
                <v-icon small left>save</v-icon>
                Save
              </x-btn>

            </div>
            <p class="caption pa-1">Messages</p>
            <monaco-editor
              v-model="messages"
              theme=""
              style="min-height:250px;"

            />
            <p class="caption pa-1 mt-2">rpcs</p>
            <monaco-editor
              v-model="services"
              theme=""
              style="min-height:250px;"

            />
          </v-card>
        </v-col>
        <v-col>
          <!--    <div class="d-flex justify-center">-->
          <v-card class="flex-shrink-1" style="" v-if="rpcServices && filteredData.length">



            <v-text-field dense hide-details class="ma-2 mt-2"
                          :placeholder="`Search ${nodes.tn || nodes.view_name} rpc services`"
                          prepend-inner-icon="search" v-model="search"
                          outlined></v-text-field>


            <v-simple-table v-if="rpcServices" dense style="width: auto; min-width: 500px">
              <thead>
              <tr>

                <th colspan="2" class="text-center">

                  <div class="text-center">

                    <span class="title">RPC Services</span>
                  </div>

                </th>

                <th
                  width="60"
                  class="text-center">

                  <span class="title"></span>
                </th>
              </tr>

              </thead>
              <tbody>
              <tr v-for="{service,...rest} in filteredData"
              >

                <td width="20" class="px-0">

                </td>
                <td class="pl-0">

                  <v-tooltip bottom>
                    <template v-slot:activator="{ on }">
                      <span v-on="on">{{ service }}</span>
                    </template>
                    <span>{{ service }}</span>
                  </v-tooltip>
                </td>
                <td
                  width="60" class="pa-1 text-center method-cell">

                  <v-tooltip bottom>
                    <template v-slot:activator="{ on }">

                      <v-hover v-slot:default="{ hover }">
                        <v-icon @click="showSourceCode(service,rest)" small
                                :color="hover ? 'primary':''" v-on="on">mdi-pencil
                        </v-icon>
                      </v-hover>
                    </template>
                    Edit business logic
                  </v-tooltip>
                </td>

              </tr>
              </tbody>
            </v-simple-table>


            <v-alert v-else outlined type="info">Permission file not found</v-alert>
          </v-card>
        </v-col>
        <!--    </div>-->
      </v-row>
    </v-container>
    <grpc-handler-code-editor :nodes="nodes"
                              :service="editService"
                              :serviceData="editServiceData"
                              v-model="showCodeEditor"></grpc-handler-code-editor>


    <v-dialog v-model="schemaDiffDialog" scrollable min-width="600px">
      <v-card>
        <xc-diff
          v-model="messages"
          :history="schemaHistory"
        ></xc-diff>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>

import GrpcHandlerCodeEditor from "@/components/project/grpcHandlerCodeEditor";
import MonacoEditor from "~/components/monaco/MonacoEditor";

export default {
  name: "logic-grpc",
  components: {GrpcHandlerCodeEditor, MonacoEditor},
  props: ['nodes'],
  data: () => ({
    showSwagger:false,
    editServiceData: null,
    loading: false,
    search: '',
    rpcServices: null,
    methods: [
      'get', 'post', 'put', 'delete'
    ],
    methodColor: {
      'get': 'success',
      'post': 'warning',
      'put': 'info',
      'patch': 'secondary',
      'delete': 'error'
    },
    editService: '',
    showCodeEditor: false,
    messages: '',
    services: '',
    schemaHistory: [],
    schemaDiffDialog: false
  }),
  methods: {

    showSourceCode(service, serviceData) {
      this.editService = service;
      this.showCodeEditor = true;
      this.editServiceData = serviceData;
    },
    async loadSchema() {
      const tableMeta = await this.$store.dispatch('sqlMgr/ActSqlOp', [{
        env: this.nodes.env,
        dbAlias: this.nodes.dbAlias
      }, 'tableXcModelGet', {
        tn: this.nodes.tn || this.nodes.view_name
      }]);
      this.messages = tableMeta.messages;
      this.services = tableMeta.services;
      if (tableMeta.schema_previous) {
        this.schemaHistory = JSON.parse(tableMeta.schema_previous).reverse();
      } else {
        this.schemaHistory = [];
      }
    },
    async loadRpcs() {
      this.rpcServices = (await this.$store.dispatch('sqlMgr/ActSqlOp', [{
        env: this.nodes.env,
        dbAlias: this.nodes.dbAlias,
      }, 'xcRpcPolicyGet', {
        tn: this.nodes.tn || this.nodes.view_name
      }])).data.list;
    },
    async saveMessageAndRpc() {
      this.edited = false;
      try {
        await this.$store.dispatch('sqlMgr/ActSqlOp', [{
          env: this.nodes.env,
          dbAlias: this.nodes.dbAlias
        }, 'xcModelMessagesAndServicesSet', {
          tn: this.nodes.tn || this.nodes.view_name,
          messages: this.messages,
          services: this.services,
        }]);
        this.$toast.success('Successfully updated protobuf messages and rpcs').goAway(3000);
      } catch (e) {
        this.$toast.error('Failed to update validations').goAway(3000);
      }
    },
  },
  async created() {
    await this.loadRpcs();
    await this.loadSchema();
  },
  computed: {
    filteredData() {
      return this.rpcServices.filter(({service}) => service && (!this.search || service.toLowerCase().indexOf(this.search.toLowerCase()) > -1));
    }
  }
}
</script>

<style scoped>
.method-cell {
  border-left: 1px solid #aaa;
}
</style>
<!--
/**
 * @copyright Copyright (c) 2021, Xgene Cloud Ltd
 *
 * @author Naveen MR <oof1lab@gmail.com>
 * @author Pranav C Balan <pranavxc@gmail.com>
 *
 * @license GNU AGPL version 3 or any later version
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program. If not, see <http://www.gnu.org/licenses/>.
 *
 */
-->