Combined PR-140 & PR-209

src/components/Backups/StyledBackups.tsx

@@ -72,23 +72,6 @@ export const DataTable = styled.div`
       padding-right: 15px;
     }
 
-    .btn-download {
-      width: 173px;
-      padding-inline: 22px;
-      white-space: nowrap;
-
-      &-lg {
-        font-size: 80%;
-      }
-
-      @media (max-width: 1200px) {
-        width: unset;
-        &-lg {
-          font-size: initial;
-        }
-      }
-    }
-
     & > div {
       padding-left: 20px;
       @media ${bp.wideDown} {

src/components/Backups/index.stories.tsx

@@ -21,7 +21,6 @@ const backupsData = [
     restore: {
       status: 'completed',
       restoreLocation: 'https://example.com/backup',
-      restoreSize: 300
     },
   },
   {

src/components/Backups/index.tsx

@@ -14,7 +14,6 @@ export interface BackupsProps {
     restore: {
       status: 'completed' | 'pending' | 'failed';
       restoreLocation?: string;
-      restoreSize?: number;
     };
   }[];
 }

src/components/RestoreButton/index.js

@@ -3,13 +3,6 @@ import React from 'react';
 import Button from 'components/Button';
 import Prepare from 'components/RestoreButton/Prepare';
 
-function humanFileSize(size) {
-  var i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
-  const formatted = (size / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
-
-  return [formatted.length > 5, formatted];
-}
-
 /**
  * A button to restore a backup.
  */
@@ -20,13 +13,7 @@ const RestoreButton = ({ backup: { backupId, restore } }) => {
 
   if (restore.status === 'failed') return <Button disabled>Retrieve failed</Button>;
 
-  const [isOverflowing, formattedSize] = humanFileSize(restore.restoreSize);
-
-  return (
-    <Button variant={`download ${isOverflowing ? 'btn-download-lg' : ''}`} href={restore.restoreLocation}>
-      Download ({formattedSize})
-    </Button>
-  );
+  return <Button href={restore.restoreLocation}>Download</Button>;
 };
 
 export default RestoreButton;

src/lib/ApiConnection.js

@@ -34,6 +34,7 @@ const ApiConnection = ({ children }) => (
         const wsLink = new WebSocketLink({
           uri: publicRuntimeConfig.GRAPHQL_API.replace(/https/, 'wss').replace(/http/, 'ws'),
           options: {
+            lazy: true,
             reconnect: true,
             connectionParams: {
               authToken: auth.apiToken,

src/lib/query/EnvironmentWithBackups.js

@@ -20,7 +20,6 @@ export default gql`
           id
           status
           restoreLocation
-          restoreSize
         }
       }
     }

src/pages/backups.js

@@ -15,9 +15,7 @@ import NavTabsSkeleton from 'components/NavTabs/NavTabsSkeleton';
 import ResultsLimited from 'components/ResultsLimited';
 import MainLayout from 'layouts/MainLayout';
 import EnvironmentWithBackupsQuery from 'lib/query/EnvironmentWithBackups';
-import BackupsSubscription from 'lib/subscription/Backups';
 import * as R from 'ramda';
-
 import EnvironmentNotFound from '../components/errors/EnvironmentNotFound';
 import QueryError from '../components/errors/QueryError';
 import { CommonWrapperWNotification } from '../styles/commonPageStyles';
