From e7bf585ec77aec465cf2ff6766d3601f687bc0dd Mon Sep 17 00:00:00 2001 From: Alexey Nalivaiko Date: Wed, 17 Apr 2019 12:34:20 +0300 Subject: [PATCH 1/3] [AMSA-33] add accordion to logs list --- package-lock.json | 7 ++++++- package.json | 1 + src/core/store.ts | 1 + src/core/sync-apps/sync-stats.ts | 2 +- src/ui/components/log-list/LogList.scss | 18 ++++++++-------- .../components/log-list/LogListComponent.tsx | 21 ++++++++++--------- 6 files changed, 29 insertions(+), 21 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3be1785..7760103 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "admob-sync-app", - "version": "0.1.5", + "version": "0.1.6", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -11144,6 +11144,11 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.3.tgz", "integrity": "sha512-Y4rC1ZJmsxxkkPuMLwvKvlL1Zfpbcu+Bf4ZigkHup3v9EfdYhAlWAaVyA19olXq2o2mGn0w+dFKvk3pVVlYcIA==" }, + "react-tiny-accordion": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/react-tiny-accordion/-/react-tiny-accordion-2.0.4.tgz", + "integrity": "sha512-yp9bnxVuwssh1TbnFl0IpZoq2TnmTtuVazfH3FJpk60Ex4VitRzUE+NU0fuMnnil4g3Y0gjyhE/0H1/xqdzWWQ==" + }, "read-chunk": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/read-chunk/-/read-chunk-1.0.1.tgz", diff --git a/package.json b/package.json index 8e31685..62d941a 100644 --- a/package.json +++ b/package.json @@ -165,6 +165,7 @@ "raven-js": "^3.27.0", "react": "^16.8.3", "react-dom": "^16.8.3", + "react-tiny-accordion": "^2.0.4", "semver": "^6.0.0", "uuid": "^3.3.2", "winston": "^3.2.1", diff --git a/src/core/store.ts b/src/core/store.ts index 5b7647a..a221fe6 100644 --- 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 index 9b62834..1d8deff 100644 --- 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 index 713652b..584dda9 100644 --- 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; } } diff --git a/src/ui/components/log-list/LogListComponent.tsx b/src/ui/components/log-list/LogListComponent.tsx index 0132580..0e3f4d0 100644 --- a/src/ui/components/log-list/LogListComponent.tsx +++ b/src/ui/components/log-list/LogListComponent.tsx @@ -6,6 +6,7 @@ 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 {TextToClipboard} from 'ui/components/text-to-clipboard/TextToClipboardComponent'; import style from './LogList.scss'; @@ -98,10 +99,11 @@ export class LogListComponent extends React.Component { } render (): React.ReactNode { - return
+ + return {this.props.historyInfo.syncs.map( syncInfo => -
+
@@ -126,14 +128,13 @@ export class LogListComponent extends React.Component {
- {this.affectedAppsCount(syncInfo) &&
- {this.appList('Apps created', syncInfo.affectedApps.created)} - {this.appList('Apps updated', syncInfo.affectedApps.updated)} - {this.appList('Apps deleted', syncInfo.affectedApps.deleted)} -
- } + } + > + {this.appList('Apps created', syncInfo.affectedApps.created)} + {this.appList('Apps updated', syncInfo.affectedApps.updated)} + {this.appList('Apps deleted', syncInfo.affectedApps.deleted)}
)} -
; + ; } -}; +} From acafa90afc1a0ebef193cc6df1a876b43c2ecd3c Mon Sep 17 00:00:00 2001 From: Alexey Nalivaiko Date: Wed, 17 Apr 2019 13:05:43 +0300 Subject: [PATCH 2/3] [AMSA-33] add user-friendly tooltips to logs info icons --- package-lock.json | 23 +++++++++++++++ package.json | 7 +++-- .../components/log-list/LogListComponent.tsx | 29 +++++++++++-------- src/ui/style.scss | 10 +++++++ 4 files changed, 54 insertions(+), 15 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7760103..b9ee745 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4383,6 +4383,12 @@ } } }, + "electron-tooltip": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/electron-tooltip/-/electron-tooltip-1.1.5.tgz", + "integrity": "sha512-H3vxGOkwxVrJdhJHiJ0i01EOny0FSz2+e68rNK21LA4quZcThFIUUXSSIEMCKLwe3Iyd87+AWdpTg1b9teruQg==", + "dev": true + }, "elliptic": { "version": "6.4.1", "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.4.1.tgz", @@ -11144,11 +11150,28 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.3.tgz", "integrity": "sha512-Y4rC1ZJmsxxkkPuMLwvKvlL1Zfpbcu+Bf4ZigkHup3v9EfdYhAlWAaVyA19olXq2o2mGn0w+dFKvk3pVVlYcIA==" }, + "react-minimalist-portal": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/react-minimalist-portal/-/react-minimalist-portal-2.3.1.tgz", + "integrity": "sha1-SFPj9Ip0oywbh2dgGIfN95Qe66M=", + "requires": { + "prop-types": "^15.6.1" + } + }, "react-tiny-accordion": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/react-tiny-accordion/-/react-tiny-accordion-2.0.4.tgz", "integrity": "sha512-yp9bnxVuwssh1TbnFl0IpZoq2TnmTtuVazfH3FJpk60Ex4VitRzUE+NU0fuMnnil4g3Y0gjyhE/0H1/xqdzWWQ==" }, + "react-tooltip-lite": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/react-tooltip-lite/-/react-tooltip-lite-1.9.1.tgz", + "integrity": "sha512-JH5T6kPZn7X90TnnNhuJ+wOb1eikT2xtpbOkndvqAHZlOyZOAZeAyVgk/3pGz0xi4h+bqXXisfwGtriliTYhDQ==", + "requires": { + "prop-types": "^15.5.8", + "react-minimalist-portal": "^2.2.0" + } + }, "read-chunk": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/read-chunk/-/read-chunk-1.0.1.tgz", diff --git a/package.json b/package.json index 62d941a..ac880c5 100644 --- 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", @@ -166,6 +166,7 @@ "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/ui/components/log-list/LogListComponent.tsx b/src/ui/components/log-list/LogListComponent.tsx index 0e3f4d0..c0c9062 100644 --- a/src/ui/components/log-list/LogListComponent.tsx +++ b/src/ui/components/log-list/LogListComponent.tsx @@ -7,6 +7,7 @@ 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'; @@ -53,29 +54,28 @@ export class LogListComponent extends React.Component { statusIcon (syncInfo: SyncInfo) { if (!syncInfo.endTs) { - return ; + return + + ; } if (syncInfo.terminated) { - return ; + return ; } if (syncInfo.hasErrors) { - return ; + return ; } - return ; + return ; } runnerIcon (syncInfo: SyncInfo) { switch (syncInfo.runner) { case SyncRunner.SyncScheduler: - return ; + return ; case SyncRunner.User: - return ; + return ; default: return ''; } @@ -112,9 +112,14 @@ export class LogListComponent extends React.Component {
{this.runnerIcon(syncInfo)}
-
- {this.affectedAppsCount(syncInfo)} -
+ {this.affectedAppsCount(syncInfo) + ? Affected apps count
Click to see affected apps
)}> +
+ {this.affectedAppsCount(syncInfo)} +
+ + :
+ }
{LogListComponent.formatDate(syncInfo.startTs)}
{syncInfo.id}
diff --git a/src/ui/style.scss b/src/ui/style.scss index 4c2ebaa..fa76d5e 100644 --- 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; + } + } From a52fec386330bc26cf7c6e6e1ca15ab980d82d7b Mon Sep 17 00:00:00 2001 From: Alexey Nalivaiko Date: Wed, 17 Apr 2019 13:31:51 +0300 Subject: [PATCH 3/3] [AMSA-33] add hover over log line --- src/ui/components/log-list/LogList.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/ui/components/log-list/LogList.scss b/src/ui/components/log-list/LogList.scss index 584dda9..a004323 100644 --- a/src/ui/components/log-list/LogList.scss +++ b/src/ui/components/log-list/LogList.scss @@ -27,6 +27,10 @@ align-items: center; display: flex; + &:hover { + background-color: #464646; + } + .iconsGroup { min-width: 80px; justify-content: space-between;