devops新增imagebuilder

locales/zh/l10n-devopsProjects-continuousDeployments-list.js

@@ -18,6 +18,7 @@
 module.exports = {
   // Banner
   CONTINUOUS_DEPLOYMENT_PL: '持续部署',
+
   CONTINUOUS_DEPLOYMENT_DESC: '管理持续部署，以通过 GitOps 持续部署资源。 ',
   // List
   CONTINUOUS_DEPLOYMENT_EMPTY_DESC: '请创建一个部署。',

locales/zh/l10n-projects-imageBuilders-list.js

@@ -19,6 +19,7 @@ module.exports = {
   // Banner
   IMAGE_BUILDER_PL: '镜像构建器',
   IMAGE_BUILDER_DESC: '镜像构建器（Image Builder）是将代码或者制品制作成容器镜像的工具。您可以通过简单的设置将制品或代码直接制作成容器镜像。',
+
   // List
   IMAGE_BUILDER_EMPTY_DESC: '请创建一个镜像构建器。',
   NOT_RUNNING_YET: '未运行',

server/config.yaml

@@ -412,6 +412,12 @@ client:
             icon: vnas,
             clusterModule: devops,
           }
+        - {
+            name: new_s2ibuilders,
+            title: NEW_IMAGE_BUILDER_PL,
+            icon: vnas,
+            clusterModule: devops,
+          }
         - name: monitoring
           title: MONITORING_AND_ALERTING
           icon: monitor
@@ -515,6 +521,14 @@ client:
             authKey: "applications",
             requiredClusterVersion: v3.3.0,
           }