@@ -34,7 +32,7 @@ export const PageBackups = ({ router }) => {
   const [resultLimit, setResultLimit] = useState(null);
 
   const { continueTour } = useTourContext();
-  const { data, error, loading, subscribeToMore } = useQuery(EnvironmentWithBackupsQuery, {
+  const { data, error, loading } = useQuery(EnvironmentWithBackupsQuery, {
     variables: {
       openshiftProjectName: router.query.openshiftProjectName,
       limit: resultLimit,
@@ -117,51 +115,6 @@ export const PageBackups = ({ router }) => {
     );
   }
 
-  subscribeToMore({
-    document: BackupsSubscription,
-    variables: { environment: environment.id },
-    updateQuery: (prevStore, { subscriptionData }) => {
-      if (!subscriptionData.data) return prevStore;
-      const prevBackups = prevStore.environment.backups;
-      const incomingBackup = subscriptionData.data.backupChanged;
-      const existingIndex = prevBackups.findIndex(prevBackup => prevBackup.id === incomingBackup.id);
-      let newBackups;
-
-      // New backup.
-      if (existingIndex === -1) {
-        // Don't add new deleted backups.
-        if (incomingBackup.deleted !== '0000-00-00 00:00:00') {
-          return prevStore;
-        }
-
-        newBackups = [incomingBackup, ...prevBackups];
-      }
-      // Existing backup.
-      else {
-        // Updated backup
-        if (incomingBackup.deleted === '0000-00-00 00:00:00') {
-          newBackups = Object.assign([...prevBackups], {
-            [existingIndex]: incomingBackup,
-          });
-        }
-        // Deleted backup
-        else {
-          newBackups = R.remove(existingIndex, 1, prevBackups);
-        }
-      }
-
-      const newStore = {
-        ...prevStore,
-        environment: {
-          ...prevStore.environment,
-          backups: newBackups,
-        },
-      };
-
-      return newStore;
-    },
-  });
-
   return (
     <>
       <Head>

src/pages/deployments.js

@@ -17,8 +17,6 @@ import NavTabsSkeleton from 'components/NavTabs/NavTabsSkeleton';
 import ResultsLimited from 'components/ResultsLimited';
 import MainLayout from 'layouts/MainLayout';
 import EnvironmentWithDeploymentsQuery from 'lib/query/EnvironmentWithDeployments';
-import DeploymentsSubscription from 'lib/subscription/Deployments';
-
 import EnvironmentNotFound from '../components/errors/EnvironmentNotFound';
 import QueryError from '../components/errors/QueryError';
 import { DeploymentsWrapper } from '../styles/pageStyles';
@@ -36,7 +34,7 @@ export const PageDeployments = ({ router }) => {
 
   const [resultLimit, setResultLimit] = useState(null);
 
-  const { data, error, loading, subscribeToMore, refetch } = useQuery(EnvironmentWithDeploymentsQuery, {
+  const { data, error, loading, refetch } = useQuery(EnvironmentWithDeploymentsQuery, {
     variables: {
       openshiftProjectName: router.query.openshiftProjectName,
       limit: resultLimit,
@@ -119,39 +117,6 @@ export const PageDeployments = ({ router }) => {
     );
   }
 
-  subscribeToMore({
-    document: DeploymentsSubscription,
-    variables: { environment: environment.id },
-    updateQuery: (prevStore, { subscriptionData }) => {
-      if (!subscriptionData.data) return prevStore;
-      const prevDeployments = prevStore.environment.deployments;
-      const incomingDeployment = subscriptionData.data.deploymentChanged;
-      const existingIndex = prevDeployments.findIndex(prevDeployment => prevDeployment.id === incomingDeployment.id);
-      let newDeployments;
-
-      // New deployment.
-      if (existingIndex === -1) {
-        newDeployments = [incomingDeployment, ...prevDeployments];
-      }
-      // Updated deployment
-      else {
-        newDeployments = Object.assign([...prevDeployments], {
-          [existingIndex]: incomingDeployment,
-        });
-      }
-
-      const newStore = {
-        ...prevStore,
-        environment: {
-          ...prevStore.environment,
-          deployments: newDeployments,
-        },
-      };
-
-      return newStore;
-    },
-  });
-
   return (
     <>
       <Head>

src/pages/tasks.js

@@ -17,8 +17,6 @@ import Tasks from 'components/Tasks';
 import TasksSkeleton from 'components/Tasks/TasksSkeleton';
 import MainLayout from 'layouts/MainLayout';
 import EnvironmentWithTasksQuery from 'lib/query/EnvironmentWithTasks';
-import TasksSubscription from 'lib/subscription/Tasks';
-
 import EnvironmentNotFound from '../components/errors/EnvironmentNotFound';
 import QueryError from '../components/errors/QueryError';
 import { TasksWrapper } from '../styles/pageStyles';
@@ -35,7 +33,7 @@ export const PageTasks = ({ router, renderAddTasks }) => {
   const [resultLimit, setResultLimit] = useState(null);
 
   const { continueTour } = useTourContext();
-  const { data, error, loading, subscribeToMore, refetch } = useQuery(EnvironmentWithTasksQuery, {
+  const { data, error, loading, refetch } = useQuery(EnvironmentWithTasksQuery, {
     variables: {
       openshiftProjectName: router.query.openshiftProjectName,
       limit: resultLimit,
@@ -120,39 +118,6 @@ export const PageTasks = ({ router, renderAddTasks }) => {
     );
   }
 
-  subscribeToMore({
-    document: TasksSubscription,
-    variables: { environment: environment.id },
-    updateQuery: (prevStore, { subscriptionData }) => {
-      if (!subscriptionData.data) return prevStore;
-      const prevTasks = prevStore.environment.tasks;
-      const incomingTask = subscriptionData.data.taskChanged;
-      const existingIndex = prevTasks.findIndex(prevTask => prevTask.id === incomingTask.id);
-      let newTasks;
-
-      // New task.
-      if (existingIndex === -1) {
-        newTasks = [incomingTask, ...prevTasks];
-      }
-      // Updated task
-      else {
-        newTasks = Object.assign([...prevTasks], {
-          [existingIndex]: incomingTask,
-        });
-      }
-
-      const newStore = {
-        ...prevStore,
-        environment: {
-          ...prevStore.environment,
-          tasks: newTasks,
-        },
-      };
-
-      return newStore;
-    },
-  });
-
   return (
     <>
       <Head>