labextension: Add input field to select access mode for volumes

Signed-off-by: Ilias Katsakioris <[email protected]>
Reviewed-by: Stefano Fioravanzo <[email protected]>

labextension/src/components/VolumeAccessModeSelect.tsx

@@ -0,0 +1,54 @@
+/*
+ * Copyright 2020 The Kale Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from 'react';
+import { Select, ISelectOption } from './Select';
+
+const VOLUME_ACCESS_MODE_ROM: ISelectOption = {
+  label: 'ReadOnlyMany',
+  value: 'rom',
+};
+const VOLUME_ACCESS_MODE_RWO: ISelectOption = {
+  label: 'ReadWriteOnce',
+  value: 'rwo',
+};
+const VOLUME_ACCESS_MODE_RWM: ISelectOption = {
+  label: 'ReadWriteMany',
+  value: 'rwm',
+};
+const VOLUME_ACCESS_MODES: ISelectOption[] = [
+  VOLUME_ACCESS_MODE_ROM,
+  VOLUME_ACCESS_MODE_RWO,
+  VOLUME_ACCESS_MODE_RWM,
+];
+
+interface VolumeAccessModeSelectProps {
+  value: string;
+  updateValue: Function;
+}
+
+export const VolumeAccessModeSelect: React.FunctionComponent<VolumeAccessModeSelectProps> = props => {
+  return (
+    <Select
+      variant="standard"
+      label="Volume access mode"
+      index={-1}
+      values={VOLUME_ACCESS_MODES}
+      value={props.value}
+      updateValue={props.updateValue}
+    />
+  );
+};

labextension/src/widgets/LeftPanel.tsx

@@ -160,6 +160,7 @@ export interface IKaleNotebookMetadata {
   katib_metadata?: IKatibMetadata;
   steps_defaults?: string[];
   storage_class_name?: string;
+  volume_access_mode?: string;
 }
 
 export interface IKatibExperiment {
@@ -192,6 +193,7 @@ export const DefaultState: IState = {
     autosnapshot: false,
     katib_run: false,
     steps_defaults: [],
+    volume_access_mode: 'rwm',
   },
   runDeployment: false,
   deploymentType: 'compile',
@@ -260,6 +262,7 @@ export class KubeflowKaleLeftPanel extends React.Component<IProps, IState> {
         volumes: prevState.notebookVolumes,
         snapshot_volumes: !prevState.metadata.snapshot_volumes,
         storage_class_name: undefined,
+        volume_access_mode: undefined,
       },
     }));
   };
@@ -299,6 +302,12 @@ export class KubeflowKaleLeftPanel extends React.Component<IProps, IState> {
       metadata: { ...prevState.metadata, storage_class_name },
     }));
 
+  updateVolumeAccessMode = (volume_access_mode: string) => {
+    this.setState((prevState, props) => ({
+      metadata: { ...prevState.metadata, volume_access_mode },
+    }));
+  };
+
   updateKatibRun = () =>
     this.setState((prevState, props) => ({
       metadata: {
@@ -811,6 +820,8 @@ export class KubeflowKaleLeftPanel extends React.Component<IProps, IState> {
         updateVolumes={this.updateVolumes}
         storageClassName={this.state.metadata.storage_class_name}
         updateStorageClassName={this.updateStorageClassName}
+        volumeAccessMode={this.state.metadata.volume_access_mode}
+        updateVolumeAccessMode={this.updateVolumeAccessMode}
       />
     );
 

labextension/src/widgets/VolumesPanel.tsx

@@ -25,6 +25,7 @@ import { Select, ISelectOption } from '../components/Select';
 import { LightTooltip } from '../components/LightTooltip';
 import { AnnotationInput, IAnnotation } from '../components/AnnotationInput';
 import { removeIdxFromArray, updateIdxInArray } from '../lib/Utils';
+import { VolumeAccessModeSelect } from '../components/VolumeAccessModeSelect';
 
 const DEFAULT_EMPTY_VOLUME: IVolumeMetadata = {
   type: 'new_pvc',
@@ -97,6 +98,8 @@ interface VolumesPanelProps {
   updateAutosnapshotSwitch: Function;
   storageClassName: string;
   updateStorageClassName: Function;
+  volumeAccessMode: string;
+  updateVolumeAccessMode: Function;
 }
 
 export const VolumesPanel: React.FunctionComponent<VolumesPanelProps> = props => {
@@ -576,14 +579,19 @@ export const VolumesPanel: React.FunctionComponent<VolumesPanelProps> = props =>
   // FIXME: There is no separating bottom horizontal bar when there are no
   //  volumes
   const volumesClassNameAndMode = (
-    <div className="input-container">
+    <div className="input-container volume-container">
       <Input
         label="Storage class name"
         updateValue={props.updateStorageClassName}
         value={props.storageClassName}
         placeholder={'default'}
         variant="standard"
       />
+
+      <VolumeAccessModeSelect
+        value={props.volumeAccessMode}
+        updateValue={props.updateVolumeAccessMode}
+      />
     </div>
   );