mgr/dashboard: Created a Download and Copy-to-Clipboard option for the logs #37193

nizamial09-zz · 2020-09-16T14:02:35Z

I've created a Download-button component which can be used to download .json and .txt file (either or both). This component is also now used in the telemetry component where it downloads the report.json file.

Added a Download and Copy-to-Clipboard button for the Cluster and Audit Logs in the Log section. Also added a flag in the current Copy2ClipboardButton directive to indicate the incoming string is actually a log.

Sample log files
audit_log_16_09_2020.log
cluster_log_16_09_2020.log

Fixes: https://tracker.ceph.com/issues/47498
Signed-off-by: Nizamudeen A [email protected]

Checklist

References tracker ticket
Updates documentation if necessary
Includes tests for new functionality or reproducer for bug

Show available Jenkins commands

jenkins retest this please
jenkins test classic perf
jenkins test crimson perf
jenkins test signed
jenkins test make check
jenkins test make check arm64
jenkins test submodules
jenkins test dashboard
jenkins test api
jenkins test docs
jenkins render docs
jenkins test ceph-volume all
jenkins test ceph-volume tox

epuertat · 2020-09-16T14:28:11Z

Nice & quick job, @nizamial09 ! I'd add some extra space between the icon and the Download text.

And, coming back to the previous discussion, could you please provide additional screenshots for:

Icon only, no text and in the same place.
Icon only, no text, but within the tab heading area: once together with "Cluster Logs", and another one with "Audit Logs"?

Thanks!

nizamial09-zz · 2020-09-16T14:30:37Z

Nice & quick job, @nizamial09 ! I'd add some extra space between the icon and the Download text.

And, coming back to the previous discussion, could you please provide additional screenshots for:

Icon only, no text and in the same place.

Icon only, no text, but within the tab heading area: once together with "Cluster Logs", and another one with "Audit Logs"?

Thanks!

Will do.

nizamial09-zz · 2020-09-16T14:44:33Z

@epuertat
Icon only, no text and in the same place.

**Icon only and along with Tab Heading (btn-accent) **

Same with btn-light

When only one of the log entry present

nizamial09-zz · 2020-09-16T19:19:47Z

jenkins test dashboard

bk201 · 2020-09-17T08:55:14Z

**Icon only and along with Tab Heading (btn-accent) **

I feel it's a bit odd to add the button to the tab heading, normally it's a better place for infomation badges.
For example, on this Github pull request page, there are badges that indicate number of items.

nizamial09-zz · 2020-09-17T09:03:37Z

**Icon only and along with Tab Heading (btn-accent) **

I feel it's a bit odd to add the button to the tab heading, normally it's a better place for infomation badges.
For example, on this Github pull request page, there are badges that indicate number of items.

@bk201 Yup. That really makes sense. Also the download button wont always be there. Whenever their is no log the button wont be present and if there is log available for one tab only then the icon is visible only for one tab. That wont be looking good I think.

LenzGr · 2020-09-17T09:10:05Z

For the record, here's how Jenkins is doing it in their "Blue" theme:

I think I too would prefer just an icon (red is fine) in the top right. Would it make sense to have it above the log output area? How would that look?

aaSharma14

Just an icon in the top right looks good.!

nizamial09-zz · 2020-09-17T09:58:22Z

For the record, here's how Jenkins is doing it in their "Blue" theme:

I think I too would prefer just an icon (red is fine) in the top right. Would it make sense to have it above the log output area? How would that look?

I'll try like that and I'll get back.

nizamial09-zz · 2020-09-17T09:58:52Z

Just an icon in the top right looks good.!

Thanks @aaSharma14

epuertat · 2020-09-17T10:08:12Z

@nizamial09 I realy like @LenzGr's example, as also brings in another suggestion: having both clipboard + download buttons. An also like the subtle styling in those buttons... Red is too eye-catching for something that shouldn't divert attention from what is relevant there: logs and potential error conditions.

nizamial09-zz · 2020-09-17T10:17:47Z

@nizamial09 I realy like @LenzGr's example, as also brings in another suggestion: having both clipboard + download buttons. An also like the subtle styling in those buttons... Red is too eye-catching for something that shouldn't divert attention from what is relevant there: logs and potential error conditions.

Having a clipboard is a good suggestion. Also it feels good to make the icons light when I was trying it out.

nizamial09-zz · 2020-09-18T09:59:34Z

@epuertat @LenzGr @bk201 @aaSharma14 Updated the PR with suggested change. Screenshot updated in description.

nizamial09-zz · 2020-09-18T12:56:44Z

jenkins test make check

nizamial09-zz · 2020-09-18T12:57:05Z

jenkins test dashboard

nizamial09 · 2020-10-07T08:27:11Z

