Merge pull request #288 from pawelmalak/feature

Version 2.2.1

.dockerignore

@@ -2,4 +2,5 @@ node_modules
 .github
 public
 k8s
-skaffold.yaml
+skaffold.yaml
+data

.env

@@ -1,5 +1,5 @@
 PORT=5005
 NODE_ENV=development
-VERSION=2.1.1
+VERSION=2.2.1
 PASSWORD=flame_password
 SECRET=e02eb43d69953658c6d07311d6313f2d4467672cb881f96b29368ba1f3f4da4b

CHANGELOG.md

@@ -1,3 +1,12 @@
+### v2.2.1 (2022-01-08)
+- Local search will now include app descriptions ([#266](https://github.com/pawelmalak/flame/issues/266))
+- Fixed bug with unsupported characters in local search [#279](https://github.com/pawelmalak/flame/issues/279))
+- Background tasks optimization ([#283](https://github.com/pawelmalak/flame/issues/283))
+
+### v2.2.0 (2021-12-17)
+- Added option to set custom description for apps ([#201](https://github.com/pawelmalak/flame/issues/201))
+- Fixed fatal error while deploying Flame to cluster ([#242](https://github.com/pawelmalak/flame/issues/242))
+
 ### v2.1.1 (2021-12-02)
 - Added support for Docker secrets ([#189](https://github.com/pawelmalak/flame/issues/189))
 - Changed some messages and buttons to make it easier to open bookmarks editor ([#239](https://github.com/pawelmalak/flame/issues/239))

README.md

@@ -35,7 +35,7 @@ docker pull pawelmalak/flame:2.0.0
 
 ```sh
 # run container
-docker run -p 5005:5005 -v /path/to/data:/app/data -e PASSWORD=flame_password flame
+docker run -p 5005:5005 -v /path/to/data:/app/data -e PASSWORD=flame_password pawelmalak/flame
 ```
 
 #### Building images

client/.env

@@ -1 +1 @@
-REACT_APP_VERSION=2.1.1
+REACT_APP_VERSION=2.2.1

client/src/components/Apps/AppCard/AppCard.tsx

@@ -8,16 +8,15 @@ import { State } from '../../../store/reducers';
 
 interface Props {
   app: App;
-  pinHandler?: Function;
 }
 
-export const AppCard = (props: Props): JSX.Element => {
+export const AppCard = ({ app }: Props): JSX.Element => {
   const { config } = useSelector((state: State) => state.config);
 
-  const [displayUrl, redirectUrl] = urlParser(props.app.url);
+  const [displayUrl, redirectUrl] = urlParser(app.url);
 
   let iconEl: JSX.Element;
-  const { icon } = props.app;
+  const { icon } = app;
 
   if (isImage(icon)) {
     const source = isUrl(icon) ? icon : `/uploads/${icon}`;
@@ -25,7 +24,7 @@ export const AppCard = (props: Props): JSX.Element => {
     iconEl = (
       <img
         src={source}
-        alt={`${props.app.name} icon`}
+        alt={`${app.name} icon`}
         className={classes.CustomIcon}
       />
     );
@@ -54,8 +53,8 @@ export const AppCard = (props: Props): JSX.Element => {
     >
       <div className={classes.AppCardIcon}>{iconEl}</div>
       <div className={classes.AppCardDetails}>
-        <h5>{props.app.name}</h5>
-        <span>{displayUrl}</span>
+        <h5>{app.name}</h5>
+        <span>{!app.description.length ? displayUrl : app.description}</span>
       </div>
     </a>
   );

client/src/components/Apps/AppForm/AppForm.tsx

@@ -96,7 +96,7 @@ export const AppForm = ({ modalHandler }: Props): JSX.Element => {
     <ModalForm modalHandler={modalHandler} formHandler={formSubmitHandler}>
       {/* NAME */}
       <InputGroup>
-        <label htmlFor="name">App Name</label>
+        <label htmlFor="name">App name</label>
         <input
           type="text"
           name="name"
@@ -122,11 +122,27 @@ export const AppForm = ({ modalHandler }: Props): JSX.Element => {
         />
       </InputGroup>
 
+      {/* DESCRIPTION */}
+      <InputGroup>
+        <label htmlFor="description">App description</label>
+        <input
+          type="text"
+          name="description"
+          id="description"
+          placeholder="My self-hosted app"
+          value={formData.description}
+          onChange={(e) => inputChangeHandler(e)}
+        />
+        <span>
+          Optional - If description is not set, app URL will be displayed
+        </span>
+      </InputGroup>
+
       {/* ICON */}
       {!useCustomIcon ? (
         // use mdi icon
         <InputGroup>
-          <label htmlFor="icon">App Icon</label>
+          <label htmlFor="icon">App icon</label>
           <input
             type="text"
             name="icon"

client/src/components/Home/Home.tsx

@@ -64,8 +64,10 @@ export const Home = (): JSX.Element => {
     if (localSearch) {
       // Search through apps
       setAppSearchResult([
-        ...apps.filter(({ name }) =>
-          new RegExp(escapeRegex(localSearch), 'i').test(name)
+        ...apps.filter(({ name, description }) =>
+          new RegExp(escapeRegex(localSearch), 'i').test(
+            `${name} ${description}`
+          )
         ),
       ]);
 

client/src/components/SearchBar/SearchBar.tsx

@@ -69,7 +69,8 @@ export const SearchBar = (props: Props): JSX.Element => {
     );
 
     if (isLocal) {
-      setLocalSearch(search);
+      // no additional encoding required for local search
+      setLocalSearch(inputRef.current.value);
     }
 
     if (e.code === 'Enter' || e.code === 'NumpadEnter') {

client/src/components/Settings/AppDetails/AppDetails.tsx

@@ -1,43 +1,57 @@
 import { Fragment } from 'react';
+
+// UI
 import { Button, SettingsHeadline } from '../../UI';
-import classes from './AppDetails.module.css';
-import { checkVersion } from '../../../utility';
 import { AuthForm } from './AuthForm/AuthForm';
+import classes from './AppDetails.module.css';
+
+// Store
+import { useSelector } from 'react-redux';
+import { State } from '../../../store/reducers';
+
+// Other
+import { checkVersion } from '../../../utility';
 
 export const AppDetails = (): JSX.Element => {
+  const { isAuthenticated } = useSelector((state: State) => state.auth);
+
   return (
     <Fragment>
       <SettingsHeadline text="Authentication" />
       <AuthForm />
 
-      <hr className={classes.separator} />
+      {isAuthenticated && (
+        <Fragment>
+          <hr className={classes.separator} />
 
-      <div>
-        <SettingsHeadline text="App version" />
-        <p className={classes.text}>
-          <a
-            href="https://github.com/pawelmalak/flame"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Flame
-          </a>{' '}
-          version {process.env.REACT_APP_VERSION}
-        </p>
+          <div>
+            <SettingsHeadline text="App version" />
+            <p className={classes.text}>
+              <a
+                href="https://github.com/pawelmalak/flame"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Flame
+              </a>{' '}
+              version {process.env.REACT_APP_VERSION}
+            </p>
 
-        <p className={classes.text}>
-          See changelog{' '}
-          <a
-            href="https://github.com/pawelmalak/flame/blob/master/CHANGELOG.md"
-            target="_blank"
-            rel="noreferrer"
-          >
-            here
-          </a>
-        </p>
+            <p className={classes.text}>
+              See changelog{' '}
+              <a
+                href="https://github.com/pawelmalak/flame/blob/master/CHANGELOG.md"
+                target="_blank"
+                rel="noreferrer"
+              >
+                here
+              </a>
+            </p>
 
-        <Button click={() => checkVersion(true)}>Check for updates</Button>
-      </div>
+            <Button click={() => checkVersion(true)}>Check for updates</Button>
+          </div>
+        </Fragment>
+      )}
     </Fragment>
   );
 };

client/src/interfaces/App.ts

@@ -5,6 +5,7 @@ export interface NewApp {
   url: string;
   icon: string;
   isPublic: boolean;
+  description: string;
 }
 
 export interface App extends Model, NewApp {

client/src/utility/templateObjects/appTemplate.ts

@@ -5,6 +5,7 @@ export const newAppTemplate: NewApp = {
   url: '',
   icon: '',
   isPublic: true,
+  description: '',
 };
 
 export const appTemplate: App = {

db/migrations/05_app-description.js

@@ -0,0 +1,19 @@
+const { DataTypes } = require('sequelize');
+const { STRING } = DataTypes;
+
+const up = async (query) => {
+  await query.addColumn('apps', 'description', {
+    type: STRING,
+    allowNull: false,
+    defaultValue: '',
+  });
+};
+
+const down = async (query) => {
+  await query.removeColumn('apps', 'description');
+};
+
+module.exports = {
+  up,
+  down,
+};

models/App.js

@@ -31,6 +31,11 @@ const App = sequelize.define(
       allowNull: true,
       defaultValue: 1,
     },
+    description: {
+      type: DataTypes.STRING,
+      allowNull: false,
+      defaultValue: '',
+    },
   },
   {
     tableName: 'apps',

package-lock.json

@@ -13,7 +13,7 @@
         "@types/express": "^4.17.13",
         "axios": "^0.24.0",
         "concurrently": "^6.3.0",
-        "docker-secret": "^1.2.3",
+        "docker-secret": "^1.2.4",
         "dotenv": "^10.0.0",
         "express": "^4.17.1",
         "jsonwebtoken": "^8.5.1",
@@ -1191,9 +1191,9 @@
       "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
     },
     "node_modules/docker-secret": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/docker-secret/-/docker-secret-1.2.3.tgz",
-      "integrity": "sha512-JFUGiZEiNO0Hi9YzZAdCc5MwUpgQOjz0OeZkkcEv+lH6ZBkXNK97w2gcBQCsg5WRsT+Cj9eKFhuYyDxT8j56+A==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/docker-secret/-/docker-secret-1.2.4.tgz",
+      "integrity": "sha512-aH3truzfxV8TikMa0wJES8h0v2FAwhuQZYk116ZVOHFZ1vnDTGutgCOvXmBPyLBG1Lo7yv93FdHVRTvhFFaC/g==",
       "engines": {
         "node": ">= 6"
       }
@@ -5335,9 +5335,9 @@
       }
     },
     "docker-secret": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/docker-secret/-/docker-secret-1.2.3.tgz",
-      "integrity": "sha512-JFUGiZEiNO0Hi9YzZAdCc5MwUpgQOjz0OeZkkcEv+lH6ZBkXNK97w2gcBQCsg5WRsT+Cj9eKFhuYyDxT8j56+A=="
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/docker-secret/-/docker-secret-1.2.4.tgz",
+      "integrity": "sha512-aH3truzfxV8TikMa0wJES8h0v2FAwhuQZYk116ZVOHFZ1vnDTGutgCOvXmBPyLBG1Lo7yv93FdHVRTvhFFaC/g=="
     },
     "dot-prop": {
       "version": "5.3.0",
@@ -7754,4 +7754,4 @@
       "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w=="
     }
   }
-}
+}

package.json

@@ -21,7 +21,7 @@
     "@types/express": "^4.17.13",
     "axios": "^0.24.0",
     "concurrently": "^6.3.0",
-    "docker-secret": "^1.2.3",
+    "docker-secret": "^1.2.4",
     "dotenv": "^10.0.0",
     "express": "^4.17.1",
     "jsonwebtoken": "^8.5.1",

server.js

@@ -23,6 +23,7 @@ const logger = new Logger();
   await initApp();
   await connectDB();
   await associateModels();
+  await jobs();
 
   // Create server for Express API and WebSockets
   const server = http.createServer();

utils/init/initDockerSecrets.js

@@ -3,14 +3,18 @@ const Logger = require('../Logger');
 const logger = new Logger();
 
 const initDockerSecrets = () => {
-  const secrets = getSecrets();
+  try {
+    const secrets = getSecrets();
 
-  for (const property in secrets) {
-    const upperProperty = property.toUpperCase();
+    for (const property in secrets) {
+      const upperProperty = property.toUpperCase();
 
-    process.env[upperProperty] = secrets[property];
+      process.env[upperProperty] = secrets[property];
 
-    logger.log(`${upperProperty} was overwritten with docker secret value`);
+      logger.log(`${upperProperty} was overwritten with docker secret value`);
+    }
+  } catch (e) {
+    logger.log(`Failed to initialize docker secrets. Error: ${e}`, 'ERROR');
   }
 };
 

utils/jobs.js

@@ -6,30 +6,34 @@ const Logger = require('./Logger');
 const loadConfig = require('./loadConfig');
 const logger = new Logger();
 
-// Update weather data every 15 minutes
-const weatherJob = schedule.scheduleJob(
-  'updateWeather',
-  '0 */15 * * * *',
-  async () => {
-    const { WEATHER_API_KEY: secret } = await loadConfig();
+module.exports = async function () {
+  const { WEATHER_API_KEY } = await loadConfig();
 
-    try {
-      const weatherData = await getExternalWeather();
+  if (WEATHER_API_KEY != '') {
+    // Update weather data every 15 minutes
+    const weatherJob = schedule.scheduleJob(
+      'updateWeather',
+      '0 */15 * * * *',
+      async () => {
+        try {
+          const weatherData = await getExternalWeather();
 
-      Sockets.getSocket('weather').socket.send(JSON.stringify(weatherData));
-    } catch (err) {
-      if (secret) {
-        logger.log(err.message, 'ERROR');
+          Sockets.getSocket('weather').socket.send(JSON.stringify(weatherData));
+        } catch (err) {
+          if (WEATHER_API_KEY) {
+            logger.log(err.message, 'ERROR');
+          }
+        }
       }
-    }
-  }
-);
+    );
 
-// Clear old weather data every 4 hours
-const weatherCleanerJob = schedule.scheduleJob(
-  'clearWeather',
-  '0 5 */4 * * *',
-  async () => {
-    clearWeatherData();
+    // Clear old weather data every 4 hours
+    const weatherCleanerJob = schedule.scheduleJob(
+      'clearWeather',
+      '0 5 */4 * * *',
+      async () => {
+        clearWeatherData();
+      }
+    );
   }
-);
+};