Impl [UI] Limit number of artifacts shown in the artifact screen `1.6…

….x` (#2541)

src/common/WarningMessage/WarningMessage.js

@@ -0,0 +1,55 @@
+/*
+Copyright 2019 Iguazio Systems Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. 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.
+
+In addition, you may not use the software for any purposes that are
+illegal under applicable law, and the grant of the foregoing license
+under the Apache 2.0 license is conditioned upon your compliance with
+such restriction.
+*/
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { Tooltip, TextTooltipTemplate } from 'igz-controls/components'
+
+import { ReactComponent as UnsuccessAlert } from 'igz-controls/images/unsuccess_alert.svg'
+import { ReactComponent as Close } from 'igz-controls/images/close.svg'
+
+import './warningMessage.scss'
+
+const WarningMessage = ({ handleClose = null, message }) => {
+  return (
+    <div data-testid="warning-message" className="warning">
+      <div className="warning__data">
+        <div>
+          <UnsuccessAlert className="warning__icon" />
+        </div>
+        <div className="warning__message"> {message}</div>
+      </div>
+      {handleClose && (
+        <button data-testid="close" onClick={handleClose}>
+          <Tooltip template={<TextTooltipTemplate text="Close" />}>
+            <Close />
+          </Tooltip>
+        </button>
+      )}
+    </div>
+  )
+}
+
+WarningMessage.propTypes = {
+  handleClose: PropTypes.func,
+  message: PropTypes.string.isRequired
+}
+
+export default WarningMessage

src/common/WarningMessage/warningMessage.scss

@@ -0,0 +1,29 @@
+@import '~igz-controls/scss/borders';
+
+.warning {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  padding: 10px 14px;
+  color: $sorbus;
+  background-color: rgba($sorbus, 0.1);
+  border: $parametersBorder;
+
+  &__data {
+    display: flex;
+    align-items: center;
+  }
+
+  &__message {
+    margin-right: 10px;
+  }
+
+  &__icon {
+    width: 22px;
+    height: 22px;
+    margin-right: 10px;
+    padding: 5px;
+    background-color: $sorbus;
+    border-radius: 50%;
+  }
+}

src/components/Datasets/Datasets.js

@@ -69,6 +69,7 @@ const Datasets = () => {
   const [selectedDataset, setSelectedDataset] = useState({})
   const [selectedRowData, setSelectedRowData] = useState({})
   const [largeRequestErrorMessage, setLargeRequestErrorMessage] = useState('')
+  const [maxArtifactsErrorIsShown, setMaxArtifactsErrorIsShown] = useState(false)
   const [convertedYaml, toggleConvertedYaml] = useYaml('')
   const [urlTagOption] = useGetTagOptions(
     fetchArtifactTags,
@@ -125,6 +126,7 @@ const Datasets = () => {
         .then(result => {
           if (result) {
             setDatasets(result)
+            setMaxArtifactsErrorIsShown(result.length === 1000)
           }
 
           return result
@@ -362,11 +364,13 @@ const Datasets = () => {
       handleRefresh={handleRefresh}
       handleRegisterDataset={handleRegisterDataset}
       largeRequestErrorMessage={largeRequestErrorMessage}
+      maxArtifactsErrorIsShown={maxArtifactsErrorIsShown}
       pageData={pageData}
       ref={datasetsRef}
       selectedDataset={selectedDataset}
       selectedRowData={selectedRowData}
       setDatasets={setDatasets}
+      setMaxArtifactsErrorIsShown={setMaxArtifactsErrorIsShown}
       setSelectedDataset={setSelectedDataset}
       setSelectedRowData={setSelectedRowData}
       sortProps={{ sortTable, selectedColumnName, getSortingIcon }}

src/components/Datasets/DatasetsView.js

@@ -29,6 +29,7 @@ import Loader from '../../common/Loader/Loader'
 import ArtifactsActionBar from '../ArtifactsActionBar/ArtifactsActionBar'
 import NoData from '../../common/NoData/NoData'
 import Details from '../Details/Details'
+import WarningMessage from '../../common/WarningMessage/WarningMessage'
 
 import { DATASETS_FILTERS, DATASETS_PAGE, FULL_VIEW_MODE } from '../../constants'
 import { getNoDataMessage } from '../../utils/getNoDataMessage'
@@ -53,18 +54,20 @@ const DatasetsView = React.forwardRef(
       handleRefresh,
       handleRegisterDataset,
       largeRequestErrorMessage,
+      maxArtifactsErrorIsShown,
       pageData,
       selectedDataset,
       selectedRowData,
       setDatasets,
+      setMaxArtifactsErrorIsShown,
       setSelectedDataset,
       setSelectedRowData,
       sortProps,
       tableContent,
       tableHeaders,
       toggleConvertedYaml,
-      urlTagOption,
-      viewMode
+      urlTagOption = null,
+      viewMode = null
     },
     ref
   ) => {
@@ -111,6 +114,12 @@ const DatasetsView = React.forwardRef(
               ) : (
                 <>
                   {selectedRowData.loading && <Loader />}
+                  {maxArtifactsErrorIsShown && (
+                    <WarningMessage
+                      message="The query response displays up to 1000 items. Use filters to narrow down the results."
+                      handleClose={() => setMaxArtifactsErrorIsShown(false)}
+                    />
+                  )}
                   <Table
                     applyDetailsChanges={applyDetailsChanges}
                     applyDetailsChangesCallback={applyDetailsChangesCallback}
@@ -164,11 +173,6 @@ const DatasetsView = React.forwardRef(
   }
 )
 
-DatasetsView.defaultProps = {
-  viewMode: null,
-  urlTagOption: null
-}
-
 DatasetsView.propTypes = {
   actionsMenu: ACTIONS_MENU.isRequired,
   applyDetailsChanges: PropTypes.func.isRequired,
@@ -182,10 +186,12 @@ DatasetsView.propTypes = {
   handleRefresh: PropTypes.func.isRequired,
   handleRegisterDataset: PropTypes.func.isRequired,
   largeRequestErrorMessage: PropTypes.string.isRequired,
+  maxArtifactsErrorIsShown: PropTypes.bool.isRequired,
   pageData: PropTypes.object.isRequired,
   selectedDataset: PropTypes.object.isRequired,
   selectedRowData: PropTypes.object.isRequired,
   setDatasets: PropTypes.func.isRequired,
+  setMaxArtifactsErrorIsShown: PropTypes.func.isRequired,
   setSelectedDataset: PropTypes.func.isRequired,
   setSelectedRowData: PropTypes.func.isRequired,
   sortProps: SORT_PROPS,

src/components/Files/Files.js

@@ -70,6 +70,7 @@ const Files = () => {
   const [selectedFile, setSelectedFile] = useState({})
   const [selectedRowData, setSelectedRowData] = useState({})
   const [largeRequestErrorMessage, setLargeRequestErrorMessage] = useState('')
+  const [maxArtifactsErrorIsShown, setMaxArtifactsErrorIsShown] = useState(false)
   const [convertedYaml, toggleConvertedYaml] = useYaml('')
   const [urlTagOption] = useGetTagOptions(
     fetchArtifactTags,
@@ -120,6 +121,7 @@ const Files = () => {
         .then(result => {
           if (result) {
             setFiles(result)
+            setMaxArtifactsErrorIsShown(result.length === 1000)
           }
 
           return result
@@ -350,10 +352,12 @@ const Files = () => {
       handleRefresh={handleRefresh}
       handleRegisterArtifact={handleRegisterArtifact}
       largeRequestErrorMessage={largeRequestErrorMessage}
+      maxArtifactsErrorIsShown={maxArtifactsErrorIsShown}
       pageData={pageData}
       ref={filesRef}
       selectedFile={selectedFile}
       selectedRowData={selectedRowData}
+      setMaxArtifactsErrorIsShown={setMaxArtifactsErrorIsShown}
       setFiles={setFiles}
       setSelectedFile={setSelectedFile}
       setSelectedRowData={setSelectedRowData}

src/components/Files/FilesView.js

@@ -29,6 +29,7 @@ import Loader from '../../common/Loader/Loader'
 import PreviewModal from '../../elements/PreviewModal/PreviewModal'
 import ArtifactsTableRow from '../../elements/ArtifactsTableRow/ArtifactsTableRow'
 import Details from '../Details/Details'
+import WarningMessage from '../../common/WarningMessage/WarningMessage'
 
 import { FILES_FILTERS, FILES_PAGE, FULL_VIEW_MODE } from '../../constants'
 import { getNoDataMessage } from '../../utils/getNoDataMessage'
@@ -53,18 +54,20 @@ const FilesView = React.forwardRef(
       handleRefresh,
       handleRegisterArtifact,
       largeRequestErrorMessage,
+      maxArtifactsErrorIsShown,
       pageData,
       selectedFile,
       selectedRowData,
+      setMaxArtifactsErrorIsShown,
       setFiles,
       setSelectedFile,
       setSelectedRowData,
       sortProps,
       tableContent,
       tableHeaders,
       toggleConvertedYaml,
-      urlTagOption,
-      viewMode
+      urlTagOption = null,
+      viewMode = null
     },
     ref
   ) => {
@@ -111,6 +114,12 @@ const FilesView = React.forwardRef(
               ) : (
                 <>
                   {selectedRowData.loading && <Loader />}
+                  {maxArtifactsErrorIsShown && (
+                    <WarningMessage
+                      message="The query response displays up to 1000 items. Use filters to narrow down the results."
+                      handleClose={() => setMaxArtifactsErrorIsShown(false)}
+                    />
+                  )}
                   <Table
                     actionsMenu={actionsMenu}
                     applyDetailsChanges={applyDetailsChanges}
@@ -164,11 +173,6 @@ const FilesView = React.forwardRef(
   }
 )
 
-FilesView.defaultProps = {
-  viewMode: null,
-  urlTagOption: null
-}
-
 FilesView.propTypes = {
   actionsMenu: ACTIONS_MENU.isRequired,
   applyDetailsChanges: PropTypes.func.isRequired,
@@ -182,9 +186,11 @@ FilesView.propTypes = {
   handleRefresh: PropTypes.func.isRequired,
   handleRegisterArtifact: PropTypes.func.isRequired,
   largeRequestErrorMessage: PropTypes.string.isRequired,
+  maxArtifactsErrorIsShown: PropTypes.bool.isRequired,
   pageData: PropTypes.object.isRequired,
   selectedFile: PropTypes.object.isRequired,
   selectedRowData: PropTypes.object.isRequired,
+  setMaxArtifactsErrorIsShown: PropTypes.func.isRequired,
   setSelectedFile: PropTypes.func.isRequired,
   sortProps: SORT_PROPS,
   tableContent: PropTypes.arrayOf(PropTypes.object).isRequired,

src/components/ModelsPage/Models/Models.js

@@ -77,6 +77,7 @@ import { useMode } from '../../../hooks/mode.hook'
 const Models = ({ fetchModelFeatureVector }) => {
   const [models, setModels] = useState([])
   const [largeRequestErrorMessage, setLargeRequestErrorMessage] = useState('')
+  const [maxArtifactsErrorIsShown, setMaxArtifactsErrorIsShown] = useState(false)
   const [selectedModel, setSelectedModel] = useState({})
   const [selectedRowData, setSelectedRowData] = useState({})
   //temporarily commented till ML-5606 will be done
@@ -136,6 +137,7 @@ const Models = ({ fetchModelFeatureVector }) => {
         .then(result => {
           if (result) {
             setModels(result)
+            setMaxArtifactsErrorIsShown(result.length === 1000)
           }
 
           return result
@@ -462,11 +464,13 @@ const Models = ({ fetchModelFeatureVector }) => {
       handleTrainModel={handleTrainModel}
       isDemoMode={isDemoMode}
       largeRequestErrorMessage={largeRequestErrorMessage}
+      maxArtifactsErrorIsShown={maxArtifactsErrorIsShown}
       models={models}
       pageData={pageData}
       ref={modelsRef}
       selectedModel={selectedModel}
       selectedRowData={selectedRowData}
+      setMaxArtifactsErrorIsShown={setMaxArtifactsErrorIsShown}
       setModels={setModels}
       setSelectedModel={setSelectedModel}
       setSelectedRowData={setSelectedRowData}

src/components/ModelsPage/Models/ModelsView.js

@@ -27,6 +27,7 @@ import ModelsPageTabs from '../ModelsPageTabs/ModelsPageTabs'
 import NoData from '../../../common/NoData/NoData'
 import Table from '../../Table/Table'
 import Details from '../../Details/Details'
+import WarningMessage from '../../../common/WarningMessage/WarningMessage'
 
 import { FULL_VIEW_MODE, MODELS_FILTERS, MODELS_PAGE, MODELS_TAB } from '../../../constants'
 import { SORT_PROPS } from 'igz-controls/types'
@@ -51,18 +52,20 @@ const ModelsView = React.forwardRef(
       handleTrainModel,
       isDemoMode,
       largeRequestErrorMessage,
+      maxArtifactsErrorIsShown,
       models,
       pageData,
       selectedModel,
       selectedRowData,
+      setMaxArtifactsErrorIsShown,
       setModels,
       setSelectedModel,
       setSelectedRowData,
-      sortProps,
+      sortProps = null,
       tableContent,
       tableHeaders,
-      viewMode,
-      urlTagOption
+      urlTagOption = null,
+      viewMode = null
     },
     ref
   ) => {
@@ -114,6 +117,12 @@ const ModelsView = React.forwardRef(
             ) : (
               <>
                 {selectedRowData.loading && <Loader />}
+                {maxArtifactsErrorIsShown && (
+                  <WarningMessage
+                    message="The query response displays up to 1000 items. Use filters to narrow down the results."
+                    handleClose={() => setMaxArtifactsErrorIsShown(false)}
+                  />
+                )}
                 <Table
                   actionsMenu={actionsMenu}
                   applyDetailsChanges={applyDetailsChanges}
@@ -165,12 +174,6 @@ const ModelsView = React.forwardRef(
   }
 )
 
-ModelsView.defaultProps = {
-  sortProps: null,
-  viewMode: null,
-  urlTagOption: null
-}
-
 ModelsView.propTypes = {
   actionsMenu: ACTIONS_MENU.isRequired,
   applyDetailsChanges: PropTypes.func.isRequired,
@@ -183,18 +186,20 @@ ModelsView.propTypes = {
   handleTrainModel: PropTypes.func.isRequired,
   isDemoMode: PropTypes.bool.isRequired,
   largeRequestErrorMessage: PropTypes.string.isRequired,
+  maxArtifactsErrorIsShown: PropTypes.bool.isRequired,
   models: PropTypes.arrayOf(PropTypes.object).isRequired,
   pageData: PropTypes.object.isRequired,
   selectedModel: PropTypes.object.isRequired,
   selectedRowData: PropTypes.object.isRequired,
   setModels: PropTypes.func.isRequired,
+  setMaxArtifactsErrorIsShown: PropTypes.func.isRequired,
   setSelectedModel: PropTypes.func.isRequired,
   setSelectedRowData: PropTypes.func.isRequired,
   sortProps: SORT_PROPS,
   tableContent: PropTypes.arrayOf(PropTypes.object).isRequired,
   tableHeaders: PropTypes.arrayOf(PropTypes.object).isRequired,
-  viewMode: PropTypes.string,
-  urlTagOption: PropTypes.string
+  urlTagOption: PropTypes.string,
+  viewMode: PropTypes.string
 }
 
 export default ModelsView