From 3c9e475bd8e0c7f2a45d3cd5857e9c8776e81f5d Mon Sep 17 00:00:00 2001
From: weibaohui <weibaohui@yeah.net>
Date: Wed, 8 Nov 2023 16:26:39 +0800
Subject: [PATCH] port copy open

---
 src/backend/k8s/shell/Shell.service.ts        | 43 ++++++++++-------
 .../PortFoward/PortForwardActionView.vue      | 47 ++++++++++++++++---
 .../PortFoward/PortForwardListView.vue        |  5 +-
 .../components/container/ContainersView.vue   | 27 +++++++++--
 src/frontend/components/pod/PodView.vue       | 14 +++---
 5 files changed, 101 insertions(+), 35 deletions(-)

diff --git a/src/backend/k8s/shell/Shell.service.ts b/src/backend/k8s/shell/Shell.service.ts
index 1c1ddd1..0805079 100644
--- a/src/backend/k8s/shell/Shell.service.ts
+++ b/src/backend/k8s/shell/Shell.service.ts
@@ -108,31 +108,42 @@ export class ShellService {
   @Cron(CronExpression.EVERY_SECOND)
   cornCheckPortList() {
     this.shellList.forEach((d) => {
-      d.portForward.status = this.ncPort(d.portForward.localPort)
-      d.portForward.statusTimestamp = moment().local().toDate()
-      this.logger.log(`nc probe ${d.portForward.localPort}`)
+      this.ncPort(d.portForward.localPort,
+        () => {
+          d.portForward.status = 'succeeded'
+          d.portForward.statusTimestamp = moment().local().toDate()
+          // this.logger.log(`nc probe ${d.portForward.localPort} succeeded`)
+        },
+        () => {
+          d.portForward.status = 'refused'
+          d.portForward.statusTimestamp = moment().local().toDate()
+          // this.logger.log(`nc probe ${d.portForward.localPort} refused`)
+        })
+
+      // this.logger.log(`nc probe ${d.portForward.localPort}`)
     })
   }
 
-  ncPort(port: number) {
-    let result = 'refused'
+  ncPort(port: number, successCallback: () => void, refusedCallback: () => void) {
     const nc = spawn('nc', ['-v', '-w', '1', '-z', '127.0.0.1', `${port}`])
-    // nc.on('close', (code, signal) => {
-    //   this.logger.error(
-    //       `child process terminated due to receipt of signal ${code} ${signal}`)
-    // })
+    nc.on('close', (code, signal) => {
+      this.logger.log(
+          `nc probe ${port} end ${code} ${signal}`)
+    })
     nc.stdout.on('data', (data) => {
       if (data.toString().includes('succeeded'))
-        result = 'succeeded'
-      // this.logger.error(data.toString())
+        successCallback()
+      if (data.toString().includes('refused'))
+        refusedCallback()
     })
     //
-    // nc.stderr.on('data', (data) => {
-    //   this.logger.error(data.toString())
-    // })
+    nc.stderr.on('data', (data) => {
+      if (data.toString().includes('succeeded'))
+        successCallback()
+      if (data.toString().includes('refused'))
+        refusedCallback()
+    })
     // Send SIGHUP to process.
     // nc.kill('SIGHUP')
-
-    return result
   }
 }
diff --git a/src/frontend/components/PortFoward/PortForwardActionView.vue b/src/frontend/components/PortFoward/PortForwardActionView.vue
index 5e1439c..02a5208 100644
--- a/src/frontend/components/PortFoward/PortForwardActionView.vue
+++ b/src/frontend/components/PortFoward/PortForwardActionView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { PortForward } from '@backend/model/PortForward'
-import { Edit } from '@vicons/fa'
-import { useDialog } from 'naive-ui'
+import { Chrome, Copy } from '@vicons/fa'
+import { useDialog, useMessage } from 'naive-ui'
 import type { ActionMenuOption } from '@backend/model/actionMenu'
 import MultipleMenuActionView from '@frontend/components/common/MultipleMenuActionView.vue'
 import { useDrawerService } from '@frontend/service/drawer-service/use-drawer'
@@ -10,17 +10,50 @@ const props = defineProps({
   pdb: PortForward,
   isDropdown: Boolean,
 })
-
+const message = useMessage()
 const dialog = useDialog()
 const drawer = useDrawerService()
+function copyToClipboard(text) {
+  navigator.clipboard.writeText(text)
+    .then(() => {
+      message.success(`${text}已复制到剪贴板`)
+    })
+    .catch((error) => {
+      console.error(`${text}复制文本到剪贴板时出错:${error}`)
+    })
+}
 function getOptions(): ActionMenuOption[] {
   return [
     {
-      label: 'Open',
-      key: 'Open',
-      icon: Edit,
+      label: 'Http Open',
+      key: 'HttpOpen',
+      icon: Chrome,
+      action: async () => {
+        window.open(`http://127.0.0.1:${props.pdb.localPort}`)
+      },
+    },
+    {
+      label: 'Https Open',
+      key: 'HttpsOpen',
+      icon: Chrome,
+      action: async () => {
+        window.open(`https://127.0.0.1:${props.pdb.localPort}`)
+      },
+    },
+    {
+      label: 'Http Copy',
+      key: 'HttpCopyUrl',
+      icon: Copy,
+      action: async () => {
+        copyToClipboard(`http://127.0.0.1:${props.pdb.localPort}`)
+      },
+    },
+    {
+      label: 'Https Copy',
+      key: 'HttpsCopyUrl',
+      icon: Copy,
       action: async () => {
-        console.log(`open ${props.pdb.localPort}`)
+        copyToClipboard(`https://127.0.0.1:${props.pdb.localPort}`)
       },
     },
   ]
diff --git a/src/frontend/components/PortFoward/PortForwardListView.vue b/src/frontend/components/PortFoward/PortForwardListView.vue
index e8ce3a5..788be41 100644
--- a/src/frontend/components/PortFoward/PortForwardListView.vue
+++ b/src/frontend/components/PortFoward/PortForwardListView.vue
@@ -4,6 +4,7 @@ import { TimerUtils } from '@backend/utils/TimerUtils'
 import PortForwardActionView from '@frontend/components/PortFoward/PortForwardActionView.vue'
 import { DialogHelper } from '@frontend/service/page/DialogHelper'
 import _ from 'lodash'
+import moment from 'moment/moment'
 import type { DataTableColumns } from 'naive-ui'
 import { useDialog } from 'naive-ui'
 import { h, onBeforeUnmount, onMounted, ref } from 'vue'
@@ -50,7 +51,9 @@ function createColumns(): DataTableColumns<PortForward> {
     {
       title: 'LastProbe',
       key: 'statusTimestamp',
-
+      render(row: PortForward) {
+        return moment(row.statusTimestamp).fromNow()
+      },
     },
     {
       title: 'Age',
diff --git a/src/frontend/components/container/ContainersView.vue b/src/frontend/components/container/ContainersView.vue
index 99a1cf2..048e1ed 100644
--- a/src/frontend/components/container/ContainersView.vue
+++ b/src/frontend/components/container/ContainersView.vue
@@ -1,18 +1,34 @@
 <script setup lang="ts">
+import type { V1ContainerPort } from '@backend/k8s/model/V1ContainerPort'
 import ContainerStatusIcon from '@frontend/components/container/ContainerStatusIcon.vue'
+import { K8sService } from '@frontend/service/k8s/K8sService'
 import { ColorHelper } from '@frontend/service/page/ColorHelper'
 import { ArrowsAltH, Docker } from '@vicons/fa'
-import { NDivider, NIcon, NSpace, NTable, NTag, NText } from 'naive-ui'
+import { NButton, NDivider, NIcon, NSpace, NTable, NTag, NText, useMessage } from 'naive-ui'
 import ContainerProbeView from '@frontend/components/container/ContainerProbeView.vue'
 import ContainerState from '@frontend/components/container/ContainerState.vue'
 import { V1Pod } from '@backend/k8s/model/V1Pod'
+import * as _ from 'lodash'
 
 const props = defineProps({
   pod: V1Pod,
 })
+
+const message = useMessage()
+
 function getContainerStatusByName(name) {
   return props.pod.status.containerStatuses.filter(r => r.name === name).pop()
 }
+async function forward(pod: V1Pod, p: V1ContainerPort) {
+  const randomInt = _.random(30000, 60000)
+  await K8sService.playService.shellControllerForwardPod({
+    ns: pod.metadata.namespace,
+    localPort: randomInt,
+    podPort: `${p.containerPort}`,
+    podName: pod.metadata.name,
+  })
+  message.success('转发成功')
+}
 </script>
 
 <template>
@@ -51,9 +67,12 @@ function getContainerStatusByName(name) {
         <tr v-if="t.ports">
           <td>Ports</td>
           <td>
-            <span v-for="p in t.ports" :key="p.containerPort">
-              {{ p.containerPort }}/{{ p.protocol }}
-            </span>
+            <p v-for="p in t.ports" :key="p.containerPort">
+              {{ p.name }}:{{ p.containerPort }}/{{ p.protocol }}
+              <NButton type="success" @click="forward(props.pod, p)">
+                Forward
+              </NButton>
+            </p>
           </td>
         </tr>
         <tr v-if="t.env">
diff --git a/src/frontend/components/pod/PodView.vue b/src/frontend/components/pod/PodView.vue
index ce06f48..1322ed8 100644
--- a/src/frontend/components/pod/PodView.vue
+++ b/src/frontend/components/pod/PodView.vue
@@ -16,13 +16,13 @@ const props = defineProps({
 <template>
   <NMessageProvider>
     <PodActionView :is-dropdown="false" :pod="props.pod" />
-  </NMessageProvider>
 
-  <PodBasicInfoView :pod="props.pod" :show-title="true" />
-  <TitleBar title="Containers" />
-  <ContainersView :pod="props.pod" />
-  <TitleBar title="Volumes" />
-  <PodVolumesView :pod="props.pod" />
+    <PodBasicInfoView :pod="props.pod" :show-title="true" />
+    <TitleBar title="Containers" />
+    <ContainersView :pod="props.pod" />
+    <TitleBar title="Volumes" />
+    <PodVolumesView :pod="props.pod" />
 
-  <InvolvedEventView :item="props.pod.metadata" :show-title="true" />
+    <InvolvedEventView :item="props.pod.metadata" :show-title="true" />
+  </NMessageProvider>
 </template>