@epuertat @votdev @tspmelo @LenzGr
I've created a Download-button component which can be used to download .json and .txt file (either or both). This component is also now used in the telemetry component where it downloads the report.json file.
Screenshot of telemetry component.

Screenshot for the log page is updated in description

epuertat · 2020-10-07T09:54:39Z

@nizamial09: JSON and Text vs. .json and .txt? What do you (and others) think? I would also suggest you to look for TXT and JSON icons (as we are also using icons for the download and copy buttons).

nizamial09 · 2020-10-07T10:10:36Z

@nizamial09: JSON and Text vs. .json and .txt? What do you (and others) think? I would also suggest you to look for TXT and JSON icons (as we are also using icons for the download and copy buttons).

I'm happy with eitherway (JSON and Text or .json and .txt). I'll try it locally. Also will ask for more opinions.

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.ts

src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html

...gr/dashboard/frontend/src/app/shared/components/download-button/download-button.component.ts

LenzGr · 2020-10-08T09:39:23Z

JSON and Text vs. .json and .txt? What do you (and others) think? I would also suggest you to look for TXT and JSON icons (as we are also using icons for the download and copy buttons).

I'd be in favor of "JSON" and "Text".

s0nea

LGTM 👍

nizamial09 · 2020-10-19T12:51:01Z

@epuertat @LenzGr Updated the PR with dropdown texts as JSON and Text and also added the logos. Screenshot is updated.

epuertat · 2020-10-20T09:46:03Z

@nizamial09 looks good! Thanks!

src/pybind/mgr/dashboard/frontend/src/app/shared/directives/copy2clipboard-button.directive.ts

nizamial09 · 2020-10-21T17:05:29Z

@votdev PTAL, thanks.

votdev

I'm missing a tooltip for the download button.

--- src/pybind/mgr/dashboard/frontend/src/app/shared/components/download-button/download-button.component.html	(revision 2d99b415e52e1799dc4365752e798abb99bd7e71)
+++ src/pybind/mgr/dashboard/frontend/src/app/shared/components/download-button/download-button.component.html	(date 1603355128415)
@@ -1,6 +1,7 @@
 <div ngbDropdown
      placement="bottom-right">
   <button type="button"
+          [title]="title"
           class="btn btn-light dropdown-toggle-split"
           ngbDropdownToggle>
     <i [ngClass]="[icons.download]"></i>
===================================================================
--- src/pybind/mgr/dashboard/frontend/src/app/shared/components/download-button/download-button.component.ts	(revision 2d99b415e52e1799dc4365752e798abb99bd7e71)
+++ src/pybind/mgr/dashboard/frontend/src/app/shared/components/download-button/download-button.component.ts	(date 1603356020873)
@@ -12,6 +12,7 @@
   @Input() objectItem: object;
   @Input() textItem: string;
   @Input() fileName: any;
+  @Input() title = $localize`Download`;
 
   icons = Icons;
   constructor(private textToDownloadService: TextToDownloadService) {}

…e logs Created Download Button Component. Added a Download and Copy-to-Clipboard button for the Cluster and Audit Logs in the Log section. Also added a flag in the current Copy2ClipboardButton directive to indicate the incoming string is actually a log. Fixes: https://tracker.ceph.com/issues/47498 Signed-off-by: Nizamudeen A <[email protected]>

nizamial09 · 2020-10-22T11:11:29Z

[title]="title"

Thanks @votdev Addressed and pushed the changes.

nizamial09 · 2020-10-22T13:38:12Z

jenkins test api

votdev · 2020-10-23T12:49:54Z

jenkins test api

nizamial09-zz requested review from tspmelo, alfonsomthd, avanthakkar, epuertat and aaSharma14 September 16, 2020 14:02

nizamial09-zz requested a review from a team as a code owner September 16, 2020 14:02

nizamial09-zz added dashboard feature skip-teuthology For PRs whose changes do not have an effect on QA runs/changes are not being tested in Teuthology labels Sep 16, 2020

nizamial09-zz force-pushed the log_download branch from aad04cb to fb9ef6a Compare September 16, 2020 15:01

aaSharma14 reviewed Sep 17, 2020

View reviewed changes

nizamial09-zz force-pushed the log_download branch from fb9ef6a to 8bb23c5 Compare September 18, 2020 09:58

nizamial09-zz requested a review from aaSharma14 September 18, 2020 09:58

nizamial09-zz changed the title ~~mgr/dashboard: Created a Download option for the logs~~ mgr/dashboard: Created a Download and Copy-to-Clipboard option for the logs Sep 18, 2020

nizamial09-zz added the needs-review label Sep 18, 2020

nizamial09-zz force-pushed the log_download branch from 8bb23c5 to 46b971e Compare September 18, 2020 11:42

