feature/Add commit id info

package.json

@@ -1,6 +1,6 @@
 {
   "name": "api-explorer",
-  "version": "1.0.27",
+  "version": "1.0.28",
   "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')
@@ -60,9 +61,10 @@ export class StatusController {
     const resourceDocs = await this.checkResourceDocs(oauthConfig, version)
     return response.json({
       status: apiVersions && messageDocs && resourceDocs,
-      apiVersions,
-      messageDocs,
-      resourceDocs
+      api_version: apiVersions,
+      message_docs: messageDocs,
+      resource_docs: resourceDocs,
+      commit_id: commitId
     })
   }
 

src/components/Preview.vue

@@ -263,7 +263,7 @@ const copyToClipboard = () => {
       <input type="text" v-show="exampleRequestBody" v-model="exampleRequestBody" />
     </div>
     <div v-show="successResponseBody">
-      <pre><span @click="copyToClipboard">{{ responseHeaderTitle }}:</span>
+      <pre><span>{{ responseHeaderTitle }}:</span>
         <code>
           <div id="code" v-html="successResponseBody"></div>
         </code>

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,7 +39,7 @@ 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 !== 'commit_id'">
         <div v-if="name === 'status'" class="status">
           <el-icon v-if="value === true" style="vertical-align: middle; color: green; width: auto"
             ><SuccessFilled
@@ -47,7 +47,7 @@ onBeforeMount(async () => {
           <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 !== 'commit_id'" 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.commit_id }}</span>
 </template>
 
 <style scoped>