v4.5.8

package.json

@@ -1,6 +1,6 @@
 {
   "name": "harperdb-studio",
-  "version": "4.5.7",
+  "version": "4.5.8",
   "description": "A UI for HarperDB",
   "deploymentUrl": "studio.harperdb.io",
   "private": true,

src/assets/styles/pages/_config.scss

@@ -1,15 +1,5 @@
-#local-studio {
-  #config {
-    .instance-details {
-      min-height: auto !important;
-    }
-  }
-}
-
 #config {
   .instance-details {
-    min-height: 152px;
-
     .card-body {
       padding-bottom: 0;
     }

src/components/instance/browse/BrowseDatatable.js

@@ -69,6 +69,7 @@ function BrowseDatatable({ tableState, setTableState, activeTable }) {
         filtered: tableState.filtered,
         pageSize: tableState.pageSize,
         sorted: tableState.sorted,
+        onlyCached: tableState.onlyCached,
         page: tableState.page,
         auth,
         url,
@@ -78,7 +79,13 @@ function BrowseDatatable({ tableState, setTableState, activeTable }) {
 
       if (isMounted) {
         setLoading(false);
-        if (!newData.error) {
+        if (newData.error) {
+          setTableState({
+            ...tableState,
+            tableData: [],
+            error,
+          });
+        } else {
           if (!tableState.filtered.length) {
             setTotalPages(newTotalPages);
             setTotalRecords(newTotalRecords);
@@ -109,7 +116,7 @@ function BrowseDatatable({ tableState, setTableState, activeTable }) {
       isMounted = false;
     };
     // eslint-disable-next-line
-  }, [tableState.sorted, tableState.page, tableState.filtered, tableState.pageSize, lastUpdate, activeTable]);
+  }, [tableState.sorted, tableState.page, tableState.filtered, tableState.pageSize, tableState.onlyCached, lastUpdate, activeTable]);
 
   useInterval(() => tableState.autoRefresh && setLastUpdate(Date.now()), config.refresh_content_interval);
 
@@ -120,8 +127,10 @@ function BrowseDatatable({ tableState, setTableState, activeTable }) {
         loading={loading}
         loadingFilter={loadingFilter}
         autoRefresh={tableState.autoRefresh}
+        onlyCached={tableState.onlyCached}
         refresh={() => setLastUpdate(Date.now())}
         toggleAutoRefresh={() => setTableState({ ...tableState, autoRefresh: !tableState.autoRefresh })}
+        toggleOnlyCached={() => setTableState({ ...tableState, onlyCached: !tableState.onlyCached })}
         toggleFilter={() => setTableState({ ...tableState, showFilter: !tableState.showFilter })}
       />
       <Card className="my-3">
@@ -130,6 +139,7 @@ function BrowseDatatable({ tableState, setTableState, activeTable }) {
             manual
             columns={tableState.dataTableColumns || []}
             data={tableState.tableData || []}
+            error={tableState.error}
             currentPage={tableState.page}
             pageSize={tableState.pageSize}
             totalPages={totalPages || 0}

src/components/instance/browse/BrowseDatatableHeader.js

@@ -4,7 +4,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 
 import commaNumbers from '../../../functions/util/commaNumbers';
 
-function BrowseDatatableHeader({ totalRecords, loading, loadingFilter, refresh, autoRefresh, toggleAutoRefresh, toggleFilter }) {
+function BrowseDatatableHeader({ totalRecords, loading, loadingFilter, refresh, autoRefresh, onlyCached, toggleAutoRefresh, toggleOnlyCached, toggleFilter }) {
   const navigate = useNavigate();
   const { compute_stack_id, schema, table, customer_id } = useParams();
 
@@ -32,6 +32,11 @@ function BrowseDatatableHeader({ totalRecords, loading, loadingFilter, refresh,
           <i className={`fa fa-lg fa-toggle-${autoRefresh ? 'on' : 'off'}`} />
         </Button>
         <span className="mx-3 text">|</span>
+        <Button id="toggleOnlyCached" color="link" tabIndex="0" title="Only show cached data" onClick={toggleOnlyCached}>
+          <span className="me-2">only cached</span>
+          <i className={`fa fa-lg fa-toggle-${onlyCached ? 'on' : 'off'}`} />
+        </Button>
+        <span className="mx-3 text">|</span>
         <Button id="toggleSearch" color="link" tabIndex="0" title={`Filter table ${table}`} className="me-3" onClick={toggleFilter}>
           <i className="fa fa-search" />
         </Button>

src/components/instance/browse/JSONEditor.js

@@ -97,7 +97,9 @@ function JSONEditor({ newEntityAttributes, hashAttribute }) {
               schema,
               table,
               hash_values,
-              get_attributes: ['*']
+              get_attributes: ['*'],
+              onlyIfCached: true,
+              noCacheStore: true
           },
           auth,
           url

src/components/instance/browse/index.js

@@ -27,6 +27,7 @@ const defaultTableState = {
   page: 0,
   pageSize: 20,
   autoRefresh: false,
+  onlyCached: false,
   showFilter: false,
   newEntityAttributes: false,
   hashAttribute: false,

src/components/instance/query/Datatable.js

@@ -25,6 +25,7 @@ const defaultTableState = {
   totalPages: 1,
   pageSize: 20,
   autoRefresh: false,
+  onlyCached: false,
   showFilter: false,
   lastUpdate: false,
 };
@@ -103,7 +104,9 @@ function Datatable({ query }) {
         filtered={tableState.filtered}
         toggleFilter={(newValues) => setTableState({ ...tableState, ...newValues })}
         autoRefresh={tableState.autoRefresh}
+        onlyCached={tableState.onlyCached}
         setAutoRefresh={() => setTableState({ ...tableState, autoRefresh: !tableState.autoRefresh })}
+        setOnlyCached={() => setTableState({ ...tableState, onlyCached: !tableState.onlyCached })}
         setLastUpdate={setLastUpdate}
         setShowChartModal={setShowChartModal}
       />

src/components/instance/status/SystemInfo.js

@@ -3,7 +3,6 @@ import { useStoreState } from 'pullstate';
 import { Card, CardBody, Row, Col, Button } from 'reactstrap';
 import { ErrorBoundary } from 'react-error-boundary';
 
-import appState from '../../../functions/state/appState';
 import instanceState from '../../../functions/state/instanceState';
 
 import updateSystemInfo from '../../../functions/api/instance/updateSystemInfo';
@@ -14,14 +13,10 @@ import addError from '../../../functions/api/lms/addError';
 let controller;
 
 function SystemInfo() {
-  const compute_stack_id = useStoreState(instanceState, (s) => s.compute_stack_id);
   const auth = useStoreState(instanceState, (s) => s.auth);
   const url = useStoreState(instanceState, (s) => s.url);
   const systemInfo = useStoreState(instanceState, (s) => s.systemInfo);
   const is_local = useStoreState(instanceState, (s) => s.is_local);
-  const storage = useStoreState(instanceState, (s) => s.storage);
-  const iopsAlarms = useStoreState(appState, (s) => s.alarms && s.alarms[compute_stack_id]?.alarmCounts['Disk I/O'], [compute_stack_id]);
-  const [autoRefresh, setAutoRefresh] = useState(false);
   const [loading, setLoading] = useState(!systemInfo?.totalMemory);
 
   const fetchData = async () => {
@@ -48,82 +43,41 @@ function SystemInfo() {
           <Button color="link" title="Update Metrics" className="me-2" onClick={fetchData}>
             <i className={`fa ${loading ? 'fa-spinner fa-spin' : 'fa-sync-alt'}`} />
           </Button>
-          <Button color="link" title="Turn on autofresh" onClick={() => setAutoRefresh(!autoRefresh)}>
-            <span className="me-2">auto</span>
-            <i className={`fa fa-lg fa-toggle-${autoRefresh ? 'on' : 'off'}`} />
-          </Button>
         </Col>
       </Row>
       <Card className="my-3 instance-details">
         <CardBody>
-          {!systemInfo && !autoRefresh ? (
+          {!systemInfo ? (
             <div className="pt-5 text-center">
               <i className="fa fa-spinner fa-spin text-purple" />
             </div>
           ) : (
             <Row>
-              <Col md="2" sm="4" xs="6">
+              <Col>
                 <ContentContainer header="Total Memory" className="mb-3">
                   <div className="nowrap-scroll">{systemInfo?.totalMemory || '...'}GB</div>
                 </ContentContainer>
               </Col>
-              <Col md="2" sm="4" xs="6">
+              <Col>
                 <ContentContainer header="Active Memory" className="mb-3">
                   <div className="nowrap-scroll">{systemInfo?.usedMemory || '...'}GB</div>
                 </ContentContainer>
               </Col>
-              <Col md="2" sm="4" xs="6">
+              <Col>
                 <ContentContainer header="Available Memory" className="mb-3">
                   <div className={`nowrap-scroll text-${systemInfo?.memoryStatus || 'grey'}`}>{systemInfo?.freeMemory || '...'}GB</div>
                 </ContentContainer>
               </Col>
-              <Col md="2" sm="4" xs="6">
-                <ContentContainer header="Total Disk" className="mb-3">
-                  <div className="nowrap-scroll">{systemInfo?.totalDisk || '...'}GB</div>
-                </ContentContainer>
-              </Col>
-              <Col md="2" sm="4" xs="6">
-                <ContentContainer header="Used Disk" className="mb-3">
-                  <div className="nowrap-scroll">{systemInfo?.usedDisk || '...'}GB</div>
-                </ContentContainer>
-              </Col>
-              <Col md="2" sm="4" xs="6">
-                <ContentContainer header="Free Disk" className="mb-3">
-                  <div className={`nowrap-scroll text-${systemInfo?.diskStatus || 'grey'}`}>{systemInfo?.freeDisk || '...'}GB</div>
-                </ContentContainer>
-              </Col>
-              <Col md="2" sm="4" xs="6">
+              <Col>
                 <ContentContainer header="CPU Cores" className="mb-3">
                   <div className="nowrap-scroll">{systemInfo?.cpuCores || '...'}</div>
                 </ContentContainer>
               </Col>
-              <Col md="2" sm="4" xs="6">
+              <Col>
                 <ContentContainer header="CPU Load" className="mb-3">
                   <div className={`nowrap-scroll text-${systemInfo?.cpuStatus || 'grey'}`}>{systemInfo?.cpuLoad || '...'}%</div>
                 </ContentContainer>
               </Col>
-              <Col md="2" sm="4" xs="6">
-                <ContentContainer header="Network Volume Up" className="mb-3">
-                  <div className="nowrap-scroll">{systemInfo?.networkTransferred || '...'}GB</div>
-                </ContentContainer>
-              </Col>
-              <Col md="2" sm="4" xs="6">
-                <ContentContainer header="Network Volume Down" className="mb-3">
-                  <div className="nowrap-scroll">{systemInfo?.networkReceived || '...'}GB</div>
-                </ContentContainer>
-              </Col>
-              <Col md="2" sm="4" xs="6">
-                <ContentContainer header="Network Latency" className="mb-3">
-                  <div className={`nowrap-scroll text-${systemInfo?.networkLatencyStatus || 'grey'}`}>
-                    {systemInfo?.networkLatency ? `${systemInfo?.networkLatency} ms` : 'N/A'}
-                  </div>
-                </ContentContainer>
-              </Col>
-              <Col md="2" sm="4" xs="6">
-                <ContentContainer header="Disk IOPS" className="mb-3">
-                  <div className={`nowrap-scroll text-${iopsAlarms ? 'danger' : ''}`}>{is_local ? 'HARDWARE LIMIT' : storage?.iops || '...'}</div>
-                </ContentContainer>
-              </Col>
             </Row>
           )}
         </CardBody>

src/components/instances/list/CardBackLogin.js

@@ -5,6 +5,7 @@ import { ErrorBoundary } from 'react-error-boundary';
 
 import useInstanceAuth from '../../../functions/state/instanceAuths';
 import handleCloudInstanceUsernameChange from '../../../functions/instances/handleCloudInstanceUsernameChange';
+import login from '../../../functions/api/instance/login';
 import userInfo from '../../../functions/api/instance/userInfo';
 import ErrorFallback from '../../shared/ErrorFallback';
 import addError from '../../../functions/api/lms/addError';
@@ -22,7 +23,21 @@ function CardBackLogin({ compute_stack_id, url, is_ssl, setFlipState, flipState,
       if (!user || !pass) {
         setFormState({ error: 'All fields are required' });
       } else {
-        const result = await userInfo({ auth: { user, pass }, url });
+        let login_not_supported;
+        let result;
+        if (pass) {
+          // try to log in with the provided credentials
+          const login_result = await login({ auth: { user, pass }, url });
+          if (login_result.error) {
+            login_not_supported = true;
+          } else {
+            result = await userInfo({ url });
+            if (result.error)
+              login_not_supported = true;
+          }
+          if (login_not_supported) result = await userInfo({ auth: { user, pass }, url });
+        } else
+          result = await userInfo({ url });
 
         if (is_ssl && is_local && result.error && result.type === 'catch') {
           setFormState({ error: 'SSL ERROR. ACCEPT SELF-SIGNED CERT?', url });
@@ -46,7 +61,7 @@ function CardBackLogin({ compute_stack_id, url, is_ssl, setFlipState, flipState,
         } else {
           setInstanceAuths({
             ...instanceAuths,
-            [compute_stack_id]: { user: formData.user, pass: formData.pass, super: result.role.permission.super_user, structure: result.role.permission.structure_user },
+            [compute_stack_id]: { user: formData.user, pass: login_not_supported ? formData.pass : '', super: result.role.permission.super_user, structure: result.role.permission.structure_user },
           });
           setTimeout(() => setFlipState(false), 100);
         }

src/components/shared/DataTable.js

@@ -59,6 +59,7 @@ const defaultColumn = {
 function DataTable({
   columns,
   data,
+  error,
   currentPage,
   pageSize,
   totalPages,
@@ -108,7 +109,7 @@ function DataTable({
   }, [iterable?.length]);
 
   return (
-    <ErrorBoundary onError={(error, componentStack) => addError({ error: { message: error.message, componentStack } })} FallbackComponent={ErrorFallback}>
+    <ErrorBoundary onError={(err, componentStack) => addError({ error: { message: err.message, componentStack } })} FallbackComponent={ErrorFallback}>
       <div className="react-table-scroller">
         <DataTableHeader headerGroups={headerGroups} onSortedChange={onSortedChange} sorted={sorted} showFilter={showFilter} />
         {loading || localLoading ? (
@@ -120,7 +121,7 @@ function DataTable({
         ) : (
           <div className="centered text-center">
             <i className="fa fa-exclamation-triangle text-danger" />
-            <div className="mt-2 text-darkgrey">no records</div>
+            <div className="mt-2 text-darkgrey">{error ? `Error loading data: ${error}` : 'no records'}</div>
           </div>
         )}
       </div>

src/config/index.base.js

@@ -0,0 +1,17 @@
+export default {
+  studio_version: 'x.x.xx',
+  env: 'dev',
+  stripe_public_key: 'pk_test_XXXXXXXXXXXXXXXXXXXXXX',
+  lms_api_url: 'https://dev.harperdbcloudservices.com/',
+  google_analytics_code: 'UA-XXXXXXXXXXXXX-3',
+  tc_version: '2020-01-01',
+  check_version_interval: 300000,
+  check_user_interval: 900000,
+  refresh_content_interval: 10000,
+  free_cloud_instance_limit: 1,
+  max_file_upload_size: 10380902,
+  alarm_badge_threshold: 86400,
+  maintenance: 0,
+  is_local_studio: process.env.REACT_APP_LOCALSTUDIO, // this is injected at build-time and loads LocalApp.js instead of App.js
+  local_studio_dev_url: 'http://localhost:9925', // this lets you dev the UI on port 3000 and talk to your local instance on 9925
+};

src/config/index.example.js

@@ -1,17 +1,5 @@
 export default {
-  studio_version: 'x.x.xx',
-  env: 'dev',
   stripe_public_key: 'pk_test_XXXXXXXXXXXXXXXXXXXXXX',
   lms_api_url: 'XXXXXXXXXXXXXXXXXXXXXXXX',
   google_analytics_code: 'UA-XXXXXXXXXXXXX-3',
-  tc_version: '2020-01-01',
-  check_version_interval: 300000,
-  check_user_interval: 900000,
-  refresh_content_interval: 10000,
-  free_cloud_instance_limit: 1,
-  max_file_upload_size: 10380902,
-  alarm_badge_threshold: 86400,
-  maintenance: 0,
-  is_local_studio: process.env.REACT_APP_LOCALSTUDIO, // this is injected at build-time and loads LocalApp.js instead of App.js
-  local_studio_dev_url: 'http://localhost:9925', // this lets you dev the UI on port 3000 and talk to your local instance on 9925
 };

src/functions/api/instance/login.js

@@ -0,0 +1,9 @@
+import queryInstance from '../queryInstance';
+
+export default async ({ auth, url }) =>
+  queryInstance({
+    operation: { operation: 'login', username: auth.user, password: auth.pass },
+    auth,
+    url,
+    timeout: 5000,
+  });

src/functions/api/instance/searchByConditions.js

@@ -1,8 +1,8 @@
 import queryInstance from '../queryInstance';
 
-export default async ({ auth, url, schema, table, operator, get_attributes, limit, offset, conditions, signal }) =>
+export default async ({ auth, url, schema, table, operator, get_attributes, limit, offset, onlyCached, conditions, signal }) =>
   queryInstance({
-    operation: { operation: 'search_by_conditions', schema, table, operator, get_attributes, limit, offset, conditions },
+    operation: { operation: 'search_by_conditions', schema, table, operator, get_attributes, limit, offset, conditions, onlyIfCached: onlyCached, noCacheStore: onlyCached },
     auth,
     url,
     signal,

src/functions/api/instance/searchByValue.js

@@ -1,8 +1,8 @@
 import queryInstance from '../queryInstance';
 
-export default async ({ auth, url, schema, table, search_attribute, search_value, get_attributes, limit, offset, signal }) =>
+export default async ({ auth, url, schema, table, search_attribute, search_value, get_attributes, limit, offset, sort, onlyCached, signal }) =>
   queryInstance({
-    operation: { operation: 'search_by_value', schema, table, search_attribute, search_value, get_attributes, limit, offset },
+    operation: { operation: 'search_by_value', schema, table, search_attribute, search_value, get_attributes, limit, offset, sort, onlyIfCached: onlyCached, noCacheStore: onlyCached },
     auth,
     url,
     signal,