云原生模块开发-k8s节点信息获取

希里安 2023-05-12

604

关注“希里安”，get更多有用干货

昨天分享了有关k8s管理平台的知识，基础的功能大同小异，关键在于适用于不同的业务，开发对应的功能。

今天再说说cops平台的开发进度，昨天做了导航菜单，今天就该把集群节点信息的展示功能做出来，先看看效果：

前端页面展示：

后端接口返回数据：

其实就是之前我们说的用表格展示获取的后端数据，这个数据来源于k8s集群api的调用返回的。

这里从全流程梳理下：

前端引入表格组件，再调用后端的接口，后端程序调用K8s集群的api，获得集群相关信息，然后返回给前端，前端渲染即可。

前端表格组件的引入，我们使用的antd组件，可以全量引入或者按需引入，框架用的vben，官网这么说：

全局使用

import { createApp } from 'vue';
import App from './App.vue';
import Antd from 'ant-design-vue';
const app = createApp(App);
app.use(Antd);
app.mount('#app');

局部使用

<template>
<Button>text</Button>
</template>
<script>
import { defineComponent } from 'vue';
import { Button } from 'ant-design-vue';
export default defineComponent({
components: {
Button,
},
 });
</script>

组件全量注册

在main.ts内
import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.less';
const app = createApp(App);
app.use(Antd);

删除以下代码

if (import.meta.env.DEV) {
import('ant-design-vue/dist/antd.less');
}

然后直接引入官网的表格示例代码即可：

<template>
<a-table
:columns="columns"
:row-key="record => record.login.uuid"
:data-source="dataSource"
:pagination="pagination"
:loading="loading"
@change="handleTableChange"
>
<template #bodyCell="{ column, text }">
<template v-if="column.dataIndex === 'name'">{{
text.first }} {{ text.last }}</template>
</template>
</a-table>
</template>
<script lang="ts">
import type { TableProps } from
'ant-design-vue';
import { usePagination } from
'vue-request';
import { computed, defineComponent } from
'vue';
import axios from 'axios';
const columns = [
 {
title: 'Name',
dataIndex: 'name',
sorter: true,
  width: '20%',
 },
 {
title: 'Gender',
dataIndex: 'gender',
filters: [
{ text: 'Male', value: 'male' },
{ text: 'Female', value: 'female' },
],
width: '20%',
 },
 {
title: 'Email',
dataIndex: 'email',
 },
];
type APIParams = {
results: number;
page?: number;
sortField?: string;
sortOrder?: number;
[key: string]: any;
};
type APIResult = {
results: {
gender: 'female' | 'male';
name: string;
email: string;
}[];
};
const queryData = (params: APIParams) =>
{
return axios.get<APIResult>('https://randomuser.me/api?noinfo', {
params });
};
export default defineComponent({
setup() {
const {
data: dataSource,
run,
loading,
current,
pageSize,
 }
= usePagination(queryData, {
formatResult: res => res.data.results,
pagination: {
currentKey: 'page',
pageSizeKey: 'results',
},
});
const pagination = computed(() => ({
total: 200,
current: current.value,
pageSize: pageSize.value,
}));
const handleTableChange: TableProps['onChange'] = (
pag: { pageSize: number; current: number },
filters: any,
sorter: any,
 )
=> {
run({
results: pag.pageSize!,
page: pag?.current,
sortField: sorter.field,
sortOrder: sorter.order,
...filters,
});
};
return {
dataSource,
pagination,
loading,
columns,
handleTableChange,
};
 },
});
</script>

改一下前端显示的表格列字段名字符合自己需求即可。

再来看看后端api的开发：

1、和k8s集群建立连接

2、获取集群信息

3、返回数据

以下是示例代码：

package main
import (
 "context"
 "fmt"
 "log"
 "k8s.io/client-go/kubernetes"
 "k8s.io/client-go/rest"
 "k8s.io/client-go/tools/clientcmd"
)
func main() {
 config,
err := rest.InClusterConfig()
 if
err != nil {
 kubeconfig
:= "/path/to/kubeconfig"
 config,
err = clientcmd.BuildConfigFromFlags("", kubeconfig)
 if
err != nil {
 log.Fatal(err)
 }
 }
 clientset,
err := kubernetes.NewForConfig(config)
 if
err != nil {
 log.Fatal(err)
 }
 nodes,
err := clientset.CoreV1().Nodes().List(context.Background(),
metav1.ListOptions{})
 if
err != nil {
 log.Fatal(err)
 }
 for
_, node := range nodes.Items {
 fmt.Printf("Node
name: %s\n", node.Name)
 fmt.Printf("Node
labels: %v\n", node.Labels)
 fmt.Printf("Node
addresses: %v\n", node.Status.Addresses)
 fmt.Printf("Node
conditions: %v\n", node.Status.Conditions)
 fmt.Printf("Node
capacity: %v\n", node.Status.Capacity)
 fmt.Printf("Node
allocatable: %v\n", node.Status.Allocatable)
 fmt.Printf("Node
info: %v\n", node.Status.NodeInfo)
 fmt.Println("------------------------------------------------------")
 }
}

其余的开发也就是如此流程，就是不断调用k8s开放的api，进行一系列的增删改查的操作。今天的分享就到这了，感兴趣的朋友点赞关注呀！

k8s 软件 pagination vue

文章转载自希里安，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

云原生模块开发-k8s节点信息获取

评论