Merge pull request #74 from constantine2nd/develop

Remove automatic copying of text on from API Explorer

components.d.ts

@@ -1,10 +1,10 @@
 /* eslint-disable */
-/* prettier-ignore */
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}
 
+/* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
     ChatWidget: typeof import('./src/components/ChatWidget.vue')['default']

package.json

@@ -1,6 +1,6 @@
 {
   "name": "api-explorer",
-  "version": "1.0.26",
+  "version": "1.0.29",
   "private": true,
   "scripts": {
     "dev": "vite & ts-node server/app.ts",

server/app.ts

@@ -34,6 +34,7 @@ import express, { Application } from 'express'
 import { useExpressServer, useContainer } from 'routing-controllers'
 import { Container } from 'typedi'
 import path from 'path'
+import { execSync } from 'child_process';
 
 const port = 8085
 const app: Application = express()
@@ -108,7 +109,6 @@ useContainer(Container)
 const routePrefix = '/api'
 
 const server = useExpressServer(app, {
-  //routePrefix: '/api/v1',
   routePrefix: routePrefix,
   controllers: [path.join(__dirname + '/controllers/*.*s')],
   middlewares: [path.join(__dirname + '/middlewares/*.*s')]
@@ -120,4 +120,18 @@ console.log(
   `Backend is running. You can check a status at http://localhost:${port}${routePrefix}/status`
 )
 
+// Get commit ID
+export const commitId = execSync('git rev-parse HEAD').toString().trim();
+console.log('Current Commit ID:', commitId);
+
+// Error Handling to Shut Down the App
+server.on('error', (err) => {
+  if (err.code === 'EADDRINUSE') {
+    console.error(`Port ${port} is already in use.`);
+    process.exit(1); // Shut down the app
+  } else {
+    console.error('An error occurred:', err);
+  }
+});
+
 export default app

server/controllers/StatusController.ts

@@ -31,6 +31,7 @@ import OBPClientService from '../services/OBPClientService'
 import OauthInjectedService from '../services/OauthInjectedService'
 import { Service } from 'typedi'
 import { OAuthConfig } from 'obp-typescript'
+import { commitId } from '../app'
 
 @Service()
 @Controller('/status')
@@ -64,7 +65,8 @@ export class StatusController {
       apiVersions,
       messageDocs,
       resourceDocs,
-      currentUser
+      currentUser,
+      commitId
     })
   }
 

src/components/Preview.vue

@@ -263,10 +263,9 @@ const copyToClipboard = () => {
       <input type="text" v-show="exampleRequestBody" v-model="exampleRequestBody" />
     </div>
     <div v-show="successResponseBody">
-      <pre>
-        {{ responseHeaderTitle }}:
+      <pre><span>{{ responseHeaderTitle }}:</span>
         <code>
-          <div @click="copyToClipboard" id="code" v-html="successResponseBody"></div>
+          <div id="code" v-html="successResponseBody"></div>
         </code>
       </pre>
     </div>
@@ -370,6 +369,9 @@ pre {
   font-family: 'Roboto';
   font-weight: normal;
 }
+pre span {
+  all: unset; /* Reset all default styles */
+}
 input[type='text'] {
   color: #ffffff;
   font-size: 14px;

src/obp/common-functions.ts

@@ -44,23 +44,24 @@ export function updateLoadingInfoMessage(logMessage: string) {
 }
 
 export function updateServerStatus() {
-  const oElem = document.getElementById('backend-status')
+  const oElem = document.getElementById('backend-status');
   serverStatus()
     .then((body) => {
       if (oElem) {
-        Object.values(body).every((i) => i === true)
+        body.status === true
           ? (oElem.className = 'server-is-online')
-          : (oElem.className = 'server-is-offline')
+          : (oElem.className = 'server-is-offline');
       }
     })
     .catch((error) => {
-      console.log(error)
+      console.error(error);
       if (oElem) {
-        oElem.className = 'server-is-offline'
+        oElem.className = 'server-is-offline';
       }
-    })
+    });
 }
 
+
 export async function getCacheStorageInfo() {
   const message = await navigator.storage.estimate().then((estimate) => {
     const percent = ((estimate.usage / estimate.quota) * 100).toFixed(2)

src/views/APIServerStatusView.vue

@@ -39,15 +39,15 @@ onBeforeMount(async () => {
 <template>
   <main>
     <div class="content">
-      <div v-for="(value, name, index) in status">
+      <div v-for="(value, name, index) in status" :key="index" v-if="name !== 'commitId'">
         <div v-if="name === 'status'" class="status">
           <el-icon v-if="value === true" style="vertical-align: middle; color: green; width: auto"
             ><SuccessFilled
           /></el-icon>
           <el-icon v-else style="vertical-align: middle; color: red"><RemoveFilled /></el-icon>
           <span class="main-status-label">{{ name }}</span>
         </div>
-        <div v-else class="sub-status">
+        <div v-else-if="name !== 'commitId'" class="sub-status">
           <span class="status-label">{{ name }}</span>
           &nbsp;&nbsp;&nbsp;<el-divider />&nbsp;&nbsp;&nbsp;
           <el-icon
@@ -60,7 +60,8 @@ onBeforeMount(async () => {
       </div>
     </div>
   </main>
-  <span>Version: {{ version }}</span>
+  <span>App Version: {{ version }}</span>
+  <span>Commit ID: {{ status.commitId }}</span>
 </template>
 
 <style scoped>

src/views/GlossaryView.vue

@@ -85,15 +85,13 @@ a {
   color: #39455f;
 }
 .content :deep(a) {
-  text-decoration: none;
-  color: #ffffff;
+  text-decoration: underline;
   font-family: 'Roboto';
   font-size: 14px;
   border-radius: 3px;
-  background-color: #52b165;
   padding: 1px;
 }
 .content :deep(a):hover {
-  background-color: #39455f;
+  background-color: #a4b2ce;
 }
 </style>