Merge pull request #30 from appodeal/feature/AMSA-33/store-detailed-s…

…ync-info [AMSA-33] store detailed sync info
appodeal · Apr 17, 2019 · 4013e8e · 4013e8e
2 parents 035d172 + a52fec3
commit 4013e8e
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 36 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -129,9 +129,11 @@
     "electron-builder": "^20.38.5",
     "file-loader": "^3.0.1",
     "generate-json-webpack-plugin": "^0.3.1",
+    "github": "~0.2.4",
     "html-webpack-plugin": "^3.2.0",
     "jest": "^24.1.0",
     "mini-css-extract-plugin": "^0.5.0",
+    "moment": "^2.22.2",
     "node-sass": "^4.11.0",
     "sass-loader": "^7.1.0",
     "script-ext-html-webpack-plugin": "^2.1.3",
@@ -142,9 +144,7 @@
     "webpack": "^4.29.5",
     "webpack-cli": "^3.2.3",
     "webpack-dev-server": "^3.2.0",
-    "webpack-merge": "^4.2.1",
-    "github": "~0.2.4",
-    "moment": "^2.22.2"
+    "webpack-merge": "^4.2.1"
   },
   "dependencies": {
     "@sentry/electron": "^0.16.0",
@@ -165,6 +165,8 @@
     "raven-js": "^3.27.0",
     "react": "^16.8.3",
     "react-dom": "^16.8.3",
+    "react-tiny-accordion": "^2.0.4",
+    "react-tooltip-lite": "^1.9.1",
     "semver": "^6.0.0",
     "uuid": "^3.3.2",
     "winston": "^3.2.1",

diff --git a/src/core/store.ts b/src/core/store.ts
@@ -231,6 +231,7 @@ export class Store {
                 percent: (pEvent.synced + pEvent.failed) / pEvent.total * 100,
                 lastEvent: event.type
             };
+            this.pushLogs(account);
             return this.fireSyncUpdated();
         case SyncEventsTypes.Stopped:
             delete this.state.syncProgress[event.accountId];

diff --git a/src/core/sync-apps/sync-stats.ts b/src/core/sync-apps/sync-stats.ts
@@ -59,7 +59,7 @@ export class SyncStats {
         if (this.affectedApps.created.some(v => v.id === app.id)) {
             return;
         }
-        this.affectedApps.updated = this.affectedApps.updated.filter(v => v.id !== app.id);
+        this.affectedApps.updated.push(app);
     }
 
     appDeleted (app: AppodealApp) {

diff --git a/src/ui/components/log-list/LogList.scss b/src/ui/components/log-list/LogList.scss
@@ -5,17 +5,17 @@
   overflow-y: auto;
   overflow-x: hidden;
 
-  &:not(:empty) {
-    margin-block-start: 10px;
-  }
-}
+  > div {
+    display: block;
+    background-color: #212225;
 
-.line-wrapper {
-  display: block;
-  background-color: #212225;
+    &:nth-child(2n) {
+      background-color: #2B2C2F;
+    }
+  }
 
-  &:nth-child(2n) {
-    background-color: #2B2C2F;
+  &:not(:empty) {
+    margin-block-start: 10px;
   }
 }
 
@@ -27,6 +27,10 @@
   align-items: center;
   display: flex;
 
+  &:hover {
+    background-color: #464646;
+  }
+
   .iconsGroup {
     min-width: 80px;
     justify-content: space-between;

diff --git a/src/ui/components/log-list/LogListComponent.tsx b/src/ui/components/log-list/LogListComponent.tsx
@@ -6,6 +6,8 @@ import {ActionTypes, LogAction} from 'lib/actions';
 import {classNames, singleEvent} from 'lib/dom';
 import {sendToMain} from 'lib/messages';
 import React from 'react';
+import Accordion from 'react-tiny-accordion';
+import Tooltip from 'react-tooltip-lite';
 import {TextToClipboard} from 'ui/components/text-to-clipboard/TextToClipboardComponent';
 import style from './LogList.scss';
 
@@ -52,29 +54,28 @@ export class LogListComponent extends React.Component<LogListComponentProps> {
 
     statusIcon (syncInfo: SyncInfo) {
         if (!syncInfo.endTs) {
-            return <img className={style.syncing}
-                        src={require('../../assets/images/tray/win-syncing/syncing-1.svg')}
-                        title={'Syncing...'}
-            />;
+            return <Tooltip content="Syncing...">
+                <img className={style.syncing} src={require('../../assets/images/tray/win-syncing/syncing-1.svg')}/>
+            </Tooltip>;
         }
 
         if (syncInfo.terminated) {
-            return <img src={require('../../assets/images/sync-status/times-round.svg')} title={'Sync was terminated'}/>;
+            return <Tooltip content="Sync was terminated"><img src={require('../../assets/images/sync-status/times-round.svg')}/></Tooltip>;
         }
 
         if (syncInfo.hasErrors) {
-            return <img src={require('../../assets/images/sync-status/warning-round.svg')} title={'Synced with errors'}/>;
+            return <Tooltip content="Synced with errors"><img src={require('../../assets/images/sync-status/warning-round.svg')}/></Tooltip>;
         }
 
-        return <img src={require('../../assets/images/sync-status/check-round.svg')}/>;
+        return <Tooltip content="Synced OK"><img src={require('../../assets/images/sync-status/check-round.svg')}/></Tooltip>;
     }
 
     runnerIcon (syncInfo: SyncInfo) {
         switch (syncInfo.runner) {
         case SyncRunner.SyncScheduler:
-            return <img src={require('../../assets/images/sync-status/clock.svg')} title={'Run by schedule'}/>;
+            return <Tooltip content="Run by schedule"><img src={require('../../assets/images/sync-status/clock.svg')}/></Tooltip>;
         case SyncRunner.User:
-            return <img src={require('../../assets/images/sync-status/user.svg')} title={'Run by user'}/>;
+            return <Tooltip content="Run by user"><img src={require('../../assets/images/sync-status/user.svg')}/></Tooltip>;
         default:
             return '';
         }
@@ -98,10 +99,11 @@ export class LogListComponent extends React.Component<LogListComponentProps> {
     }
 
     render (): React.ReactNode {
-        return <div className={style.list}>
+
+        return <Accordion className={style.list}>
             {this.props.historyInfo.syncs.map(
                 syncInfo =>
-                    <div className={style['line-wrapper']} key={syncInfo.id}>
+                    <div key={syncInfo.id} data-header={
                         <div className={style.line}>
                             <div className={style.iconsGroup}>
                                 <div className={style.icon}>
@@ -110,9 +112,14 @@ export class LogListComponent extends React.Component<LogListComponentProps> {
                                 <div className={style.icon}>
                                     {this.runnerIcon(syncInfo)}
                                 </div>
-                                <div className={classNames(style.icon, style.count)} title={'Apps Affected'}>
-                                    {this.affectedAppsCount(syncInfo)}
-                                </div>
+                                {this.affectedAppsCount(syncInfo)
+                                    ? <Tooltip content={(<div>Affected apps count<br/> Click to see affected apps</div>)}>
+                                        <div className={classNames(style.icon, style.count)}>
+                                            {this.affectedAppsCount(syncInfo)}
+                                        </div>
+                                    </Tooltip>
+                                    : <div className={classNames(style.icon, style.count)}></div>
+                                }
                             </div>
                             <div className={style.time}>{LogListComponent.formatDate(syncInfo.startTs)}</div>
                             <div className={style.name}>{syncInfo.id}</div>
@@ -126,14 +133,13 @@ export class LogListComponent extends React.Component<LogListComponentProps> {
                                 </button>
                             </div>
                         </div>
-                        {this.affectedAppsCount(syncInfo) && <div>
-                            {this.appList('Apps created', syncInfo.affectedApps.created)}
-                            {this.appList('Apps updated', syncInfo.affectedApps.updated)}
-                            {this.appList('Apps deleted', syncInfo.affectedApps.deleted)}
-                        </div>
-                        }
+                    }
+                    >
+                        {this.appList('Apps created', syncInfo.affectedApps.created)}
+                        {this.appList('Apps updated', syncInfo.affectedApps.updated)}
+                        {this.appList('Apps deleted', syncInfo.affectedApps.deleted)}
                     </div>
             )}
-        </div>;
+        </Accordion>;
     }
-};
+}
diff --git a/src/ui/style.scss b/src/ui/style.scss
@@ -212,5 +212,15 @@
 
   }
 
+  .react-tooltip-lite {
+    border-radius: 4px;
+    background: #000;
+    color: white;
+  }
+
+  .react-tooltip-lite-arrow {
+    border-color: #000;
+  }
+
 }