Merge pull request open-source-labs#32 from oslabs-beta/chang/launch_…

…ready

Chang/launch ready

demo/client/src/components/CacheTab.tsx

@@ -0,0 +1,147 @@
+/* eslint-disable react/react-in-jsx-scope */
+import React, { useState, useEffect } from 'react';
+import NavButton from './NavButton';
+import CacheView from './CacheView';
+import SearchImg from '../assets/search.png';
+import beautify from 'json-beautify';
+
+const CacheTab = ({ serverAddress, redisRoute, handleClearCache }) => {
+  //use state to store data from redis server
+  const [redisStats, setRedisStats] = useState({});
+  const [redisKeys, setRedisKeys] = useState([]);
+  const [redisValues, setRedisValues] = useState([]);
+  const [activeTab, setActiveTab] = useState('server');
+
+  const fetchRedisInfo = () => {
+    fetch(`${serverAddress}${redisRoute}`)
+      .then((response) => response.json())
+      .then((data) => {
+        console.log('redis info: ', data)
+        if (data.redisStats) setRedisStats(data.redisStats);
+        if (data.redisKeys) setRedisKeys(data.redisKeys);
+        if (data.redisValues) setRedisValues(data.redisValues);
+      })
+      .catch((error) =>
+        console.log('error fetching from redis endpoint: ', error)
+      );
+  };
+
+  useEffect(() => {
+    fetchRedisInfo();
+  }, []);
+
+  const genTable = (title) => {
+    const output = [];
+    for (let key in redisStats[title]) {
+      output.push(
+        <div className='subStats' >
+          <div
+            key={`${title}.name`}
+            style={{
+              fontWeight: '500',
+              fontSize: '0.85rem',
+              color: '#eee',
+              border: '1px solid #333',
+              borderWidth: ' 1px 1px ',
+              padding: '3px 12px 3px 10px',
+            }}
+          >
+            {redisStats[title][key].name}
+          </div>
+          <div
+            key={`${title}.value`}
+            style={{ 
+              borderTop: '1px solid #333', 
+              padding: '3px 12px 3px 10px' 
+            }}
+          >
+            {redisStats[title][key].value}
+          </div>
+        </div>
+      );
+    }
+    return output;
+  };
+
+  const [filter, setFilter] = useState('')
+  const activeStyle = { backgroundColor: '#444' };
+  const handleFilter = (e) => {
+    setFilter(e.target.value);
+  }
+
+  return (
+    <div className='cacheStatTab'>
+      {/* title */}
+      {/* <span style={{fontSize: '1.5rem', fontWeight:'bold'}}>Cache Server</span> */}
+
+      <div className='title_bar'>
+        <span>Redis Database Status</span>
+        <span>Quell Server Cache</span>
+      </div>
+
+      <div className='Cache_Server'>
+        <div className='cacheTables'>
+          <div className='cacheButtons'>
+            <NavButton
+              text={'server'}
+              activeTab={activeTab}
+              setActiveTab={setActiveTab}
+              altClass={'cacheNavButton'}
+            />
+
+            <NavButton
+              text={'client'}
+              activeTab={activeTab}
+              setActiveTab={setActiveTab}
+              altClass={'cacheNavButton'}
+            />
+
+            <NavButton
+              text={'memory'}
+              activeTab={activeTab}
+              setActiveTab={setActiveTab}
+              altClass={'cacheNavButton'}
+            />
+
+            <NavButton
+              text={'stats'}
+              activeTab={activeTab}
+              setActiveTab={setActiveTab}
+              altClass={'cacheNavButton'}
+            />
+          </div>
+
+          <div className='dynamicCacheTable'>
+            {activeTab === 'server' && <div>{genTable('server')}</div>}
+
+            {activeTab === 'client' && <div>{genTable('client')}</div>}
+
+            {activeTab === 'memory' && <div>{genTable('memory')}</div>}
+
+            {activeTab === 'stats' && <div>{genTable('stats')}</div>}
+          </div>
+        <button className='optionButtons' id='cacheTabRefresh' onClick={fetchRedisInfo}>
+          Refresh Data
+        </button>
+        <button className='optionButtons' id='cacheTabClear' onClick={handleClearCache}>
+          Clear Cache
+        </button>
+        </div>
+
+        <div className="redisCache">
+          <div className="cacheSearchbar">
+            <img id="searchIcon" src={SearchImg} alt="search" />
+            <input className="cache_filter_field" type="text" placeholder="Filter by id" value={filter} onChange={handleFilter}/>
+          </div>
+          <CacheView 
+            redisKeys={redisKeys}
+            redisValues={redisValues}
+            filteredVal={filter}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CacheTab;

demo/client/src/components/CacheView.tsx

@@ -0,0 +1,38 @@
+import { useState, useEffect } from 'react';
+
+const CacheView = ({ redisKeys, redisValues, filteredVal } = props) => {
+  const getFilteredCache = () => {
+    const temp = [];
+    let i = 0;
+    if (redisValues.length > 0) {
+      while (i < redisKeys.length && i < redisValues.length) {
+        if (redisKeys[i].includes(filteredVal))
+        temp.push(
+          <details className="cache_entry" key={i}>
+            <summary className="cache_entry_key">{redisKeys[i]}</summary>
+            <span className="cache_entry_value">{redisValues[i]}</span>
+          </details>
+        )
+        i++;
+      }
+    }
+    else if (redisKeys.length > 0) {
+     redisKeys.forEach((el, i) => {
+      temp.push(
+        <p className="cache_entry" key={i}>{el}</p>
+      )
+     }) 
+    } else temp.push(
+      <h4>No keys or values returned. Your Redis cache may be empty, or the specified endpoint may not be configured to return keys and/or values. See the <a href="https://github.com/open-source-labs/Quell" target="_blank">Quell docs</a> for configuration instructions.</h4>
+    )
+    return temp;
+  }
+
+  return (
+    <>
+    {getFilteredCache()}
+    </>
+  )  
+}
+
+export default CacheView