Minor cosmetic bugs 7.8.1

[kpribic]

Alias wrapping When alias is too long for the box it wraps and top pixels get cut off. In the example below Freeswitch alias is partially cut off. It could be due to fonts, but I don't have a Windows machine to check, I'm using Chrome on linux. Same thing happens on Firefox.

Alias length On that note - could you make the alias box slightly wider? Pretty much every alias I have wraps because the font is bigger in 7.8.1 compared to 7.7., and it doesn't have to wrap - there is easily room for a longer line.

Alignment When SIP messages go from left to right all the text is aligned left, however when message goes from right to left then RAW is aligned left however method and timestamps are aligned right. I assume this isn't intentional :)

[mikegoodstadt]

Hi @kpribic - we have made fixes to these issues on the devel branch if you wish to test them now prior to a release.

[kpribic]

I would like to however build fails for me. I did manage to build the master branch, I'm not sure why this one fails. If you can provide me with the prebuild tgz file I'll test it out.

$ npm run build

> homer-ui@7.8.1 build /home/kpribic/workspace-go/homer-ui-devel
> ng build --prod && gzip -9 ./dist/homer-ui/*.js

Browserslist: caniuse-lite is outdated. Please run the following command: `npm update`

chunk {0} runtime.458556a34b891ea32398.js (runtime) 1.45 kB [entry] [rendered]
chunk {1} main.157c36217b2338ec151f.js (main) 4.77 MB [initial] [rendered]
chunk {2} polyfills.0ce893d8317a3c3459ac.js (polyfills) 48.6 kB [initial] [rendered]
chunk {3} polyfills-es5.5c18e42a12971a582433.js (polyfills-es5) 131 kB [initial] [rendered]
chunk {4} styles.a301f81ebefcc7743f13.css (styles) 361 kB [initial] [rendered]
chunk {scripts} scripts.d33ecd9f37351525d9b3.js (scripts) 992 kB [entry] [rendered]
Date: 2020-07-31T07:54:00.407Z - Hash: 3d6a1e9baa436a5b97b4 - Time: 112994ms

WARNING in /home/kpribic/workspace-go/homer-ui-devel/src/karma.conf.js is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in /home/kpribic/workspace-go/homer-ui-devel/src/app/components/widgets/pcap-widget-component/modules/hep-js/test/index.js is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in /home/kpribic/workspace-go/homer-ui-devel/src/environments/environment.dev.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in /home/kpribic/workspace-go/homer-ui-devel/src/environments/environment.prod.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

WARNING in /home/kpribic/workspace-go/homer-ui-devel/src/environments/environment.webapp.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

ERROR in ./src/app/components/widgets/pcap-widget-component/modules/binary-parser/binary_parser.js
Module not found: Error: Can't resolve 'vm' in '/home/kpribic/workspace-go/homer-ui-devel/src/app/components/widgets/pcap-widget-component/modules/binary-parser'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! homer-ui@7.8.1 build: `ng build --prod && gzip -9 ./dist/homer-ui/*.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the homer-ui@7.8.1 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/kpribic/.npm/_logs/2020-07-31T07_54_00_748Z-debug.log

Versions:

npm version
{
  'homer-ui': '7.8.1',
  npm: '6.14.5',
  ares: '1.16.0',
  brotli: '1.0.7',
  cldr: '37.0',
  icu: '67.1',
  llhttp: '2.0.4',
  modules: '83',
  napi: '6',
  nghttp2: '1.41.0',
  node: '14.4.0',
  openssl: '1.1.1g',
  tz: '2019c',
  unicode: '13.0',
  uv: '1.37.0',
  v8: '8.1.307.31-node.33',
  zlib: '1.2.11'
}

PS: running NPM update doesn't help.

[jacovinus]

Good morning @kpribic , we will be solving that issue. Thanks for your input. Just one question, which global version of @angular/cli are you using?

[kpribic]

10.0.4, installed according to instructions before trying to build.

l$ sudo npm install -g @angular/cli
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
/usr/bin/ng -> /usr/lib/node_modules/@angular/cli/bin/ng

> @angular/cli@10.0.4 postinstall /usr/lib/node_modules/@angular/cli
> node ./bin/postinstall/script.js

+ @angular/cli@10.0.4
updated 1 package in 2.591s

[kpribic]

Sorry just noticed you explicitly mentioned "global", I'm guessing here a bit because I'm not familiar with npm, but that would be also 10.0.4:

$ npm list -global | grep angular
├─┬ @angular/cli@10.0.4
│ ├─┬ @angular-devkit/architect@0.1000.4
│ │ ├── @angular-devkit/core@10.0.4 deduped
│ ├─┬ @angular-devkit/core@10.0.4
│ ├─┬ @angular-devkit/schematics@10.0.4
│ │ ├── @angular-devkit/core@10.0.4 deduped
│ ├─┬ @schematics/angular@10.0.4
│ │ ├── @angular-devkit/core@10.0.4 deduped
│ │ └── @angular-devkit/schematics@10.0.4 deduped
│ │ ├── @angular-devkit/core@10.0.4 deduped
│ │ ├── @angular-devkit/schematics@10.0.4 deduped

[jacovinus]

@kpribic fixed width https://github.com/sipcapture/homer-ui/pull/312/files, please do npm install again and build the app. Confirm if works for you.

[kpribic]

Build was OK this time. I was a bit confused at first because my window shows title "HOMER 7.8.1(prod)" and not devel. Is this OK? I just copied everything from {workspace}/homer-ui-devel/dist/homer-ui/ to /usr/local/homer/dist on my homer machine.

Assuming that it IS the proper devel here are comments: 1) Alias wrapping - NOK, still cuts of top part of alias when wrapped to two lines. 2) Alias length - NOK This alias looks relatively short (14 letters) and it was still wrapped (This box could be even 50% wider and still look nice related to other boxes)

3) Alignment - OK, this appears to be fixed

On a side note, I tried this on Firefox just to be sure and when window is reduced so that not everything fits Firefox (79.0 on Ubuntu) breaks the flow a bit, arrows lose alignment with vertica lines. Chrome does this just fine by introducing scrollbars at the right time, Firefox kind of does it too late and it breaks.

[jacovinus]

many thanks for your feedback @kpribic , we will be working on that fixes.

[jacovinus]

@kpribic we reached a fix for that issues:

1- aliases font size diminshed 2- aliases dont break line on space 3 - aliases dont crop on top 4- on Firefox now flow dont breaks lines 5- you can see complete line on hover even if its cropped by width

will be tested to then push into branch.

[kpribic]

@jacovinus Great :-)

Just to be clear, when you say:

will be tested to then push into branch.

Did you mean that you intend to do some internal testing and then push to devel branch or were you suggesting that I should checkout your repo and test from there?

[jacovinus]

@kpribic will be tested before PR :)

[mikegoodstadt]

Hi @kpribic - I merged the fix into the devel branch. Can you let us know that this fix is good on your end. Thanks!

[kpribic]

It is MUCH better now, I can actually read aliases.

I have additional comments that are on the personal preference side so do with them as you wish :-)

1. There is lots of room between the text and the tab line above, Looks a bit too big when there is no wrapping on any alias and it's never two lines.

2. There is no wrapping (I understood this is intentional?). Could be an issue if the first node has a long alias. Honestly this isn't that big of an issue because font is small enough to fit reasonable names.