gsa/gear3

Next Iteration of the GSA Enterprise Architecture Reporting (GEAR) Portal

Gear3

This project was generated with Angular CLI version 9.1.5.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

Website Screenshots

Website screenshots are not managed in version control. Instead, copy images into working directory. Copy files into assets/website-screenshots directory. Script creates destination directory, searches the root websites-screenshots folder for all .webp images, and sends them to src/assets/website-screenshots

mkdir src/assets/website-screenshots && find website-screenshots -type f -name "*.webp" -exec cp {} src/assets/website-screenshots \;

Converting Images

In order to keep the image filesize small, all PNGs get converted to WEBP. The following converts a given folder and all .png to .webp. Outputs will land in the folder from which it was run. sharp-cli

npx sharp-cli -f webp --input "*.png" -o .

Creating New Views and Detail Modals

This assumes APIs have been created in express already

Scaffold Components

Create View Component

Navigate to parent folder for the view (in this case, enterperise)

cd src/app/views/enterprise
ng generate component myComponent

Create Modal Component

Navigate to modals folder

cd src/app/components/modals
ng generate component myComponent-modal

Add component reference to Modal Service (modals.service.ts)

private myComponentSource = new Subject();
currentMyComponent = this.myComponentSource.asObservable();

Add component to updateDetails method

 else if (component == 'myComponent') {
   this.myComponentSource.next(row);
 }

Additional Updates

Application Plumbing

• Update App Routing (app-routing.module.ts)
  • Add the View component as an import in app-routing.module.ts
    • import {myComponent} from './views/enterprise/myComponentName.myComponent.component';
  • Create objects in the routes array to serve the View at URL paths
    • { path: 'myComponentPath', component: myComponent},
    • { path: 'myComponentPath/:myComponentId', component: myComponent},
