feat: allow offline results (#879)

kubeshop · Oct 5, 2023 · 88325f4 · 88325f4
1 parent 8437f63
commit 88325f4
Show file tree

Hide file tree

Showing 76 changed files with 456 additions and 228 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -4,7 +4,9 @@ import {useUpdate} from 'react-use';
 
 import {config} from '@constants/config';
 
-import {DashboardContext, MainContext} from '@contexts';
+import {DashboardContext} from '@contexts';
+
+import {SystemAccess, useSystemAccess} from '@hooks/useSystemAccess';
 
 import {useModal} from '@modal/hooks';
 
@@ -43,8 +45,8 @@ export interface AppProps {}
 const App: React.FC<AppProps> = () => {
   const location = useLocation();
   const apiEndpoint = useApiEndpoint();
-  const {isClusterAvailable} = useContext(MainContext);
   const {showTestkubeCloudBanner} = useContext(DashboardContext);
+  const isClusterAvailable = useSystemAccess(SystemAccess.agent);
 
   const [LogOutputProvider] = initializeLogOutputStore(undefined, [location.pathname]);
 

diff --git a/src/AppRoot.tsx b/src/AppRoot.tsx
@@ -84,6 +84,7 @@ const AppRoot: React.FC = () => {
     () => ({
       clusterConfig,
       isClusterAvailable: Boolean(clusterConfig),
+      isSystemAvailable: Boolean(clusterConfig),
     }),
     [clusterConfig]
   );

diff --git a/src/components/atoms/Dots/Dots.tsx b/src/components/atoms/Dots/Dots.tsx
@@ -9,19 +9,20 @@ type DotsProps = {
   color?: Colors;
   direction?: 'column' | 'row';
   withPadding?: boolean;
+  disabled?: boolean;
 };
 
 const Dots: React.FC<DotsProps> = props => {
-  const {dotNumber = 3, color = Colors.purple, direction = 'column', withPadding = true} = props;
+  const {dotNumber = 3, color = Colors.purple, direction = 'column', withPadding = true, disabled} = props;
 
   const dots = Array.from({length: dotNumber}).map((_, index) => {
     const key = `dot_${index}`;
 
-    return <Dot key={key} color={color} />;
+    return <Dot key={key} color={disabled ? Colors.grey800 : color} />;
   });
 
   return (
-    <Button $customType="transparent" $withPadding={withPadding}>
+    <Button $customType="transparent" $withPadding={withPadding} disabled={disabled}>
       <DotsContainer $direction={direction}>{dots}</DotsContainer>
     </Button>
   );

diff --git a/src/components/atoms/Tag/Tag.tsx b/src/components/atoms/Tag/Tag.tsx
@@ -18,12 +18,12 @@ const Tag: FC<TagProps> = ({title, type = '', tooltipMessage, icon}) => {
     <TagContainer className={`${type}`}>
       {tooltipMessage ? (
         <Tooltip title={tooltipMessage}>
-          <Text className="regular small">{title}</Text>
+          <Text className="regular small nowrap">{title}</Text>
         </Tooltip>
       ) : (
         <>
           {icon}
-          <Text className="regular small">{title}</Text>
+          <Text className="regular small nowrap">{title}</Text>
         </>
       )}
     </TagContainer>

diff --git a/src/components/atoms/UploadWithInput/UploadWithInput.tsx b/src/components/atoms/UploadWithInput/UploadWithInput.tsx
@@ -16,12 +16,13 @@ type UploadWithInputProps = {
     fileName: string;
   };
   fieldInstance?: boolean;
+  disabled?: boolean;
 } & Pick<UploadProps, 'beforeUpload'>;
 
 const defaultBeforeUpload = () => false;
 
 const UploadWithInput: FC<UploadWithInputProps> = props => {
-  const {onFileChange, beforeUpload = defaultBeforeUpload, value} = props;
+  const {onFileChange, beforeUpload = defaultBeforeUpload, value, disabled} = props;
   const uploadRef = useRef<any>();
   const onInputClick = useCallback(() => uploadRef.current?.upload.uploader.fileInput.click(), []);
   const clear = useCallback(() => onFileChange(null), [onFileChange]);
@@ -42,7 +43,14 @@ const UploadWithInput: FC<UploadWithInputProps> = props => {
         onChange={clear}
         placeholder="Choose a file"
       />
-      <Upload ref={uploadRef} maxCount={1} onChange={onFileChange} showUploadList={false} beforeUpload={beforeUpload} />
+      <Upload
+        ref={uploadRef}
+        maxCount={1}
+        onChange={onFileChange}
+        showUploadList={false}
+        beforeUpload={beforeUpload}
+        disabled={disabled}
+      />
     </StyledUploadWithInputContainer>
   );
 };

diff --git a/src/components/custom-antd/Typography/Text/Text.styled.tsx b/src/components/custom-antd/Typography/Text/Text.styled.tsx
@@ -27,5 +27,9 @@ export const StyledText = styled(Typography.Text)<{$color?: string}>`
       font-size: 12px;
       line-height: 16px;
     }
+
+    &.nowrap {
+      white-space: nowrap;
+    }
   }
 `;
diff --git a/src/components/molecules/ArtifactsList/ArtifactsList.tsx b/src/components/molecules/ArtifactsList/ArtifactsList.tsx
@@ -41,7 +41,7 @@ const ArtifactsList: React.FC<ArtifactsListProps> = props => {
     if (!artifacts || !artifacts.length) {
       return (
         <Text className="semibold middle" color={Colors.whitePure}>
-          No artifacts
+          This test generated no artifacts.
         </Text>
       );
     }

diff --git a/src/components/molecules/Definition/Definition.tsx b/src/components/molecules/Definition/Definition.tsx
@@ -1,4 +1,4 @@
-import React, {PropsWithChildren, Suspense, useContext, useEffect, useState} from 'react';
+import React, {PropsWithChildren, Suspense, useEffect, useState} from 'react';
 
 import {MutationDefinition, QueryDefinition} from '@reduxjs/toolkit/dist/query';
 import {UseMutation, UseQuery} from '@reduxjs/toolkit/dist/query/react/buildHooks';
@@ -8,16 +8,16 @@ import {capitalize} from 'lodash';
 
 import {Pre} from '@atoms';
 
-import {MainContext} from '@contexts';
-
 import {FullWidthSpace} from '@custom-antd';
 
 import useClusterVersionMatch from '@hooks/useClusterVersionMatch';
+import {SystemAccess, useSystemAccess} from '@hooks/useSystemAccess';
 
 import {InlineNotification, notificationCall} from '@molecules';
 
 import {CardForm} from '@organisms';
 
+import {safeRefetch} from '@utils/fetchUtils';
 import {displayDefaultNotificationFlow} from '@utils/notification';
 
 import KubernetesResourceEditor from '../KubernetesResourceEditor';
@@ -32,12 +32,24 @@ type DefinitionProps = {
   label: string;
   crdUrl?: string;
   overrideSchema?: (schema: JSONSchema4) => JSONSchema4;
+  readPermissions?: SystemAccess;
+  readOnly?: boolean;
 };
 
 const Definition: React.FC<PropsWithChildren<DefinitionProps>> = props => {
-  const {name, onUpdate, useGetDefinitionQuery, useUpdateDefinitionMutation, crdUrl, label, overrideSchema} = props;
-
-  const {isClusterAvailable} = useContext(MainContext);
+  const {
+    name,
+    onUpdate,
+    useGetDefinitionQuery,
+    useUpdateDefinitionMutation,
+    crdUrl,
+    label,
+    overrideSchema,
+    readPermissions = SystemAccess.agent,
+    readOnly = false,
+  } = props;
+
+  const isReadable = useSystemAccess(readPermissions);
   const isSupported = useClusterVersionMatch('>=1.13.0', true);
 
   const [value, setValue] = useState('');
@@ -49,11 +61,11 @@ const Definition: React.FC<PropsWithChildren<DefinitionProps>> = props => {
     isLoading: isDefinitionLoading,
     refetch,
   } = useGetDefinitionQuery(name, {
-    skip: !isClusterAvailable,
+    skip: !isReadable,
   });
 
   useEffect(() => {
-    refetch();
+    safeRefetch(refetch);
   }, []);
 
   useEffect(() => {
@@ -87,7 +99,7 @@ const Definition: React.FC<PropsWithChildren<DefinitionProps>> = props => {
       .then(res => {
         notificationCall('passed', `${capitalize(label)} was successfully updated.`);
         onUpdate?.(res.data);
-        refetch();
+        safeRefetch(refetch);
       });
   };
 
@@ -114,7 +126,7 @@ const Definition: React.FC<PropsWithChildren<DefinitionProps>> = props => {
           setValue(definition);
           setWasTouched(false);
         }}
-        readOnly={!isSupported}
+        readOnly={!isSupported || readOnly}
         wasTouched={wasTouched}
       >
         {isDefinitionLoading ? (
@@ -123,7 +135,7 @@ const Definition: React.FC<PropsWithChildren<DefinitionProps>> = props => {
           <Suspense fallback={<DefinitionSkeleton />}>
             <KubernetesResourceEditor
               value={value}
-              disabled={!isSupported}
+              disabled={!isSupported || readOnly}
               onChange={newValue => {
                 setValue(newValue);
                 setWasTouched(true);

diff --git a/src/components/molecules/DotsDropdown/DotsDropdown.tsx b/src/components/molecules/DotsDropdown/DotsDropdown.tsx
@@ -23,6 +23,7 @@ interface DotsDropdownProps {
   wrapperStyle?: React.CSSProperties;
   trigger?: ('click' | 'hover' | 'contextMenu')[];
   overlayClassName?: string;
+  disabled?: boolean;
 }
 
 const DotsDropdown: React.FC<DotsDropdownProps> = ({
@@ -32,6 +33,7 @@ const DotsDropdown: React.FC<DotsDropdownProps> = ({
   wrapperStyle = {},
   trigger = ['click'],
   overlayClassName = 'light-dropdown',
+  disabled,
 }) => {
   return (
     <Dropdown
@@ -41,9 +43,10 @@ const DotsDropdown: React.FC<DotsDropdownProps> = ({
         items,
       }}
       placement={placement}
+      disabled={disabled}
     >
       <DotsWrapper style={wrapperStyle} onClick={event => event.stopPropagation()}>
-        <Dots color={Colors.grey450} withPadding={withPadding} />
+        <Dots color={Colors.grey450} withPadding={withPadding} disabled={disabled} />
       </DotsWrapper>
     </Dropdown>
   );

diff --git a/src/components/molecules/EmptyListContent/EmptyListContent.tsx b/src/components/molecules/EmptyListContent/EmptyListContent.tsx
@@ -4,10 +4,12 @@ import {ReactComponent as CreateTestIcon} from '@assets/create-test.svg';
 
 import {ExternalLink} from '@atoms';
 
-import {ConfigContext, MainContext} from '@contexts';
+import {ConfigContext} from '@contexts';
 
 import {Button, Text, Title} from '@custom-antd';
 
+import {SystemAccess, useSystemAccess} from '@hooks/useSystemAccess';
+
 import {HelpCard} from '@molecules';
 import {StyledHelpCardsContainer, StyledLastHelpCardContainer} from '@molecules/HelpCard/HelpCard.styled';
 
@@ -45,7 +47,7 @@ const EmptyListContent: React.FC<PropsWithChildren<EmptyListContentProps>> = pro
   } = props;
 
   const {discordUrl} = useContext(ConfigContext);
-  const {isClusterAvailable} = useContext(MainContext);
+  const isClusterAvailable = useSystemAccess(SystemAccess.agent);
   const isActionAvailable = usePermission(actionTypeToPermission[actionType]);
 
   return (
@@ -57,9 +59,11 @@ const EmptyListContent: React.FC<PropsWithChildren<EmptyListContentProps>> = pro
           <Text className="regular middle text-center" color={Colors.slate400}>
             {description}
           </Text>
-          <Button $customType="primary" onClick={onButtonClick} disabled={!isClusterAvailable}>
-            {buttonText}
-          </Button>
+          {isClusterAvailable ? (
+            <Button $customType="primary" onClick={onButtonClick}>
+              {buttonText}
+            </Button>
+          ) : null}
           <StyledHelpCardsContainer>
             {children}
             <StyledLastHelpCardContainer>

diff --git a/src/components/molecules/EntityGrid/EntityGridItemPure.tsx b/src/components/molecules/EntityGrid/EntityGridItemPure.tsx
@@ -1,6 +1,6 @@
 import React, {FC, forwardRef, memo, useCallback} from 'react';
 
-import {ExecutorIcon, StatusIcon} from '@atoms';
+import {ExecutorIcon, StatusIcon, Tag} from '@atoms';
 
 import {Text} from '@custom-antd';
 
@@ -47,6 +47,8 @@ interface EntityGridItemPureProps {
   onClick: (item: Item) => void;
   onAbort: (item: Item) => void;
   dataTest: string;
+  outOfSync?: boolean;
+  isAgentAvailable?: boolean;
 }
 
 const EntityGridItemTestIcon: FC<{item: Item}> = memo(({item}) => {
@@ -57,7 +59,7 @@ const EntityGridItemTestIcon: FC<{item: Item}> = memo(({item}) => {
 const isRunningStatus = (status: string) => ['running', 'queued'].includes(status);
 
 const EntityGridItemPure = forwardRef<HTMLDivElement, EntityGridItemPureProps>((props, ref) => {
-  const {item, latestExecution, onClick, onAbort, dataTest, metrics} = props;
+  const {item, latestExecution, onClick, onAbort, dataTest, metrics, outOfSync, isAgentAvailable} = props;
 
   const status =
     (latestExecution as Execution)?.executionResult?.status ||
@@ -85,17 +87,29 @@ const EntityGridItemPure = forwardRef<HTMLDivElement, EntityGridItemPureProps>((
           <ItemColumn $isStretch>
             <StatusIcon status={status} />
             <EntityGridItemTestIcon item={item} />
-            <div style={{overflow: 'hidden', flex: 1, display: 'flex'}}>
+            <div style={{overflow: 'hidden', flex: 1, display: 'flex', alignItems: 'center', gap: '10px'}}>
               <Text className="regular big" ellipsis title={item.name}>
                 {item.name}
               </Text>
+              {outOfSync ? (
+                <Tag
+                  title="read-only"
+                  type="warning"
+                  tooltipMessage={
+                    isAgentAvailable
+                      ? 'This test is not currently present on your agent. You are only able to see historical data.'
+                      : 'This test is potentially not in sync with the data on your local cluster. You are only able to see historical data.'
+                  }
+                />
+              ) : null}
             </div>
           </ItemColumn>
           <ExecutionTimeItemColumn>
             <EntityGridItemExecutionTime time={latestExecution?.startTime} />
             {isRunning ? (
               <DotsDropdown
                 placement="bottomRight"
+                disabled={outOfSync}
                 items={[{key: 1, label: <span onClick={abort}>Abort all executions</span>}]}
               />
             ) : null}

diff --git a/src/components/molecules/GitFormItems/Branch.tsx b/src/components/molecules/GitFormItems/Branch.tsx
@@ -9,10 +9,11 @@ import {TooltipStatus, getValidationTooltip} from './tooltipUtils';
 type BranchProps = {
   status?: TooltipStatus;
   message?: string;
+  disabled?: boolean;
 };
 
 const Branch: React.FC<BranchProps> = props => {
-  const {status = TooltipStatus.None, message} = props;
+  const {status = TooltipStatus.None, message, disabled} = props;
 
   return (
     <FormItem
@@ -24,7 +25,7 @@ const Branch: React.FC<BranchProps> = props => {
       tooltip={getValidationTooltip(status, message)}
       key="branch"
     >
-      <Input placeholder="e.g.: main" />
+      <Input placeholder="e.g.: main" disabled={disabled} />
     </FormItem>
   );
 };

diff --git a/src/components/molecules/GitFormItems/Commit.tsx b/src/components/molecules/GitFormItems/Commit.tsx
@@ -9,10 +9,11 @@ import {TooltipStatus, getValidationTooltip} from './tooltipUtils';
 type CommitProps = {
   status?: TooltipStatus;
   message?: string;
+  disabled?: boolean;
 };
 
 const Commit: React.FC<CommitProps> = props => {
-  const {status = TooltipStatus.None, message} = props;
+  const {status = TooltipStatus.None, message, disabled} = props;
 
   return (
     <FormItem
@@ -24,7 +25,7 @@ const Commit: React.FC<CommitProps> = props => {
       tooltip={getValidationTooltip(status, message)}
       key="commit"
     >
-      <Input placeholder="Enter commit id..." />
+      <Input placeholder="Enter commit id..." disabled={disabled} />
     </FormItem>
   );
 };