Sunday, July 2, 2017

Spark Streaming Job is not recoverable

Leave a Comment

I'm using a spark streaming job that uses mapWithState with an initial RDD. When restarting the application and recovering from the checkpoint it fails with the error:

This RDD lacks a SparkContext. It could happen in the following cases:

  1. RDD transformations and actions are NOT invoked by the driver, but inside of other transformations; for example, rdd1.map(x => rdd2.values.count() * x) is invalid because the values transformation and count action cannot be performed inside of the rdd1.map transformation. For more information, see SPARK-5063.
  2. When a Spark Streaming job recovers from checkpoint, this exception will be hit if a reference to an RDD not defined by the streaming job is used in DStream operations. For more information, See SPARK-13758

This behavior is described in https://issues.apache.org/jira/browse/SPARK-13758 but it isn't really described how to solve it. My RDD isn't defined by the streaming job but I still need it in the state.

This is an example of what my graph looks like:

class EventStreamingApplication {   private val config: Config = ConfigFactory.load()   private val sc: SparkContext = {     val conf = new SparkConf()       .setAppName(config.getString("streaming.appName"))       .set("spark.cassandra.connection.host", config.getString("streaming.cassandra.host"))     val sparkContext = new SparkContext(conf)     System.setProperty("com.amazonaws.services.s3.enableV4", "true")     sparkContext.hadoopConfiguration.set("com.amazonaws.services.s3.enableV4", "true")     sparkContext   }    def run(): Unit = {     // streaming.eventCheckpointDir is an S3 Bucket     val ssc: StreamingContext = StreamingContext.getOrCreate(config.getString("streaming.eventCheckpointDir"), createStreamingContext)     ssc.start()     ssc.awaitTermination()   }    def receiver(ssc: StreamingContext): DStream[Event] = {     RabbitMQUtils.createStream(ssc, Map(       "hosts" -> config.getString("streaming.rabbitmq.host"),       "virtualHost" -> config.getString("streaming.rabbitmq.virtualHost"),       "userName" -> config.getString("streaming.rabbitmq.user"),       "password" -> config.getString("streaming.rabbitmq.password"),       "exchangeName" -> config.getString("streaming.rabbitmq.eventExchange"),       "exchangeType" -> config.getString("streaming.rabbitmq.eventExchangeType"),       "queueName" -> config.getString("streaming.rabbitmq.eventQueue")     )).flatMap(EventParser.apply)   }    def setupStreams(ssc: StreamingContext): Unit = {     val events = receiver(ssc)     ExampleJob(events, sc)   }    private def createStreamingContext(): StreamingContext = {     val ssc = new StreamingContext(sc, Seconds(config.getInt("streaming.batchSeconds")))     setupStreams(ssc)     ssc.checkpoint(config.getString("streaming.eventCheckpointDir"))     ssc   } }  case class Aggregation(value: Long) // Contains aggregation values  object ExampleJob {   def apply(events: DStream[Event], sc: SparkContext): Unit = {     val aggregations: RDD[(String, Aggregation)] = sc.cassandraTable('...', '...').map(...) // some domain class mapping     val state = StateSpec       .function((key, value, state) => {         val oldValue = state.getOption().map(_.value).getOrElse(0)         val newValue = oldValue + value.getOrElse(0)         state.update(Aggregation(newValue))         state.get       })       .initialState(aggregations)       .numPartitions(1)       .timeout(Seconds(86400))     events       .filter(...) // filter out unnecessary events       .map(...) // domain class mapping to key, event dstream       .groupByKey()       .map(i => (i._1, i._2.size.toLong))       .mapWithState(state)       .stateSnapshots()       .foreachRDD(rdd => {         rdd.saveToCassandra(...)       })   } } 

The stacktrace thrown is:

Exception in thread "main" org.apache.spark.SparkException: This RDD lacks a SparkContext. It could happen in the following cases:  (1) RDD transformations and actions are NOT invoked by the driver, but inside of other transformations; for example, rdd1.map(x => rdd2.values.count() * x) is invalid because the values transformation and count action cannot be performed inside of the rdd1.map transformation. For more information, see SPARK-5063. (2) When a Spark Streaming job recovers from checkpoint, this exception will be hit if a reference to an RDD not defined by the streaming job is used in DStream operations. For more information, See SPARK-13758.   at org.apache.spark.rdd.RDD.org$apache$spark$rdd$RDD$$sc(RDD.scala:89)   at org.apache.spark.rdd.RDD.withScope(RDD.scala:362)   at org.apache.spark.rdd.PairRDDFunctions.partitionBy(PairRDDFunctions.scala:534)   at org.apache.spark.streaming.rdd.MapWithStateRDD$.createFromPairRDD(MapWithStateRDD.scala:193)   at org.apache.spark.streaming.dstream.InternalMapWithStateDStream.compute(MapWithStateDStream.scala:146)   at org.apache.spark.streaming.dstream.DStream$$anonfun$getOrCompute$1$$anonfun$1$$anonfun$apply$7.apply(DStream.scala:341)   at org.apache.spark.streaming.dstream.DStream$$anonfun$getOrCompute$1$$anonfun$1$$anonfun$apply$7.apply(DStream.scala:341)   at scala.util.DynamicVariable.withValue(DynamicVariable.scala:58)   at org.apache.spark.streaming.dstream.DStream$$anonfun$getOrCompute$1$$anonfun$1.apply(DStream.scala:340)   at org.apache.spark.streaming.dstream.DStream$$anonfun$getOrCompute$1$$anonfun$1.apply(DStream.scala:340)   at org.apache.spark.streaming.dstream.DStream.createRDDWithLocalProperties(DStream.scala:415)   at org.apache.spark.streaming.dstream.DStream$$anonfun$getOrCompute$1.apply(DStream.scala:335)   at org.apache.spark.streaming.dstream.DStream$$anonfun$getOrCompute$1.apply(DStream.scala:333)   at scala.Option.orElse(Option.scala:289)   at org.apache.spark.streaming.dstream.DStream.getOrCompute(DStream.scala:330)   at org.apache.spark.streaming.dstream.InternalMapWithStateDStream.compute(MapWithStateDStream.scala:134)   at org.apache.spark.streaming.dstream.DStream$$anonfun$getOrCompute$1$$anonfun$1$$anonfun$apply$7.apply(DStream.scala:341)   at org.apache.spark.streaming.dstream.DStream$$anonfun$getOrCompute$1$$anonfun$1$$anonfun$apply$7.apply(DStream.scala:341)   at scala.util.DynamicVariable.withValue(DynamicVariable.scala:58)   at org.apache.spark.streaming.dstream.DStream$$anonfun$getOrCompute$1$$anonfun$1.apply(DStream.scala:340)   at org.apache.spark.streaming.dstream.DStream$$anonfun$getOrCompute$1$$anonfun$1.apply(DStream.scala:340)   at org.apache.spark.streaming.dstream.DStream.createRDDWithLocalProperties(DStream.scala:415)   at org.apache.spark.streaming.dstream.DStream$$anonfun$getOrCompute$1.apply(DStream.scala:335)   at org.apache.spark.streaming.dstream.DStream$$anonfun$getOrCompute$1.apply(DStream.scala:333)   at scala.Option.orElse(Option.scala:289)   ...   <991 lines omitted>   ...   at org.apache.spark.streaming.dstream.DStream.getOrCompute(DStream.scala:330)   at org.apache.spark.streaming.dstream.InternalMapWithStateDStream.compute(MapWithStateDStream.scala:134)   at org.apache.spark.streaming.dstream.DStream$$anonfun$getOrCompute$1$$anonfun$1$$anonfun$apply$7.apply(DStream.scala:341)   at org.apache.spark.streaming.dstream.DStream$$anonfun$getOrCompute$1$$anonfun$1$$anonfun$apply$7.apply(DStream.scala:341)   at scala.util.DynamicVariable.withValue(DynamicVariable.scala:58)   at org.apache.spark.streaming.dstream.DStream$$anonfun$getOrCompute$1$$anonfun$1.apply(DStream.scala:340)   at org.apache.spark.streaming.dstream.DStream$$anonfun$getOrCompute$1$$anonfun$1.apply(DStream.scala:340)   at org.apache.spark.streaming.dstream.DStream.createRDDWithLocalProperties(DStream.scala:415)   at org.apache.spark.streaming.dstream.DStream$$anonfun$getOrCompute$1.apply(DStream.scala:335)   at ... run in separate thread using org.apache.spark.util.ThreadUtils ... ()   at org.apache.spark.streaming.StreamingContext.liftedTree1$1(StreamingContext.scala:577)   at org.apache.spark.streaming.StreamingContext.start(StreamingContext.scala:571)   at com.example.spark.EventStreamingApplication.run(EventStreamingApplication.scala:31)   at com.example.spark.EventStreamingApplication$.main(EventStreamingApplication.scala:63)   at com.example.spark.EventStreamingApplication.main(EventStreamingApplication.scala)   at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)   at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)   at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)   at java.lang.reflect.Method.invoke(Method.java:497)   at org.apache.spark.deploy.SparkSubmit$.org$apache$spark$deploy$SparkSubmit$$runMain(SparkSubmit.scala:743)   at org.apache.spark.deploy.SparkSubmit$.doRunMain$1(SparkSubmit.scala:187)   at org.apache.spark.deploy.SparkSubmit$.submit(SparkSubmit.scala:212)   at org.apache.spark.deploy.SparkSubmit$.main(SparkSubmit.scala:126)   at org.apache.spark.deploy.SparkSubmit.main(SparkSubmit.scala) 