• Update App Module (app.module.ts)
  • Import View and Modal components
    • import { myComponent} from './views/enterprise/serviceCategory/serviceCategory.component';
    • import { myComponent-modal } from './components/modals/myComponent-modal/service-category-modal.component';
  • Add imported modules to @NgModule({declarations:[]}

Table Service

• Add public method to handle row click

public myComponentTableClick(data: any, addRoute: boolean=true) {
  var options: ClickOptions = {
    data: data,
    dataID: 'id', // data attribute to use in URL 
    update: 'myComponent', // corresponds to value in modals service component
    detailModalID: '#myComponentDetail', // corresponds to the div id in the modal component
    sysTableID: '',
    exportName: data.Name + '',
    systemApiStr: '/api/myComponent/get/',  // corresponding api path
    addRoute: addRoute
  };
  this.clickMethod(options);    
}

Navigation

• Open sidenav.component.html and add link pointing at the route established earlier
  • <a routerLink="/myComponentPath" >My Component List</a>

API Connection

• Update API Service (api.service.ts)
  • import { myComponent } from '@api/models/myComponent.model';
  • add new API path to ApiService class as an attribute
    • myComponentUrl: string = this.sharedService.internalURLFmt('api/myComponent');
  • Add new publicly available methods for each API operation

    public getMyComponent(): Observable<MyComponent[]> {
      return this.http.get<MyComponent[]>(this.myComponentUrl).pipe(
        catchError(this.handleError<MyComponent[]>('GET MyComponent', []))
      );
    };
    public getOneMyComponent(id: number): Observable<MyComponent[]> {
      return this.http.get<MyComponent[]>(this.myComponentUrl + '/get/' + String(id)).pipe(
        catchError(this.handleError<MyComponent[]>('GET One MyComponent ', []))
      );
    };

gear3's Issues

Edit application code to use new Archer data fields

Edit Dev application code to use new Archer data fields on the front end (e.g. Business_Application and CUI fields).

Update NPM version in VDI environment to match GEAR2 dev app server

Currently VDI is running NPM v6 but GEAR2 dev app server is running v8.

When pulling the GitHub repo into GEAR2 (dev app server), I noticed that the package-lock.json file was about double the size that it was in my VDI environment where I had been testing locally. Upon investigating, I found that GEAR2 was running npm version 8 and VDI was running version 6. The package-lock.json file is using “lockfileVersion: 2” in GEAR2 due to being updated from an older npm version (this change occurred from npm v6 to v7). The new file is flattened to increase performance when reading and writing. This inadvertently makes the file much longer. I updated to npm v8 to match GEAR2 by executing the following in my VDI command line: “npm install -g npm@latest”.

Address npm dependency warnings

[1] Warning: Z:\JonahHatfield\Documents\GEAR3.1.4\node_modules\ng2-pdf-viewer\fesm2020\ng2-pdf-viewer.mjs depends on 'pdfjs-dist/build/pdf'. CommonJS or AMD dependencies can cause optimization bailouts.
[1] For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
[1]
[1] Warning: Z:\JonahHatfield\Documents\GEAR3.1.4\node_modules\ng2-pdf-viewer\fesm2020\ng2-pdf-viewer.mjs depends on 'pdfjs-dist/web/pdf_viewer'. CommonJS or AMD dependencies can cause optimization bailouts.
[1] For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Patch dependabot alert for json-bigint

Address IT standards report filters

• Currently there are 2 filters that may not be needed: "Expired" and "Retired". Currently, zero IT standards have a status of either expired or retired, so it is an unused status. I need to determine whether Cindy and team needs these.
• Cindy requested that we add an "Active" filter to the top

Update websites modal to include additional statuscard components

For each of the items below, a focus on implementing the data structure should take precedence over automating the sync of data between systems. If we have to run regular SQL updates for a period, that is fine.

• #54
• #63
• #67
• #69
• #70
• #79
• #82
• #83
• Website sequence (top site they visit before, top site they visit after)
• top search terms to get to site
• top search terms within site
• top referrers
• top referred to
• FEAF categorization

Patch dependabot alert for object-path

Edit Business system report to read new database structure

There are additional fields available (TPOC, BPOC, and BusinessApplication yes/no) in the API that are not currently utilized in the systems report. Edit the application code to include these additional fields.

Change database passwords Sept 2022

Change all Dev and Prod database passwords. This occurs every 90 days.

Each one will have a different password for both dev and prod databases. An example MySQL script that will be executed is:
alter user 'account_name'@'%' identified by 'NEW_PASSWORD';

Change FISMA report to only view PARENT systems

In Dev1, the "FISMA Systems Inventory" report shows all active FISMA systems/subsystems. It should only show parent systems (active) like prod GEAR does today.

Summary Scan Data and Screenshots

Task aims to produce updates to the websites/{id} modals so as to display most recent homepage screenshots (desktop and mobile) along with scan data (start with FY22 IT performance metric data).

Major components:

• User Interface, layout images in such a way that they scale on different devices and do not consume all of the above-the-fold real-estate in desktop view.
• [-] User Interface, display IT performance metric data so as to provide clarity to status and guidance about how it is measured
• User Interface, website screenshots vary in size from ~100Kb to >1.5Mb, investigate tools to reduce size of images so as not to take up space on the server. Thinking WebP
• Database, create new website_scans table to hold scans and screenshot file names. Create fk relationship to websites table.
• EDX CLI, create data condenser command to pull data from json files into relevant structure for DB https://github.com/GSA/edx/issues/616
• API, add websites/{id}/scans which returns a list of scans associated to a given site in descending order
• API, add websites/{id}/scans/{id} which returns a specific scan for a given site

Patch dependabot alert for node-forge

User requested improvements - Records Management team

The following are improvements requested by the Records Management team based on their use of Dev1. I've already communicated to them that some of these may not be actionable at this time but will be put into the backlog.

1. Search Description field as well as title? [default view to show description field with 30 char. wrap in table]

2. Button order at top right (from left to right)
   a. Search (magnifying glass)
   b. Advanced Search fields - different icon - perhaps a magnifying glass and a "+" character?
   c. Hide/Show Pagination
   d. Column Select
   e. Card View
   f. Download button

If order changing is possible. You mentioned that this button order may be a universal setting for all of GEAR, but were going to look into it.

3. On description field display, possible to wrap on 30 characters?

4. Hide the following fields:
   a. Record group
   b. Status
   c. Disposition type
   d. FP Category
   e. Retention Years

5. Show the following fields:
   a. Retention Instructions (wrapped)
   b. GSA Number (this field should appear first in the table and sorted on it)

Determine difference in FISMA system count from dev to prod

There is a difference of 2 or 3. I think this is because of external systems being filtered out in prod.

Combine GEAR apps and Archer FISMA systems/subsystems into one inventory

Working with Jay Normand from IT Security, analyze GEAR's business application inventory and Archer's FISMA system inventory to provide one workable inventory for both teams.

Patch dependabot alert for glob-parent

Patch dependabot alert for ua-parser-js

Update FISMA POC report to include only active systems at the "system" level (i.e. no subsystems).

Under "Security" --> "FISMA System POCs"
You'll see that the report currently lists about 683 rows. This row count should equal the row count of the "FISMA Systems Inventory" report (about 117 rows).

To do this, the report will need to filter only systems that have a Status = Active and a System Level = System.

src --> app --> views --> security --> fisma-pocs
This is related to the fisma-pocs.component.ts file. There should be a filter to display only active systems. Currently it is displaying all active and inactive systems and subsystems.
Look at the fisma.component.ts file under src --> app --> views --> security --> fisma as a template (i.e. "//Filter out "Pending" Status)

Upgrade to Google Analytics 4

https://analytics.google.com/analytics/web/?utm_campaign=2022-q1-gbl-all-gafree&utm_source=google-growth&utm_medium=email&utm_content=ga-deprecation-comm-non-advertisers#/a68211999p250795887/admin/setup-assistant/
On July 1, 2023, Universal Analytics properties will stop processing new hits. Read our latest blog post to learn more about the Universal Analytics turn down.

Address npm start warnings

The following warnings are received when trying to run the local web server (i.e. npm start):

[0] npm WARN config cache-max This option has been deprecated in favor of --prefer-online
[0] npm WARN config cache-min This option has been deprecated in favor of --prefer-offline.
[0] npm WARN config optional Use --omit=optional to exclude optional dependencies, or
[0] npm WARN config --include=optional to include them.
[0] npm WARN config
[0] npm WARN config Default value does install optional deps unless otherwise omitted.
[0] npm WARN config shrinkwrap Use the --package-lock setting instead.
[0] npm WARN config sso-poll-frequency The --auth-type method of SSO/SAML/OAuth will be removed in a future
[0] npm WARN config version of npm in favor of web-based login.
[0] npm WARN config sso-type The --auth-type method of SSO/SAML/OAuth will be removed in a future
[0] npm WARN config version of npm in favor of web-based login.
[0] npm WARN config tmp This setting is no longer used. npm stores temporary files in a special
[0] npm WARN config location in the cache, and they are managed by
[0] npm WARN config cacache.
[1] npm WARN config cache-max This option has been deprecated in favor of --prefer-online
[1] npm WARN config cache-min This option has been deprecated in favor of --prefer-offline.
[1] npm WARN config optional Use --omit=optional to exclude optional dependencies, or
[1] npm WARN config --include=optional to include them.
[1] npm WARN config
[1] npm WARN config Default value does install optional deps unless otherwise omitted.
[1] npm WARN config shrinkwrap Use the --package-lock setting instead.
[1] npm WARN config sso-poll-frequency The --auth-type method of SSO/SAML/OAuth will be removed in a future
[1] npm WARN config version of npm in favor of web-based login.
[1] npm WARN config sso-type The --auth-type method of SSO/SAML/OAuth will be removed in a future
[1] npm WARN config version of npm in favor of web-based login.
[1] npm WARN config tmp This setting is no longer used. npm stores temporary files in a special
[1] npm WARN config location in the cache, and they are managed by
[1] npm WARN config cacache.

Patch dependabot alert for ansi-html

Patch dependabot alert for ansi-regex

@5.0.1
https://github.com/GSA/GEAR3/security/dependabot/44

Edit "obj_archer_fisma" table with new data fields

Add the additional data fields that the Archer team provided into the "obj_archer_fisma" table in the dev database (gear_ods).

Add "Id" field to the Systems/Subsystems report (hidden)

David Simmons suggested this. "Consider adding the Archer ID number to the GEAR list of fields. That would help with the transcribing."

Request database team implement schedule to load new Archer XML file into the Dev database

Put a request into ServiceNow for the database team to schedule the MySQL script to run nightly to pull in the additional data fields that the Archer team is now sending daily to the EA team.

Install npm package jasmine-core v3.8

When deploying on the dev server, the app returned an error when attempting "npm install" due to a dependency with the jasmine-core npm package. I believe it was running version 3.6. This upgrade will be for v3.8 which will resolve the error when deploying to dev. This will have to be updated in my local environment as well then pushed to GitHub.

Patch dependabot alert for minimist

Transfer all bus application relationships to the new Business System inventory

After the final Archer/GEAR business systems inventory has been agreed upon, transfer all the relationships that exist on business application in GEAR to the new business system inventory for the 1:1 matches. Examples of these relationships include business capabilities, investment, technologies, interfaces, TIME, and any other data that is not maintained in Archer

Add Inactive FISMA System report to dev GEAR

This is a FISMA reporting requirement. Similar to how it is presented in prod GEAR today, add a report option on the left side, under Security, for the list of inactive FISMA systems (that have FISMA reportable listed as "yes")

Add RISSO report to dev GEAR (based on Jay's comms with other IS POCs)

Similar to how the RISSO report is in the prod GEAR today, add a report on the left side under "Security" for the RISSO report. Jay Normand said that he will reach out to his counterparts to confirm that they still want this report. First follow up with Jay to confirm that they require this report.

Change database passwords April 2022

Change all Dev and Prod database passwords. This occurs every 90 days.

Each one will have a different password for both dev and prod databases. An example MySQL script that will be executed is:
alter user 'account_name'@'%' identified by 'NEW_PASSWORD';

Add "Id" field to IT Standards report (hidden)

Upgrade from Node.JS v16.16.0 to v18.12.0

Routine upgrade to NodeJS

Patch dependabot alert for ssri

Remove pending filter from system report

Jay mentioned he does not want people to see the pending filter because some of those systems may not even end up getting an ATO.

Convert GEAR_ID to utilize Archer's "Tracking ID" and change all relationships

Tracking ID is Archer's UID field for FISMA sub/systems. Previously, the Archer team had a GEAR_ID field which, in cases where there were existing GEAR FISMA systems, was used as the unique ID (UID). To reduce complexity going forward, we want to align GEAR with Archer's "Tracking ID" field so that Archer isn't keeping track of legacy GEAR UIDs and both systems are using the same ID.

Use David Ellis's list of GEAR IDs that he's changed due to a FISMA system having a legacy GEAR UID. (Filter on GEAR ID column not being equal to "" and use the "Tracking ID" field for all FISMA systems).
In GEAR's database, change the FISMA system lookup tables for:

• technology mapping (using the business application to technology mapping)
• capabilities mapping (again, using bus app mapping)
• TIME mapping
• Interfaces
• Others as identified (possibly POC?)

Edit API to include new Archer data fields

Edit Dev application API to provide new Archer data fields (e.g. Business_Application and CUI fields).

Request updated XML file from Archer with new data fields to be sent daily

Separate from the XML file that is already sent to the ServiceNow team, Mark, and me, daily at 2pm, this request is to set up a workflow for the Archer team to send an email only to me with the updated XML file with the additional Archer data fields that I requested (e.g. TPOC, BPOC, Business_Application, CUI).

Request Section 508 review for dev GEAR

Request that the Section 508 team review GEAR and provide feedback for any accessibility issues.

Patch dependabot alert for node-fetch

Change naming in dev GEAR for "Systems" tab on left hand side to "Business Systems"

To delineate the business systems report from the FISMA report, relabel the "Systems" option on the left side to "Business". Rename "Systems & Subsystems" to "Business Systems".

Edit FISMA system report to read new database structure

Currently, the FISMA system report is not displaying Alias/Acronym and System Name fields. The application code needs to be changed in the following ways:

• Fix the Alias/Acronym and System Name fields to be viewable
• Add the additional fields (BusinessApplication yes/no, TPOC, BPOC) to the FISMA system table data

Patch dependabot alert for is-svg

Patch dependabot alert for url-parse

Determine way to update GSA organization data in a repeatable way

Update the GSA org data in the database in order to display up-to-date data in the org chart graphic. Use the most recent D2D org data spreadsheet. This will be done on a monthly cadence. There should be a repeatable way of using this data, transforming it, and making it importable into GEAR's database.

Patch dependabot alert for engine.io

Change GEAR business systems report filter buttons to correctly display data

(Under "Systems" --> "Systems & Subsystems" report)
For the following buttons, make the following changes:

• Cloud enabled: display only business systems that are cloud enabled (currently it's all cloud enabled, active systems) - busapp = "Yes"
• Inactive: display only business systems that are inactive - busapp = "Yes"
• Pending: display only business systems that are pending - busapp = "Yes"
• Back to all active systems: display only active business systems (i.e. "Yes" for the ex:BusinessApplication field in Archer report) - busapp = "Yes"

src --> app --> views --> systems --> systems (and the two file that will deal with this are systems.component.html and systems.component.ts)

The html file calls the "changeFilter" function from the .ts file but it only allows for one argument (field, term). For this case, you would need two arguments-- something like (field, term, field, term). There may be a more eloquent way of doing this, though.

Change Systems/Subsystems to view only Business Systems

• Change "Systems/Subsystems" report to read "Business Systems"
• Add a filter to the report to only display those Archer systems with a "Yes" in the business_application field

Change GEAR business system report to display only active FISMA systems/subsystems that are marked as "Yes" for the ex:BusinessApplication field

This is related to the following files:
systems.component.html
systems.component.ts

Update passport-saml npm library based on Dependabot Alert

https://github.com/GSA/GEAR3/security/dependabot/62
Currently running [email protected]. The current version is [email protected].