+          # 新s2i
+        - {
+            name: image-builder,
+            title: IMAGE_BUILDER_PL,
+            icon: rocket,
+            authKey: "applications",
+            requiredClusterVersion: v3.3.0,
+          }
         - {
             name: code-repo,
             title: CODE_REPO_PL,

src/actions/imagebuilder.js

@@ -36,21 +36,24 @@ const filterImageEnv = (data, fn) => {
 }
 
 export default {
+  //当触发 'imagebuilder.create' 操作时，会打开一个模态框（弹窗），显示一个创建图像构建的表单。
   'imagebuilder.create': {
     on({ store, cluster, namespace, module, success, ...props }) {
+      //获取 formTemplate：根据模块（module）获取表单模板。
       const formTemplate = FORM_TEMPLATES[module]({
         namespace,
       })
-
+      //通过 Modal.open 打开模态框，传入一系列属性设置
       const modal = Modal.open({
+        //用户点击模态框中的确认按钮后执行的操作
         onOk: data => {
           if (!data) {
             return
           }
 
           const environment = filterImageEnv(data, v => !isEmpty(v))
           set(data, 'spec.config.environment', environment)
-
+          //确认按钮点击后，关闭，显示成功，清除表单数据
           store.create(data, { cluster, namespace }).then(() => {
             Modal.close(modal)
             Notify.success({ content: t('CREATE_SUCCESSFUL') })
@@ -71,7 +74,9 @@ export default {
       })
     },
   },
+  //当触发 'imagebuilder.rerun' 操作时
   'imagebuilder.rerun': {
+    //打开一个模态框，显示一个重新运行图像构建的表单
     on({ store, detail, success, ...props }) {
       const modal = Modal.open({
         onOk: data => {

src/components/HOCs/withList.js

@@ -26,7 +26,9 @@ import { MODULE_KIND_MAP } from 'utils/constants'
 import { trigger } from 'utils/action'
 import ObjectMapper from 'utils/object.mapper'
 
+//用于生列表展示相关功能的工厂函数，接收options，返回一个函数WrappedComponent
 export default function withList(options) {
+  //该返回函数接受一个目标组件，返回增强的组件listwrapper
   return WrappedComponent => {
     const ObserverComponent = observer(WrappedComponent)
     class ListWrapper extends React.Component {

src/pages/devops/containers/ImageBuilder/Detail/BuildRecords/index.jsx

@@ -0,0 +1,61 @@
+/*
+ * This file is part of KubeSphere Console.
+ * Copyright (C) 2019 The KubeSphere Console Authors.
+ *
+ * KubeSphere Console 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.
+ *
+ * KubeSphere Console 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 KubeSphere Console.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import React from 'react'
+import { get } from 'lodash'
+import { observer, inject } from 'mobx-react'
+
+import ImageBuilderLastRun from 'projects/components/Cards/ImageBuilderLastRun'
+import RunRecords from 'projects/components/Cards/ImageRunRecord'
+import styles from './index.scss'
+
+@inject('detailStore', 's2iRunStore')
+@observer
+class BuildRecords extends React.Component {
+  get store() {
+    return this.props.detailStore
+  }
+
+  get isB2i() {
+    return get(this.store.detail, 'spec.config.isBinaryURL')
+  }
+
+  render() {
+    const { params } = this.props.match
+    const { runDetail } = this.props.s2iRunStore
+
+    return (
+      <React.Fragment>
+        <div className={styles.title}>{t('LAST_BUILD_ENVIRONMENT')}</div>
+        <div className={styles.card}>
+          <ImageBuilderLastRun
+            isB2i={this.isB2i}
+            runDetail={runDetail}
+            params={params}
+          />
+        </div>
+        <div className={styles.title}>{t('RUN_RECORDS')}</div>
+        <div className={styles.card}>
+          <RunRecords isB2i={this.isB2i} params={params} />
+        </div>
+      </React.Fragment>
+    )
+  }
+}
+
+export default BuildRecords

src/pages/devops/containers/ImageBuilder/Detail/BuildRecords/index.scss

@@ -0,0 +1,43 @@
+@import '~scss/variables';
+@import '~scss/mixins';
+
+.main {
+  padding: 0;
+
+  > div:first-child {
+    padding: 20px 20px 0 20px;
+  }
+}
+
+.table {
+  :global {
+    .table {
+      border-radius: 0 0 $border-radius $border-radius;
+    }
+  }
+}
+
+.clickable {
+  &:hover {
+    cursor: pointer;
+    color: $btn-primary-hover-bg;
+  }
+}
+
+.content {
+  padding-top: 20px;
+}
+
+.title {
+  height: 20px;
+  margin-bottom: 5px;
+  @include TypographySymbolText;
+}
+
+.card {
+  padding: 12px;
+  margin-bottom: 12px;
+  border-radius: 4px;
+  box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06);
+  background-color: #ffffff;
+}

src/pages/devops/containers/ImageBuilder/Detail/Environment/index.jsx

@@ -0,0 +1,95 @@
+/*
+ * This file is part of KubeSphere Console.
+ * Copyright (C) 2019 The KubeSphere Console Authors.
+ *
+ * KubeSphere Console 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.
+ *
+ * KubeSphere Console 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 KubeSphere Console.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import React from 'react'
+import { toJS } from 'mobx'
+import { observer, inject } from 'mobx-react'
+import { isEmpty, get } from 'lodash'
+
+import EnvStore from 'stores/workload/env'
+
+import ContainerEnvCard from 'components/Cards/Containers/EnvVariables'
+
+@inject('s2iRunStore')
+@observer
+export default class EnvVariables extends React.Component {
+  constructor(props) {
+    super(props)
+    this.envStore = new EnvStore()
+  }
+
+  componentDidMount() {
+    this.fetchData()
+  }
+
+  get module() {
+    return this.props.module
+  }
+
+  get store() {
+    return this.props.s2iRunStore
+  }
+
+  get namespace() {
+    return this.store.jobDetail.namespace
+  }
+
+  get cluster() {
+    return this.props.match.params.cluster
+  }
+
+  get containers() {
+    const data = toJS(this.store.jobDetail)
+    const { spec, containers = [] } = data
+
+    if (this.module === 'containers') return [data]
+
+    if (!isEmpty(containers)) return containers
+    if (!isEmpty(spec)) return get(spec, 'template.spec.containers', [])
+
+    return []
+  }
+
+  get test() {
+    return '2'
+  }
+
+  fetchData = () => {
+    this.envStore.fetchList({
+      cluster: this.cluster,
+      namespace: this.namespace,
+      containers: this.containers,
+    })
+  }
+
+  render() {
+    const { data, isLoading } = toJS(this.envStore.list)
+    return (
+      <div>
+        {data.map((container, index) => (
+          <ContainerEnvCard
+            key={index}
+            detail={container}
+            expand={index === 0}
+            loading={isLoading}
+          />
+        ))}
+      </div>
+    )
+  }
+}

src/pages/devops/containers/ImageBuilder/Detail/Events/index.jsx

@@ -0,0 +1,68 @@
+/*
+ * This file is part of KubeSphere Console.
+ * Copyright (C) 2019 The KubeSphere Console Authors.
+ *
+ * KubeSphere Console 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.
+ *
+ * KubeSphere Console 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 KubeSphere Console.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import React from 'react'
+import { toJS } from 'mobx'
+import { observer, inject } from 'mobx-react'
+import { joinSelector } from 'utils'
+import EventStore from 'stores/event'
+
+import EventsCard from 'components/Cards/Events'
+
+class Events extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.eventStore = new EventStore()
+    this.fetchData()
+  }
+
+  get store() {
+    return this.props.s2iRunStore
+  }
+
+  get namespace() {
+    return this.store.jobDetail.namespace
+  }
+
+  fetchData = () => {
+    const { uid, name, namespace } = this.store.jobDetail
+    const { cluster } = this.props.match.params
+    const fields = {
+      'involvedObject.name': name,
+      'involvedObject.namespace': namespace,
+      'involvedObject.kind': 'Job',
+      'involvedObject.uid': uid,
+    }
+
+    this.eventStore.fetchList({
+      cluster,
+      namespace: this.namespace,
+      fieldSelector: joinSelector(fields),
+    })
+  }
+
+  render() {
+    const { data, isLoading } = toJS(this.eventStore.list)
+
+    return <EventsCard data={data} loading={isLoading} />
+  }
+}
+
+export default inject('s2iRunStore')(observer(Events))
+export const Component = Events