feat: Add sync host timezone for container

Signed-off-by: leoliu <leoliu@yunify.com>

src/components/Forms/Workload/ContainerSettings/ContainerForm/SyncTimeZone/index.jsx

@@ -0,0 +1,70 @@
+/*
+ * 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, set } from 'lodash'
+import { Checkbox } from '@pitrix/lego-ui'
+
+import styles from './index.scss'
+
+export default class SyncTimeZone extends React.PureComponent {
+  state = {
+    isCheck: get(this.props.data, 'volumeMounts', []).some(
+      vm => vm.mountPath === '/etc/localtime'
+    ),
+  }
+
+  handleCheck = () => {
+    this.setState(
+      ({ isCheck }) => ({ isCheck: !isCheck }),
+      () => {
+        const vms = get(this.props.data, 'volumeMounts', [])
+        if (this.state.isCheck) {
+          set(this.props.data, 'volumeMounts', [
+            ...vms,
+            {
+              name: 'host-time',
+              mountPath: '/etc/localtime',
+              readOnly: true,
+            },
+          ])
+        } else {
+          set(
+            this.props.data,
+            'volumeMounts',
+            vms.filter(vm => vm.mountPath !== '/etc/localtime')
+          )
+        }
+      }
+    )
+  }
+
+  render() {
+    const { isCheck } = this.state
+    return (
+      <div className={styles.wrapper}>
+        <div className={styles.title}>
+          <Checkbox checked={isCheck} onChange={this.handleCheck}>
+            {t('Sync Host Timezone')}
+          </Checkbox>
+        </div>
+        <div className={styles.desc}>{t('SYNC_HOST_TIMEZONE_DESC')}</div>
+      </div>
+    )
+  }
+}

src/components/Forms/Workload/ContainerSettings/ContainerForm/SyncTimeZone/index.scss

@@ -0,0 +1,24 @@
+@import '~scss/variables';
+
+.wrapper {
+  margin-bottom: 12px;
+  padding: 11px 20px;
+  border-radius: 4px;
+  border: solid 1px $border-color;
+  background-color: $white;
+
+  .title {
+    font-weight: $font-bold;
+
+    :global {
+      .label-value {
+        font-weight: $font-bold;
+      }
+    }
+  }
+
+  .desc {
+    color: $second-text-color;
+    padding-left: 28px;
+  }
+}

src/components/Forms/Workload/ContainerSettings/ContainerForm/index.jsx

@@ -31,6 +31,7 @@ import ImagePullPolicy from './ImagePullPolicy'
 import HealthChecker from './HealthChecker'
 import ContainerSetting from './ContainerSetting'
 import SecurityContext from './SecurityContext'
+import SyncTimeZone from './SyncTimeZone'
 
 import styles from './index.scss'
 
@@ -194,6 +195,7 @@ export default class ContaineForm extends React.Component {
           <Commands />
           <Environments configMaps={configMaps} secrets={secrets} />
           <SecurityContext />
+          <SyncTimeZone data={formData} />
         </Form>
       </div>
     )

src/components/Forms/Workload/ContainerSettings/index.jsx

@@ -194,6 +194,31 @@ export default class ContainerSetting extends React.Component {
     })
   }
 
+  updateTimeZone = mergedContainers => {
+    let volumes = get(this.fedFormTemplate, `${this.prefix}spec.volumes`, [])
+    const hasLocalTime = mergedContainers.some(container =>
+      (container.volumeMounts || []).some(
+        vm => vm.mountPath === '/etc/localtime'
+      )
+    )
+
+    if (hasLocalTime) {
+      volumes.push({
+        hostPath: { path: '/etc/localtime', type: '' },
+        name: 'host-time',
+      })
+    } else {
+      volumes = volumes.filter(
+        volume =>
+          volume.name === 'host-time' &&
+          volume.hostPath &&
+          volume.hostPath === '/etc/localtime'
+      )
+    }
+
+    set(this.fedFormTemplate, `${this.prefix}spec.volumes`, volumes)
+  }
+
   updatePullSecrets = () => {
     const pullSecrets = {}
     const containerSecretMap = {}
@@ -349,6 +374,8 @@ export default class ContainerSetting extends React.Component {
       _initContainers
     )
 
+    this.updateTimeZone(mergedContainers)
+
     // update image pull secrets
     this.updatePullSecrets()
 

src/components/Forms/Workload/VolumeSettings/AddHostPath/index.jsx

@@ -21,7 +21,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Input } from '@pitrix/lego-ui'
 import { PATTERN_NAME } from 'utils/constants'
-import { Form } from 'components/Base'
+import { Form, Alert } from 'components/Base'
 import { MountInput } from 'components/Inputs'
 
 import styles from './index.scss'
@@ -101,6 +101,11 @@ export default class AddHostPath extends React.Component {
 
     return (
       <div className={styles.wrapper}>
+        <Alert
+          className="margin-b12"
+          type="warning"
+          message={t('HOST_PATH_WARNING')}
+        />
         <Form data={formData} ref={formRef}>
           <Form.Item
             label={t('Volume Name')}

src/components/Forms/Workload/VolumeSettings/AddVolume/index.jsx

@@ -190,7 +190,7 @@ export default class AddVolume extends React.Component {
   }
 
   render() {
-    const { className, module, contentClassName } = this.props
+    const { className, contentClassName } = this.props
     return (
       <div className={classNames(styles.wrapper, className)}>
         <div className="h6">
@@ -209,9 +209,7 @@ export default class AddVolume extends React.Component {
           >
             <RadioButton value="exist">{t('Existing Volume')}</RadioButton>
             <RadioButton value="temp">{t('Temporary Volume')}</RadioButton>
-            {module === 'daemonsets' && (
-              <RadioButton value="host">{t('HostPath')}</RadioButton>
-            )}
+            <RadioButton value="host">{t('HostPath')}</RadioButton>
           </RadioGroup>
           {this.renderContent()}
         </div>

src/locales/en/workload.js

@@ -301,6 +301,7 @@ export default {
   'Set Mount Path': 'Set Mount Path',
   'Set Node Scheduling Policy': 'Set Node Scheduling Policy',
   'Specify Replicas Number': 'Specify Replicas Number',
+  'Sync Host Timezone': 'Sync Host Timezone',
   startingDeadlineSeconds: 'startingDeadlineSeconds',
   'startingDeadlineSeconds(s)': 'startingDeadlineSeconds(s)',
   'Startup Probe': 'Startup Probe',
@@ -675,4 +676,9 @@ export default {
   POD_SCALE_DESC: 'The number of Pod instances that can be scaled',
   REPLICAS_AVAILABLE: 'Available',
   REPLICAS_EXPECTED: 'Expected',
+
+  SYNC_HOST_TIMEZONE_DESC:
+    'The time zone of the container will be consistent with that of the host after synchronization.',
+  HOST_PATH_WARNING:
+    'A HostPath volume mounts a file or directory from the host node’s filesystem into your Pod. This is not something that most Pods will need, but it offers a powerful escape hatch for some applications.',
 }

src/locales/es/workload.js

@@ -654,4 +654,8 @@ export default {
   POD_SCALE_DESC: 'El número de instancias de Pod que se pueden escalar',
   REPLICAS_AVAILABLE: 'Disponibles',
   REPLICAS_EXPECTED: 'Esperadas',
+  SYNC_HOST_TIMEZONE_DESC:
+    'The time zone of the container will be consistent with that of the host after synchronization.',
+  HOST_PATH_WARNING:
+    'A HostPath volume mounts a file or directory from the host node’s filesystem into your Pod. This is not something that most Pods will need, but it offers a powerful escape hatch for some applications.',
 }

src/locales/tc/workload.js

@@ -673,4 +673,8 @@ export default {
 
   REPLICAS_AVAILABLE: '實際副本',
   REPLICAS_EXPECTED: '期望副本',
+
+  SYNC_HOST_TIMEZONE_DESC: '时区与主机同步后，容器内的时区将与主机节点一致。',
+  HOST_PATH_WARNING:
+    'HostPath 将主机的文件系统挂载到Pod中，它使一些应用程序能逃出对其做出的隔离限制，请谨慎使用。',
 }

src/locales/zh/workload.js

@@ -545,6 +545,8 @@ export default {
   'Pod CPU Request': '容器组CPU请求',
   'Pod Memory Request': '容器组内存请求',
 
+  'Sync Host Timezone': '同步主机时区',
+
   POD_CONDITION_INITIALIZED: 'Initialized',
   POD_CONDITION_INITIALIZED_DESC: '所有 init 容器都已成功启动',
   POD_CONDITION_READY: '开始运行(Ready)',
@@ -623,6 +625,10 @@ export default {
   FailedDelete: '删除失败',
   SuccessfulDelete: '删除成功',
 
+  SYNC_HOST_TIMEZONE_DESC: '时区与主机同步后，容器内的时区将与主机节点一致。',
+  HOST_PATH_WARNING:
+    'HostPath 将主机的文件系统挂载到Pod中，它使一些应用程序能逃出对其做出的隔离限制，请谨慎使用。',
+
   'Use Default Ports': '使用默认端口',
 
   'Please select at least one container to mount': '请至少选择一个容器进行挂载',