1 Answers

Answers 1

It seems that while spark is trying to recover, correct latest checkpoint file is not being picked. Because of this incorrect RDDs are being referred.

It seems that spark version 2.1.1 is impacted as this is not in fixed version list.

Please refer below link for apache documentation where fix release is not specified yet.

https://issues.apache.org/jira/browse/SPARK-19280

In my opinion, you can try to explore the automatic/manual solution where you can specify the latest checkpoint file while restarting the spark job.

I know that it is not much helpful but I thought it is better to explain you the root cause for this problem and current development to fix it and my opinion on possible solution.

Read More

Don't execute jenkins job if svn polling failed

Leave a Comment

I have a jenkins job, that is polling svn every 5 minutes and executing my unittests if some changes occured.

My probleme is, the svn polling fails randomly due to a unreachable proxy.

org.tmatesoft.svn.core.SVNAuthenticationException: svn: E170001: HTTP proxy authorization failed 

I guess this problem is related to some issues with the proxy we use and not the configuration of my job or machine.

My question now is, can I skip the job if the svn poll is failing and only execute if it was succesful? So that I don't have failed builds in my job list because of the proxy issue.

Or does anyhow have an idea why this random error can occure?

Fyi, I don't want the proxy problem itself fixed, as this is probably happening due to network problems, but I just want to skip the execution of the job if the svn poll fails.

2 Answers

Answers 1

Instead of polling svn, you can try a post-commit hook so that svn notifies Jenkins of changes; see https://wiki.jenkins-ci.org/display/JENKINS/Subversion+Plugin?focusedCommentId=43352266

Answers 2

In order to prevent running next action when the previous action is failed, add set +e to the top of your shell script. -e option is exit immediately when any action returns 1(which means failed). And also. @mikep's answer is useful thought. Instead of polling, Post-commit hook is more efficient.

Read More

Alignment of table column

Leave a Comment

I am trying to make table inside of table meant nested table. Now its look like this screenshot . But i need align from left. Because i have use same count column in each row. You can see what i have tried to get this output.

Thanks in advance

