Fix [Functions panel] The "Save" and "Deploy" buttons shouldn't be en…

…abled
mlrun · Oct 11, 2023 · 36a905d · 36a905d
1 parent 192c2b8
commit 36a905d
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 28 deletions.
diff --git a/src/common/Input/input.scss b/src/common/Input/input.scss
@@ -5,6 +5,7 @@
 
 .input {
   @import '../../scss/main.scss';
+
   @include fieldWrapperOld;
 
   &::placeholder {
@@ -143,6 +144,7 @@
 
     &.active-label {
       top: 9px;
+      height: auto;
       font-weight: 700;
       font-size: 10px;
       line-height: 12px;
@@ -154,13 +156,14 @@
     }
 
     &-floating {
-      display: flex;
-      align-items: center;
       position: absolute;
-      top: 15px;
+      top: unset;
       left: 16px;
+      display: flex;
+      align-items: center;
+      height: 100%;
       color: $topaz;
-      transition: 300ms ease all;
+      transition: 300ms linear all;
     }
 
     &_disabled {

diff --git a/src/common/RangeInput/RangeInput.js b/src/common/RangeInput/RangeInput.js
@@ -122,8 +122,10 @@ const RangeInput = ({
         min={min}
         max={max}
         onChange={value => {
-          setInputValue(Number(value))
-          onChange(Number(value))
+          const targetValue = value.length === 0 ? '' : Number(value)
+
+          setInputValue(targetValue)
+          onChange(targetValue)
         }}
         tip={tip}
         required={required}

diff --git a/src/components/FeatureSetsPanel/FeatureSetsPanel.js b/src/components/FeatureSetsPanel/FeatureSetsPanel.js
@@ -56,7 +56,9 @@ const FeatureSetsPanel = ({
     isOnlineTargetPathValid: true,
     isOfflineTargetPathValid: true,
     isExternalOfflineTargetPathValid: true,
+    isOfflinePartitionBucketsValid: true,
     isOfflinePartitionColumnsValid: true,
+    isExternalOfflinePartitionBucketsValid: true,
     isExternalOfflinePartitionColumnsValid: true,
     isTargetStoreValid: true,
     isTimestampKeyValid: true,

diff --git a/src/components/FeatureSetsPanel/FeatureSetsPanelTargetStore/FeatureSetsPanelTargetStore.js b/src/components/FeatureSetsPanel/FeatureSetsPanelTargetStore/FeatureSetsPanelTargetStore.js
@@ -20,7 +20,7 @@ such restriction.
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { connect, useSelector } from 'react-redux'
 import PropTypes from 'prop-types'
-import { cloneDeep, isEmpty } from 'lodash'
+import { cloneDeep, isEmpty, isNumber } from 'lodash'
 
 import FeatureSetsPanelTargetStoreView from './FeatureSetsPanelTargetStoreView'
 import { ConfirmDialog } from 'igz-controls/components'
@@ -253,6 +253,14 @@ const FeatureSetsPanelTargetStore = ({
       }
     }))
 
+    setValidation(state => ({
+      ...state,
+      [kind === PARQUET
+        ? 'isOfflinePartitionBucketsValid'
+        : 'isExternalOfflinePartitionBucketsValid']:
+        isNumber(key_bucketing_number) && Number(key_bucketing_number) >= 0
+    }))
+
     setNewFeatureSetTarget(
       featureStore.newFeatureSet.spec.targets.map(targetKind => {
         if (targetKind.name === kind) {

diff --git a/...omponents/FeatureSetsPanel/FeatureSetsPanelTargetStore/FeatureSetsPanelTargetStoreView.js b/...omponents/FeatureSetsPanel/FeatureSetsPanelTargetStore/FeatureSetsPanelTargetStoreView.js
@@ -335,7 +335,7 @@ const FeatureSetsPanelTargetStoreView = ({
                       partitionRadioButtonsState={partitionRadioButtonsState.parquet}
                       rangeOnChange={value => handleKeyBucketingNumberChange(value, PARQUET)}
                       selectedPartitionKind={selectedPartitionKind.parquet}
-                      setValidation={value =>
+                      setPartitionColumnsValidation={value =>
                         setValidation(state => ({
                           ...state,
                           isOfflinePartitionColumnsValid: value
@@ -347,7 +347,10 @@ const FeatureSetsPanelTargetStoreView = ({
                       triggerPartitionAdvancedCheckboxes={value =>
                         triggerPartitionAdvancedCheckboxes(value, PARQUET)
                       }
-                      validation={validation.isOfflinePartitionColumnsValid}
+                      validation={{
+                        partitionBuckets: validation.isOfflinePartitionBucketsValid,
+                        partitionColumns: validation.isOfflinePartitionColumnsValid
+                      }}
                     />
                   </CSSTransition>
                 </div>
@@ -436,7 +439,7 @@ const FeatureSetsPanelTargetStoreView = ({
                         handleKeyBucketingNumberChange(value, EXTERNAL_OFFLINE)
                       }
                       selectedPartitionKind={selectedPartitionKind.externalOffline}
-                      setValidation={value =>
+                      setPartitionColumnsValidation={value =>
                         setValidation(state => ({
                           ...state,
                           isExternalOfflinePartitionColumnsValid: value
@@ -448,7 +451,10 @@ const FeatureSetsPanelTargetStoreView = ({
                       triggerPartitionAdvancedCheckboxes={value =>
                         triggerPartitionAdvancedCheckboxes(value, EXTERNAL_OFFLINE)
                       }
-                      validation={validation.isExternalOfflinePartitionColumnsValid}
+                      validation={{
+                        partitionBuckets: validation.isExternalOfflinePartitionBucketsValid,
+                        partitionColumns: validation.isExternalOfflinePartitionColumnsValid
+                      }}
                     />
                   </CSSTransition>
                 </div>

diff --git a/src/elements/FunctionsPanelResources/FunctionsPanelResources.js b/src/elements/FunctionsPanelResources/FunctionsPanelResources.js
@@ -19,6 +19,7 @@ such restriction.
 */
 import React, { useEffect, useMemo, useState } from 'react'
 import { connect } from 'react-redux'
+import { isNumber } from 'lodash'
 import PropTypes from 'prop-types'
 
 import FunctionsPanelResourcesView from './FunctionsPanelResourcesView'
@@ -371,7 +372,7 @@ const FunctionsPanelResources = ({
   const setGpuValue = value => {
     let isValid = true
 
-    if (value && Number(value) <= 0) {
+    if (isNumber(value) && Number(value) <= 0) {
       isValid = false
     }
 

diff --git a/src/elements/PartitionFields/PartitionFields.js b/src/elements/PartitionFields/PartitionFields.js
@@ -41,7 +41,7 @@ const PartitionFields = ({
   partitionRadioButtonsState,
   rangeOnChange,
   selectedPartitionKind,
-  setValidation,
+  setPartitionColumnsValidation,
   timePartitioningGranularityChange,
   triggerPartitionAdvancedCheckboxes,
   validation
@@ -76,19 +76,18 @@ const PartitionFields = ({
             labelType="floatingLabel"
             label="Number of Buckets"
             required
+            invalid={!validation.partitionBuckets}
             min={0}
             onChange={rangeOnChange}
             tip={
               <span>
-                If you partition by key and the number of unique keys is very
-                high it is recommended to use buckets for better performance. In
-                this case the path would be
-                <b> path/bucket-num/year=/month=/day=</b> etc.. In case the
-                value is 0 then no bucketing will be done and your data will be
-                partitioned by key.
+                If you partition by key and the number of unique keys is very high it is recommended
+                to use buckets for better performance. In this case the path would be
+                <b> path/bucket-num/year=/month=/day=</b> etc.. In case the value is 0 then no
+                bucketing will be done and your data will be partitioned by key.
               </span>
             }
-            value={data.key_bucketing_number || 1}
+            value={data.key_bucketing_number}
           />
         )}
         {selectedPartitionKind.includes('byTime') && (
@@ -105,12 +104,12 @@ const PartitionFields = ({
           <Input
             density="normal"
             floatingLabel
-            invalid={!validation}
+            invalid={!validation.partitionColumns}
             onBlur={partitionColsOnBlur}
             onChange={partitionColsOnChange}
             label="Partition Columns"
             placeholder="col1,col2,col3"
-            setInvalid={setValidation}
+            setInvalid={setPartitionColumnsValidation}
             type="text"
             value={data.partition_cols}
             wrapperClassName="partition-cols"
@@ -126,10 +125,7 @@ const PartitionFields = ({
 
 PartitionFields.propTypes = {
   data: PropTypes.shape({
-    key_bucketing_number: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number
-    ]).isRequired,
+    key_bucketing_number: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
     partition_cols: PropTypes.string.isRequired,
     time_partitioning_granularity: PropTypes.string.isRequired
   }).isRequired,
@@ -139,10 +135,10 @@ PartitionFields.propTypes = {
   partitionRadioButtonsState: PropTypes.string.isRequired,
   rangeOnChange: PropTypes.func.isRequired,
   selectedPartitionKind: PropTypes.arrayOf(PropTypes.string).isRequired,
-  setValidation: PropTypes.func.isRequired,
+  setPartitionColumnsValidation: PropTypes.func.isRequired,
   timePartitioningGranularityChange: PropTypes.func.isRequired,
   triggerPartitionAdvancedCheckboxes: PropTypes.func.isRequired,
-  validation: PropTypes.bool.isRequired
+  validation: PropTypes.object.isRequired
 }
 
 export default PartitionFields