nizamial09 requested a review from votdev October 7, 2020 08:25

nizamial09 removed the needs-rebase label Oct 7, 2020

tspmelo suggested changes Oct 7, 2020

View reviewed changes

s0nea approved these changes Oct 8, 2020

View reviewed changes

nizamial09 force-pushed the log_download branch 2 times, most recently from 6eaaa28 to 52d0576 Compare October 18, 2020 18:49

nizamial09 requested a review from tspmelo October 18, 2020 19:05

nizamial09 force-pushed the log_download branch from 52d0576 to 1b672e0 Compare October 19, 2020 12:48

tspmelo suggested changes Oct 21, 2020

View reviewed changes

nizamial09 force-pushed the log_download branch from 1b672e0 to 374b04c Compare October 21, 2020 13:29

nizamial09 requested a review from tspmelo October 21, 2020 13:29

tspmelo approved these changes Oct 21, 2020

View reviewed changes

votdev requested changes Oct 22, 2020

View reviewed changes

nizamial09 force-pushed the log_download branch from 374b04c to f4c3ac1 Compare October 22, 2020 11:10

nizamial09 requested a review from votdev October 22, 2020 13:37

votdev approved these changes Oct 23, 2020

View reviewed changes

nizamial09 added ready-to-merge and removed needs-review labels Oct 23, 2020

LenzGr merged commit 6434564 into ceph:master Oct 23, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

mgr/dashboard: Created a Download and Copy-to-Clipboard option for the logs #37193

mgr/dashboard: Created a Download and Copy-to-Clipboard option for the logs #37193

nizamial09-zz commented Sep 16, 2020 •

edited by nizamial09

Loading

epuertat commented Sep 16, 2020

nizamial09-zz commented Sep 16, 2020

nizamial09-zz commented Sep 16, 2020

nizamial09-zz commented Sep 16, 2020

bk201 commented Sep 17, 2020

nizamial09-zz commented Sep 17, 2020

LenzGr commented Sep 17, 2020

aaSharma14 left a comment

nizamial09-zz commented Sep 17, 2020

nizamial09-zz commented Sep 17, 2020

epuertat commented Sep 17, 2020

nizamial09-zz commented Sep 17, 2020

nizamial09-zz commented Sep 18, 2020 •

edited

Loading

nizamial09-zz commented Sep 18, 2020

nizamial09-zz commented Sep 18, 2020

nizamial09 commented Oct 7, 2020

epuertat commented Oct 7, 2020

nizamial09 commented Oct 7, 2020

LenzGr commented Oct 8, 2020

s0nea left a comment

nizamial09 commented Oct 19, 2020 •

edited

Loading

epuertat commented Oct 20, 2020

nizamial09 commented Oct 21, 2020

votdev left a comment

nizamial09 commented Oct 22, 2020

nizamial09 commented Oct 22, 2020

votdev commented Oct 23, 2020

mgr/dashboard: Created a Download and Copy-to-Clipboard option for the logs #37193

mgr/dashboard: Created a Download and Copy-to-Clipboard option for the logs #37193

Conversation

nizamial09-zz commented Sep 16, 2020 • edited by nizamial09 Loading

Checklist

epuertat commented Sep 16, 2020

nizamial09-zz commented Sep 16, 2020

nizamial09-zz commented Sep 16, 2020

nizamial09-zz commented Sep 16, 2020

bk201 commented Sep 17, 2020

nizamial09-zz commented Sep 17, 2020

LenzGr commented Sep 17, 2020

aaSharma14 left a comment

Choose a reason for hiding this comment

nizamial09-zz commented Sep 17, 2020

nizamial09-zz commented Sep 17, 2020

epuertat commented Sep 17, 2020

nizamial09-zz commented Sep 17, 2020

nizamial09-zz commented Sep 18, 2020 • edited Loading

nizamial09-zz commented Sep 18, 2020

nizamial09-zz commented Sep 18, 2020

nizamial09 commented Oct 7, 2020

epuertat commented Oct 7, 2020

nizamial09 commented Oct 7, 2020

LenzGr commented Oct 8, 2020

s0nea left a comment

Choose a reason for hiding this comment

nizamial09 commented Oct 19, 2020 • edited Loading

epuertat commented Oct 20, 2020

nizamial09 commented Oct 21, 2020

votdev left a comment

Choose a reason for hiding this comment

nizamial09 commented Oct 22, 2020

nizamial09 commented Oct 22, 2020

votdev commented Oct 23, 2020

nizamial09-zz commented Sep 16, 2020 •

edited by nizamial09

Loading

nizamial09-zz commented Sep 18, 2020 •

edited

Loading

nizamial09 commented Oct 19, 2020 •

edited

Loading