Pa table header refresh #24
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,48 @@ | ||
| # psi-j-testing-service | ||
|
|
||
| # make virtual environment | ||
| virtualvenv psi | ||
| source psi/bin/activate | ||
|
|
||
| # install some things. | ||
|
|
||
| pip3 install -r requirements.txt | ||
|
|
||
| cd ~/psi-j-testing-service/src/psij/testing | ||
| python3 service.py | ||
|
|
||
| # you will need mongoDB, follow the instructions here, it takes a while to install. | ||
| https://www.mongodb.com/docs/manual/tutorial/install-mongodb-on-os-x/ | ||
|
|
||
| the last step is: | ||
| brew services start [email protected] | ||
|
|
||
|
|
||
| This starts the service witch allows things to run locally: | ||
| cd ~/psi-j-testing-service; | ||
| python3 src/psij/testing/service.py | ||
|
Comment on lines
+24
to
+26
There was a problem hiding this comment. Maybe this belongs in a README-dev.md document or under a section that specifies that this allows one to create a local development environment. |
||
|
|
||
| then you can see it at this url: | ||
| http://0.0.0.0:9909/summary.html | ||
|
There was a problem hiding this comment. Not sure about 0.0.0.0. It seems to work, but, from what I understand, it's not meant to signify "loopback address", which is 127.0.0.1 |
||
|
|
||
|
|
||
|
|
||
| To populate the data i need to run psi-j-python: | ||
| you need to edit testing.conf first and, at a minimum, update the url to point to your server | ||
|
There was a problem hiding this comment. There's both first person and third person here. Is this document meant for other people? If so, it may be a bit confusing. |
||
| server_url = http://0.0.0.0:9909 | ||
|
|
||
| ~/psi-j-python: pip3 install -r requirements-dev.txt | ||
| ~/psi-j-python: make tests -- --upload-results | ||
|
|
||
|
|
||
| Restoring a mongodump DB: | ||
| You'll want to get a full dump, that way you can play with the data: | ||
|
|
||
| First untar these: | ||
| mongodump-psij.tar | ||
| mongodump-sdk.tar.gz | ||
|
|
||
| mongorestore dump/ | ||
|
|
||
|
|
||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,5 @@ | ||
| body { | ||
| background-color: #ffffff; | ||
|
There was a problem hiding this comment. As discussed, can we hold off on temporary style changes? |
||
| font-family: "open sans", Helvetica, sans; | ||
| } | ||
|
|
||
|
|
@@ -8,7 +8,6 @@ body { | |
| } | ||
|
|
||
| #container { | ||
| max-width: 700pt; | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
|
|
@@ -70,10 +69,6 @@ body { | |
| height: 16pt; | ||
| } | ||
|
|
||
| .clickable { | ||
| cursor: pointer; | ||
| } | ||
|
|
@@ -143,9 +138,14 @@ body { | |
| } | ||
|
|
||
| #toolbar { | ||
| position: relative; | ||
| width: 100%; | ||
| text-align: right; | ||
| margin-bottom: 32pt; | ||
| background-color: #2d3436; | ||
| background-image: linear-gradient(180deg, #4d5456 0%, #000000 74%); | ||
| padding: 15px 0 0 0; | ||
| height: 52px; | ||
| } | ||
|
|
||
| #toolbar .spacer { | ||
|
|
@@ -154,38 +154,68 @@ body { | |
| } | ||
|
|
||
| #breadcrumbs { | ||
| position: absolute; | ||
| top: 33px; | ||
| background-color: #444444; | ||
| border: 1px solid #666666; | ||
| z-index: 2; | ||
| } | ||
|
|
||
| #breadcrumbs .v-breadcrumbs__divider { | ||
| color: white; | ||
| } | ||
|
|
||
| #breadcrumbs .v-breadcrumbs { | ||
| margin: 0pt; | ||
| padding-bottom: 0; | ||
| padding-top: 0; | ||
| } | ||
|
|
||
| #breadcrumbs li:not(.v-breadcrumbs__divider) { | ||
| display: inline-block; | ||
| cursor: pointer; | ||
| padding: 1pt; | ||
| color: white; | ||
| } | ||
|
|
||
| #breadcrumbs li { | ||
| font-size: 12px; | ||
| } | ||
|
|
||
| #breadcrumbs a:visited { | ||
| color: white; | ||
| } | ||
|
|
||
| #breadcrumbs li:hover:not(.v-breadcrumbs__divider) { | ||
| color: white; | ||
| } | ||
|
|
||
| .dashboard-title { | ||
| position: absolute; | ||
| left: 15px; | ||
| top: 6px; | ||
| color: #d0d0d0; | ||
| font-size: 14px; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| #toolbar .button { | ||
| display: inline-block; | ||
| cursor: pointer; | ||
| background-color: #b2b2b2; | ||
| padding: 5px 9px 6px 9px; | ||
| border-top: 1px solid black; | ||
| border-left: 1px solid black; | ||
| border-right: 1px solid black; | ||
| border-bottom: 1px solid black; | ||
| margin: 0 5px 0 0; | ||
| border-top-right-radius: 5px; | ||
| border-top-left-radius: 5px; | ||
|
There was a problem hiding this comment. Think of the view modes more like the "view as list" / "view as icons" in windows explorer and Finder. They are not tabs, since the information doesn't change. What changes is how the same information is represented. |
||
| } | ||
|
|
||
| #toolbar .button.selected { | ||
| background-color: #ffffff !important; | ||
| border-bottom: 1px solid white; | ||
| } | ||
|
|
||
| .branch-heading { | ||
|
|
@@ -289,7 +319,6 @@ body { | |
|
|
||
| #run-table th, #run-table td { | ||
| padding: 6pt; | ||
| } | ||
|
|
||
| td.run-id { | ||
|
|
@@ -463,17 +492,36 @@ td.run-id { | |
|
|
||
| #status-calendar table { | ||
| position: relative; | ||
| width:100%; | ||
| border-spacing: 0; | ||
| } | ||
|
|
||
| #status-calendar table tr:first-child th { | ||
| position: sticky; | ||
| top: 0pt; | ||
| } | ||
|
|
||
| #status-calendar tr:first-child th { | ||
| background-color: #666666; | ||
| color: white; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| #status-calendar tr td, tr th { | ||
| background-color: #e2e2e2; | ||
| border-bottom: 1px solid #cfcfcf; | ||
| } | ||
|
|
||
| #status-calendar tr:nth-child(even) td, | ||
| tr:nth-child(even) th { | ||
| background-color: #f2f2f2; | ||
| } | ||
|
There was a problem hiding this comment. May I recommend Butterick's Practical Typography (https://practicaltypography.com/), in particular the sections on tables and grids? It's a good resource in general for creating readable textual content, but it applies in good measure to other things, like websites. |
||
|
|
||
| .calendar-month { | ||
| height: 14pt; | ||
| font-weight: normal; | ||
| font-size: 9pt; | ||
| padding-top: 5px; | ||
| width: 60pt; | ||
| } | ||
|
|
||
|
|
@@ -482,8 +530,6 @@ td.run-id { | |
| font-weight: normal; | ||
| font-size: 11pt; | ||
| padding-bottom: 4pt; | ||
| } | ||
|
|
||
| .calendar-site { | ||
|
|
@@ -492,7 +538,6 @@ td.run-id { | |
| font-size: 11pt; | ||
| height: 24pt; | ||
| padding: 4pt; | ||
| } | ||
|
|
||
| .calendar-tile { | ||
|
|
@@ -547,3 +592,23 @@ td.run-id { | |
| .calendar-cell { | ||
| text-align: center; | ||
| } | ||
|
|
||
| .IntroBlurb { | ||
|
There was a problem hiding this comment. Perhaps we may want to be consistent with naming conventions. Either use CamelCase for everything or use dashes, as in |
||
| background-color: #f1f0f0; | ||
| border: 1px solid #e2e2e2; | ||
| border-radius: 5px; | ||
| padding: 9px; | ||
| margin: 10px 0 10px 0; | ||
| font-size: 13px; | ||
| color: #000000; | ||
| position: relative; | ||
| } | ||
|
|
||
| .IntroBlurb .close_me { | ||
|
There was a problem hiding this comment. Same here. Either all camel case or underscores. |
||
| position: absolute; | ||
| top: 7px; | ||
| right: 10px; | ||
| color: #999999; | ||
| font-size: 17px; | ||
| cursor: pointer; | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| var VC = VC || {}; | ||
|
|
||
| VC.IntroBlurb = Vue.component("intro-blurb", { | ||
|
There was a problem hiding this comment. I worry a bit here about an inner platform, in which we are developing a complex solution for something that can already be done with standard tools. It may be better to have a simple variable in customization.js that allows one to distinguish between the projects. Then, in the html source, we can have two divs with the relevant blurbs and corresponding There was a problem hiding this comment. You may not have been at the meeting. I was told that we would have different deployments and that people wanted to be able to change the text without having to make changes in the code, other than a config file. The idea was that the config file could be changed to accomodate any text string changes OR you could have one config file for PSI/J and another one for SDK and another one for another use case. There was a problem hiding this comment. It's possible that things weren't that clear during the meeting. I apologize for that. We already have different deployments and we don't want to maintain two codebases, which we don't. But changing html or changing a .js file, that is still changing some form of code. So again, let's try to keep this simple with text in a single place rather than spread around. There was a problem hiding this comment. What I meant was just keep all the text in one file. It doesn't have to be customization.js. It could be any other config file, whatever you want me to call it. The reason they want it in 1 file is because that way it's easier to make text changes because it's all in one place. Also, they want to be able to specify which machines to show. And, as another requirement, they told me they want to be able to do more than 1 or 2 deployments. And so, if we do it in the HTML file, we'll have to add a new IF statement for every place where we do a text replacement, whenever we add a new deployment. However, if all the text is in one config file, we just add or create a new config file. |
||
| data: function () { | ||
|
|
||
| return { | ||
| show: 0 | ||
| } | ||
| }, | ||
| template: '<div v-if="this.show == 1" ref="myRef" class="IntroBlurb" v-on:click="close( $event )">' + | ||
| '<div class="main_slot"><slot></slot></div>' + | ||
| '<div class="close_me">X</div>' + | ||
| '</div>', | ||
| mounted: function( event ) { | ||
| console.log('mounted'); | ||
| var content = this.$slots.default[0].text; | ||
| console.dir( content ); | ||
|
|
||
| if( sqs.IntroBlurb && sqs.IntroBlurb[ content ] ) { | ||
| // hide | ||
| this.show = 0; | ||
| } else { | ||
| this.show = 1; | ||
| } | ||
| }, | ||
| methods: { | ||
| close: function( event ) { | ||
|
|
||
| var ihtml = this.$el.firstChild.innerHTML; | ||
| console.log(ihtml); | ||
|
|
||
| sqs.IntroBlurb = sqs.IntroBlurb || {}; | ||
| sqs.IntroBlurb[ ihtml ] = 1; | ||
| sq.save(); | ||
|
|
||
| this.show = 0; | ||
| } | ||
| } | ||
| }); | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| var VC = VC || {}; | ||
|
|
||
| VC.RowAccordian = Vue.component("row-accordian", { | ||
|
There was a problem hiding this comment. I think vuetify already has the necessary component: https://vuetifyjs.com/en/components/expansion-panels/ Maybe we can use that instead? There was a problem hiding this comment. They want to do it in a Table format and we want that table to look seamless to the user with triangle open/closers on the side (so we would need to find one that does that). Also, it's been my experience that if we want the accordian to do anything else in the future, it'll be easier if we just make it ourselves. There was a problem hiding this comment. We should keep styling separate from functionality. I would rather have one consistent styling coming from vuetify than coming up with something else for every component. It is important here to not only think of what is easy for us, but what would be easy for external contributors to quickly jump into. I think we are already doing a bit too much customization (and I am very much guilty of this), but I also think that in cases such as this, when a component already exists, we should use it. |
||
| props: [ | ||
| 'logo_name', | ||
| 'machines', | ||
| 'logo_results', | ||
| 'machine_row_results' | ||
| ], | ||
| data: function () { | ||
|
|
||
| return { | ||
| open: 1 | ||
| } | ||
| }, | ||
| template: '<table>' + | ||
| '</table>', | ||
| mounted: function( event ) { | ||
| }, | ||
| methods: { | ||
| toggle: function( event ) { | ||
|
|
||
| this.open = this.open ? 0 : 1; | ||
| } | ||
| } | ||
| }); | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is OS X specific. Perhaps that should be made more clear.