.report-table {    border-collapse: collapse;    width: 100%;    font-family: Arial;  }  .report-table .col-name {  	width: 150px;  }  .report-table .col-title {  	width: 150px;  }  .report-table .col-carried {  	width: 60px;  }  .report-table .col-earned {  	width: 60px;  }  .report-table .col-used {  	width: 60px;  }  .report-table .col-scheduled {  	width: 60px;  }  .report-table .col-balance {  	width: 60px;  }  .report-table .col-to-be {  	width: 60px;  }  .report-table .col-available {  	width: 60px;  }  .report-table .inner-table tr td{  	border: 0;  }    .report-table.hr-table .inner-table {  	background: none;  	border: 0;  }    .report-table.hr-table .inner-table td {  	vertical-align: top;  }    .report-table.hr-table tr {    border-top: 1px solid #333;  }    .report-table.hr-table td,  .report-table.hr-table th{    padding: 10px;    vertical-align: top;    text-align: left;  }    .report-table.hr-table .inner-table td:first-child {  	padding-left: 0;  }
<table class="tablesorter hr-table hr-table-striped report-table">    <thead>      <tr>        <th class="header col-name">Name<span></span></th>        <th class="header col-title">Leave Title<span></span></th>        <th class="header col-carried">Carried Over<span></span></th>        <th class="header col-earned">Earned<span></span></th>        <th class="header col-used">Used <span></span></th>        <th class="header col-scheduled">Scheduled <span></span></th>        <th class="header col-balance">Balance<span></span></th>        <th class="header col-to-be">To-be-earned<span></span></th>        <th class="header col-available">Avaliable<span></span></th>      </tr>    </thead>    <tbody>      <tr>        <td class="col-name"><a href="#">Ethan Hunt</a></td>        <td colspan="8">          <table class=" hr-table inner-table">            <tr>              <td class="col-title">Vacation</td>              <td class="col-carried">10</td>              <td class="col-earned">20</td>              <td class="col-used">20</td>              <td class="col-scheduled">5</td>              <td class="col-balance">0</td>              <td class="col-to-be">10</td>              <td class="col-available">5</td>            </tr>            <tr>              <td class="col-title">Sickness</td>              <td class="col-carried">10</td>              <td class="col-earned">20</td>              <td class="col-used">20</td>              <td class="col-scheduled">5</td>              <td class="col-balance">0</td>              <td class="col-to-be">10</td>              <td class="col-available">5</td>            </tr>            <tr>              <td class="col-title">Training</td>              <td class="col-carried">10</td>              <td class="col-earned">20</td>              <td class="col-used">20</td>              <td class="col-scheduled">5</td>              <td class="col-balance">0</td>              <td class="col-to-be">10</td>              <td class="col-available">5</td>            </tr>          </table>        </td>      </tr>      <tr>        <td class="col-name"><a href="#">Lara Craft</a></td>        <td class="col-title">Training</td>        <td class="col-carried">10</td>        <td class="col-earned">20</td>        <td class="col-used">20</td>        <td class="col-scheduled">5</td>        <td class="col-balance">0</td>        <td class="col-to-be">10</td>        <td class="col-available">5</td>      </tr>      <tr>        <td class="col-name"><a href="#">Ethan Hunt</a></td>        <td colspan="8">          <table class=" hr-table inner-table">            <tr>              <td class="col-title">Vacation</td>              <td class="col-carried">10</td>              <td class="col-earned">20</td>              <td class="col-used">20</td>              <td class="col-scheduled">5</td>              <td class="col-balance">0</td>              <td class="col-to-be">10</td>              <td class="col-available">5</td>            </tr>            <tr>              <td class="col-title">Sickness</td>              <td class="col-carried">10</td>              <td class="col-earned">20</td>              <td class="col-used">20</td>              <td class="col-scheduled">5</td>              <td class="col-balance">0</td>              <td class="col-to-be">10</td>              <td class="col-available">5</td>            </tr>            <tr>              <td class="col-title">Training</td>              <td class="col-carried">10</td>              <td class="col-earned">20</td>              <td class="col-used">20</td>              <td class="col-scheduled">5</td>              <td class="col-balance">0</td>              <td class="col-to-be">10</td>              <td class="col-available">5</td>            </tr>          </table>        </td>      </tr>    </tbody>  </table>

Here is JSFIDDLE

3 Answers

Answers 1

Any nested table complicates the entire layout and functionality of all tables involved. <tbody> element was created to allow us to divide a table into sections that share the same exact columns. It makes very little sense to introduce another table with the same type of data and shove it it into one column. There's no advantage to wrap it in a <table> element then keep it in one column of another table, all cells within the nested <table> are still subject to the style and behavior of the inner <table>. That one column that is just the name column is stretched out in order to align to the column of the outer <table> makes no sense.

Plunker

Details are commented extensively in demos. Although responsive (minimally), it is best viewed in Full page mode

Demo

body,  html {    width: 100%;    height: 100%;    font: 400 100%/1.2 Arial  }    * {    margin: 0;    padding: 0;    border: 0  }      /* table-layout: fixed gives us more control over <td>   || dimensions and <table> behavior  */    .report-table {    table-layout: fixed;    border-collapse: collapse;    width: 100%;    margin: 30px auto;    font-size: 1em  }    thead tr {    border-bottom: 3px double #111  }      /* Each <th> in the <thead> has text that clips into an  || automatic ellipsis if and when <table> gets narrower  */    thead th {    padding: 10px 5px 5px;    overflow-x: hidden;    white-space: nowrap;    text-overflow: ellipsis  }    tbody tr {    border: 1px transparent  }    tbody tr:last-of-type {    border-bottom: 1px solid #111  }    tbody th,  td {    vertical-align: top;    text-align: left;    padding: 10px  }    .full {    border-bottom: 1px solid #111  }    td {    text-align: center  }    col {    width: 10%  }    col.name,  col.type {    width: 15%  }      /* CSS HIghlight Featue */      /* All checkboxes and radio buttons are  || display:none;  */    .chx,  .rad,  .reset {    display: none  }    label {    font: inherit;    cursor: pointer;    display: inline-block  }      /* These rulesets will highlight a column when  || a <label> is clicked which in turn checks the  || checkbox which in turn changes the background  || color of a column  */    #chx1:checked~table col.name,  #chx2:checked~table col.type {    background: #ff0  }    #chx3:checked~table col.carried,  #chx4:checked~table col.earned {    background: #00ff80  }    #chx5:checked~table col.used {    background: #ff8080  }    #chx6:checked~table col.scheduled,  #chx7:checked~table col.balance,  #chx8:checked~table col.yet,  #chx9:checked~table col.available {    background: #ff0  }    .on {    display: inline-block  }      /* These radio buttons operate in the same   || manner as the checkboxes with some exceptions:  || - There's 2 <label>s for each radio  || - The <label>s toggle a row highlighting  || - The <label>s alternate between display:  ||   none and inline-block.  || - Only one <tbody> at a time may be highlighted  */    #rad1:checked~table tbody#e-hunt-40318,  #rad2:checked~table tbody#l-craft-61232,  #rad3:checked~table tbody#r-hertz-20663 {    background: rgba(0, 255, 255, .5)  }    #rad1:checked~table tbody#e-hunt-40318 .reset {    display: inline-block  }    #rad1:checked~table tbody#e-hunt-40318 .on {    display: none  }    #rad1:checked~table tbody#e-hunt-40318 tr,  #rad3:checked~table tbody#r-hertz-20663 tr {    border-bottom: 1px dashed red  }    #rad2:checked~table tbody#l-craft-61232 .reset {    display: inline-block  }    #rad2:checked~table tbody#l-craft-61232 .on {    display: none  }    #rad3:checked~table tbody#r-hertz-20663 .reset {    display: inline-block  }    #rad3:checked~table tbody#r-hertz-20663 .on {    display: none  }    #reset:checked~table tbody {    background: initial  }
<!DOCTYPE html>  <html>    <head>    <meta charset="utf-8">    <link href='report.css' rel='stylesheet'>    <style>      </style>  </head>    <body>    <!--  |[Highlighting (Optional)    These checkboxes and radio buttons are optional.    They are part of an intricate highlighting feature     that leverages:     - cascading     - sibling selectors: ~     - <label> and 'for' attribute     - checkbox and radio <input>        input.chx highlights columns-->    <input id='chx1' class='chx' type='checkbox'>    <input id='chx2' class='chx' type='checkbox'>    <input id='chx3' class='chx' type='checkbox'>    <input id='chx4' class='chx' type='checkbox'>    <input id='chx5' class='chx' type='checkbox'>    <input id='chx6' class='chx' type='checkbox'>    <input id='chx7' class='chx' type='checkbox'>    <input id='chx8' class='chx' type='checkbox'>    <input id='chx9' class='chx' type='checkbox'>    <!--input.rad highlights a row-->    <input id='rad1' class='rad' name='rad' type='radio'>    <input id='rad2' class='rad' name='rad' type='radio'>    <input id='rad3' class='rad' name='rad' type='radio'>    <input id='reset' class='rad' name='rad' type='radio'>      <table class="tablesorter hr-table hr-table-striped report-table">      <!--  |[<colgroup>/<col> (Recommended)      <colgroup> and <col> are elements with a      special purpose of assigning a limited number of      style properties to a column (vertical stack of      <td>). Using them will reduce amount of classes      assigned to individual cells.-->      <colgroup>        <col class='name'>        <col class='type'>        <col class='carried'>        <col class='earned'>        <col class='used'>        <col class='scheduled'>        <col class='balance'>        <col class='yet'>        <col class='available'>      </colgroup>      <thead>        <tr>          <th>Name</th>          <th>Leave Type</th>          <th>Carried Over</th>          <th>Earned</th>          <th>Used</th>          <th>Scheduled</th>          <th>Balance</th>          <th>Yet Earned</th>          <th>Avaliable</th>        </tr>      </thead>      <!--  |[<tbody> (Required)      Instead of using a whole new <table> and shoving it      inside of a <td>, use a <tbody>. <tbody> is semantically,      logically, and aesthetically a superior choice       compared to a nested <table>.            <tbody> is one of the 3 major sections of a <table>      and it's the only one of those 3 (the other 2 are       <thead> and <tfoot>) that are actually required when      building a <table>. Although one can build a <table>      and neglect adding the <tbody>, all modern browsers      will add it in automatically. Another unique character      istic of <tbody> that the other 2 lacks is that we       can have multiple <tbody> in a <table>.  -->      <!--| Each <tbody> represents an employee's leave data        The class is .full (fulltime employee) or .part        (parttime employee). The id is the employee's         first initial, last name, and ID number.  -->      <tbody class='full' id='e-hunt-40318'>        <tr>          <!--| The first column comprises of <th>:        - Data: Employee's Full Name        - Class: .part or .full        - Style: From col.name        - Markup: <th> one row if th.part; 3 rows if th.full          by using the rowspan attribute.  -->          <th rowspan='3'>            <!--| <label>s toggle the radio buttons and the radio        buttons toggle row highlighting.  -->            <label for='rad1' class='on'>Ethan Hunt</label>            <label for='reset' class='reset'>Ethan Hunt</label>          </th>          <td>Vacation</td>          <td>10</td>          <td>20</td>          <td>20</td>          <td>5</td>          <td>0</td>          <td>10</td>          <td>5</td>        </tr>        <tr>          <td>Illness</td>          <td>10</td>          <td>20</td>          <td>20</td>          <td>5</td>          <td>0</td>          <td>10</td>          <td>5</td>        </tr>        <tr>          <td>Training</td>          <td>10</td>          <td>20</td>          <td>20</td>          <td>5</td>          <td>0</td>          <td>10</td>          <td>5</td>        </tr>      </tbody>      <tbody class='part' id='l-craft-61232'>        <tr>          <th>            <label for='rad2' class='on'>Lara Craft</label>            <label for='reset' class='reset'>Lara Craft</label>          </th>          <td>Training</td>          <td>10</td>          <td>20</td>          <td>20</td>          <td>5</td>          <td>0</td>          <td>10</td>          <td>5</td>        </tr>      </tbody>      <tbody class='full' id='r-hertz-20663'>        <tr>          <th rowspan='3'>            <label for='rad3' class='on'>Richard Hertz</label>            <label for='reset' class='reset'>Richard Hertz</label>          </th>          <td>Vacation</td>          <td>10</td>          <td>20</td>          <td>20</td>          <td>5</td>          <td>0</td>          <td>10</td>          <td>5</td>        </tr>        <tr>          <td>Illness</td>          <td>10</td>          <td>20</td>          <td>20</td>          <td>5</td>          <td>0</td>          <td>10</td>          <td>5</td>        </tr>        <tr>          <td>Training</td>          <td>10</td>          <td>20</td>          <td>20</td>          <td>5</td>          <td>0</td>          <td>10</td>          <td>5</td>        </tr>      </tbody>      <!--<label for='id'> (Optional)    |[<label for='id'></label> <input id='id' type='radio'>      <tfoot> contains the <label>s that toggle the      columns' highlighting. Note that each <label>      has a for attribute which value is the id of      the checkbox that the <label> is associated with.      This association allows the hidden <input>s      to react from any click on it's associated       <label>  -->      <tfoot>        <tr>          <td>            <label for='chx1'>COL1</label>          </td>          <td>            <label for='chx2'>COL2</label>          </td>          <td>            <label for='chx3'>COL3</label>          </td>          <td>            <label for='chx4'>COL4</label>          </td>          <td>            <label for='chx5'>COL5</label>          </td>          <td>            <label for='chx6'>COL6</label>          </td>          <td>            <label for='chx7'>COL7</label>          </td>          <td>            <label for='chx8'>COL8</label>          </td>          <td>            <label for='chx9'>COL9</label>          </td>        </tr>      </tfoot>    </table>    </body>    </html>

Answers 2

Try this one. I give table-fixed. and fixed with of TH.

The whole code is below;

.report-table {    border-collapse: collapse;    width: 100%;    font-family: Arial;  }  .report-table .col-name {  	width: 150px;  }  .report-table .col-title {  	width: 150px;  }  .report-table .col-carried {  	width: 60px;  }  .report-table .col-earned {  	width: 60px;  }  .report-table .col-used {  	width: 60px;  }  .report-table .col-scheduled {  	width: 60px;  }  .report-table .col-balance {  	width: 60px;  }  .report-table .col-to-be {  	width: 60px;  }  .report-table .col-available {  	width: 60px;  }  .report-table .inner-table tr td{  	border: 0;  }    .report-table.hr-table .inner-table {  	background: none;  	border: 0;  }    .report-table.hr-table .inner-table td {  	vertical-align: top;  }    .report-table.hr-table tr {    border-top: 1px solid #333;  }    .report-table.hr-table td,  .report-table.hr-table th{      vertical-align: top;    text-align: left;  }    .report-table.hr-table .inner-table td:first-child {  	padding-left: 0;  }      .col-title{width:100px !important}      table{table-layout:fixed;border-collapse:collapse}  table table{width:100%}
<table class="tablesorter hr-table hr-table-striped report-table">    <thead>      <tr>        <th class="header col-name">Name<span></span></th>        <th class="header col-title">Leave Title<span></span></th>        <th class="header col-carried">Carried Over<span></span></th>        <th class="header col-earned">Earned<span></span></th>        <th class="header col-used">Used <span></span></th>        <th class="header col-scheduled">Scheduled <span></span></th>        <th class="header col-balance">Balance<span></span></th>        <th class="header col-to-be">To-be-earned<span></span></th>        <th class="header col-available">Avaliable<span></span></th>      </tr>    </thead>    <tbody>      <tr>        <td class="col-name"><a href="#">Ethan Hunt</a></td>        <td colspan="8">          <table class=" hr-table inner-table">            <tr>              <td class="col-title">Vacation</td>              <td class="col-carried">10</td>              <td class="col-earned">20</td>              <td class="col-used">20</td>              <td class="col-scheduled">5</td>              <td class="col-balance">0</td>              <td class="col-to-be">10</td>              <td class="col-available">5</td>            </tr>            <tr>              <td class="col-title">Sickness</td>              <td class="col-carried">10</td>              <td class="col-earned">20</td>              <td class="col-used">20</td>              <td class="col-scheduled">5</td>              <td class="col-balance">0</td>              <td class="col-to-be">10</td>              <td class="col-available">5</td>            </tr>            <tr>              <td class="col-title">Training</td>              <td class="col-carried">10</td>              <td class="col-earned">20</td>              <td class="col-used">20</td>              <td class="col-scheduled">5</td>              <td class="col-balance">0</td>              <td class="col-to-be">10</td>              <td class="col-available">5</td>            </tr>          </table>        </td>      </tr>      <tr>        <td class="col-name"><a href="#">Lara Craft</a></td>        <td class="col-title">Training</td>        <td class="col-carried">10</td>        <td class="col-earned">20</td>        <td class="col-used">20</td>        <td class="col-scheduled">5</td>        <td class="col-balance">0</td>        <td class="col-to-be">10</td>        <td class="col-available">5</td>      </tr>      <tr>        <td class="col-name"><a href="#">Ethan Hunt</a></td>        <td colspan="8">          <table class=" hr-table inner-table">            <tr>              <td class="col-title">Vacation</td>              <td class="col-carried">10</td>              <td class="col-earned">20</td>              <td class="col-used">20</td>              <td class="col-scheduled">5</td>              <td class="col-balance">0</td>              <td class="col-to-be">10</td>              <td class="col-available">5</td>            </tr>            <tr>              <td class="col-title">Sickness</td>              <td class="col-carried">10</td>              <td class="col-earned">20</td>              <td class="col-used">20</td>              <td class="col-scheduled">5</td>              <td class="col-balance">0</td>              <td class="col-to-be">10</td>              <td class="col-available">5</td>            </tr>            <tr>              <td class="col-title">Training</td>              <td class="col-carried">10</td>              <td class="col-earned">20</td>              <td class="col-used">20</td>              <td class="col-scheduled">5</td>              <td class="col-balance">0</td>              <td class="col-to-be">10</td>              <td class="col-available">5</td>            </tr>          </table>        </td>      </tr>    </tbody>  </table>

Answers 3

Try this just set width for .inner-table td.

.report-table {    border-collapse: collapse;    width: 100%;    font-family: Arial;  }  .report-table .col-name {  	width: 150px;  }  .report-table .col-title {  	width: 150px;  }  .report-table .col-carried {  	width: 60px;  }  .report-table .col-earned {  	width: 60px;  }  .report-table .col-used {  	width: 60px;  }  .report-table .col-scheduled {  	width: 60px;  }  .report-table .col-balance {  	width: 60px;  }  .report-table .col-to-be {  	width: 60px;  }  .report-table .col-available {  	width: 60px;  }  .report-table .inner-table tr td{  	border: 0;  }    .report-table.hr-table .inner-table {  	background: none;  	border: 0;  }    .report-table.hr-table .inner-table td {  	vertical-align: top;  }    .report-table.hr-table tr {    border-top: 1px solid #333;  }    .report-table.hr-table td,  .report-table.hr-table th{    padding: 10px;    vertical-align: top;    text-align: left;  }    .report-table.hr-table .inner-table td:first-child {  	padding-left: 0;      width: 10%;  }
<table class="tablesorter hr-table hr-table-striped report-table">    <thead>      <tr>        <th class="header col-name">Name<span></span></th>        <th class="header col-title">Leave Title<span></span></th>        <th class="header col-carried">Carried Over<span></span></th>        <th class="header col-earned">Earned<span></span></th>        <th class="header col-used">Used <span></span></th>        <th class="header col-scheduled">Scheduled <span></span></th>        <th class="header col-balance">Balance<span></span></th>        <th class="header col-to-be">To-be-earned<span></span></th>        <th class="header col-available">Avaliable<span></span></th>      </tr>    </thead>    <tbody>      <tr>        <td class="col-name"><a href="#">Ethan Hunt</a></td>        <td colspan="8">          <table class=" hr-table inner-table">            <tr>              <td class="col-title">Vacation</td>              <td class="col-carried">10</td>              <td class="col-earned">20</td>              <td class="col-used">20</td>              <td class="col-scheduled">5</td>              <td class="col-balance">0</td>              <td class="col-to-be">10</td>              <td class="col-available">5</td>            </tr>            <tr>              <td class="col-title">Sickness</td>              <td class="col-carried">10</td>              <td class="col-earned">20</td>              <td class="col-used">20</td>              <td class="col-scheduled">5</td>              <td class="col-balance">0</td>              <td class="col-to-be">10</td>              <td class="col-available">5</td>            </tr>            <tr>              <td class="col-title">Training</td>              <td class="col-carried">10</td>              <td class="col-earned">20</td>              <td class="col-used">20</td>              <td class="col-scheduled">5</td>              <td class="col-balance">0</td>              <td class="col-to-be">10</td>              <td class="col-available">5</td>            </tr>          </table>        </td>      </tr>      <tr>        <td class="col-name"><a href="#">Lara Craft</a></td>        <td class="col-title">Training</td>        <td class="col-carried">10</td>        <td class="col-earned">20</td>        <td class="col-used">20</td>        <td class="col-scheduled">5</td>        <td class="col-balance">0</td>        <td class="col-to-be">10</td>        <td class="col-available">5</td>      </tr>      <tr>        <td class="col-name"><a href="#">Ethan Hunt</a></td>        <td colspan="8">          <table class=" hr-table inner-table">            <tr>              <td class="col-title">Vacation</td>              <td class="col-carried">10</td>              <td class="col-earned">20</td>              <td class="col-used">20</td>              <td class="col-scheduled">5</td>              <td class="col-balance">0</td>              <td class="col-to-be">10</td>              <td class="col-available">5</td>            </tr>            <tr>              <td class="col-title">Sickness</td>              <td class="col-carried">10</td>              <td class="col-earned">20</td>              <td class="col-used">20</td>              <td class="col-scheduled">5</td>              <td class="col-balance">0</td>              <td class="col-to-be">10</td>              <td class="col-available">5</td>            </tr>            <tr>              <td class="col-title">Training</td>              <td class="col-carried">10</td>              <td class="col-earned">20</td>              <td class="col-used">20</td>              <td class="col-scheduled">5</td>              <td class="col-balance">0</td>              <td class="col-to-be">10</td>              <td class="col-available">5</td>            </tr>          </table>        </td>      </tr>    </tbody>  </table>

Read More

SVG Clip-Path not working on Safari

Leave a Comment

I have a simple animation that fills an svg from the bottom up and then fades out. The filling is done using a clipPath along with using a path with a stroke-dasharray & stroke-dashoffset.

The problem is the clipPath seems to be completely ignored on Safari. I've seen many other examples and questions answered that make use of the clip-path property in Safari successfully, but not in this case.

Any ideas of what specifically is stopping Safari from rendering this correctly?

Link to JSFiddle: https://jsfiddle.net/7qzf4c4j/1/

.pen {    -webkit-clip-path: url(#logoclip);    clip-path: url(#logoclip);    stroke-dasharray: 60 60;    stroke-dashoffset: 60;    -webkit-animation: fill-logo 2.7s infinite linear;    animation: fill-logo 2.7s infinite linear;  }    @keyframes fill-logo {    0% {      stroke-dashoffset: 60;      opacity: 1;    }    50% {      stroke-dashoffset: 0;      opacity: 1;    }    75% {      stroke-dashoffset: 0;      opacity: 1;    }    90% {      stroke-dashoffset: 0;      opacity: 0;    }    100% {      stroke-dashoffset: 0;      opacity: 0;    }   }
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-305 397.9 70 60.1" enable-background="new -305 397.9 70 60.1">    <defs>      <clipPath id="logoclip">        <path d="m-270 397.9c-22.9 11.5-35 25.4-35 40.3 0 5.9 1.8 10.9 5.3 14.4 3.4 3.5 11-3.7 2.7-2.3 4.2-5.6 4.2-9.1v-8.6c0-1-.3-2.1-.9-3-1 .5-2 .8-2.9.8-1.4 0-2.4-.8-2.4-1.8 0-1 .9-1.7 2.3-1.7 1.2 0 2.3.6 3.2 1.7.3-.2.6-.4.9-.6-1.5-1.4-2.3-2.9-2.3-4.1 0-1.1.7-1.8 1.7-1.8.4 0 .8.2 1.2.5.3-.3.7-.5 2.7-2.3 4.1.3.2.6.4.9.6.9-1.1 2.1-1.7 3.2-1.7 1.3 0 2.3.7 2.3 1.7 0 1-1 1.8-2.4 1.8-1 0-1.9-.3-2.9-.8-.6.9-.9 2-.9 3v8.6c0 7.2 6.7 12.8 15.2 12.8 5.6 0 10.3-1.9 13.7-5.4 3.4-3.5 5.3-8.5 5.3-14.4 0-14.8-12.1-28.8-35-40.3"/>      </clipPath>    </defs>    <path class="pen" d="m-270,458 l0,-60.1" stroke="black" stroke-width="100" />  </svg>

2 Answers

Answers 1

Ben, my suggestion probably looks funny, but remove -webkit-clip-path:url(#logoclip); from your .pen. Keep clip-path:url(#logoclip); (without -webkit-) only.

In my Safari 10.1.1 it do the trick.

Answers 2

Kosh pointed out the main issue with this code but another thing that gave me a major headache was the project I'm working on has a base tag which is treated differently in Safari when referencing urls for clip-paths.

This SO question covers it well: Using base tag on a page that contains SVG marker elements fails to render marker

As a reference the way I fixed this was to use an existing Angular.js directive already encapsulating the svg to watch the location and update the url between navigations, like this:

// manually replace url of svg to circumvent base href var pen = element.find('.pen')[0]; scope.$watch(function() {   return location.href; }, function(newVal, oldVal) {   pen.style.clipPath = 'url('+newVal+'#logoclip)'; }); 

The output then becomes something like this:

clip-path: url(http://localhost:3000/page#logoclip); 

EDIT: I also thought that maybe the reason -webkit-clip-path wasn't working was because it required a full path, but I tried setting the property using the code above and it still doesn't render the clip-path properly. I assume this is a bug specifically with -webkit-clip-path although if anyone has any info I'd be interested in knowing why this happens.

Read More

Background visible on fullscreen window

Leave a Comment

My WPF application (with Elysium Extra) has a margin on the right side of the window when I click the fullscreen button:

enter image description here

On the right side you can see my desktop background.

I checked if there is a margin, but it is set to 0 px on all sides. I have also set

this.MaxWidth = SystemParameters.MaximizedPrimaryScreenWidth; this.MaxHeight = SystemParameters.MaximizedPrimaryScreenHeight; 

App.xaml:

<extra:ElysiumApplication x:Class="CTS.App"              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"              xmlns:extra="http://schemas.extra.com/ui"              xmlns:local="clr-namespace:CTS"              Theme="Dark"              StartupUri="MainWindow.xaml" /> 

MainWindow.xaml:

<extra:Window x:Class="CTS.MainWindow"         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"         xmlns:extra="http://schemas.extra.com/ui"         xmlns:local="clr-namespace:CTS"         mc:Ignorable="d"         Title="..." Height="521.877" Width="1239.945" FontFamily="Open Sans" Foreground="#FF0970D1" Background="#FF22313F">  .... 

Edit: I have checked the Elysium Extra demo application. It also has the same problem, so it seems like it is caused by the Framework. However, I'd like to keep on using it.

How can I get rid of this margin?

1 Answers

Answers 1

Have a look at this: http://stackoverflow.com/a/24818071/4587181 It uses some Windows32 interop to set the Windows margins right. Because this problem also happens when you use your own custom Window chrome (WindowStyle = None), I experienced it. This SO answer solved it. Good luck

Read More

Saturday, July 1, 2017

Asp.Net WebApi OWIN Authentication

Leave a Comment

After following an online tutorial to use token based authentication using OWIN, I managed to get my test app authenticating against a hard coded username/password, as the demo did.

However, now I want my model from my web application to be used.

My authentication happens, as the demo said, in this bit of code.

namespace UI {     public class AuthorisationServerProvider : OAuthAuthorizationServerProvider     {         public override async Task ValidateClientAuthentication(OAuthValidateClientAuthenticationContext context)         {             context.Validated(); // Means I have validated the client.         }          public override async Task GrantResourceOwnerCredentials(OAuthGrantResourceOwnerCredentialsContext context)         {             // Here we validate the user...             var identity = new ClaimsIdentity(context.Options.AuthenticationType);             if (context.UserName == "user" && context.Password == "password")             {                 identity.AddClaim(new Claim(ClaimTypes.Role, "admin"));                 identity.AddClaim(new Claim("username", "user"));                 identity.AddClaim(new Claim(ClaimTypes.Name, "My Full Name"));                 context.Validated(identity);             }             else             {                 context.SetError("Invalid grant", "Username or password are incorrect");                 return;             }         }      } } 

I have a WebAPI controller, which I receive a model from, and ... not sure how to call the above code, from my webapi controller. At the moment, the code above expects a call to myurl/token - that was defined in the startup code.

 public class Startup     {         public void Configuration(IAppBuilder app)         {             // Enables cors origin requests.             app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);              // Config OAuth authorisation server;              var myProvider = new AuthorisationServerProvider();             OAuthAuthorizationServerOptions options = new OAuthAuthorizationServerOptions             {                 AllowInsecureHttp = true, // Live version should use HTTPS...                 TokenEndpointPath = new PathString("/token"),                 AccessTokenExpireTimeSpan = TimeSpan.FromDays(1),                 Provider = myProvider             };              app.UseOAuthAuthorizationServer(options);             app.UseOAuthBearerAuthentication(new OAuthBearerAuthenticationOptions());              HttpConfiguration config = new HttpConfiguration();             WebApiConfig.Register(config);         }     } 

So, I'm guessing the url from my webapi call should be /token? So, in my (Knockout View model) code on my UI, I tried this:

 Login()     {         var data = {             username : this.login.emailAddress(),             password : this.login.password(),             RememberMe: this.login.rememberMe(),             grant_type: "password"         }          return $.ajax({             type: "POST",             data: data ? JSON.stringify(data) : null,             dataType: "json",             url: "/token",             contentType: "application/json"         }).done((reply) => {             alert("Done!");         });      } 

But, I get an exception:

“error”: “unsupported_grant_type” 

In 'Postman', I am able to authenticate the hard coded username/password.

enter image description here

But I am not sure how to wire up my api call from my UI, to authenticate.

I was hoping to create a 'Login' method on my api controller (ASP.Net WebAPI), like this:

[Route("login"), HttpPost, AllowAnonymous] public ReplyDto Login(LoginRequest login) {     ReplyDto reply = _userService.Login(login.Email, login.Password);     return reply; } 

So, my _userService checks if the user is in the database... if so, call my OAuth authentication here passing a few parameters. But not sure that's possible. Can I call my authentication from this api method? I'd need to remove the /token bit though.

2 Answers

Answers 1

You don't need to create a Login method since you already have it. It's http://localhost:1234/token. This is will generate a token if the user exists and if the password is correct. But get this behaviour you need to implement your own AuthServerProvider by deriving from OAuthAuthorizationServerProvider

public class DOAuthServerProvider : OAuthAuthorizationServerProvider 

and then you would override a method to implement your logic:

public override async Task GrantResourceOwnerCredentials(OAuthGrantResourceOwnerCredentialsContext context)     {          try         {             string allowedOrigin = context.OwinContext.Get<string>(DOAuthStatic.ALLOWED_CORS_ORIGINS_KEY);              if (allowedOrigin != null)             {                 context.OwinContext.Response.Headers[DOAuthStatic.CORS_HEADER] = allowedOrigin;             }              DAuthenticationResponse authResponse = await _authRepository.Authenticate(context.UserName, context.Password);              if (!authResponse.IsAuthenticated)             {                 context.SetError(OAuthError.InvalidGrant, $"{(int)authResponse.AuthenticateResult}:{authResponse.AuthenticateResult}");                  return;             }              if (authResponse.User.ChangePasswordOnLogin)             {                 _userAuthenticationProvider.GeneratePasswordResetToken(authResponse.User);             }              IDictionary<string, string> props = new Dictionary<string, string>             {                 {                     DOAuthStatic.CLIENT_NAME_KEY, context.ClientId ?? string.Empty                 }             };              ValidateContext(context, authResponse, props);         }         catch (Exception ex)         {             DLogOAuth.LogException(ex, "DCO0407E", "OAuthServerProvider - Error validating user");              throw;         }     } 

You are almost there, you just need to do two more steps:

  1. Add the AuthorizeAttribute on your method or controller to restrict access for unauthenticated users.
  2. Add the access token you request header. If you skip this step you should get a 401 HTTP status code, meaning unauthorized. This is how you can confirm that the authorise attribute that you added in step one works.

Here is a great series of tutorials that explains everything really well: Token based authentication (way better than I have :) )

Answers 2

Change the Content Type "application/json" to "application/www-form-urlencoded"

You are Sended Data in Postman "application/www-form-urlencoded" format. But in Your Code Using "application/Json" the Content Type Mismatch. So,the Data is Not Send Proper Format.

You Can Change If it's Working Fine.

Read More

Sort by array's last element mongodb

Leave a Comment

I was trying to sort documents by last interaction. meta_data.access_times is an array that update every time when user interacts and new date object append to the last element of the array. Is there any way to sort by array's last element?

Attempt 1 :

private Aggregation makeQuery(String userId) {      return newAggregation(           match(Criteria.where("user_id").is(userId)),           sort(Sort.Direction.DESC, "$meta_data.access_times"),           group(Fields.fields().and("first_name", "$meta_data.user_data.first_name").and("last_name", "$meta_data.user_data.last_name").and("profile_pic", "$meta_data.user_data.profile_pic").and("user_id", "$user_id").and("access_times", "$meta_data.access_times"))       );     } 

Attempt 2 :

 private Aggregation makeQuery(String userId) {         return newAggregation(             match(Criteria.where("user_id").is(user_id)),             group(Fields.fields().and("first_name", "$meta_data.user_data.first_name").and("last_name", "$meta_data.user_data.last_name").and("profile_pic", "$meta_data.user_data.profile_pic").and("user_id", "$user_id")).max("$meta_data.access_times").as("access_time"),             sort(Sort.Direction.DESC, "access_time")         );     } 

sample meta_data array in document

"meta_data" : { "access_times" : [              ISODate("2017-06-20T14:04:14.910Z"),              ISODate("2017-06-22T06:27:32.210Z"),              ISODate("2017-06-22T06:27:35.326Z"),              ISODate("2017-06-22T06:31:28.048Z"),              ISODate("2017-06-22T06:36:19.664Z"),              ISODate("2017-06-22T06:37:00.164Z")         ] } 

2 Answers

Answers 1

I solves the problem by using $unwind operation.

 private Aggregation makeQuery(String userId) {         return newAggregation(             match(Criteria.where("user_id").is(userId)),             unwind("$meta_data.access_times"),             group(Fields.fields().and("first_name", "$meta_data.user_data.first_name").and("last_name", "$meta_data.user_data.last_name").and("profile_pic", "$meta_data.user_data.profile_pic").and("user_id", "$user_id")).max("$meta_data.access_times").as("access_time"),             sort(Sort.Direction.DESC, "access_time")         );     } 

Answers 2

When you don't know if the element to Push is Ordered or not (for example, an User that is pushing him Score...) you can use $push and $sort in order to have an ordered array, then you can just sort by "find({userId:yourUseId}.sort("metadata.access_time.0":-1).

This solution suppose your array are Ordered with $sort at creation/update time: LINK

When you are sure that the Push don't need a sort (for example you are Pushing a Access_Date for that User) you can $push and void $sort by using $operator (tnx Erdenezul). LINK

In theory you don't need an Index on the Array "access_time" if the find() is fetching only fews documents. Otherwise you can just add an index with {"metadata.access_time.0": -1}.

Good Luck!

Read More